WordPress 笔记 (一)--主题篇

如果是手动安装主题的话, 需要把主题目录拷贝到 /wp-content/themes/ 下面.

Style.css

每个主题的目录里面都有一个 Style.css 文件, 这个文件很重要.

这个文件以一段注释开头, 比如 JudyMax:

/*
Theme Name: JudyMax
Theme URI: http://judymax.com
Author: Maxiee
Author URI: http://judymax.com
Description: The theme for judymax.com
Version: 0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: material-design

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

这段注释可不仅仅是注释, 它有实际的用处: WordPress 会读取这段注释, 从中解读出这个主题的各方面信息. 因此, 这段注释实际上是对主题的描述, 所以是必须要写的, 不写的话 WordPress 就无法识别主题了.

index.php

index.php 可以理解成博客的首页, 也就是我们常看到的那样: 文章一篇一篇竖着排成一列, 用户可以翻页浏览, 看到感兴趣的标题, 点击就会进入详情页.

index.php 里面有个概念, 叫做 Loop. 初学的可能搞不清 Loop 是个啥, 其实很简单, 可以理解为循环把文章列表一个一个展示出来.

用个伪码说明可能能明白一点:

while (有文章()) {
    把这篇文章拿出来();
    显示标题();
    显示发表时间();
    显示摘要();
}

就这么循环下去, 文章的列表就出来了.

然后再使用 WordPress 专门的分页机制, 就可以分成第一页第二页.

header.php

了解 HTML 都知道网页有个 <head> 标签, 这个 header.php 文件就是用来保存 <head> 标签的, 这样在其他的展示页面中 (例如 index.php), 就不用再重新撸一遍, 而只需要调用下面这个函数:

<?php
    get_header();
?>

这样 <head> 部分就自动插入了.

要注意这种思路, 就是像 <head> 这种在每个页面中都有的, 内容完全一样的东西, 我们都把他抽象到一个文件里面 (header.php), 在需要的时候通过函数 (get_header()) 导入.

这样做的好处是, 如果我们需要修改 <head>, 那只需要修改 header.php, 所有页面的就都改变了. 这也是编程当中的一个重要思想, DRY 思想.

WordPress 中大量使用了这种思想, 我们要学习并习惯它. 这也是一种很好的编程思想, 我们在开发自己的程序的时候也要学习应用它.

footer.php

这个文件与 header.php 类似, 只不过它是对应的 <footer> 这个标签, 也就是站点的最底下.

最底下我们一般会放些网站版权声明, 统计代码, 联系方式 blabla 的东西.

但是有一个要注意的地方:

首先, 我们了解在 HTML 中, 页面的结尾往往是 </body></html>, 这个位置是在 <footer> 的管辖范围内, 这一点不难理解.

要注意的地方是要在 </body></html> 的前面添加一段代码:

<?php
    wp_footer();
?>

为啥要加这么一段代码? 这是因为在 WordPress 里面, 许多插件需要往 <footer> 里面注入代码, 以实现插件应有功能. 但是插件默认不知道插在 <footer> 的什么位置, 因此主题的设计者需要通过上面这个代码, 手动留出位置来.

这个注意点说完了. 下面说展示页面需要添加 <footer> 的时候, 只需要使用下面代码:

<?php
    get_footer();
?>

<footer> 就导入进来了, 这和上一节说的 <head> 是一样的.

sidebar.php

这个文件就是侧边栏. 侧边栏是博客和网站很重要的组成部分, 在具体实现上就看大家的前端水平和设计水平了 😂.

反正写好了之后, 在展示页面调用:

<?php get_sidebar(); ?>

sidebar.php 中的内容就导入进来了.

front-page.php

这个页面可能很多博客都不需要, 但是 JudyMax 使用了这个页面...

前面说 index.php 是大多数博客的那种主页, front-page.php 的功能就是使用额外的, 自己定制的主页页面.

大家看到 JudyMax 的主页跟常见博客不太一样, 原因就是使用了 front-page.php, 重新组织了信息的展示结构.

另外一点值得说的是 front-page.php 在历史上曾经叫过 home.php, 不管叫哪个功能都是一样的, 现在官方倾向于 front-page.php.

只要主题中创建了 front-page.php 页面, 那么当访问主页的时候就会自动展示 front-page.php 中的内容, 而不是 index.php 的.