如何手動創建 WordPress 自定義模板 - 指南

已發表: 2020-11-20

如果您對網站的設計不滿意並且您選擇的主題沒有提供所需的自定義選項級別，那麼可能是時候考慮創建自己的自定義模板了！根據您的需要，此 WordPress 模板可以是自定義帖子模板或頁面模板或類別視圖。

WordPress 令人興奮的事情之一是，無論您的 WordPress 網站是如何構建的，您始終可以隨時更改佈局或設計。這可以通過覆蓋預製模板或創建自己的模板來完成。 WordPress 提供了極大的靈活性，讓您能夠為任何內容創建自己的模板。

儘管創建自己的模板開闢了豐富的設計可能性，但大多數 WordPress 用戶可能會迴避挑戰，因為他們擔心創建自己的 WordPress 自定義模板過於復雜。在這兩個系列文章中，我們將著眼於對您開放的兩個選項。首先，在本文中，我們將了解如何手動編寫自定義 WordPress 模板（提供了最大的靈活性），然後我們將研究如何使用流行的頁面構建器來承擔所需的一些繁重工作創建 WordPress 自定義模板時。

在本文中，我們將研究為頁面、帖子甚至帖子類別創建自定義模板的方法。讓我們先看看為什麼您可能需要自定義模板。

注意：本文假設您具備 HTML、CSS 和 PHP 的工作知識。

您何時需要自定義 WordPress 模板？

也許您還不確定為什麼您實際上需要使用 WordPress 自定義模板。解釋這一點的最簡單方法是舉個例子。

假設您有一個網站供您的業務使用。主題“二十二十”已激活，所有必要的頁面和帖子都已創建並填充了內容（文本和圖像）、摘錄和特色圖像。

常規設置也已配置，您已通過定制器進行了許多更改（例如鍊接顏色、封面模板覆蓋顏色等）

還創建了一個包含 5 個項目的菜單：主頁 - 公司簡介 - 服務 - 關於我們 - 聯繫我們

在服務部分有一個子菜單：服務 1 – 服務 2 – 服務 3。

因此，從 WordPress 開發人員的角度來看，您基本上擁有：

四個標準頁面（首頁-公司簡介-關於我們-聯繫我們）
一個存檔頁面（服務）
三個帖子頁面（服務 1 – 服務 2 – 服務 3）

默認情況下，所有 3 個服務發布頁面將具有相同的佈局。您當前必須通過選擇通過帖子屬性設置提供的三個模板之一來區分這些帖子的單獨佈局的唯一選項。

如果我們選擇每個不同的模板，我們會看到它們看起來像這樣：

默認模板

全寬模板

封面模板

如果幸運的話，這些樣式中的一種將適合您，您可以選擇將它們用於您的網站。但是，如果不是這樣，並且您發現自己對某些元素看起來不像“您想要的那樣”感到沮喪，那麼請不要擔心……這就是手動構建您自己的自定義 WordPress 模板的地方。

讓我們來看看使用自定義模板可以實現什麼。

如何手動創建自定義 WordPress 帖子模板

我們將在下面的教程中做的是創建一個完全個性化的帖子視圖，並將在其自己的 PHP 文件中指定。我們還將在帖子屬性的下拉模板菜單中添加一個名為“我的自定義帖子模板”的選項，該選項將對應於自定義帖子佈局並呈現我們獨特的結構。

第一步：將我們的模板介紹給 WordPress

首先，我們需要在您的 WordPress 主題根文件夾中創建一個名為“my-custom-post.php”的 PHP 文件（在我們的示例中，它位於 /themes/twentytwenty/）。

使用您喜歡的文本編輯器（如 Sublime）打開文件並添加以下內容：

 <?php /* * Template Name: My custom post template * Template Post Type: post */ get_header();

此行* Template Name: My custom post template定義了將在模板下拉菜單中顯示的名稱。看看下面的截圖，你會看到它是如何出現的。

* Template Post Type: post是可選的，它定義了模板將作為選項出現的帖子類型。由於我們已將其定義為“發布”，因此該模板不會出現在頁面的模板選項菜單中，如下例所示。

最後一行： get_header(); ?> get_header(); ?>檢索標題內容。

此時，如果您選擇“我的自定義帖子模板”作為我們的“服務 1”帖子的活動模板，則輸出將為空白。這是我們所期望的，因為我們還沒有向頁面添加任何結構。你會看到這樣的東西：

