如何创建 Divi 儿童主题

已发表: 2024-06-28

在构建网站时,有数千个(没错,是数千个!)WordPress 主题可供您选择。 然而,大多数网页设计师发现,虽然 WordPress 主题是一个不错的起点,但他们想要更多的自定义,而创建子主题是实现这一目标的好方法。

子主题构建于父主题之上,并允许您添加或删除自己的代码。 如果您想真正自定义您的 WordPress 网站,使用子主题是最好的方法,而 Divi 是最好的选择之一。

广告素材创建 Divi 子主题的最大原因是,当父主题更新时,您的网站不会受到任何影响。 从 Divi 创建子主题本质上充当安全网,始终在您的网站崩溃之前抓住您的网站! 但是,我有点超前了,所以让我们从基础开始吧。

在本文中,我将介绍:

  • Divi是什么以及有什么特点?
  • 如何创建 Divi 儿童主题(+免费儿童下载!)
  • 如何测试您的 Divi 子主题是否正常工作

让我们深入了解一下。


Divi是什么以及有什么特点?

Divi 是来自 Elegant Themes 的 WordPress 主题,它允许您从头开始使用不同的结构元素构建页面。 这意味着您可以完全控制您正在构建的网站上的所有内容,因为它具有卓越的可视化编辑器。

它还附带数百种预制设计,因此,如果您没有创建和自定义主题的经验,不用担心! 无论您是想要自定义第一个网站的初学者还是经验丰富的开发人员,Divi 都能为您提供将想法变为现实的工具。

开发人员创建 Divi 子主题

Divi 有两个构建器界面:WordPress 前端的可视化编辑器和后端构建器。 在可视化编辑器上,它使为客户构建网站变得更加容易、更快、更愉快,因为您可以在页面本身上进行编辑并实时查看您的编辑。 在后端,您正在编辑帖子内基于块的表示形式。 但是,您仍然可以添加新模块,并且基本上可以像在可视化编辑器中一样执行所有操作。 根据您的喜好,在编辑器之间来回切换也很容易。

Divi 还具有三个主要结构元素,您可以按原样使用它们,也可以根据您的具体规格进行定制:部分、行和模块。

部分:这些是 Divi 构建器中最大的构建块。 您可以将它们视为水平堆叠块,可以将您的内容分组为视觉上可区分的区域。 您构建的所有内容都从一个部分开始。

行:行是可以放置在部分内部的各种列布局。 它们具有各种设置,可以通过单击行左上角的设置图标来访问,并且可用于大大增加使用 Divi Builder 构建的布局的多样性,因为它们创建了模块所在的结构。

模块:模块包含不同的内容元素,例如图像、内容、滑块、图库、联系表单、CTA、博客、表单、感言等。您可以从 40 多个模块中进行选择,然后根据需要进行自定义。

现在您对 Divi 有了更好的了解,让我们深入了解如何创建子主题。


如何创建 Divi 儿童主题

在开始自定义之前,您需要确保已安装并激活 Divi。 有两种方法可以解决这个问题:

选项 1:使用 Flywheel + Divi 实现快速、轻松的安装。

选项2: 手动方法(按照以下两个步骤)

第 1 步:在此处注册并下载 Divi。 创建帐户并登录后,您将被重定向到会员区域,然后转到左侧并找到“下载”选项卡。 找到Divi并点击“下载”。 这会将 zip 文件中的 Divi 下载发送到您的“下载”文件夹。

第 2 步:是时候登录您的 WordPress 网站了。 转到外观 > 主题。 单击右侧的“添加新”或“添加新主题”。 单击左上角的“上传主题”按钮。 选择文件并找到 Divi zip 文件。 注意:将其保存在 zip 文件中(不要解压缩)。 单击安装。 安装完成后,单击“激活”,它就会在您的网站上安装并激活! ?

现在,您已准备好创建 Divi 子主题! 创建 Divi 子主题有三种主要方法:下载免费子主题、使用插件或手动编码。

选项 1:下载免费的 Divi Child 主题文件

创建子主题最快(也是最简单!)的方法之一是下载这个免费的 Divi 子主题。 它拥有您入门所需的所有必需品,以及供您根据自己的喜好进行定制的空间! 下载下面的免费 Divi 儿童主题。

下载后,安装 Divi,激活它,然后就可以开始了! 就这么简单。 如果您更喜欢以不同的方式创建 Divi 子主题,您可以随时尝试插件。

选项 2:使用插件创建 Divi 子主题

