spot_img
HomeWordPress教程如何创建 WordPress 子主题:完整的初学者指南

如何创建 WordPress 子主题:完整的初学者指南

JasperAI 10000字免费额度试用

Domantas G. & Prasasti P.

如何创建 WordPress 子主题并对其进行自定义

WordPress 的最大优势之一是其可定制性,WordPress 主题也是如此。 有了它们,用户可以高度灵活地创建和修改他们网站的外观。

然而,从头开始创建一个完整的主题可能是一项困难且耗时的任务。 这就是为什么大多数人更喜欢为他们的 WordPress 网站创建子主题。

本教程将解释为什么需要这种做法,并指导您创建和编辑您的第一个子主题。

如何创建 WordPress 子主题:完整的初学者指南

为什么你应该使用 WordPress 子主题

使用子主题是基于现有主题创建新 WordPress 主题同时保持其大部分特征的最有效方法之一。 由于它使用其父主题的功能和元素,因此无需从头开始编写所有代码。

谷歌SEO优化服务

由于子主题继承了主主题或父主题的特征,因此可以在不破坏原始主题功能的情况下自定义其代码。 这样,如果主题收到更新,您所做的所有更改都不会被覆盖。

构建子主题也相对容易,因为您不必深入研究站点的根文件。 传输文件和自定义 CSS 文件等任务可以使用控制面板的文件管理器和 WordPress 仪表板完成。

子主题还允许您保留父主题的某些视觉方面,并使它们在多个域中保持一致。

基本方面,包括持续的安全更新和补丁,也将得到处理,特别是如果您选择来自信誉良好的开发人员的父主题。

使用子主题的另一个原因是,如果您错误配置它,它会提供一个故障安全解决方案。 此外,它还允许您有效地跟踪更改的部分,因为子主题的文件与其父主题是分开的。

WordPress divi主题

WordPress 子主题的工作原理

子主题存储在与其父主题不同的目录中,并带有自己的目录 样式.css函数.php 文件。 这两个核心主题文件是使您的 WordPress 主题正常工作所必需的,但该文件夹也可能包含其他文件。

使用相关的 .css.php 文件,您可以修改从布局样式参数到子主题使用的代码和脚本的所有内容,即使这些属性不存在于其父主题中。

当访问者访问您的网站时,WordPress 将首先加载子主题,然后使用现有主题中的部分填充缺少的样式和功能。

因此,您可以在不牺牲父主题核心功能的情况下充分利用您的定制设计。

如何在 WordPress 中创建子主题

在开始创建子主题之前,请记住对 HTML、CSS 和 PHP 有基本的了解是必不可少的,因为该过程涉及一些编码。 有许多可用的父主题,选择一个适合您需要的主题也很重要。

创建 WordPress 主题有两种常用方法。 用户可以使用插件或使用自定义代码构建子主题。 每个选项都有自己的优点和缺点。 在本教程中,我们将专注于手动创建一个基本的子主题。

我们建议在开发子主题时在本地安装 WordPress。 这样做可以让您对 WordPress 网站进行更改,而不会有任何损坏实时版本的风险。 它还可以让您在不购买域名或网络托管计划的情况下创建子主题。 以下说明使用 Twenty Seventeen 作为父主题,但如果您愿意,也可以使用另一个主题。 我们还将使用 Hostinger 的文件管理器来添加和编辑文件,但 FTP 也可以

让我们看一下有关如何在 WordPress 中创建子主题的分步指南:

  1. 访问 hPanel 并打开 文件管理器.
在 hPanel 中,文件管理器位于文件部分下。
  1. 导航 public_html -> wp-内容 -> 主题 文件夹。 这是您的父主题和子主题目录所在的位置。
您的父主题和子主题目录将位于 hPanel 中的 themes 文件夹
  1. 通过单击创建子主题的目录 新建文件夹 上方菜单上的图标。 输入您的子主题的名称,然后单击 创造.
hPanel 中上方菜单中的新建文件夹图标

重要的! 将文件夹或文件名中的空格替换为连字符 (-) 以防止出错。

  1. 创建一个 样式.css 子主题文件夹中的文件。 使用以下代码填充其内容:
/* 
Theme Name: Twenty Seventeen Child 
Theme URI: http://yourdomain.com
Description: Twenty Seventeen Child 
Theme Author: Your Name
Author URI: http://yourdomain.com
Template: twentyseventeen 
Version: 1.0.0
Text Domain: twentyseventeen-child
License: GNU General Public License or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
*/

此代码包含有关子主题的基本信息,例如其名称和用作其父主题的主题。 如果您决定发布主题,作者和描述等其他详细信息主要用作标识符。

H10的年终大促
  1. 相应地更改所有值。 最重要的字段是 模板 因为它告诉 WordPress 您的子主题基于哪个父主题。 完成后,单击 保存并关闭.
  2. 在此步骤中,您将排队父主题样式表和子主题样式表。 创建一个名为 函数.php 在子主题的目录中,但不要用父主题文件中的代码填充它,因为它必须保持独立。

重要的! 如果您使用的是 WordPress 5.9,请跳过此步骤,因为子主题将从父主题的 theme.json 文件继承全局样式。

