你有一个很棒的 WordPress 主题。但您想通过添加一些额外的功能来脱颖而出。您可以通过多种方式做到这一点。编辑 CSS 样式表中的代码是最常见的方法之一。但无论进行多少编辑,一旦更新主题,所有更改都将丢失。

使用 WordPress 子主题可以解决这个问题。它将允许您对主题应用尽可能多的自定义,而不会丢失任何更改的风险。本文将向您介绍什么是 WordPress 子主题,并解释其主要优点。

稍后我们将介绍如何手动和使用插件在 WordPress 中创建子主题的详细教程。开始吧!

目录

什么是儿童主题?

子主题本身并不是一个独立的主题。它依赖于父主题并继承主题目录中单独文件夹中的所有元素。这允许您对子主题应用任何类型的更改,而无需触及 WordPress 父主题。

另外,由于子主题文件存储在单独的文件夹中,因此即使您更新父主题,它也不会丢失任何自定义内容。这就是为什么子主题是现有 WordPress 主题中最安全的方式。

使用 WordPress 子主题的好处

使用儿童主题的好处

您可能需要出于多种目的自定义活动 WordPress 主题,例如测试、添加新功能、重新设计、错误修复等。您可以使用 WordPress 子主题轻松完成这些操作。以下是使用 WordPress 子主题的一些主要好处。

A。保持原始主题文件的安全

儿童主题允许您犯尽可能多的错误。如果遇到但是,可以通过恢复父主题来快速解决。或者您可以简单地删除错误文件并开始使用新的 WordPress 子主题。这个过程不会影响主题。

b. 加快开发进程

从头开始创建一个全新的 WordPress 主题可能需要几天甚至几个月的时间。但如果您有儿童主题,则不必从零开始一切。您可以使用父 WordPress 主题作为基础并继续更改,直到它满足您的需求。

C。扩展功能

您可以在子主题的目录中创建一个新的 PHP 文件来创建和添加自定义代码以添加新功能。此外,通过创建单独的 style.css 文件,您可以应用自定义样式。所有这些都可以帮助您减少对第三方插件的依赖。

d. 创建类似的网页外观

如果您有多个商业网站并希望保持视觉一致性,使用子主题将简化该过程。您可以轻松互换网页图标、调色板和徽标。你所要做的就是复制一个人的 CSS 代码并将其粘贴到其他人的 style.css 文件中。

5. 易于与他人分享

由于 WordPress 子主题存储在单独的文件夹中,因此您可以轻松地与其他人共享它们,而无需担心。您还可以将子主题的文件上传到公共存储库,例如 GitHub 和 Bitbucket。

如何创建 WordPress 子主题的分步指南

您可以手动或使用插件创建 WordPress 子主题。我们将在本节中向您展示这两种方法。稍后您可以决定哪种方法最适合您。继续阅读!

方法01:安装Elementor子主题(Hello Elementor)

如果你是 Elementor 用户,你一定听说过这个主题Hello Elementor。它是 Elementor 自行开发的超快速、轻量级且响应灵敏的 WordPress 主题。一个亮点是 Elementor 为您提供了 Hello Elementor 的官方子主题。

但在安装主题之前,您必须确保父 Hello Elementor主题已安装。获得后,请按照以下步骤在您的网站上安装 Hello Elementor 的子主题。

  • 下载官方Elementor Hello 儿童主题
  • 然后,导航到 WordPress仪表板 > 外观 > 主题,然后单击添加新的
  • 单击上传主题
  • 从保存位置选择子主题文件。
  • 接下来,安装激活它。
如何创建 WordPress 子主题

过程非常简单。花费的时间不会超过五分钟。现在,您可以开始使用 Elementor 自定义子主题。我们已经在下面解释了该过程。

如果您想创建自己的品牌子主题,则可以在 style.css 文件中更改名称、作者 URL 等。但这些都没有必要。您可以让它们保持原样。您的子主题会正常工作。

Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready

之后添加任何自定义样式:

/*
    Add your custom styles here
*/

如果您想自定义标题样式和链接颜色,则必须编辑以下内容:

/* Link Styling */
a, a:active, a:visited {
color: #000080;
} 
a:hover {
color: #ffd700;
}

