如何将自定义模板和设计添加到 Divi 的博客帖子格式（第 3 部分，共 3 部分）
已发表: 2017-05-04欢迎来到第 3 天（共 3 天），这是我们关于如何将自定义样式添加到 Divi 的博客文章格式系列的最后一天。 默认情况下，Divi 提供六种博客文章格式：标准、视频、音频、引用、图库和链接。 在本系列中，我们将教您如何使用 php 和 css 自定义它们。
今天是我们关于如何将自定义模板和样式添加到 Divi 的博客文章格式系列的最后一天。 该系列的最后一天致力于设计。 随着我们的 single.php 自定义和我们的子主题处于活动状态，我们准备为博客文章格式添加样式。
我将带您了解所有六种帖子格式，因为我们为每种格式添加了一些独特的设计元素。 在本教程结束时，您将拥有六种外观精美的替代 Divi 附带的默认博客文章格式。
您还将拥有一个非常独特的博客页面，显示不同的帖子格式特色元素。 例如，链接格式将显示自定义链接框来代替特色图像缩略图。 画廊格式帖子将显示画廊图像的图像滑块，而不是特色图像缩略图。 等等。
这是今天教程后您的博客页面的一瞥（我在下面的 gif 中使用带有网格布局的 Divi 博客模块）。
让我们开始吧。
在主题定制器中设置通用设计设置
首先，我们需要使用主题定制器进行一些常规样式更改。 从您的 WordPress 仪表板，转到 Divi → Theme Customizer → General Settings → Layout Settings 并更改以下内容：
网站天沟宽度： 2
勾选使用自定义侧边栏宽度
侧边栏宽度： 30
同样在主题定制器下，转到配色方案并选择橙色。
现在让我们看看到目前为止您的标准帖子是什么样的：
如您所知，它仍然需要一些样式，但一切都在正确的位置。 你有一个跨越整个页面宽度的英雄部分。 您还没有特色图片，因此背景仅显示您之前添加到 single.php 文件中的渐变。 帖子标题和元数据也在英雄部分内。 现在是添加其余设计元素的时候了。
为所有帖子格式设计英雄部分
由于您的每种帖子格式都将共享相同的英雄部分和侧边栏设计，因此您可以先添加此自定义 CSS。 回到Theme Customizer，点击底部的Additional CSS，添加如下自定义CSS：
.hero-section {
padding-top: 120px;
padding-bottom: 120px;
background-repeat: no-repeat;
background-size: cover;
position:relative;
max-height: 450px;
background-color: #333;
}
.single-post #main-content #left-area {padding-top: 0px;}
/* ---- Sidebar Settings ---- */
.single #sidebar {background: #efefef; padding-top: 20px; padding-right: 20px; padding-left: 20px; padding-bottom: 20px;}
/* ---- Standard Post Title & Post Meta ---- */
.single h1.entry-title,.attachment h1.entry-title, .single p.post-meta {
width: 100%;
text-align: center;
padding-left: 8px;
padding-right: 8px;
font-weight: 800;
text-transform: uppercase;
color: #fff;
}
@media only screen and (min-width: 980px) {
/*** Set title font size for desktop ***/
.single h1.entry-title {
font-size: 65px !important;
}
}
现在看看标准帖子现在是什么样子。
设置好英雄部分和侧边栏样式后，您就可以为各个帖子格式设置样式了。
设计标准帖子格式
标准帖子格式是您所有博客帖子的默认格式。 您可以在编辑帖子时选择标准帖子格式。
对于这种标准格式，我们要做的就是添加特色图像。 因为这张特色图片会拉伸整个屏幕宽度，我建议使用 2000 x 600 的图片。我使用的是来自 unsplash.com 的图片。
添加特色图片后，请查看标准帖子的外观。
设计视频发布格式
要设置视频帖子格式的样式，请确保为帖子选择了视频格式。
接下来，将视频的 url 或嵌入添加到您的内容中。 视频格式将采用第一个视频网址、视频标签或嵌入并将其显示在您的帖子内容的顶部。 该视频还将替换您博客页面上的特色图片。
对于此示例，我仅使用 youtube 视频网址。
将您的 2000 x 600 特色图片添加到帖子中。
接下来，我们将为精选视频添加额外的样式，为视频添加白色边框并稍微抬高它，使其与英雄部分重叠并突出一点。
转到 Theme Customizer → Additional CSS 并添加以下自定义 CSS：
/* ---- Format the Position of the Video Wrapper ---- */
@media only screen and (min-width: 980px) {
/*** elevate the video to overlap the hero section ***/
.single-post.single-format-video .et_main_video_container {margin-top: -120px; background: #fff; outline: 10px solid #ffffff !important; z-index: 100; margin-bottom: -100px;}
}
现在查看您的新视频格式帖子。
或者，您可以将此帖子设为全角，以作为另一个出色的设计选项。 只需编辑您的帖子，然后在页面右上角的 Divi 帖子设置中，选择全角页面布局。
现在查看全宽视频格式帖子：
设置音频发布格式的样式
对于音频帖子格式，请确保为帖子选择了音频格式。
添加您的 2000 x 600 特色图片。
接下来，将您的音频文件添加到您的帖子中。 这可以是 .mp3、.m4a、.ogg 或 .wav 文件。 您可以将音频文件上传到您的媒体库并以三种不同的方式插入到您的帖子中（嵌入媒体播放器、媒体文件链接或附件页面链接）。
这三个选项中的任何一个都可以使用。 但是，对于这个例子，我只是要向音频文件添加一个简单的 url。 WordPress 会将此音频 url 转换为帖子顶部的媒体播放器。
现在让我们来看看音频格式帖子。
这还不错，但可能会更好。 让我们隐藏显示在橙色媒体播放器下方的重复媒体播放器，并向我们的橙色媒体播放器添加背景图像。
转到 Theme Customizer → Additional CSS 并添加以下自定义 CSS：
/* ----- Add Background Image to the Audio Player & Change size of the player ----- */
body.single .et_audio_content, .blog .et_audio_content {
margin-bottom: 0px !important;
height: 300px !important;
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE');
background-repeat: no-repeat;
background-size: cover;
}
/* ---- Hide the Duplicate Audio Player ------ */
div#mep_1 {display: none;}
然后找到一张图片并将其上传到您的媒体库（应约为 700 x 300）。 然后复制 url 并粘贴到上面的 CSS 中，上面写着“在此处输入图像 URL”。
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE');
现在去看看你的新音频格式帖子。
设计报价帖格式
对于报价帖格式，请确保为帖子选择了报价格式。
然后在帖子中添加 2000 x 600 的特色图片。
报价格式利用块报价短代码生成自定义报价显示。 因此，在您的内容中添加一个块引用以显示自定义引用。
现在看看你的帖子。
让我们用一点 CSS 自定义特色引语框，在右上角为其提供背景图像和大引语。
转到 Theme Customizer → Additional CSS 并添加以下自定义 CSS：
/* ---- Add Background Image to the Quote Box ---- */
.et_quote_content {
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE')!important;
background-repeat: no-repeat;
background-size: cover;
}
/* ---- Add the Quotation Symbol to the Quote Box ---- */
.et_quote_content blockquote p::before {
font-family: Cardo;
position: absolute;
top: 16px;
left: 5%;
margin-left: -16px;
border-radius: 31px;
background: rgba(255, 255, 255, .0);
font-size: 70px;
font-color: #fff;
content: "\201C" !important;
}
/* ---- Text Format Inside of quote ---- */
@media only screen and (min-width: 980px) {
.single-post.single-format-quote blockquote p {
font-size: 30px !important;
font-weight: 600 !important;
}
}
查找图片并将其上传到您的媒体库（应约为 700 x 300）。 然后复制 url 并粘贴到上面的 CSS 中，上面写着“在此处输入图像 URL”。
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE');
现在看看你的最终结果：
设计图库帖子格式
对于图库帖子格式，请确保为帖子选择了图库格式。
接下来，确保添加 2000 x 600 的特色图片。
图库帖子格式允许您在来自媒体库的帖子内容中创建一个库。
要为您的帖子创建图库，请首先将至少 6 张图片上传到您的媒体库。 图像的大小可能会有所不同，但由于图库具有将图像放大到全尺寸的灯箱效果，因此您可以将图像制作为大约 1200 x 800。
现在在媒体库中选择您的图像，选择创建库，然后单击“创建新库”按钮。
现在您的内容中应该有一个图库短代码。
该画廊将以三列宽的马赛克布局显示在您的帖子中。 该画廊还将用您的画廊图像滑块替换您博客页面上的特色图像。
现在去看看你的帖子。
让我们向图库添加一些 CSS 以将其稍微提升以重叠英雄部分并更改每个图像周围的边距。
转到 Theme Customizer → Additional CSS 并添加以下自定义 CSS：
/* ---- Position & Style the Gallery to Overlap the Featured Image ---- */
@media only screen and (min-width: 980px) {
.single-format-gallery .et_post_meta_wrapper { margin-top: -100px;}
.et_post_gallery {
z-index: 100;
position: relative;
border-top: 8px solid #fff !important;
border-left: 8px solid #fff !important;
background: #fff !important;
}
/* ---- Set Background Color, Margins & Padding for the Gallery Image ---- */
.et_gallery_item { margin: 0 0 0 0 !important;}
.et_gallery_item {
width: 33.3%;
margin: 0 0% 0% 0 !important;
padding-right: 8px !important;
background: #fff !important;
padding-bottom: 8px !important;
}
}
现在看看最终的结果。
设计链接帖子格式
对于链接帖子格式，请确保为帖子选择了链接格式。
接下来，将您的 2000 x 600 特色图片添加到您的帖子中。
链接帖子格式采用帖子中的第一个链接并将其显示在框内内容的顶部。 此自定义链接显示还会替换您博客页面上此帖子的特色图片缩略图。
继续添加指向您帖子的链接并查看帖子设计。
现在让我们通过向自定义链接框添加背景图像和在链接 url 左侧的图标来稍微改进设计。
转到 Theme Customizer → Additional CSS 并添加以下自定义 CSS：
/* ---- Add thick border to the left side and Lower the link box ---- */
.et_link_content {
border-bottom: 8px solid #ddd;
background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(ENTER IMAGE URL HERE);
background-size: cover;
background-color:#edb059;
border-radius: 25px;
}
/* ---- Font Settings within the Link box ---- */
.et_link_content a.et_link_main_url { font-size: 21px; font-weight: 600; color: #fff !important;}
/* ---- Link Symbol on the right side ---- */
.et_link_content::before {
font-family: "ETmodules";
position: absolute;
top: 38%;
left: 5%;
margin-right: -26px;
border-radius: 31px;
background: rgba(255, 255, 255, .0);
font-size: 48px;
color: #fff;
content: "\e02c";
}
/* ---- Position & Style the Gallery to Overlap the Featured Image ---- */
@media only screen and (min-width: 980px) {
.single-format-gallery .et_post_meta_wrapper { margin-top: -100px;}
然后找到一张图片并将其上传到您的媒体库（应约为 700 x 300）。 然后复制 url 并将其粘贴到您刚刚输入的 CSS 片段中，其中显示“在此处输入图像 URL”。
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE');
现在看看帖子的样子。
就是这样！
现在我们已经设计了所有的帖子格式，是时候看看它在博客页面上创建的很酷的布局了。 您可以看到所有不同的帖子格式特色项目是如何显示的。
注意：您可以使用默认编辑器或 Divi Builder 显示您的博客，设计仍然有效。
有反应吗？
所有的帖子格式都完全响应，在所有设备上都能很好地工作。 以下是当我缩小更改屏幕尺寸时 Gallery Format 帖子的外观示例：
最后的想法
恭喜！ 你都完成了。 我希望您喜欢这个关于自定义博客文章格式的 3 部分系列。 如果有的话，我希望你学到了一些有价值的东西，可以在你的下一个项目中随身携带。 现在您已经完成了本教程，可以随意尝试使用您自己的博客文章格式的设计元素。
请在下面提交您的意见。 我期待着您的回音。