如何在 WordPress 中創建自定義單篇文章模板

您是否見過與同一站點上的其他帖子佈局完全不同的帖子詳細信息頁面？ 這可能是因為它使用的是自定義模板。 您可以為各個帖子分配自定義模板，從而提高網站外觀的靈活性。

有興趣學習如何創建自定義單篇文章模板嗎？ 在這篇文章中，我將向您展示如何輕鬆創建自己的！

自定義模板的好處

在我們開始創建之前，讓我們探討為什麼您可能需要自定義模板以及它的作用。

如果您希望特定的帖子或帖子類型從您的其餘內容中脫穎而出，您可能需要考慮創建一個自定義的單帖子模板。 此模板將僅應用於您分配給它的帖子，這意味著它可以具有與您的標準帖子完全不同的佈局。 然後，獨特的設計和佈局可以增加該特定帖子的用戶參與度。

準備好自己開發了嗎？ 創建和使用自定義帖子模板類似於自定義頁面模板。

如何創建自定義帖子模板

我將使用二十七主題作為我的示例，但任何主題的過程都是相同的。

在創建自定義帖子模板之前，我將首先創建一個子主題。 您可以在主主題中工作，但由於您正在創建自定義模板，如果您更新父主題，您將丟失您的模板。 因此，最好將自定義模板與主題分開。

對於自定義模板，您必須定義模板名稱（模板的名稱）和模板發布類型（將使用此模板的位置）。 它看起來像這樣：

 [php]
<?php
/* Template Name: Full Width Post * Template Post Type: post*/ /*顯示全寬單篇文章的模板。 */
get_header( );
?>
[/php]

保存文件時，保持文件名與模板名稱相關，例如full-width-post.php 。 如果您從管理面板查看帖子，它將在帖子屬性部分的下拉列表中顯示新模板。

我們的自定義模板已準備就緒，但還沒有用。 讓我們讓它更有益一點！

注意：我們將處理多個文件，因此請跟踪文件名和文件夾。

這是二十十七主題中博客文章頁面的當前佈局。 我對此很滿意，所以我們就這樣吧。

現在，假設您想要一些帖子的全角佈局。 我們會將帖子標題放在元數據上方。 元數據應該在頂部和底部有一個邊框，標題和元數據都應該居中對齊。 這是線框：

要進行此佈局，您需要找到負責顯示帖子詳細信息頁面的文件。 在大多數主題中， single.php是文件，除非有某些預定義的模板。 代碼結構因主題而異，因此可能需要一些學習才能了解您的特定主題的工作原理。

找到顯示帖子詳細信息頁面的文件後，您應該查看是否使用函數調用另一個文件或直接創建模板。 在這個主題為二十七歲的示例中，它是 get_template_part 函數。

get_template_part路徑是此處最重要的部分。

 [php]

<div class="wrap">

<div id="主要"; class="內容區域">
        	<main id="main"; 類=“網站主要” 角色=“主要”>
              	<?php /* 開始循環 */ while ( have_posts() ) : the_post(); get_template_part( 'template-parts/post/content', get_post_format() ); // 如果評論已打開或我們至少有一條評論，請加載評論模板。 if ( comments_open() || get_comments_number() ) : comments_template(); 萬一; the_post_navigation( array( 'prev_text' => '<span class='screen-reader-text'>' . __( '上一篇文章', 'twentyseventeen' ) . '</span><span aria-hidden="true" class="nav-subtitle">' . __( ' Previous', 'twentyseventeen' ) . '</span> <span class="nav-title"><span class=“nav-title-icon-wrapper”>' . twentyseventeen_get_svg( array( 'icon' => 'arrow-left' ) ) . '</ span>%title</span>',
                          	'next_text' => '<span class="screen-reader-text">' . __( '下一篇文章', 'twentyseventeen' ) . '</span><span aria-hidden="true"; class="nav-subtitle">' . __( '下一個', 'twentyseventeen' ) . '</span> <span class="nav-title">%title<span class="nav-title-icon-wrapper">' . twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ) 。 '</span></span>',
                    	));
              	結束; // 循環結束。
              	?>
[/php]

如您所見，它指的是一條路徑：

 [php]
get_template_part( 'template-parts/post/content', get_post_format()
);
[/php] 

所以在single.ph裡面調用了content.php文件來輸出帖子詳情頁。

現在您知道single.php文件是如何工作的，讓我們從中復制代碼並將其粘貼到我們之前在子主題中創建的full-width-post.php文件中。 由於它將是一個全角模板，我們將刪除側邊欄。

現在從上述路徑複製 content.php 文件。 您可以將其粘貼到模板文件所在的同一目錄中，但我建議遵循與父主題相同的文件夾結構。

您可以保持文件名不變，但如果您希望更改默認模板中的某些內容，則會導致衝突。 為避免出現任何問題，我建議重命名文件並使其與模板名稱保持相關，例如content-full-width.php 。

文件已就位，現在讓我們修改代碼以交換帖子標題和帖子元數據。

 [php]

<header class="entry-header">
        	<?php

        	如果 ( is_single() ) {
              	標題（ '

<h1 class="entry-title">', '</h1>

');
        	} elseif ( is_front_page() && is_home() ) {
              	標題（ '

<h3 class="entry-title"><a href="' . esc_url( get_permalink() ) 。 '' rel="書籤">', '</a></h3>

');
        	} 別的 {
              	標題（ '

<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) 。 '' rel="書籤">', '</a></h2>

');
        	}

        	如果（'帖子'=== get_post_type（））{

              	迴聲 '

<div class="entry-meta">';
                    	如果 ( is_single() ) {
                    	  	twentyseventeen_posted_on();
                    	} 別的 {
                          	echo twentyseventeen_time_link();
                          	twentyseventeen_edit_link();
                    	};
              	echo '</div>

<!-- .entry-meta -->';
        	};
        	?>
  	</標題>

<!-- .entry-header -->
[/php]

要使用此模板，請從 WordPress 管理員編輯所需的帖子並從下拉菜單中分配模板。

如果你在前端檢查帖子，它仍然不是全角的，但是標題和元數據已經交換了位置，所以我們知道帖子正在使用我們的自定義模板

我們必須添加一些 CSS 以使其全寬。 WordPress 會根據正文部分中的模板名稱自動生成一個類。

使用那個類來定位這個特定的模板。 您可以將 CSS 添加到子主題style.css文件中。

 [CSS]
.post-template-full-width-post.has-sidebar:not(.error404) #primary{
浮動：無；
寬度：自動；
}

.post-template-full-width-post .entry-header{
文本對齊：居中；
底部邊距：1.3em；
}

.post-template-full-width-post .entry-meta{
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
填充：15px 0；
}
[/CSS]

現在我們有了我們想要的佈局。 使用此模板的任何帖子都將具有完全相同的樣式。

您可以根據需要創建任意數量的自定義模板。 您甚至可以根據帖子類別創建模板。

我可以為此使用插件嗎？

如果您不熟悉 PHP 代碼，那麼您可以使用一些插件，但我必須承認，可用於創建自定義帖子模板的插件非常少，而且大多數都不是很有用，因為無論如何您都必須手動創建模板。

我發現 Post Custom Templates Lite 插件非常有用。 它是一個免費插件，允許您在漂亮的拖放界面中創建帖子模板而無需任何編碼。 它有很多定制選項，所以如果你想定制一個帖子模板，一般來說這個插件可以幫助你。

注意：免費版本只允許您自定義普通的帖子模板。 您必須使用專業版才能創建自定義帖子模板並獲得一些附加功能。

結論

無論您是手動工作還是使用插件創建自定義單篇文章模板，它都能讓您最重要的文章脫穎而出。 如需靈感，請查看 Brian Dean 的網站； 他為他的權威指南帖子使用了一個特定的模板，使它們看起來與他的其他帖子不同。

所以，試試看，創建您自己獨特的單篇文章模板吧！ 為了讓您構建的每個站點都獲得最佳結果，請選擇 WP Engine 的託管託管平台作為 WordPress 託管的單一來源！