从零开始搭建wordpress网站

        wordpress是一款开源的网站平台,通过在本地或者服务器部署wordpress,可以简洁快速的搭建网站,用于个人博客、公司介绍网站、电子商务网站、活动推广网站等。wordpress实现了网站的模块化搭建,官方给出网站的基本框架,而网站功能的丰富则依赖不同的主题和不同的插件。
       开始在服务器上建网站之前,可以现在本地建一个网站试试。在windows系统中,下载安装XAMPP软件,安装好之后把wordpress的官方程序文档放到XAMPP/htdoc的路径下面即可,具体流程参考这里。按照这个流程来,就可以在本地上的wordpress上发布第一篇日志:hello, world!此后,XAMPP软件也有很多用途,可以快速的测试、学习html,css,jquery,php等语言,找一些编写网站的教程,先在本地上测试,然后再更新到服务器端,这样能提高调试效率。这是后话。
        当决心花钱搭一个网站之后,下面是具体的流程,文末附有参考资料。
    1. 申请一个域名。一般是在GoDaddy上购买,有一些途径可以获得优惠码,不同的域名名称、不同的域名后缀,价格都是不同的,现在可以支持支付宝付款了。支付后,在个人账号下方有一个网址管理的条目。
    2. 购买服务器空间。现在服务器提供商很多,我也不太清楚,可以看看知名的个人博客使用的什么服务器提供商,一般租用一年的入门级的服务器差不多90元左右,也有更便宜的,比如这个,不过我没详细了解过。知乎上有更多的回答。
    3. 购买了服务器空间后,登陆个人账号后台,可以将先前购买的域名绑定到这个服务器中。然后利用服务器自带的wordpress版本或者利用FTP在服务器上按照本地建博客的方式搭建网站,这个一般服务器提供商都有各自的教程,教如何配置wordpress。
    4. 一切配置好之后,就可以登录自己的域名管理后台,一般是域名/wp-admin这个网址,开始发布博客了。

下一步

        在wordpress上发表第一篇HELLO WORLD之后,下一步就是开始自定义的设置,以使得博客写作更符合自己的喜好。主要包括下面几个方面:
1. 选择主题(theme)
       wordpress通过主题修改博客的显示(静态外观和动态效果),花时间选一个中意的主题是有必要的,主题的好坏决定了博客除了内容以外的所有部分。这样,自己只需要全身心构思博客的内容了。
       wordpress主题有免费的,也有收费的。淘的过程还是挺费时间的。
2. 安装插件(widgets)
        插件主要是实现wordpress后台管理和编辑时不同的功能,与前端显示关系不大。有一些自己希望的功能,可以搜一下插件,别人可能已经用程序实现做成了插件,就不用自己再费心编程解决了。刚开始装的插件有下面几种:
  • disable google fonts :禁用 google web 字体,提高访问速度,因为google在国内访问不畅,会减慢网站访问速度。解决google web字体的终极方法见这里
  • enhanced text widget:扩展的文本框,可以在网站的不同地方布置文本框,其实就是一个容器,用简单的编程语言可以实现不同的功能,比如插入文本、图片、模块等。
  • latex for wordpress:可以在日志中使用基于MathJax的Latex数学公式,格式清爽,方便显示。
  • WP super cache:缓存插件,也是可以提高网站访问速度。
3. 自定义主题中的style.css文件
       在wordpress\wp-content\themes\theme-name的路径下面,有一个对应于该主题的style.css文件,如果对该主题对应的博文的显示不满意的话,可以修改这个文件,自定义各级标题、强调、引用等样式的显示效果,使用CSS语言编写即可。
4. 自定义文字编辑器TinyMCE
       现在wordpress 4.0以上的博客在博文写作默认的编辑器是 TinyMCE 4.0,默认的设置比较简陋,需要进行自定义设置,提供更加完善的文字编辑体验。下面给出几个编辑器设置的方法,都是针对wordpress\wp-content\themes\theme-name路径下的functions.php文件操作,在文件的中间位置加入下列函数即可。