向我們的 WordPress 自定義模板添加結構

雖然完全有可能完全從頭開始為我們的頁面構建結構，但有時採用我們主題模板中使用的現有帖子結構然後對其進行修改會更容易。

如果我們看一下 WordPress 模板層次結構，我們可以看到，根據主題，單個帖子模板來自位於主題文件夾內的奇異.php 或 single.php 文件。

進一步澄清 - 當帖子和頁面使用相同的結構時，使用 single.php 文件，否則（例如在流行的 Astra 主題中）您將看到 single.php、page.php、archive.php 文件，它們是編碼分別為帖子、頁面和博客佈局提供不同的結構。

在本例中，使用 Twenty Twenty 主題，我們可以看到 single.php 文件使用 get_template_part 函數從 template-parts 文件夾中檢索請求的佈局。

 <main role="main"> <?php if ( have_posts() ) { while ( have_posts() ) { the_post(); get_template_part( 'template-parts/content', get_post_type() ); } } ?> </main><!-- #site-content -->

上面的代碼巧妙地檢查帖子中是否有內容，如果有，則使用所選模板指定的結構打印內容。這適用於所有情況，無論使用的是帖子、頁面還是存檔。

現在我們可以看到我們的主題是如何從現有模板中提取佈局數據的，我們現在可以開始構建我們自己的模板了。為了定義我們的模板的外觀，我們首先需要實際設計它。您可能希望您的帖子頁面採用以下格式佈局：

一旦您決定了佈局設計，您將需要使用 HTML、CSS 和 PHP 對其進行編碼。本文假設您具備這些語言的工作知識並且可以創建所需的佈局。採用上述設計，我們將編寫一些初始代碼，將其添加到您的 my-custom-post.php 文件中，如下所示：

 <?php /* * Template Name: My custom post template * Template Post Type: post */ get_header(); ?> <main class="mcpt-post" role="main"> <?php if ( have_posts() ) { while ( have_posts() ) { the_post(); ?> <h2><?php the_title(); ?></h2> <div> <div><?php the_excerpt(); ?></div> <div><?php the_post_thumbnail(); ?></div> </div> <div> <div> <span class="metakey">Author: </span><?php the_author_posts_link(); ?><br> <span class="metakey">Publish Date: </span><?php the_time('F jS, Y'); ?><br> <span class="metakey">Category: </span><?php the_category(', '); ?> </div> <div><?php the_content(); ?></div> </div> <?php } } ?> </main><!-- #site-content --> <style> .mcpt-post { width: 80%; margin: 0 auto; } h2 { text-align: center; } div#content-top-left { width: 30%; float: left; font-size: 26px; font-family: book antiqua; font-style: italic; padding: 30px; color: grey; } div#content-top-right { width: 70%; float: left; } div#content-main-left { width: 30%; float: left; padding: 30px; font-family: book antiqua; } div#content-main-right { width: 70%; float: left; padding-top: 30px; font-family: tahoma; color: slategray; } span.metakey { color: grey; } </style> <?php get_template_part( 'template-parts/footer-menus-widgets' ); ?> <?php get_footer(); ?>

我們的二十二十主題為發布元數據和我們可能想要發布的其他數據提供了快捷功能。雖然我們將使用默認的 WordPress 功能而不是使用這些功能，以便您的模板適用於任何主題。我們將使用的一個如下：

the_title() – 回顯帖子標題
the_excerpt() - 回顯帖子摘錄
the_post_thumbnail() – 輸出默認的帖子縮略圖大小。您可以使用 the_post_thumbnail() 選項輸出特定的特色圖像大小
the_content() – 輸出帖子內容

如果我們保存更新並現在查看“服務 1”帖子，我們將看到應用的自定義模板佈局。

如何創建 WordPress 自定義帖子類別模板

現在我們已經看到創建我們自己的帖子模板佈局是多麼容易，我們可以繼續並應用類似的原則來創建我們自己的類別視圖佈局。

一個簡單的方法是直接編輯 index.php 文件（位於我們的 /themes/twentytwenty/ 根文件夾中）。雖然直接編輯此文件可用於教程目的，但如果網站是活動的，那麼您可能需要使用子主題以確保下次更新主題時不會覆蓋任何更新。

如果我們查看 index.php 代碼，我們會注意到它主要由 PHP “if”條件填充，這些條件根據內容類型指定可用輸出。例如，以下代碼檢查內容是否包括帖子（它是帖子、頁面或存檔），或者它是否是搜索結果頁面並相應地顯示正確的內容。

 if ( have_posts() ) { . . . } elseif ( is_search() ) { . . . }

如果您正在使用 Twenty Twenty 主題學習本教程，請在您的 index.php 文件中找到以下代碼：

 $i = 0; while ( have_posts() ) { $i++; if ( $i > 1 ) { echo '<hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />'; } the_post(); get_template_part( 'template-parts/content', get_post_type() ); }

在template-parts/content.php中，我們可以看到使用“get_template_part”函數檢索內容。

我們不使用這些特定於主題的函數來指定我們的帖子類別頁面的佈局，而是對每個元素使用默認的 WordPress 函數。這意味著我們將上面的代碼更改為以下內容：

 while ( have_posts() ) { the_post(); include 'my-custom-category-view.php'; }

如果你目光敏銳，你會發現我們正在引用一個名為my-custom-category-view.php的文件，我們現在需要創建該文件並將其添加到主題的文件夾中（另一種方法是直接添加此信息到我們的index.php文件中，但是將其保存為單獨的文件要整潔得多。

創建一個my-custom-category-view.php文件並添加以下代碼：

 <div class="article"> <div class="featured-image"><!-- FEATURED IMAGE --> <?php the_post_thumbnail(); ?> </div> <div class="content"><!-- ARTICLE HEADER --> <?php the_title( '<h3><a href="' . esc_url( get_permalink() ) . '">', '</a></h3>' ); ?> <div class="intro-text"><?php the_excerpt(); ?></div> <div class="post-meta"> <div><span class="metakey">Author: </span><?php the_author_posts_link(); ?></div> <div><span class="metakey">Publish Date: </span><?php the_time('F jS, Y'); ?></div> <div><span class="metakey">Category: </span><?php the_category(', '); ?></div> </div> </div> </div>

您會看到我們已經能夠使用 the_title() 函數的更高級格式來指定帖子標題。使用 get_permalink() 函數生成了指向單個帖子頁面的鏈接。

最後，您現在需要在 style.css 文件中添加一些額外的樣式：

 .article { width: 80%; margin: 0 auto; font-family: book antiqua; clear: both; height: 320px; border-bottom: 1px solid darkgrey; } .article:nth-child(odd) .featured-image { float: right; } .featured-image { width: 40%; display: block; padding: 30px; float: left; } .article .content { display: block; padding: 30px; } .post-meta { margin: 0; } .post-meta div { width: 100%; } .article .content h3 { margin: 0; } .article .content h3 a { text-decoration: none; }

讓我們看看到目前為止我們已經完成了什麼：

好的！

正如您所看到的，儘管圖像調整仍然存在一些問題，因為它們的比例不同。我們可以通過在 CSS 中添加更多行來輕鬆解決此問題，以便居中裁剪圖像並提供固定尺寸：

 .featured-image img { width: 350px; height: 250px; object-fit: cover; }

當然，這樣一來，我們仍然使用原始圖像，從性能角度來看，這不一定是最佳的。這裡的最佳做法是使用 WordPress 圖像大小。如果您想讓您的新頁面佈局具有響應性，那麼還請查看此詳盡指南以獲取更多信息。

就是這樣，幹得好！您現在已經成功地為帖子類別視圖創建了您自己的個性化佈局和設計。

如何創建 WordPress 自定義頁面模板

到目前為止，我們已經為我們的帖子頁面創建了一個自定義佈局，還為類別結果創建了一個自定義佈局。您將能夠應用在為頁面創建自定義模板時使用的方法以及完全相同的原則。

不過，在結束本文之前，讓我們快速瀏覽一個稍微複雜一點的頁面模板。在這個例子中，我們將把我們的帖子頁面拉到我們的模板中，這樣我們就可以以它們在類別頁面中的外觀方式顯示它們，但具有頁面提供的可編輯性的額外好處（而不是類別頁面） .

我們的目標是創建一個概述“服務”頁面，其中列出了我們的三個業務服務（在本示例中，服務 1、服務 2 和服務 3）。無需手動將它們添加到我們的頁面，而是將它們動態地拉到頁面上。雖然在實踐中您可能不需要擔心這一點，但編碼原則對於理解和進一步展示 WordPress 提供的靈活性很有用。

