这次的调整对博客各个方面都进行了简化，尽可能多的去掉页面上的噪音（干扰信息）：

• 去掉所有页面的边栏。
• 随着边栏一起去掉的还有边栏上的“Unfortunately not Flask powered”徽章、站点统计信息、日历挂件、文章分类、月度归档、标签和近期文章。
• 因为没有了边栏，除了文章正文页面，外部不再有分类、标签和月度归档的入口，搜索框放到了博客页面底部。
• 去掉了背景图片。
• 博客主页使用年度归档文章列表，跟摘要说再见了。
• 所有插件的语言改为中文。
• 去掉导航栏的想法分类，以后短想法也采用标准文章格式。
• 页面宽度缩减到 860px。 优化了评论框的宽度，修复了响应式问题。
• 简化了相关文章扩展的样式，文章标题去掉粗体显示；提示文字使用 `<p>`，而不是 `<h3>`，上方添加一个分割线。

这次调整后，未来大概很长一段时间里都不会再有大变化了，除非是更换博客引擎（以前考虑过换用静态博客引擎，但是因为旧文章不方便迁移，所以迟迟没有动手）。未来考虑会在细节上再进行一些优化：

• 去掉“相关文章”插件。
• 去掉“图片弹窗”插件。
• 去掉 Google 统计的代码，似乎对我没什么用。
• 个人主页使用和博客页面统一的样式。

起名字是个简单但让人头疼的事情。

你想要一个独特的名字，但又不想透露太多的个人信息。既不能太土，又不能太长，不能太难读，也不能太难记，而且最要命的是，如果你想在所有社交网站都有一个相同的id，这太难了——好名字全被注册完了。

连续换了两个域名后，我想这次终于遇到对我来说完美的域名了——greyli.com

换域名

更改完DNS设置后，在数据库里用新域名替换掉旧域名。

和上次同时换主机和域名不同，这次只需要在数据库里改动一些内容就完成了：

wp_options SET option_value = replace(option_value, 'www.mydomain.com','www.newdomain.com');
UPDATE wp_posts SET post_content = replace(post_content, 'www.mydomain.com','www.newdomain.com');
UPDATE wp_comments SET comment_content = replace(comment_content, 'www.mydomain.com', 'www.newdomain.com');
UPDATE wp_comments SET comment_author_url = replace(comment_author_url, 'www.mydomain.com', 'www.newdomain.com');

UPDATE wp_posts SET post_content = replace(post_content, 'http://www.olddomain.com','http://www.newdomain.com');

1、安装“Easy Code Placement”插件。

安装好这个插件并启用后，你可以在任何位置插入代码（HTML、CSS、PHP、JavaScript），比如在侧边栏自定义文本区域或是文章里，或是在插件的自定义文本中。

注：在文章中插入代码时需要切换到”文本“模式下加入，而不是“可视化模式”。

2、使用外部JS或CSS库。

在这里我建议使用官方推荐的方法加载，也就是通过wp_register_script()函数注册，然后使用wp_enqueue_script()函数调用。这样的好处是只在需要调用的地方调用，不会影响性能。

文件放置位置：wp-content——themes——twentytwlve（你正在使用的主题）。

注册

注册JS文件需要在functions.php中加入下面这行（在末尾的?>之前）：

wp_register_script('bootstrap', get_template_directory_uri() . '/bootstrap/bootstrap.js', 'jquery', '3.0.1', true);

六个参数含义：

1. 注册的名称：和引用时名称相同。
2. 文件位置：使用 get_template_directory_uri()函数可以获取当前主题的根目录，后面加上文件具体位置。
3. 需要预加载的外部库。
4. 版本号。
5. 是否在文件结尾（</body>之前）调用。

而注册CSS文件类似（以引入csshake为例）：

wp_register_style('csshake', get_template_directory_uri() . '/css/csshake.css', "", "");

调用

调用的时候，在你想要调用的位置插入。
JS文件：

wp_enqueue_script('bootstrap');

CSS文件：

wp_enqueue_style('csshake');

注：

