WordPress美化方案：插入代码

2条回复

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);

六个参数含义：

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

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

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

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

wp_enqueue_script('bootstrap');

CSS文件：

wp_enqueue_style('csshake');

注册外部文件时，如果使用get_template_directory_uri()函数，记得后面的地址第一个字符应该是斜线。
调用时可能需要加上php标签，比如：<?php wp_enqueue_style(‘csshake’); ?>
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="#site">站点统计数据</a>

</ul>

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

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

二、弹出层

下载文件，放到主题根目录下。
在functions.php注册JS和CSS文件。
在footer.php里调用这些文件。
在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了。

本条目发布于2016年6月14日。属于计算机与编程分类，被贴了 WordPress 标签。 ← WordPress美化方案：修改主题文件翻相册（fanxiangce.com） →