/* Heading H1-H6 Styling */
h1, h2, h3, h4, h5, h6 {
font-family: Georgia, serif;
color: #3a3a3a;
line-height: 35px;
font-weight:500;
letter-spacing: 1px;
}
h1 {
font-size: 30px;
line-height: 1.2;
}
h2 {
font-size: 28px;
line-height: 1.3;
}
h3 {
font-size: 26px;
line-height: 1.4;
}
h4 {
font-size: 24px;
line-height: 1.5;
}
h5 {
font-size: 22px;
line-height: 1.6;
}
h6 {
font-size: 20px;
line-height: 1.2;
}
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
 margin-bottom: 20px;
}

这些代码不是限制。您可以使用更多 CSS 类来进一步自定义子主题。欲了解更多信息,请访问本手册

方法02:如何使用插件创建WordPress子主题

您不会在 WordPress 存储库中找到所有这些主题的官方子主题。如果您遇到没有官方主题的主题,则需要自己为其创建一个子主题。您可以使用插件轻松完成。

您会在 WordPress 库中找到许多插件来执行此操作。我们将向您解释使用两个不同插件创建 WordPress 子主题的过程。

插件一 – 子主题配置器

子主题配置器

Child Theme Configurator拥有 300,000 多个活跃安装量,是用于创建子主题的最流行的 WP 插件之一。它创建一个子主题和准确的字体样式表,将现有主题排入队列,并处理特定于供应商的语法。

子主题配置器有一个分析器,可以自动扫描正在运行的站点上可用的内容发布格式、小部件和定制器选项。它在创建子主题时会考虑所有这些问题,以使其与您的网络格式保持一致。到目前为止,一切都很好!

注意:在创建子主题之前,请确保您有完整的网站备份。如果您的网站崩溃,此备份将成为您的救星。

备份准备就绪后,安装并激活 WordPress.org 的子主题配置器插件。然后执行以下步骤。

  • 转到工具 > 子主题
转到子主题配置器插件的子主题选项
  • 从“选择父主题”下拉菜单中,选择要设为子主题的主题。

注意:您的外观部分必须已安装主题。

通过子主题配置器插件将父主题转换为子主题
  • 接下来,单击分析按钮。它将评估该父主题的依赖性。

分析完成后,您将获得一些附加选项。如果您不知道在这些设置中具体要做什么,请保持原样。

通过子主题配置器创建新的子主题
  • 单击页面底部的创建新子主题按钮。

该插件将开始创建子主题。但它不会激活主题。你必须手动完成。要激活子主题,请导航至:

  • 外观>主题。您将在那里看到可用的儿童主题。您可以单击“实时预览”按钮来验证它是否确实有效。然后,单击通常对其他主题执行的“激活”按钮。确保已安装父主题。
通过子主题配置器激活子主题

激活主题后,就可以将必要的文件从父主题复制粘贴到子主题,以便您可以编辑它们。

  • 只需转到“文件”选项卡即可。在这里,您将看到父主题和子主题中的所有可用内容。假设您想对 header.php 文件进行一些更改。检查文件并单击按钮Copy Selected to Child Theme
通过子主题配置器将文件复制粘贴到子主题中
  • 您甚至可以从此选项卡中删除子主题中不必要的文件。假设您要删除 sidebar.php 和functions.php 文件。检查它们并单击“删除所选”按钮。
通过子主题配置器从子主题中删除文件

现在您知道如何使用子主题配置器插件创建子主题。

插件二 – 替代插件:子主题向导

使用子主题向导插件创建 WordPress 子主题

如果您正在寻找我们上面展示的第一个插件的替代品,您可以考虑清单中的子主题向导。它允许您在配置子主题时自定义主题标题、描述、主题 URL、作者 URL 等。

这是另一个易于使用的插件,可以立即为您安装的任何主题创建子主题。我们来看看这个过程。

  • 导航到工具 > 子主题向导
子主题向导插件配置
  • 首先,选择要为其创建子主题的父主题。单击“父主题”字段中的下拉图标。您将在那里获得已安装主题的列表。选择您想要的一个。
  • 接下来,您可以为子主题编写自定义标题、描述和 URL。如果您想添加 GPL 许可证,可以从“包括 GPL 许可证”字段进行操作。接下来,单击列表底部的“创建子主题” 。

