如何將自定義模板和設計添加到 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 部分系列。 如果有的話，我希望你學到了一些有價值的東西，可以在你的下一個項目中隨身攜帶。 現在您已經完成了本教程，可以隨意嘗試使用您自己的博客文章格式的設計元素。
請在下面提交您的意見。 我期待著您的回音。