准备工作

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了。