1. 注册外部文件时，如果使用get_template_directory_uri()函数，记得后面的地址第一个字符应该是斜线。
2. 调用时可能需要加上php标签，比如：<?php wp_enqueue_style(‘csshake’); ?>
3. CSShake是一个让元素产生摇晃效果的CSS库，具体见我之前写的介绍《CSShake——元素摇晃特效》

这个系列的另外两篇：
WordPress美化方案系列：插件篇
WordPress美化方案系列：修改主题文件

一、文章内跳转（锚跳转）

HTML用<a href=”url”>文字或其他元素</a>来创建链接。

常用属性：

• href：链接的目标地址
• target：定义打开目标连接的位置，可选的方式有
  • _self：（默认值）：在本窗口打开。
  • _blank：在新窗口打开。
• name：规定锚（anchor）的名称，通过name属性可以创建页面内的书签，通过在其他位置创建链接指向这个锚（href=“#name”指向这个name的名称），可以实现页内跳转。（name可以用id属性来代替。）
• title：定义当光标停留在链接文字上会显示的内容。

除了用name属性创建页内书签，指定其他元素的id也可以实现跳转。比如下面这行跳转页尾的总结（id为”end“）。

<a href="#end">跳转到总结</a>

所以，在比较长的文章的开头，就可以加入一个章节目录（参考百科词条的章节跳转），比如这样：

• 页首
• 准备工作
• 站点统计数据代码
• 总结

代码：

<ul>
<li><a href="#">页首</a>    
<li><a href="#ready">准备工作</a>
<li><a href="#site">站点统计数据</a>
<li><a href="#end">总结</a>
</ul>

然后分别给这几个标题，添加锚。切换到文本编辑模式，以第一小节准备工作为例：

<h2><a name="ready">准备工作</a></h2>

注：

1. 当一个链接没找到锚名称或是不写锚名称（href=”#”），可跳转到页首。比如我页脚的“返回顶部”按钮就是这样做的。
2. 为了避免服务器产生两次HTTP请求，始终将正斜杠添加到子文件夹。用http://greyli.com/demo/，而不是http://greyli.com/demo。

二、弹出层

弹出层是指在当前页面内弹出一个小窗口，参考页尾的版权声明，或是点击图片的效果。我这次用引用外部文件的方法来实现这个功能。使用的JS库是Remodal，效果见页尾的版权声明。步骤如下：

1. 下载文件，放到主题根目录下。
2. 在functions.php注册JS和CSS文件。
3. 在footer.php里调用这些文件。
4. 在footer.php里按照Remodal的文档写HTML，保存。

三、站点统计数据

有时需要显示站点数据，比如文章评论的数量等，这时可以通过相应的PHP代码实现。下面是相关数据对应的PHP代码，把代码放到你要显示的位置即可：

//日志总数：
<?php $count_posts = wp_count_posts(); echo $published_post
s = $count_posts->publish;?>

//评论总数：
<?php echo $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->comments");?>

//建站时间：
<?php echo floor((time()-strtotime("2013-6-25"))/86400); ?>

//标签总数：
<?php echo $count_tags = wp_count_terms('post_tag'); ?>

//链接总数：
<?php $link = $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->li
nks WHERE link_visible = 'Y'"); echo $link; ?>

//最后更新：
<?php $last = $wpdb->get_results("SELECT MAX(post_modifie
d) AS MAX_m FROM $wpdb->posts WHERE (post_type = 'post' OR p
ost_type = 'page') AND (post_status = 'publish' OR post_st
atus = 'private')");$last = date('Y-n-j', strtotime($las
t[0]->MAX_m));echo $last; ?>