首先，在您的主題文件夾中創建一個新文件，並將其命名為my-services-template.php 。完成此操作後，我們現在將添加一些必要的聲明註釋，就像我們之前使用單個帖子模板所做的那樣。我們還將使用 get_template_part() 函數。

 <?php /* * Template Name: My post category template * Template Post Type: page */ get_header(); ?> <div class="clear"></div> </header> <!-- / END HOME SECTION --> <div class="site-content"> <div class="container"> <div class="content-left-wrap col-md-9"> <div class="content-area"> <main class="site-main" role="main"> <?php while ( have_posts() ) : the_post(); // standard WordPress loop. ?> <?php get_template_part( 'template-parts/content', 'cat_services' ); // loading our custom file. ?> <?php endwhile; // end of the loop. ?> </main><!-- #main --> </div><!-- #primary --> </div> <div class="sidebar-wrap col-md-3 content-left-wrap"> <?php get_sidebar(); ?> </div> </div><!-- .container --> <?php get_footer(); ?>

get_template_part() 函數基本上是一種允許我們加載可重用代碼片段的機制。在這種情況下，它將獲取template-parts/content-cat_services.php 。在這個文件中，我們將插入一些代碼來輸出“服務”類別的帖子。

總之，這個文件中的代碼將做的是：

給分類頁面一個標題。
從數據庫中查詢指定類別的帖子。
循環瀏覽帖子並顯示每個帖子的佈局。

 <h1 align="center"><?php the_title(); ?></h1><!-- category page title --> <?php $args = array( 'cat'=>4, 'orderby' => 'title' ); $cat_query = new WP_Query( $args ); //Query the specified category's posts if($cat_query->have_posts()) { while( $cat_query->have_posts() ) { $cat_query->the_post(); //Loop through the posts ?> <div class="article"> <div class="featured-image"><!-- FEATURED IMAGE --> <?php the_post_thumbnail(); ?> </div> <div class="content"><!-- ARTICLE HEADER --> <?php the_title( '<h3><a href="' . esc_url( get_permalink() ) . '">', '</a></h3>' ); ?> <div class="excerpt-text"><?php the_excerpt(); ?></div> <div class="post-meta"> <div><span class="metakey">Author: </span><?php the_author_posts_link(); ?></div> <div><span class="metakey">Publish Date: </span><?php the_time('F jS, Y'); ?></div> <div><span class="metakey">Category: </span><?php the_category(', '); ?></div> </div> </div> </div> <?php wp_reset_postdata(); } } ?>

我們將在以後的文章中更徹底地檢查查詢。就本文而言，您需要了解的是$args = array( 'cat'=>4, 'orderby' => 'title' ); 正在檢索 ID 編號為 4 (ID=4) 的帖子類別。此類別編號與我們的“服務”類別相關。

那麼，如何查看每個類別的 ID？其實很簡單。轉到菜單帖子>類別並打開任何類別進行編輯。 ID在分類編輯頁面的URL中，如下圖：

要查看我們的新模板，我們需要轉到 Pages 並創建一個新頁面。在頁面編輯區域，您無需輸入任何內容。相反，只需選擇頁面屬性下拉模板菜單下的“我的帖子類別模板”選項。

最後，轉到菜單並為我們的新頁面添加一個“服務”項以替換當前的服務類別項。菜單現在應該是這樣的

讓我們看看我們做了什麼：

上面的方法展示瞭如何創建一個引入特定類別的 WordPress 自定義頁面模板（在本例中為我們的“服務”）。如果您為另一個類別頁面選擇相同的模板，您將再次看到服務類別帖子，因為我們特別要求使用類別 ID (ID=4)。因此，如果您想要一個引入不同類別的新頁面模板，您需要創建一個單獨的模板文件來執行此操作（並相應地更新類別 ID）。

結論

能夠為您的 WordPress 網站創建自己的自定義模板可以讓您最終控製網站的外觀。為您的帖子類型創建單個或類別視圖的自定義模板非常值得。當然，它不僅可以完全控制您網站的設計元素，還可以讓您快速復制未來頁面的特定佈局。

也可以看看

如何使用頁面構建器創建 WordPress 自定義模板 - 指南