注意:您的自定义标题应与父主题的名称相似。(通常,人们不会保留相同的名字,而是在标题中的某处添加文本– Child )

通过子主题向导自定义子主题

准备儿童主题只需几分钟。准备就绪后,您可以从“外观”部分看到它。

  • 转到外观 > 主题。单击“实时预览”检查一切是否正常。单击激活按钮。
通过子主题向导激活子主题

就是这样!这是在 WordPress 中创建子主题的方法。

方法三:如何手动创建WordPress子主题

如果您不喜欢依赖第三方插件,您可以手动创建子主题。为此,您必须创建两个文件:style.cssfunctions.php

style.css 文件将包含子主题的所有 CSS 规则和声明。function.php 将允许您将样式表排入队列。如果没有这个,你的子主题将无法应用你的父主题的 CSS 并且看起来很奇怪。让我们创建这些文件。

1.#style.css

创建一个名为style.css的文件并包含以下信息 –

/*
主题名称:Hello Elementor – 子
主题 URI:https://github.com/elementor/hello-theme/
描述:这是 Hello Elementor 的子主题 作者
:*****
作者 URI:**** *
模板:
版本:2.0.1
文本域:hello-elementor-child
许可证:GPL 许可证
许可证 URI:*****
*/

注意:此信息将根据您的主题而有所不同。此外,您不需要在模板字段中包含任何内容。父主题会做到这一点。所以,保持无压力!

2.#functions.php

将以下代码添加到您的functions.php文件中。这将允许您将来添加自定义样式。

