如何将自定义模板和设计添加到 Divi 的博客帖子格式（第 1 部分，共 3 部分）

已发表: 2017-05-02

欢迎来到我们关于如何将自定义样式添加到 Divi 的博客文章格式系列的第 1 天（共 3 天）。 默认情况下，Divi 提供六种博客文章格式：标准、视频、音频、引用、图库和链接。 在本系列中，我们将教您如何使用 php 和 css 自定义它们。

在接下来的 3 天里，我将引导您自定义所有 Divi 的博客文章格式：标准、引用、链接、视频、音频和图库。编辑所有这些（对于我想到的设计）需要编辑 single.php 模板文件。为了正确地做到这一点，我们必须创建一个 Divi 子主题，其中将包含我们修改过的 Single.php 模板文件。在我们这样做之前，我们还应该使用 Desktopserver 创建 WordPress 的本地安装。这将为我们提供一个安全的开发空间，而无需在实时网站上冒任何风险。

正如这篇文章的标题所暗示的那样，我们需要三天的时间来涵盖从头到尾的所有内容。今天，我将向您展示如何使用 Desktopserver 创建 WordPress 的本地安装，并创建我们将用于容纳更改后的博客帖子格式的子主题。

我认为这个系列比这里发布的大多数教程更“高级”。但是，如果您是初学者，这个系列实际上是一个很好的机会，可以让您提高开发技能，并在安全、免费、有指导的帖子系列中涉足新领域。

让我们开始吧！

先睹为快

这是我们将在本系列中实现的设计的快速浏览。在我们在今天的帖子中为它们奠定基础之后，我将向您展示如何编辑 single.php 文件（我们所有博客文章格式的模板），然后如何使用 CSS 为每种格式进一步设置该模板的样式。这将是一段旅程！

准备开发资产

以下是您在今天的教程和我为接下来的 2 天创建的教程中需要遵循的内容：

代码编辑器，例如 Atom、Sublime、Brackets 或 Notepad++（随您喜欢）
使用 DesktopServer 的本地 WordPress 安装（除非您已经拥有）
一个 Divi 儿童主题——我们将创建它！

我强烈建议，如果您打算学习本系列，请在 WordPress 安装上进行，该安装仅用于测试和开发。我最不想要的就是让人们试验他们的实时网站并搞砸一些事情。

如果您不确定如何设置 WordPress 的本地开发安装，我建议您使用桌面服务器的免费版本。它应该让您在几分钟内启动并运行本地 WordPress 安装（毫不夸张）。

在您的计算机上设置 DesktopServer

以下是开始使用 DesktopServer 的几个步骤。

访问他们的网站并通过单击右侧栏中的“免费 - 添加到购物车”按钮下载免费版本。

在结账页面，填写您的个人信息，同意他们的条款，然后点击购买。

在“购买确认”页面上，为您的操作系统选择正确的下载。我建议安装最新版本的 Mac 或 Windows。

解压缩您的下载并在您的计算机上运行该应用程序的安装。

现在，您可以在本地磁盘 (C:) 驱动器根目录中名为“xampplite”的文件夹中找到 DesktopServer 应用程序。

安装 Desktopserver 后，请阅读他们的说明以帮助您开始设置本地 wordpress 安装。

为这个系列创建你的 Divi 子主题

要创建 Divi 子主题，您需要访问您的 WordPress 主题文件。如果您在安装 DesktopServer 时遵循默认设置，则您的主题文件应位于标有“网站”的文件夹内的文档文件夹中。

找到 themes 文件夹，并添加一个名为“child”的新文件夹。

现在您要将 style.css 文件添加到您的子主题文件夹中。这是构成您的子主题的 3 个文件中的第一个。

打开您的文本编辑器并在文档的最顶部创建一个具有以下 CSS 标题的新文件。

/*
 Theme Name:     Divi Child
 Theme URI: 
 Description:	   Divi Child Theme
 Author:
 Author URI:   
 Template:       Divi
 Version:        1.0.0
 License:  
 License URI:  
 Tags:  
 Text Domain: 
*/

您可以根据需要添加子主题 CSS 标头的其余信息以适合您的站点。

使用名称和扩展名“style.css”保存您的新文件。并将其添加到子主题文件夹中：

您需要添加到子主题文件夹的下一个文件是functions.php 文件。

返回您的文本编辑器并创建另一个新文件，并将以下 php 代码添加到文档的最顶部：

<?php 
function my_theme_enqueue_styles() {
    $parent_;
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>