在本文中,我将讨论 WordPress 子主题:它们是什么、它们的优缺点、如何开始 WordPress 子主题开发,以及您应该查看的其他资源!

什么是 WordPress 子主题?

简单来说,子主题就是借用了不同主题的模板文件和其他相关特性的WordPress主题。因此,假设我们要创建一个自定义主题,该主题从 WordPress 默认主题 Twenty Sevente 中借用功能和模板,我们的新主题将被称为 Twenty Sevente 的子主题,而后者又将被称为我们的孩子主题的父主题.

因此,由于大部分功能和模板文件都是基于父主题的,子主题通常只有一个style.css文件,它指定了哪些功能是从父主题派生的,哪些方面是父主题的将在子主题中进行更改或修改。

厌倦了缓慢的 WordPress 托管和低于标准的支持?我们在 Kinsta 以不同的方式做事。查看我们的托管计划

因此,子主题背后的主要动机是自定义或调整给定的父主题以满足我们的需要,同时不使用实际的主题文件,因为如果父主题主题正在更新,我们可能会丢失更改

使用 WordPress 子主题的优点

使用 WordPress 子主题的优点很多,例如:

  1. 易于扩展和定制:很明显,子主题扩展了其父主题的功能。您的服务中已经有一个现成的模板作为父主题,您需要做的就是为您的子主题创建一个单独的 style.css 文件,并根据您的需要添加自定义调整。
  2. 无忧更新:一次又一次,随着 WordPress 的发展,主题和插件需要频繁更新。如果您对主主题进行自定义调整和更改,则在更新主题时可能会丢失所有更改。因此,建议对子主题进行此类更改,这样即使您需要更新父主题,也不必担心丢失更改。
  3. 节省时间和精力:创建 WordPress 子主题时,您已经在使用父主题形式的现成基础。这不仅节省了时间和精力,而且节省了重要的资源和金钱,因为开发不那么复杂。
  4. 故障安全机制:WordPress 子主题几乎不受一般编码遗漏的影响。即使您最终忘记添加特定代码,WordPress 也会自动从相关的父主题中查找并实现给定的代码,您的设计也不会被破坏。另一方面,在独立主题中,这种遗漏会使主题无法使用,除非进行调整。

使用 WordPress 子主题的缺点

虽然与 WordPress 子主题相关的缺点并不多,但这里有一些值得注意的注意事项:

