自定义您的 WordPress 主题但又想非常安全?不用担心。我们已经为您准备好了。阅读以下文章,您将能够使用 WordPress 子主题来自定义您的 WordPress 主题。WordPress 子主题的作用是将您的自定义保存在不同的文件夹中,这样更新您的父主题就不会损害它。
子主题是什么意思?
基本上,子主题是任何主题的反映。这里的概念是,无论您在子主题中进行什么更改,您的父主题都不会受到影响,但父主题中的任何更改都将反映在子主题中。
是否需要使用子主题
毫无疑问,使用子主题是修改主题的最安全方法。最好的部分是,即使您的父主题被更新,您的更改也不会被删除。如果您在修改子主题时遇到任何问题,您可以轻松删除它以返回父主题。
设置 WordPress 子主题
您可以手动或借助插件设置 WordPress 子主题。
您需要记住的一件事是,直到您的父主题出现在“外观”下的“主题”页面中之前,它才会起作用。
方法一:手动创建子主题
#1:首先,您必须创建一个新文件夹并根据您的意愿命名它,例如“twentytwentyfour-child”。
#2:接下来您必须创建一个文件,然后将其命名为“style.css”,注意,这个文件是必须存在的。
/*
Theme Name: Twenty Twenty-Four Child
Theme URI: https://example.com/twentytwentyfour-child/
Description: This is a child theme for Twenty Twenty-Four, created by me.
Author: Your Name
Author URI: https://example.com
Template: twentytwentyfour
Version: 1.0.0
*/
关键参数解释:
Theme Name
:(必填) 你的子主题的名称。Template
:(必填) 这是最关键的一行。它必须完全对应其父主题的目录名。例如,父主题是twentytwentyfour
,这里就填twentytwentyfour
;父主题是Divi
,这里就填Divi
。大小写必须一致。Description
: 子主题的简短描述。Author
: 你的名字。Author URI
: 你的网站地址。Version
: 子主题的版本号。
虽然子主题的 CSS 会自动加载,但它并不会自动继承父主题的所有样式。为了让你的子主题有一个完整、可靠的起点,一个非常普遍和推荐的做法是:首先导入父主题的完整样式表。
你可以在你的自定义 CSS 之前,使用 @import
规则来实现这一点。
/*
Theme Name: Twenty Twenty-Four Child
Theme URI: https://www.likacloud.com/twentytwentyfour-child/
Description: This is a child theme for Twenty Twenty-Four, created by me.
Author: Your Name
Author URI: https://example.com
Template: twentytwentyfour
Version: 1.0.0
*/
/* 导入父主题的样式以确保设计基础一致 */
@import url("../twentytwentyfour/style.css");
/* 自定义样式从这里开始 */
/* 1. 更改文章标题颜色 */
.wp-block-post-title {
color: #1a4f6e;
font-weight: 700;
}
/* 2. 更改网站背景色 */
body {
background-color: #f8f9fa;
}
/* 3. 更改主内容区域的宽度 */
.wp-block-group.alignwide {
max-width: 1280px;
}
/* 4. 自定义链接颜色 */
a {
color: #d14545;
}
a:hover {
color: #a23434;
text-decoration: none;
}
虽然 @import
是最简单的方法,但从性能角度讲,它并不是最优的(因为它会阻止并行加载)。更高级的方法是使用 wp_enqueue_style()
函数在子主题的 functions.php
文件中将父主题的样式表加入队列。但对于初学者,使用 @import
是完全可行且易于理解的。
比如这样:
<?php
// 确保在正确的钩子上加载样式
add_action('wp_enqueue_scripts', 'enqueue_parent_and_child_styles');
function enqueue_parent_and_child_styles() {
// 加载父主题样式
wp_enqueue_style('parent-style', get_template_directory_uri() . 'https://www.likacloud.com/style.css');
// 加载子主题样式,并指定依赖于父主题样式
// 这样可以确保子主题样式在父主题样式之后加载,保证样式覆盖生效
wp_enqueue_style('child-style',
get_stylesheet_directory_uri() . 'https://www.likacloud.com/style.css',
array('parent-style'), // 依赖关系
wp_get_theme()->get('Version') // 版本号,可选
);
}
代码解释:
add_action('wp_enqueue_scripts', 'enqueue_parent_and_child_styles')
:将自定义函数挂载到 WordPress 的样式加载钩子上get_template_directory_uri()
:获取父主题目录的 URLget_stylesheet_directory_uri()
:获取子主题目录的 URL(子主题激活时)array('parent-style')
:声明子主题样式依赖于父主题样式,确保加载顺序正确
这种方法相比 @import
更高效,因为它允许浏览器并行加载样式表,并且能更好地管理样式之间的依赖关系。
你只需将这段代码添加到子主题的 functions.php
文件中(如果文件不存在则创建一个),同时保持你已有的子主题 style.css
头部注释信息即可。
所有其他细节都可以根据您的意愿进行更改。
完成此作后,您应该转到“外观>>主题”并检查您的子主题是否已创建。如果是,恭喜你,你可以激活它来测试它是否继承了父主题的设计。
方法二:使用插件创建子主题
如果手动执行此作对您没有吸引力,您可以自由使用免费的 WordPress 插件来为您完成这项工作。那里有大量的免费插件,可以为您创建子主题,并使您免于手动执行所有这些作。我们将使用子主题配置器插件,但您可以自由使用任何可用的插件。
#1: 首先,您需要下载 Child Theme Configurator 插件。
#2: 现在登录您的网站并访问您的仪表板。
#3: 导航到 插件(Plugins),然后 添加新(Add New) 选项。
#4:现在,您必须通过单击“上传插件”选项上传您刚刚下载的插件,然后激活它。
#5:确保激活要为其制作子主题的主题非常重要。
#6:这可以通过简单地导航到“工具”部分并单击子主题来完成。
#7: 现在单击分析按钮并按照插件提到的设置创建您的子主题。
#8: 现在您必须单击“创建新的子主题”选项。
编辑其他模板文件
您必须在子主题中编写该函数,以防您希望向其添加任何自定义函数。请随意使用子主题创建父主题的任何结构或布局更改。
假设您创建了 twentytwentyfour
的子主题,您希望更改其显示单页的方式。单页的位置是 twentytwentyfour-child/template-parts/content-single.php
#1:在子主题文件夹中,创建一个content-single.php。您需要对名称和结构格外小心。它们需要与父主题相同,以便覆盖它们。
#2: 接下来,您需要创建一个新文件夹并将此文件放入其中,但要特别确定路径并确保它看起来与父主题的路径完全相同。
#3: 就这样。在此步骤中,您所要做的就是在content-single.php中编写您的愿望代码,这将覆盖父文件。
谨慎: 确保文件名和文件夹路径必须相同。
我们希望您现在可以轻松创建子主题。如果您有任何疑问,请加QQ群1398231讨论。