准备工作

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美化方案系列：修改主题文件
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速度。