主题可以说是整个 WordPress 网站的第一步。通过对整个网站的规划设计,使用相应的主题,以达到快速建站的目的。下载下来的主题文件存放在 /wp-content/themes/ 目录下,里面包含了主题所有的模版文件,样式表和自定义函数等文件。
如果要修改一个已有的主题,最好的做法是新建一个子主题(theme class)去继承他,然后再扩展或重写父主题的内容。这里最大的好处就是不会破坏父主题的文件,即便以后需要更新都可以做到无疼(?)更新!
创建子主题的步骤简单来说有以下几步:
- 在 /wp-content/themes/ 目录下创建子主题文件夹,命名规则按照 WordPress 官方文档的推荐,一般以 ‘parent-theme-child’ 作为名称,其中 ‘parent-theme’ 是父主题的名称。
- 在主题文件夹下创建 style.css 和 functions.php 文件。style.css 是该主题应用的所有样式存放的地方,function.php 则为自定义的全局函数文件。
- 在 style.css 文件头加入以下主题信息
/
Theme Name: MH Magazine lite Child
Theme URI: https://www.mhthemes.com/themes/mh/magazine-lite/
Description: Child theme of MH Magazine lite for the custom layout.
Author: Kevin Sum
Author URI: https://github.com/chy89310
Template: mh-magazine-lite
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, two-columns, left-sidebar, right-sidebar, flexible-header, custom-background, custom-colors, custom-header, custom-logo, custom-menu, featured-images, full-width-template, theme-options, threaded-comments, footer-widgets, translation-ready, rtl-language-support, blog, entertainment, news
Text Domain: mh-magazine-lite-child /
其中 Template 一栏定义父主题信息,值为父主题的文件夹名。有了这些主题信息后,该主题就能在WordPress主题的控制面板里见到并可以通过激活应用到网站上。 - style.css 是一个主题文件夹里唯一必须的文件,且文件名不能更改。需要注意的是,子主题里的 style.css 是会覆盖父主题的,因此在加载子主题的 style.css 前需要先加载父主题的 style.css。旧有的做法是通过 @import 在子主题的 style.css 最前面引入父主题的样式表,但由于效能问题,新的版本引入了新的做法,就是使用 wp_enqueue_style 函数为子主题的样式表加上依赖,以保证父主题的样式表正确加载。具体做法是把以下内容加到子主题目录下的 function.php 最开始的位置
function my_theme_enqueue_styles() {
$parent_style = ‘parent_style’;
wp_enqueue_style( $parent_style, get_template_directory_uri() . ‘/style.css’ );
wp_enqueue_style(
‘child-style’,
get_stylesheet_directory_uri() . ‘/style.css’,
array( $parent_style ),
wp_get_theme()->get(‘Version’)
);
}
add_action( ‘wp_enqueue_scripts’, ‘my_theme_enqueue_styles’ );
其中,$parent_style 的值是父主题在其 functions.php 文件中通过 wp_enqueue_style 所定义的主题名称(*不一定在 functions.php,也可能是 includes 文件夹下的其它自定义函数 .php 文件里) - 重写 style.css 和 functions.php。到此一个子主题已经创建完成,但仅限于创建了一个跟完全继承父主题的主题。如果要自定义该主题,则可以通过重写父主题的 style.css 和 functions.php 里的内容,另外父主题定义在其它文件的样式或函数均能在这两个全局的文件里进行重写。以下分享一个简单的示例
mh-magazine-lite 是一个 WordPress 里的主题,我创建了一个 mh-magazine-lite-child 主题并发布了几篇文章,发现其模版文件会在 post loop 和 post 里加入作者和评论等 meta 信息,如下图:
发现 mh-magazine-lite 主题在其目录下的 /includes/widgets/mh-custom-functions.php 文件里定义了一个函数 mh_magazine_lite_loop_meta(),该函数调用 WordPress 原生函数 get_the_author_meta(),get_comments_number() 等打印出一系列信息。通过在 mh-magazine-lie-child 目录下的 functions.php 文件里,重写该方法,并省去打印作者及评论信息,简单的实现隐藏多余信息的需求: