自定義文章格式是 WordPress 3.1 版本首次引入的一項功能。從根本上說，文章格式是一種不同的文章分組方式，允許您定義所釋出的文章內容型別。一旦按照格式對文章進行了分組，您就可以選擇將文章排列在一起、為文章設計不同的樣式或根據文章格式來組織文章。
WordPress 允許您從一組列表中切換不同的文章格式。您不必使用所有格式，只需選擇最適合您網站的格式即可。目前，這個列表包括：
- 日誌：類似於快速筆記。用於快速更新或自定義狀態等文章。
- 相簿：包含圖片庫的文章。
- 圖片：單張圖片，而非相簿。
- 視訊：包含一個或多個視訊的文章。WordPress codex 還指出，單個 URL 可能表示視訊的來源，而不是嵌入式視訊。
- 音訊：音訊檔案或播放列表。
- 連結：指向外部網站的簡單連結。
- 引用：引用的文字塊，通常是引用的文字塊： 引用的文字塊，通常註明引用作者。
- 狀態：與旁白類似，但更多是簡單的單行狀態。
- 聊天：完整的聊天記錄。
顯然，這些描述都是指導原則，您可以根據自己的需要調整文章格式。如果你正在運營一個部落格，那麼你很可能有一些符合這些類別的特殊文章，你希望這些文章看起來與眾不同，或者以一種獨特的方式佈局。在本文中，我們將介紹如何設定文章格式來實現這一目的，以及一些開始使用它們的想法。
設定文章格式
在主題中新增文章格式非常簡單，只需在 WordPress 中新增一個功能，列出您想使用的文章格式即可。許多主題已經預裝了文章格式。不過，最好還是熟悉一下它們的設定方式。
Fable主題中的視訊文章格式示例
在本教程中，我將使用 Fable 主題，該主題包含幾種文章格式： 相簿、引用和視訊。不過，對於我的部落格來說，這些還不夠。我想再增加幾種。首先要做的是為 Fable 建立一個子主題，只需一個基本的 style.css 檔案。使用子主題可以確保未來對主題的更新保持不變，不過我們的所有自定義設定都會覆蓋主題的預設設定。
值得注意的是，預設情況下，文章格式會新增到 “文章 “文章型別中，但也可以通過另一行程式碼新增到自定義文章型別中。
現在，我們只需在主題中新增一些文章格式。如果還沒有，請在子主題目錄下建立一個 “functions.php “檔案，並新增以下程式碼塊。
function add_post_formats() {
add_theme_support( 'post-formats', array( 'gallery', 'quote', 'video', 'aside', 'image', 'link' ) );
}
add_action( 'after_setup_theme', 'add_post_formats', 20 );
在這裡，我們使用 add_theme_support 函式來包含我們的文章格式。正如我提到的，我們的主題已經包含了相簿、引用和視訊。不過，我們將用自己的功能覆蓋該功能，因此如果想保留這些格式，就必須確保包含它們。您可以從上面的列表中新增任何您想要的文章格式，因此請選擇最適合您部落格的格式。
啟用子主題後，您可以訪問 WordPress 管理並建立一個新文章。你會看到右側邊欄列出了六種文章格式。選擇其中任何一種，就可以將文章改為特定的文章格式，或者直接保留為 “標準 “格式。在我們繼續之前，我建議您為每種文章格式新增幾個包含相關內容（相簿、嵌入式視訊等）的虛擬文章，這樣您就可以看到文章格式的實際效果。
您可以在文章編輯器中從文章格式列表中進行選擇
好了，我們已經設定了自定義文章格式。現在，是時候看看我們能用它們做些什麼了。
樣式化文章格式
開始使用文章格式的最簡單方法就是使用 CSS 為每種格式設計不同的樣式。預設情況下，使用 post_class 函式的主題（包括 Elegant Themes 的任何主題）會為每篇文章輸出一個特殊的 CSS 類，指定文章格式。該類的結構為 .format-(name)。因此，視訊文章的類為：
.format-video
這些類同時包含在索引頁面和單個文章頁面中，可用於在任一位置新增獨特的樣式。讓我們從簡單的開始。
我正在使用的 Fable 主題已經為引用文章設定了一個特殊的結構，即單個引用加粗並置於引號內。但我想同時更改所有引用文章的背景顏色，以便更加突出它們。為此，我開啟了子主題的 “style.css “檔案，並新增了以下內容：
.format-quote {
background: #FFAADD !important;
color: white;
}
這將為任何指定為 “引用” 格式的文章新增粉色背景。它還會將文字顏色更改為白色。我確保新增了 “!important” 標記，以覆蓋主題的預設設定。
當然，這種樣式適用於所有情況下的文章，包括單篇文章、頁面和索引頁面。如果我想讓這種樣式只在文章被列在主頁上時才應用，我們只需新增一點特殊性。這一次，我只打算在文章被列在主頁上時應用粉色背景。我還將用 CSS 刪除文章的標題，因此只保留文章內容。
.home .format-quote {
background: #FFAADD !important;
color: white;
}
.home .format-quote .entry-title {
display: none;
}
我們的完整引用，粉色背景，無標題
CSS 可用於根據格式改變內容。例如，Fable 主題就為相簿新增了特殊樣式，使其顯示為六邊形面板。
我為寓言主題新增的格式之一是旁白，因此目前還沒有獨特的 CSS。為了讓旁白文章看起來更像狀態，我想移除 Fable 主題新增的預設下拉選單，並新增我自己的文字效果。
.home .format-aside .entry-content > p:first-child:first-letter {
display: inline;
float: none;
margin: 0;
font-size: inherit;
}
.home .format-aside .entry-content p {
font-style: italic;
font-size: 36px;
color: #666;
text-shadow: 2px 2px #E7E1E1;
}
這樣，文字的樣式就包括斜體、更大的字型大小和文字陰影，同時去掉了下拉選單。同樣，這隻適用於主頁，但你也可以簡單地移除”.home”，使其也適用於單個頁面。
只需使用 CSS 就能定製很多文章格式。我建議大家瀏覽本網站列出的任何主題，從中獲得一些靈感。
根據文章格式過濾內容
只需使用 CSS 樣式，就能讓文章格式為你所用。但如果你想要更多控制權，也可以直接編輯模板，修改它們的輸出。大多數主題（如 Fable 或 Divi 主題）都會根據文章格式設定顯示自定義模板。關鍵程式碼通常位於文章模板的迴圈中（如 index.php 或 single.php）。
get_template_part( 'content', get_post_format() );
您無需新增此程式碼，Elegant Themes 主題和大多數專業主題都預設提供了此程式碼。
Get_template_part 可從特定的 PHP 檔案中提取模板，並可根據文章格式進行修改。因此，如果你想為旁白格式建立一個特殊模板，只需建立一個 content-aside.php 檔案，然後在其中開始編輯迴圈內容即可。
例如，Fable 主題中的 “畫廊”（Gallery）文章型別將圖片排列在一個網格上，並內建了對花式框彈出視窗的支援。這是在 “content-gallery.php “檔案中完成的。
如果你選對了主題，很多工作都會為你完成，但新增一些額外的功能也很有用。例如，我在第一步中為 Fable 主題新增了 “連結 “格式。我的連結文章非常簡單，只包含一個標題和一個連結。
連結文章示例
我真正想做的是調出這個 URL，當文章在我的主頁上列出時，將我的標題直接連結到一個外部頁面，而不是強迫使用者訪問單個文章，然後再點選連結。這超出了 CSS 的範圍，需要使用模板。
為樣式做好準備
我們需要使用一些自定義 CSS，這樣就能稍微突出連結文章，確保使用者知道他們正被引導離開網站。我想確保文章標題的顏色與網站上其他連結的顏色一致，並稍微改變一下背景。我還想在標題前使用一個連結圖示。
首先要做的是在子主題中建立一個圖片資料夾，然後將上面的連結圖片儲存為 “link.png”。接下來，我們將新增一些 CSS，確保我們的內容看起來獨一無二。
.home .format-link {
background: #eee !important;
}
.home .format-link .entry-title h2 {
color: #6ba7a5;
}
.home .format-link .entry-title h2:before {
display: inline-block;
content: " ";
background: url(images/link.png);
width: 75px;
height: 56px;
}
.home .format-link .entry-title p {
text-align: center;
}
在這裡，我們要編輯連結文章的背景和文字顏色。然後，我們使用 :before 偽選擇器在文章標題前新增連結圖示。如果還不清楚這是幹什麼的，沒關係。我們稍後會講到。
新增連結抓取功能
為了將我們的文章直接連結到外部連結，我們需要建立一個函式，從文章內容中抓取第一個連結，並返回 URL 供我們使用。然後，我們就可以在文章格式模板中使用該 URL，將標題直接連結到外部頁面。
開啟子主題資料夾下的 “functions.php” 檔案，新增此函式：
function get_my_url() {
if ( ! preg_match( '/<a\s[^>]*?href=[\'"](.+?)[\'"]/is', get_the_content(), $matches ) )
return false;
return esc_url_raw( $matches[1] );
}
該功能只需對文章內容進行排序，然後搜尋 a href= 標記。然後，它會從其中提取 URL 並返回給你。我們將在下一步中使用它。
設定我們的連結模板
接下來，我們需要為連結文章格式建立模板。為此，我們必須在子主題資料夾中建立一個名為 “content-link.php “的檔案。該檔案將接收任何文章格式為 “連結 “的文章，並使用該檔案來呈現其內容，而不是使用預設模板。現在，這個模板是空白的，所以還不能做什麼。讓我們新增程式碼。
<article id="post-<?php the_ID(); ?>" <?php post_class( 'entry' ); ?>>
<div class="container clearfix">
<header class="entry-title">
<?php if ( is_single() ) { ?>
<h1><?php the_title(); ?></h1>
<?php } else { ?>
<?php $myLink = get_my_url(); ?>
<h2>
<a href="<?php echo $myLink; ?>"><?php echo the_title(); ?></a>
</h2>
<p>This is an external link and will take you to a new page.</p>
<?php } ?>
<?php et_fable_post_meta(); ?>
</header>
</div> <!-- .container -->
<?php if ( is_single() ) : ?>
<?php get_template_part( 'includes/share', get_post_format() ); ?>
<?php endif; ?>
</article> <!-- .entry-->
這裡發生了很多事情，所以我將一點一點地介紹這段程式碼，以便你能看到它是如何設定的。
<article id="post-<?php the_ID(); ?>" <?php post_class( 'entry' ); ?>>
<div class="container clearfix">
<header class="entry-title">
這只是開始 HTML 結構的一些基本程式碼。我們正在新增 post_class 函式，以獲得適當的類（包括 .format-link）以及容器和標題元素。這些程式碼直接取自預設模板，也就是我主主題資料夾中的 “content.php” 檔案。您可以隨意編輯這部分內容，使其與您的主題相匹配。
<?php if ( is_single() ) { ?>
<h1><?php the_title(); ?></h1>
本節使用 “is_single” 條件標記來檢查我們是否在單帖頁面上。如果是，我們就用預設的 h1 標籤顯示標題。當然，使用者不應該訪問這個頁面，因為我們是從它連結出去的，但這是一個很好的後備方案。
<?php } else { ?>
<?php $myLink = get_my_url(); ?>
<h2>
<a href="<?php echo $myLink; ?>"><?php echo the_title(); ?></a>
</h2>
<p>This is an external link and will take you to a new page.</p>
<?php } ?>
這裡才是真正神奇的地方。我們使用之前建立的 get_my_url 函式，將文章中的第一個連結儲存到 $myLink 變數中。然後，在 h2 標籤中，我們在 a 元素中呼應出該連結。這樣，連結格式就不是連結到文章，而是連結到文章的第一個外部連結（在我們的例子中是 https://www.elegantthemes.com）。
接下來，我們只需新增標題作為連結文字。請記住，我們在 CSS 中新增了連結圖示，它會自動新增到每個標題之前。最後，我們將新增一段文字，告訴使用者他們將被引導到一個新頁面。
<?php et_fable_post_meta(); ?>
</header>
</div> <!-- .container -->
<?php if ( is_single() ) : ?>
<?php get_template_part( 'includes/share', get_post_format() ); ?>
<?php endif; ?>
</article> <!-- .entry-->
我們將使用預設模板中的相同標記來結束我們的文章，以確保文章在單個頁面上的渲染效果與正常情況相同，並且我們的所有 HTML 元素都是封閉的。
最後，我們將在主頁上以不同的外觀顯示連結文章。
當然，這只是開始。文章格式模板可以做很多事情，根據文章格式編輯和修改文章輸出，從而實現全方位的內容。如果您有興趣進一步瞭解其工作原理，我建議您深入瞭解內容模板，看看它們是如何工作的，或者訪問 WordPress codex 中關於文章格式的條目。
固定連結
我要與您分享的最後一個技巧是如何根據文章格式來組織您的文章。WordPress 自帶一個方便的函式 get_post_format_link，可以讓你連結到只包含特定文章格式的頁面。要使用它，只需在任何模板檔案中使用該函式即可。
<?php echo esc_url( get_post_format_link( 'aside' ) ); ?>
這將提供一個指向 “日誌” 文章列表的連結。換掉文章格式的名稱，以匹配連結到的文章格式。這在導航或將文章分組時非常有用。如果你的部落格大量使用文章格式，這將是組織內容的好方法。
小結
目前，關於文章格式的討論很多，它們的未來也有點懸而未決。但如果你執行的是一個內容驅動型部落格，它們可能是一個非常有用的工具，可以為你的文章增加一些可靠的額外功能。Elegant Themes 主題有很多文章格式，你可以探索幾乎所有的文章格式，瞭解它們是如何工作的。最好的入門方式就是直接進入！
評論留言