有许多插件可帮助您创建 Divi 子主题。 以下是我个人最喜欢的一些:

  • 迪维儿童
  • 子主题配置器
  • Orbisius 的儿童主题创建者
两只手握住两端带有插件的绳索

迪维儿童

Divi Children 是专门为 Divi 用户开发的免费插件。 它会自动为您完成繁重的工作,因此您可以专注于创意方面! Divi Children 创建的每个子主题都通过 WP 定制器提供了大量定制功能。 在此处了解如何安装此插件。

子主题配置器

该插件是为希望能够直接自定义子主题样式表的 WordPress 用户设计的。 使用此插件,您可以轻松识别并覆盖您想要自定义的确切 CSS 属性,分析器会扫描渲染的主题并自动配置您的子主题。 在此处了解有关此插件以及如何安装的更多信息。

Orbisius 的儿童主题创建者

该插件允许您从当前安装在站点上的任何主题快速创建子主题。 使用此插件,您可以从父主题创建无限数量的子主题,因此选项是无限的。 它具有两个编辑器,您可以从一个主题中选择片段并粘贴到另一个主题中。 谈论定制! 在此处了解有关安装此插件的更多信息。

最后,如果插件不适合您,始终可以选择手动创建 Divi 子主题!

选项 3:手动创建 Divi 子主题

如果您是 WordPress 开发人员或只是喜欢挑战,那么这是创建 Divi 子主题的好方法。

一位开发人员寻求新工具来帮助他的网站。

第1步:创建style.CSS文件

您可能知道,style.css 文件用于告诉 WordPress 您的子主题的详细信息,并且可用于添加自定义 CSS! 为此,请在计算机上创建一个文件夹并为其命名(让您知道这是 Divi 子主题的名称)。 从那里,在该文件夹中创建一个文件并将其命名为 style.css。

注意:确保您有文本或代码编辑器工具,否则命名该文件将很困难!

第 2 步:将其添加到 style.css 文件中:

 /*
 主题名称:迪维儿童主题
 主题 URI:https://www.elegantthemes.com/gallery/divi/
 描述:Divi 儿童主题
 作者:你的名字
 作者 URI:https://getflywheel.com/
 模板:迪维
 版本:1.0.0
*/

主题名称、主题 URI、描述、作者、作者 URI 和版本都是可编辑的。 保持模板名称不变! 如需更多自定义(并确保您的 Divi 子主题正常工作),请在此处添加任何自定义 CSS。

第三步:创建functions.php文件

在您已创建的文件夹中创建另一个文件并将其命名为functions.php

然后,将此代码添加到您的新文件中,并在最后一行下方添加您可能需要的任何自定义函数:

 <?php
函数 divi__child_theme_enqueue_styles() {
    wp_enqueue_style( '父样式', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'divi__child_theme_enqueue_styles' );

第 4 步:创建屏幕截图

这是一个重要的步骤,这样您的网站就不会在 WordPress 主题页面上出现图像应有的空白区域,因此快速截图是这里的关键步骤! 截取屏幕截图后,请继续并确保尺寸为 880x660 像素,为 .png 或 .jpeg(都可以!),并且名称为 [screenshot.png] 或 [screenshot.jpeg]。 然后,您将屏幕截图图像添加到主文件夹中。

步骤5:压缩文件夹并上传

最后,将文件夹压缩为 zip 文件类型并上传到 WordPress! 您将转到“外观” > “主题” > “上传” ,然后单击“激活”。

瞧! 您已经成功创建了 Divi 儿童主题,并且准备好根据您的喜好进行定制。


如何测试您的 Divi Child 主题是否正常工作

为了测试您的子主题是否正常工作,请在子主题 style.css 文件中添加一些 CSS 并保存更改。 您应该在实时网站上看到这些更改,这样您就知道它正在工作!

注意:您可能需要在私人浏览器中打开页面,以防页面被缓存。

请记住:您永远不应该对您的实时网站进行更改,否则可能会破坏某些内容! 使用 Local,一个免费的本地开发应用程序,这样您就可以停止调试本地环境,并花更多时间启动漂亮的 WordPress 网站。 在此处了解有关本地的更多信息。


结论

定制是使用 WordPress 创建网站的最佳部分之一,虽然主题是很好的起点,但拥有像 Divi 这样的子主题供您使用也是很好的。


免费Divi儿童主题下载

创建子主题最快(也是最简单!)的方法之一是下载这个免费的 Divi 子主题。 它拥有您入门所需的所有必需品,以及供您根据自己的喜好进行定制的空间! 下载下面的免费 Divi 儿童主题。