//运行天数：
<?php echo floor((time()-strtotime(get_optio
n('swt_buildda
te')))/86400); ?> 天

//建站日期：
<?php echo get_option('swt_builddate'); ?>

总结

通过插入代码，你可以自由的扩展WordPress的功能。WordPress美化系列就先说到这，有机会再总结一下SEO和速度优化。这三篇文章算是对我这段时间折腾WordPress的总结。但现在，我得去深入学习一下HTML、CSS和JavaScript了。

基础知识

通过修改主题文件来实现一些外观和功能效果，这样避免了使用大量插件，不会影响加载速度，也没有兼容性的问题。

这个系列的另外两篇：
WordPress美化方案系列：插件篇
WordPress美化方案系列：插入代码

主题文件编辑入口：仪表盘——外观——编辑
主题文件的构成：

主题文件主要构成（点击查看大图）

下面一些应用示例。

一、修改页脚的文字

编辑主题文件：footer.php
找到相关的文字（一般是“自豪地采用WordPress”或是”Proudly by WordPress“），可以删除或修改。然后点击更新文件。

二、在每一页加入版权声明

编辑主题文件：single.php
在图中位置插入代码，会在文章下方生成一个文本，效果见第二张图。

版权声明代码（single.php）

版权声明效果图

三、文章字数统计

编辑主题文件：functions.php，single.php
在functions.php末尾插入下面这段代码（一个统计文章字数的函数）：

//字数统计
function count_words ($text) {
global $post;
if ( '' == $text ) {
 $text = $post->post_content;
 if (mb_strlen($output, 'UTF-8') < mb_strlen($text, 'UTF-8')) $output .= '文章字数：' . mb_strlen(preg_replace('/\s/','',html_entity_decode(strip_tags($post->post_content))),'UTF-8') . '字';
 return $output;
}
}

然后在single.php需要显示字数的地方插入：

<?php echo count_words ($text); ?>

四、个性化评论框

编辑主题文件：comments.php
这里可以实现的功能主要有：

1. 自定义评论区的各个字段
2. 增加或删除输入框，修改字段，增加提示字符
3. 更改样式

首先在comments.php里加入一个评论框函数（comment_form()）：

<?php comment_form($args); ?>

$args是你想要修改的字段或输入框，用来覆盖原有的内容。

比如你想修改评论框的标题（一般为“留下评论”）。通过增加下面这段代码即可实现：

<?php $args = array('title_reply'=>'说说你的想法吧！')?>
<?php comment_form($args); ?>

其中‘title_reply’是代表评论框标题的参数，后面是你要设置的内容。
类似的，可以在数组（array）加入更多参数，比如评论框上面的文字（’comment_notes_before）、评论框下面的文字（’comment_notes_after’）。更多的参数见官方文档。

评论输入框通过传入$fields参数实现，但直接放到$args里更方便些：

<?php $args = array(
'fields' => array(
 'author' => '<p class="comment-form-author"><label for="author">昵称</label><input type="text" placeholder="姓名或昵称" aria-required="true" size="30" value="' . esc_attr( $commenter['comment_author'] ) . '" name="author" id="author"><span class="required">*</span></p>',
 'email' => '<p class="comment-form-email"><label for="email">邮箱</label><input type="text" placeholder="不想填的话可以用null@null.com" aria-required="true" size="30" value="' . esc_attr( $commenter['comment_author_email'] ) . '" name="email" id="email"><span class="required">*</span></p>',
 'url' => '<p class="comment-form-url"><label for="url">站点</label><input type="text" placeholder="个人主页网址，可留空" size="30" value="'.$comment_author_url.'" name="url" id="url"></p>' 
)?>

下面是我博客上的评论框代码（效果见下方评论区）：

<?php $args = array(
  'title_reply'       => __( '说说你的想法吧！' ),

  'comment_notes_before' => '<p>邮箱不会被公开，必填项已用<span class="required">*</span>标出。',

  'fields' => array(
 'author' => '<p class="comment-form-author"><label for="author">昵称</label><input type="text" placeholder="姓名或昵称" aria-required="true" size="30" value="' . esc_attr( $commenter['comment_author'] ) . '" name="author" id="author"><span class="required">*</span></p>',
 'email' => '<p class="comment-form-email"><label for="email">邮箱</label><input type="text" placeholder="不想填的话可以用null@null.com" aria-required="true" size="30" value="' . esc_attr( $commenter['comment_author_email'] ) . '" name="email" id="email"><span class="required">*</span></p>',
 'url' => '<p class="comment-form-url"><label for="url">站点</label><input type="text" placeholder="个人主页网址，可留空" size="30" value="'.$comment_author_url.'" name="url" id="url"></p>' 
),

 'comment_field' => '<p class="comment-form-comment"><label for="comment">' . _x( 'Comment', 'noun' ) . '</label><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true">' . '</textarea></p>',

);?>

<?php comment_form($args); ?>

你可以只更改你想要设置的内容，删掉其他的内容。不要忘记把参数放进函数里（最后一行）。

具体内容见官方文档：Function Reference/comment form

五、修改边栏小工具

文件位置：wp-includes/widgets
样式文件：style.css

举两个小例子：

1. 删除功能里的WordPress.org字段
   找到wp-includes/widgets文件夹下找到class-wp-widget-meta.php，打开后找到无序列表<ul></ul>里的四个<li>标签，删除最后一个即可。
2. 修改日历中有活动日期的显示样式
   默认的日历样式太朴素，看不出今天的日期，有活动的日期也不够明显。在style.css中加入下面这段，即可使有发表文章的日期数字显示为粗体，绿色。

#wp-calendar tbody a { /*当天发表文章的*/
        font-weight:bold;
        color:green;
}

      其他的比如设置今天的日期数字为斜体加粗体：

#wp-calendar #today { /*今天*/
        font-weight:bold;
        font-style:italic;
}

总结

以上只是给出了几个修改主题文件的示例，具体还有很多内容可以探索，从官方文档开始新旅途吧！

基础知识

整个美化方案由三种方法组成，一个是安装插件，这个就不用多说了。另一个是修改主题文件。最后一种是插入代码。

另外两篇请见：
WordPress美化方案系列：修改主题文件
WordPress美化方案系列：插入代码

一、文章显示概要

插件：Easy Custom Auto Excerpt
插件限制了字号，但是可以通过插入代码的方法避开。安装“Easy Code Placement”插件后，就可以在插件设置里readmore字段设置的地方插入HTML代码，比如下图中是我插入了按钮标签后的效果。

readmore按钮

二、文章固定链接

插件：WP Slug Translate
这个之前说过，首先在设置-固定链接里把格式设为文章名，然后见这里。另外要注意的是作者提供的翻译API有数量限制，建议自己按照作者的说明注册一个。

三、图片显示

插件：Easy FancyBox
点击这篇文章的任意图片查看效果。
需要在插入图片的时候将图片链接到媒体文件。

图片设置

四、代码显示

插件：Crayon Syntax Highlighter
一些必要的设置：在插件设置里勾选“在代码中进行HTML转义”。

插入代码设置

然后编辑代码的时候，选中代码，然后选择“预格式化（即pre）”

插入代码

五、手机站点

插件：Wptouch
大部分主题在手机上阅读不方便，使用wptouch可以优化排版。默认的免费主题就挺好，注意关联一下菜单。

本站的手机页面

六、评论区添加表情

插件：silver_smilies（作者的博客）
没有找到好用的表情插件（多说？），发现了这个，觉得还算简单好用。支持自定义表情包。目前还没解决的问题是如何把它放到评论输入框的下面。
用法：点击这里下载压缩包，如果上传安装失败那么把文件解压缩后放到wp-content—plugins下，然后在插件管理界面启用。另外，我还在压缩包里放了找到的三套表情包：）使用时用表情包里的图片替换face文件夹里的全部图片（感谢原作者）。

三套表情包

 七、其他插件

其他几个插件使用都没什么难度，就不一一介绍了。
相关文章：Yet Another Related Posts Plugin
文章访问量： WP-PostViews
返回顶部：Dynamic To Top

总结

插件开启的过多会影响网页的加载速度，所以尽可能的通过修改主题文件来实现简单的功能。有时间再总结一下如何优化wordpress速度。

买域名和VPS

花钱的事情总是容易的，所以买vps和域名的过程就不谈了。最终选了bandwagon上一个130元的套餐，10G硬盘，512内存，1000G月流量。域名仍然在Godaddy上，换了一个.com域名（有优惠码可以用）。

域名解析

更新：最近Godaddy的域名服务器不稳定，或者是被GFW屏蔽？建议直接使用DNSpod来解析域名。打开网址，注册然后按照提示添加记录。

有两步，分别在域名提供商和vps内设置。简单来说，就是把域名（注册的网址）指向你vps的那个IP地址，然后再在vps里把你的域名指向网站文件的目录（见下面“在VPS上建多个网站的方法”）。

修改或添加A记录，host代表你的域名，而points to 那一栏是你vps的IP地址。如果不需要设置子域名，那么只需要添加@那一条记录就可以了，@代表你的域名的完整地址。接着保存设置，等待生效就可以了。

顺便说一下，我在这里使用的是godaddy的域名服务器（nameserver），如果想要使用其他的域名服务器（比如说DNSpod，生效更快），那么需要在DNS管理界面SETTINGS页面修改nameserver为dnspod的dns地址        

f1g1ns1.dnspod.net
f1g1ns2.dnspod.net

然后前往Dnspod解析域名。

详情参见：Godaddy注册商域名修改DNS地址

安装LAMP

接下来是VPS上LAMP的配置，也就是Linux，Apache，MySQL，PHP。关于LAMP，援引一下维基百科上的说明：

LAMP是指一组通常一起使用来运行动态网站或者服务器的自由软件名称首字母缩写：Linux，操作系统
Apache，网页服务器
MariaDB或MySQL，数据库管理系统（或者数据库服务器）
PHP、Perl或Python，脚本语言

关于LAMP

由Shmuel Csaba Otto Traian，CC BY-SA 3.0，https://commons.wikimedia.org/w/index.php?curid=28224098

linux在vps上已经装好了，初始linux版本是centos 6。试了一下一键安装包，没有成功。各种尝试之后找到了digitalocean上的许多文章，帮了大忙。

首先是服务器的初始化设置：Initial Server Setup with CentOS 6
然后是LAMP的安装：How To Install Linux, Apache, MySQL, PHP (LAMP) stack On CentOS 6
还有SSL设置：How To Create a SSL Certificate on Apache for CentOS 6
防火墙的安装（可选）：How To Set Up a Basic Iptables Firewall on Centos 6

wordpress转移

方法一：重新安装wordpress

1. 方法见官网文档 Installing WordPress
2. 在原站的仪表盘—工具—导出—导出所有内容（会生成一个xml文件 ）
3. 安装好（这中间可能会有很多问题，参见下面的问题及处理）新站后，选择工具—导入—wordpress，安装相关插件后导入之前生成的xml文件。

方法二：整站打包

1. 这个方法太麻烦，而且很容易出错，不推荐使用。
2. 大致的思路是：打包整站文件—导出数据库—修改数据库中的链接—上传文件—创建新表，导入数据库—修改wp-config文件。

安装设置Shadowsocks服务器

Shadowsocks（中文名称：影梭）是使用Python等语言开发的、基于Apache许可证开源的代理软件。Shadowsocks使用socks5代理，用于保护网络流量。在中国大陆被广泛用于突破防火长城（GFW），以浏览被封锁的内容。

Shadowsocks分为服务器端和客户端。在使用之前，需要先将服务器端部署在支持Python的服务器上面，然后通过客户端连接并创建本地代理。此外用户也可以选择购买基于Shadowsocks的商业服务，以获得更加稳定可靠的服务，或者免去自行部署的麻烦。

目前开发者已宣布停止维护。但仍有更新陆续推送[2]

——以上引用自维基百科页面https://zh.wikipedia.org/wiki/Shadowsocks

在bandwagon上有一键设置ss服务器功能，所以只需要将相关的密码等数据填入下载的客户端就可以了。客户端在官网可以下载到：https://shadowsocks.org/en/index.html

问题解决

思考方式

整个过程中收获了一些思考方式，比如我执行nano /xxx/xxx/xxx时，报错没有找到这个命令。这时我会知道，这个报错的意思是没有nano这个程序，所以我会去执行安装命令 yum install nano 而不是再去google。

命令

学习了一些linux下（包括mysql）基本的命令。

在vps上建多个网站的实现方法

linux下默认的http服务器的目录为var/www/html/，网站可以理解成一个文件，访问一个网址其实是在访问存放在服务器上对应的文件。如果只放一个网站，那么可以把文件放在这个目录下，并且在/etc/httpd/conf下的httpd.conf末尾加入下面这段，这段可以理解成是对特定的网址对应的文件位置的声明。

#######################################################

<VirtualHost 23.83.239.241>
ServerName www.greyli.com
DocumentRoot "/var/www/html/myblog"
</VirtualHost>

#######################################################

<VirtualHost 23.83.239.241>
ServerName withlihui.com
DocumentRoot "/var/www/html/myblog"
</VirtualHost>

这两段的意思是，所有对www.greyli.com 和 withlihui.com 的访问都将指向目录/var/www/html/myblog。同样的，假如想要放多个网站，那就需要为不同的网站在/var/www/html/下建立一个文件夹，然后在httpd.conf加入相应的字段来为各自的域名指定相应的文件夹位置。具体操作就是在httpd.conf末尾加入上面两段，只需更改相应的域名和对应的文见路径。

顺便说一下，如果在域名服务商那里设置了子域，那么就可以添加任意个子站在服务器上，当然前提是内存足够大。设置子域的方法是在域名管理中添加A记录，地址填写*.xxx.xxx（比如*.withlihui.com），并且指向你的服务器IP。*号代表任意。设置好之后，把上述地址中的*号改为任意字段都可以作为一个子域名使用（比如talk.withlihui.com）。

另外，还可以将IP地址作为网址访问，只需在末尾加上这段：

#########################################################

ServerName 23.83.239.241
NameVirtualHost 23.83.239.241

<VirtualHost 23.83.239.241>
ServerName 23.83.239.241
DocumentRoot "/var/www/html/main"
</VirtualHost>

当然，你得修改相应的IP和文件目录。

远程文件管理

远程文件连接推荐使用SFTP来连接，SFTP 为 SSH的一部分，是一种安全的文件传输协议。它不用在VPS中安装组件，事实上，从你付钱拿到VPS后，就可以使用了。支持SFTP连接的工具包括Core FTP，FileZilla, WinSCP，Xftp等等，我使用的是WinSCP，免费简单。连接时新建一个连接，输入IP，用户名和密码就可以连接了。

wordpress安装可能遇到的问题

简单说明一下具体几个重要步骤：

1. 下载wordpress到网站目录
2. 创建数据库表（此时创建的用户名和密码是mysql用户，用来读写相应的表）
3. 重命名wp-config-sample.php为wp-config.php并修改相关内容（此处修改的用户名和密码是创建表时的用户密码）
4. 执行安装，创建帐户（此处的用户名和密码用来登录wordpress后台）

The requested URL /cgi-sys/defaultwebpage.cgi was not found

遇到这个问题，我的解决方法是清除chrome的缓存。

无法连接数据库

这个问题查了很多资料，还是没解决。最后重启了一下vps，done！

安装插件需要连接ftp,输入密码后无法连接.

这时可以在wp-config.php中加入下面这行

define(‘FS_METHOD’, ‘direct’);

安装插件或主题显示无法创建目录

这个是由于linux下文件的权限问题,解决方法见更改文件权限

Briefly unavailable for scheduled maintenance

这个是因为wordpress的自动更新。只要把根目录中的.maintenance文件删除就可以了。

一、链接或页面找不到

一般这个问题都是由中文的分类名或是标题造成。

解决方法：下载一个WP Slug Translate插件。在仪表盘—插件中搜索，安装并启用；而分类或菜单需要将别名设置成英文才可以被正确的访问，如图所示：

二、不能输入空格

因为wordpress默认自动清除掉文章里的空格，所以编辑好文章发布之后就会发现格式全都乱了。

解决办法：下载TinyMCE Advanced插件。然后在仪表盘-设置-TinyMCE Advanced –高级选项里勾选上

Stop removing the <p> and <br /> tags when saving and show them in the Text editor

三、访问速度慢

通常是因为wordpress默认采用google字体，而谷歌多数服务被墙，自然不会好用。另外，如果是在Godaddy注册的域名，最好使用DNSpod解析域名（详见这里）。

解决方法：安装Disable Google Fonts 插件。