a. 增加字体选择、字体大小选择、样式选择的按钮
if ( ! function_exists( ‘wgc_mce_buttons’ ) ) {
    function wgc_mce_buttons( $buttons ) {
        array_unshift( $buttons, ‘backcolor’ ); // 添加文字背景颜色选择
array_unshift( $buttons, ‘fontselect’ ); // 添加字体类型选择
        array_unshift( $buttons, ‘fontsizeselect’ ); // 添加字体大小选择
array_unshift( $buttons, ‘styleselect’ ); // 添加文字样式选择
        return $buttons;
    }
}
add_filter( ‘mce_buttons_2’, ‘wgc_mce_buttons’ );//mce_buttons_2表示编辑器的第2行
b. 增加自定义的字体类型
增加字体选择按钮之后,发现下拉列表的字体种类不多,缺少对中文的支持,解决办法是在functions.php文件中加入下列函数
//编辑器新增字体选择,参考http://www.luoxiao123.cn/7259.html
function custum_fontfamily($initArray){
$initArray[‘font_formats’] = “微软雅黑=’微软雅黑’;宋体=’宋体’;黑体=’黑体’;楷体=’楷体’;ClearSans=’clear_sansregular’,Helvetica,Arial,sans-serif;ClearSans Medium=’clear_sans_mediumregula’,Helvetica,Arial,sans-serif;ClearSans Light=’clear_sans_lightregular’,Helvetica,Arial,sans-serif;ClearSans Thin=’clear_sans_thinregular’,Helvetica,Arial,sans-serif”;
return $initArray;
}
add_filter(‘tiny_mce_before_init’, ‘custum_fontfamily’);
c. 增加自定义的文字样式
增加文字样式选择按钮之后,发现下拉列表选择的文字样式不多,除了标题样式、简单的行内样式、引用等,没有别的了。如果想实现类似word中的样式,可以在functions.php文件中加入下面的函数,仅作实例:
add_filter( ‘tiny_mce_before_init’, ‘my_mce_before_init_insert_formats’ );
function my_mce_before_init_insert_formats($init_array) {
// 定义 style_formats 数组
$style_formats = array(
// 数组每个元素是一个样式的定义,产生的结果如注释中所示
//<blockquote class=”translation”>content …</blockquote>
array(
‘title’ => ‘.translation’,
‘block’ => ‘blockquote’,
‘classes’ => ‘translation’,
‘wrapper’ => true,
),
//<span class=”.warning”>content …</span>
array(
‘title’ => ‘.warning’,
‘inline’ => ‘span’,
‘classes’ => ‘warning’
),
//<span style=”color:white; background: red;”>content …</span>
array(
‘title’ => ‘.attention’,
‘inline’ => ‘span’,
‘styles’ => array(‘color’ => ‘black’,’background’ => ‘yellow’)
),
//<h2 style=”color:blue”>content …</h2>
array(
‘title’ => ‘蓝色标题2’,
‘block’ => ‘h2’,
‘styles’ => array(‘color’ => ‘blue’)
),
);
// 用JSON ENCODE方法产生’style_formats’
$init_array[‘style_formats’] = json_encode($style_formats);
return $init_array;
}
      这样就在样式选择的下拉列表中新增了“tranlations””warning””蓝色标题2″等几种样式。各个样式具体的设置可以在定义时给出,也可以在style.css文件中使用选择器进行定义。这样就可以定义文字加框、文字下加波浪线等更多有Html5特色的文字样式了。

后记

    在完成上述这些设置后,就可以好好开始畅快写作了,内容更重要、更需要时间投入。

拓展阅读

1. 如何建一个自有域名的wordpress博客?http://www.zhihu.com/question/19594033
2.自定义TinyMCE,  http://www.luoxiao123.cn/10561.html    http://www.luoxiao123.cn/7259.html
3. 自定义TinyMCE编辑器, http://www.solagirl.net/how-to-customize-wp-tinymce.html

 

updated @ 2015-05-17

0 评论
留言