代码以一个开始的 PHP 标记开始,然后包括将排队父主题样式表的函数。 看看下面的例子:

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );

function enqueue_parent_styles() {
   wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
?>
  1. 访问您的网站并访问 外貌 -> 主题. 启用 您刚刚制作的子主题,您会注意到它看起来与父主题相同。
WordPress 子主题的激活按钮。

如何自定义您的儿童主题

要个性化您的子主题,您需要基本了解 CSS 规则以及如何检查元素,以便您可以查明它们的 CSS 代码和分配给它们的类。

有几种方法可以自定义您的子主题。 用户可以通过将模板文件添加到子主题文件夹来更改页面布局。 也可以通过添加自定义 CSS 代码来更改子主题的样式。

最后,子主题还可以具有覆盖其父主题的新功能。

现在,让我们看一下自定义子主题的基础知识。 为此,请导航至 外貌 -> 主题 然后点击 定制 在您活跃的儿童主题上。 当。。。的时候 主题编辑器 打开,选择 额外的 CSS。

主题编辑器中的附加 CSS 选项。

改变背景颜色

如果您希望更改子主题的背景颜色,请插入以下 CSS 规则:

.site-content-contain {
    background-color: #DEF0F5;
    position: relative;
}

旁边的值 背景颜色: 对应于你想要的颜色的十六进制代码。 在此示例中,我们将其从白色更改为浅蓝色,因此结果如下所示:

添加代码以将背景从白色更改为浅蓝色。

您可以通过使用以下 CSS 代码向侧边栏添加一些颜色来创建令人愉悦的小部件显示:

.widget {
background: #B9EBFA;
padding: 25px;
}

同样,不要忘记相应地编辑颜色代码。 你应该得到这样的结果:

高质量外链购买
添加代码以更改侧边栏颜色。

更改字体类型、大小和颜色

要更改子主题的字体类型、大小和颜色,请插入以下代码:

p {
color: teal;
}
p {
font-family: Georgia;
font-size: 18px;
}

p 标签代表段落。 如下所示,上述规则已根据指定的值更改了段落字体的外观。

添加代码以更改字体。

要更改其他文本部分(如标题或页眉)的字体,请先检查元素以查看其 CSS 参数。 让我们尝试更改标题的字体颜色:

  1. 第一的, 右键点击 在文本上并选择 检查. 在本教程中,我们在 样式 标签:
.entry-title a {
    color: #333;
    text-decoration: none;
    margin-left: -2px;
}

此代码表示此示例博客文章的标题,包括其颜色、修饰和边距。

“样式”选项卡中代表此示例博客文章标题的代码。
  1. 将代码复制并粘贴到 额外的 CSS 选项卡并相应地更改值。 在此示例中,我们通过修改十六进制值将字体颜色从黑色更改为红色。
将代码从样式选项卡复制到附加 CSS。

此过程也适用于您希望修改的任何其他元素。

JasperAI 10000字免费额度试用

更改帖子和页面的布局

就像 WordPress 子主题的自定义 CSS 如何覆盖其父主题的样式一样,模板文件允许您创建自己的布局。

每个 WordPress 主题都有不同的页面布局和结构,但大多数主题都由页眉、内容、页脚和侧边栏等部分组成。

这些部分由与其功能相对应的模板文件控制。 例如,标题部分通常由 标题.php 文件。

原始模板文件位于父主题文件夹中。 如果你想制作一个WordPress页面模板,你需要做的就是将模板文件复制到你的子主题的文件夹中并修改它。

请记住,您的新模板文件必须具有相同的名称,并且位于与原始模板对应的文件夹中。

二十七将其模板文件拆分为 模板部分 使用 WordPress 函数在主模板中引用的 get_template_part()。

例如,如果你想编辑 页面.php,您可以先找到模板部分,看看这些部分是否是您需要编辑的部分。 在我们的示例文件中,第 28 行显示为:

get_template_part( 'template-parts/page/content', 'page' );

我们怎么读这个? 模板部分/页面/ 是文件夹路径。 同时, 内容 指的是文件名中连字符前的字符,与 在连字符之后。

他们一起形成了完整的路径……

5分钟生成10篇英文软文article forge软件试用
siteground

【WordPress花园提醒您】如果想购买国外正版WordPress主题和插件,您需要一张VISA信用卡才能支付,这里我们推荐光大银行信用卡!赶快免费申请,别耽误了买插件哦!

WordPress花园粉丝福利

想做跨境电商独立站但是没什么钱?可以免费试用Shopline智能建站工具,一个月都不要一顿火锅的钱!(这里就可以在线申请!) 或者扫描下方二维码
shopline
guangda
WordPress花园官方账号
WordPress花园隶致力于为广大跨境电商和独立站爱好者提供优质的WordPress教程、Woocommerce教程、Facebook、Twitter、tiktok、Instagram教程和谷歌SEO教程等资料和对应的建站推广服务。关注‘哟派出海’公众号了解最新资讯。粉丝福利:Shopline免费独立站建设14天优惠 商务合作: [email protected]
RELATED ARTICLES