<?PHP
/* 将父主题的样式表排入队列的函数 */
function child_enqueue__parent_scripts() {
wp_enqueue_style( ‘parent’, get_template_directory_uri().’/style.css’ );
add_action
( ‘wp_enqueue_scripts’, ‘child_enqueue__parent_scripts’);

3.将style.css和functions.php文件上传到您的WordPress网站

登录您的 cPanel。

  • 转到文件管理器 > 文件 > Public_html > wp-content > 主题
  • 选择主题文件并单击+Folder
  • 它将创建一个复制主题文件夹的新文件夹。

注意:将新文件夹重命名为“child-theme-elementor”,以便您可以快速识别该文件夹。

在 cPanel 中为子主题创建文件夹

将style.cssfunctions.php文件上传到这个新文件夹中。接下来,转到外观>主题。您将在那里准备好儿童主题。单击“激活”按钮,就像在上述部分中所做的那样。现在您知道如何手动和使用插件创建 WordPress 子主题。

如何自定义您的 WordPress 子主题

如果您是专业的Web程序员,您可以通过CSS编码自定义子主题。但如果您是无代码用户怎么办?不用担心!您必须编写代码来自定义网页外观的日子已经一去不复返了。

Elementor 是一个很棒的主题生成器插件。它有一个拖放界面。使用 Elementor pro,您可以非常轻松地执行以下操作。

1. 创建引人注目的标题

您将在 Elementor 库中获得大量标题模板。您只需一键点击即可将它们导入您的网站,然后进行自定义。只需几分钟即可查看有关如何设计自定义标头的详细指南。

Elementor 库中的标题模板

与页眉类似,您将在 Elmentor 库中获得大量页脚模板。您可以将它们导入您的网站或从头开始构建一个新网站。查看如何构建自定义页脚。

Elementor 库中的页脚模板

3.设计商业网页

Elementor 拥有许多现成的页面,您只需点击几下即可准备好您的企业或电子商务网站。无论是电子商务、餐厅还是旅游企业,使用 Elementor 准备登陆页面都不需要太多时间。查看设计一个电子商务网站。

Elementor 库中的登陆页面模板

4. 创建号召性用语

元素有一个号召性用语小部件。它可以帮助您吸引网络访问者的注意力并促使他们采取您想要的操作。同样,您会在 Elementor 中找到许多现成的 CTA 模板。接触一下 Elementor 号召性用语小部件。

elementor 库中的 CTA 模板

Elementor Pro 几乎拥有您所需的一切,可以根据您的预期设计来装饰您的网站。只需在我们的 HappyAddons 网站上探索该插件和已发布的博客即可。如果您有任何疑问,可以通过评论部分告诉我们。

哪里可以找到 WordPress 子主题

如果您不想麻烦地创建子主题,可以直接从相应主题的官方网站下载它们。如今,几乎所有流行的 WordPress 主题开发人员都提供从其网站自动生成子主题的选项。这是其中的简短列表。

你好元素

Hello Elementor 是您能找到的超快的 WordPress 主题之一。我们已经在上面提供了 Hello Elementor 子主题的官方链接。如果您错过了,我们将再次将其嵌入此处 – 下载Elementor Child 主题

阿斯特拉

Astra 拥有超过 150 万活跃用户,是由 Brainstorm Force 开发的快速多功能 WordPress 主题。它简单、实惠,并且允许您创建任何网站。它具有 SEO 友好的标记和页面构建器集成。在这里您将获得 Astra 的官方儿童主题

生成新闻

GreneratePress 是一个很棒的轻量级主题。它易于定制,与任何类型的页面构建器兼容,并且完全响应。您将在其中获得许多编辑选项,您可以通过它们来策划您的网站以支持任何类型的项目。查看如何获取GeneratePress的官方子主题

内夫

Neve 是一个干净、优雅、超轻且多用途的 WordPress 主题。您会发现其中提供了各种各样的自定义选项。Neve 有一个有效的页面构建器、一个用户友好的界面和准备好的翻译功能。以下是如何为 Neve 创建在线子主题

布洛克西

如果您正在免费主题中寻找大量令人惊叹的功能,那么您必须在清单中考虑 Blocksy。它的一些顶级免费功能包括 cookies 通知小部件、时事通讯订阅者模块、趋势帖子模块、自定义帖子类型、WooCommerce 等。单击此链接即可获取Blocksy 的子主题

凯登斯

在功能、小部件、支持和兼容性方面,Kadence 是 Astra 的真正竞争对手。它拥有尖端的设计解决方案、免费的页眉/页脚构建器、与 WooCommerce 的集成、颜色切换插件等等。检查此处以获取 Kadence 的子主题

WordPress 儿童主题常见问题解答

WordPress 儿童主题常见问题解答

本节将回答有关在线常见 WordPress 子主题的常见问题。

  • 我应该安装儿童主题吗?您并不总是需要儿童主题。仅当您想要修改主题的自定义 CSS 时才需要它们。
  • 子主题和父主题哪个更好?如果没有父主题,则无法创建子主题。它继承父主题的每个组件。您必须使用子主题来添加一些额外的功能或更改 CSS 代码。
  • 创建子主题的最低要求是什么?要创建子主题,您必须至少有两个文件:style.css 和functions.php。
  • 如何在 CSS 中排列子主题?只需在子主题的函数 wp_enqueue_scripts 操作中添加此行并使用 wp_enqueue_style() 即可。它将把您孩子的主题排入 CSS 中。
  • 如何编辑 WordPress 子主题?请按照以下步骤获取编辑 WordPress 子主题的权限。步骤01: 在cPanel中创建一个子主题文件夹,复制父主题。
    步骤02:将style.css和functions.php添加到文件夹中。
    步骤03:使用functions.php将样式表排入队列。就是这样。现在您可以根据需要编辑 style.css 和functions.php 文件。

您准备好创建您的 WordPress 子主题了吗?

拥有子主题可以通过多种方式确保您的网络安全。其中之一是,即使您在编辑 CSS 代码时出错,您的网站也不会崩溃。如果您有一个受欢迎的电子商务或商业网站,停机可能会给您带来数千美元的损失。

例如,亚马逊在短短一分钟的停机时间内损失了超过 6 万美元。大多数开发人员都有过在父主题中进行一些 CSS 更改时网站崩溃的经历。但如果您有子主题,无论您犯多少错误,您的父主题都将完全受到保护。

0

评论0

请先
DLT_5219-2023_架空输电线路基础设计规程(正式版)及 DL/T5219-2014架空输电线路基础设计技术规程(附条文说明).pdf
DLT_5219-2023_架空输电线路基础设计规程(正式版)及 DL/T5219-2014架空输电线路基础设计技术规程(附条文说明).pdf
10分钟前 有人购买 去瞅瞅看

社交账号快速登录

微信扫一扫关注
扫码关注后会自动登录网站