WordPress美化方案:插入代码

准备工作

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

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

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

2、使用外部JS或CSS库。

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

文件放置位置:wp-content——themes——twentytwlve(你正在使用的主题)。

注册

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

六个参数含义:

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

而注册CSS文件类似(以引入csshake为例):

调用

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

CSS文件:

注:

  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“)。

所以,在比较长的文章的开头,就可以加入一个章节目录(参考百科词条的章节跳转),比如这样:

代码:

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

注:

  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代码,把代码放到你要显示的位置即可:

 

总结

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

WordPress美化方案:插入代码》上有2条评论

  1. 二月的小猪猪

    博主我觉得你的主题很好看耶,简洁大方,能透露一下是什么主题吗??阿里嘎多!

    回复

说说你的想法吧!

邮箱不会被公开,必填项已用*标出。

*

*