ol>

  • 选择理想的育儿主题:并非所有主题都是好父母!例如,某些 WordPress 主题可能不会定期更新,因此往往缺少最新功能。此外,并非所有 WordPress 主题在创建时都考虑到了子主题,因此可能不适合作为父主题。您需要选择完美的父主题,以便适当地扩展它并使其成为您的子主题的基础。
  • 定制工作:子主题主要寻求扩展和定制现有模板设计。因此,如果您围绕父主题构建了一个网站,那么在转向子主题时,您可能需要重新考虑自定义元素,例如菜单、主题选项、侧边栏、标题等。
  • 如何在 WordPress 中创建子主题

    您已经决定为您最喜欢的 WordPress 父主题创建子主题了吗?那么,让我们开始吧!

    首先,您需要在您的 WordPress 主题目录中为您的子主题创建一个文件夹(命名并不重要)。此后,在文件夹中创建一个包含以下详细信息的 style.css 文件:

    /*

    Theme Name:您的子主题的名称

    Theme URI :http://www.example.com(您的子主题的URL)

    描述:您的子主题的简要说明

    作者:您的姓名

    < p>Template: 你的父主题目录名

    Version: 1.0.0 blah blah

    * /

    这里在templates部分,需要指定相关父主题的目录名称。此外,如果您省略该行,WordPress 会将您的子主题视为适当的主题。

    在这个交界处,我们有一个带有空白 style.css 文件的子主题。现在,要继承父主题的样式表属性,请添加以下行:

    @import url("..parent_theme_directory/style.css");

    添加“parent_theme_directory”部分替换为相关父主题所在文件夹的名称。

    正在为停机和 WordPress 问题苦苦挣扎? Kinsta 是旨在节省您时间的托管解决方案!查看我们的功能

    如果需要,您还可以使用此方法导入多个样式表。

    您的子主题现在已准备好从其父主题继承样式表元素。如果需要,您也可以将这些文件夹从父主题目录复制到子主题的文件夹中(不是必需的,但可取),所有地址都是相对于父主题目录的:

    /images

    /images

    /INC

    /include

    /rtl.css(从右到左的语言支持,并不是所有的主题都有这个功能).

    就是这样。您现在可以开始将自定义样式表设置添加到子主题的 style.css 文件中。另外,您可以将父主题中的模板文件复制到子主题中进行编辑,如果您需要添加新功能,请务必将父主题文件夹中的functions.php文件复制到子主题目录中。

    当子主题被激活时,WordPress 将从子主题本身加载样式表设置和模板文件,如果缺少任何内容,它将从相关的父主题加载相应的实体。

    推荐阅读

    如果您想更深入地探索 WordPress 子主题,我建议您查看这些文章和资源:

    1. WordPress Codex

      1. WordPress Codex

        1. WordPress Codex
        2. 儿童主题基础 (WP Tuts+)
        3. 创建 WordPress 儿童主题 ( ManageWP)

        子主题不仅提供了扩展您最喜爱的 WordPress 主题的有效功能媒介,而且还是学习和掌握 WordPress 主题开发的一个很好的起点。

        您如何看待 WordPress 子主题?您开发了它还是正在尝试开始使用它?使用下面的评论与我们分享您的经验!

        231 股

        .essb_links .essb_links_list li a {边距顶部:0px; } @media only screen and (min-width: 64em) { .container - narrow.pb - 60, .knowledgebase .user-content { position: relative; } .widget-share { 位置:绝对;左:-200px;顶部:0px;高度:100%;宽度:200px;框大小:边框框; } .widget-share-aligner { 宽度:200px;填充右:62px;框大小:边框框; } .widget-share -inner { padding-bottom: 62px; } .knowledgebase .user-content .widget-share-inner { padding-top: 0; } .widget-share .amount { 显示:flex;对齐项目:居中;证明内容:flex-end;宽度:100%;右边距:11px;字体大小:14px;字体粗细:500;边距:10px; } .widget-share .amount svg { margin-right: 8px;左边距:10px; } .essb_links .essb_links_list { 弹性方向:列;对齐项目:flex-end; } .essb_links .essb_links_list li { 显示:块;底部边距:5px!重要的; } .widget-share__total { margin-bottom: 0px!重要的; } .widget-share__total .heading - small { color: #999999;字体大小:14px;字体粗细:300; } .essb-total-value { margin-right: 4px; } .essb_links { 边距:0px ;填充:0像素; } .essb_counter_right { 显示:无!重要的; } .essb_links.essb_template_circles-retina .essb_link_hackernews a,.essb_links.essb_template_circles-retina .essb_link_reddit a,.essb_links.essb_template_circles-retina .essb_link_mail a,.essb_links.essb_template_circles-retina .essb_link_mwp a,.essb_links.essb_template_circles-retina . essb_link_buffer a, .essb_links.essb_template_circles-retina .essb_link_linkedin a, .essb_links.essb_template_circles-retina .essb_link_facebook a, .essb_links.essb_template_circles-retina .essb_link_twitter a {颜色:#43414e!重要的;背景:#f3f3f6!重要的; } .essb_links.essb_template_circles-retina li a:focus, .essb_links.essb_template_circles-retina li a:hover { border-color: #fff!重要的;背景:#43414e!重要的; { .binter-颜色:#f3f3f6!重要的;背景:#f3f3f6; } .essb_links .essb_icon: in { font-size: 15px !重要的;顶部之前:8px;左:9px; } .essb_links .essb_icon { 宽度:32px;高度:32px; } .essb_links.essb_counter_modern_right .essb_counter_right { 背景:#f3f3f6!重要的; } @media only screen and (max-width: 63.999em) {. widget-share-aligner { 位置:相对!重要的;顶部:0!重要的; } .essb_links .essb_links_list li { margin-right: 8px!重要的; }}