如何在WordPress中建立自訂單篇文章模板

WPressize Me

09/16/2022

如何在WordPress中建立自訂單篇文章模板

我們的一位讀者詢問我們如何在WordPress中建立自訂的單篇文章模板。在WPressize Me,我們幫助過許多網站所有者通過個別文章的獨特佈局來提升其博客。自訂單篇文章模板可以讓您為您的博客文章使用不同的設計,賦予每篇文章不同的外觀。許多WordPress主題提供一些頁面模板,但如果需要,您也可以創建自己的模板。

在本文中,我們將展示多種方法,讓您輕鬆創建WordPress中的自訂單篇文章模板,您可以選擇最適合您的方法。

何時需要自訂單篇文章模板?

有時您可能希望您的某些文章在WordPress網站上具有不同的外觀和感覺。例如,您可能希望對精選文章或特定類別的故事使用不同的佈局。此時,您就需要在WordPress中建立自訂單篇文章模板。

默認情況下,WordPress使用基於WordPress模板層次結構的單篇文章模板。所有主題都附帶一個single.php模板,默認用於您的所有單篇文章。有些主題還可能包含額外的模板或佈局選項,您可以使用它們。這非常像創建一個自訂頁面模板。大多數WordPress主題還附帶頁面模板,您可以在WordPress中編輯文章或頁面時使用它們。

使用區塊編輯器創建單篇文章模板

這種方法實際上並非真正創建一個文章模板,且靈活性有限。然而,這是保存您自己的單篇文章佈局並重複使用它們的最簡單方法。默認的WordPress區塊編輯器內置了一個功能,允許您保存和重用區塊。可重用的一個區塊是群組區塊。群組區塊允許您將多個區塊和整個文章佈局放入一個群組中。然後,您可以保存這個群組區塊並在其他文章中重用它。

首先,您需要在WordPress中創建一篇新文章。之後,簡單地將群組區塊添加到內容區域。現在,您可以開始在群組區塊中添加區塊,以創建您WordPress博客的單篇文章佈局。

您可以添加任何想要的區塊,包括列、媒體和文本、封面圖片等。一旦您對創建的佈局滿意,您需要將滑鼠移到群組區塊,點擊三點菜單圖標,然後選擇『添加到可重用區塊』選項。接下來,您需要為可重用區塊提供一個名稱,然後點擊保存按鈕。WordPress現在將保存您的可重用區塊,包括群組區塊內的所有區塊。

使用SeedProd創建自訂單篇文章模板

使用SeedProd創建自訂單篇文章模板是最簡單的方法。它是最佳的WordPress網站構建插件,無需編寫任何代碼即可創建漂亮的網站佈局和自訂模板。第一件事是安裝並啟用SeedProd插件。詳情請參閱我們的逐步指南:如何安裝WordPress插件。

創建自訂WordPress主題

首先,前往SeedProd » Theme Builder頁面,使用SeedProd的預製主題作為起點,這將用新的、自訂的設計取代您現有的WordPress主題。您可以通過點擊『主題』按鈕來完成此操作。您將看到不同類型網站的專業設計主題列表,例如現代商業、營銷代理、房貸經紀人主題等。查看選項,點擊勾選圖標選擇最符合您需求的主題。

自訂默認單篇文章模板

SeedProd的拖放式頁面構建器使自訂默認的『單篇文章』模板變得簡單。只需點擊模板下的『編輯設計』鏈接,這將在SeedProd的可視化編輯器中打開您的文章模板。SeedProd的可視化編輯器具有兩列佈局:左側是您可以添加到設計中的區塊和部分,右側是模板的預覽,您可以在實時中查看更改。

您還可以拖動左列中的區塊到預覽列中以添加更多區塊。SeedProd使用模板標籤來拉取動態內容,如文章標題、特色圖片、評論等,讓您無需逐篇編輯便可將內容添加到模板中。例如,您可以在文章內容末尾添加一個Posts區塊,顯示訪客閱讀完当前文章後可能想要閱讀的最近文章。這個區塊將自動在所有使用此模板的文章中顯示。

使用主題設置來創建自訂單篇佈局

許多流行的WordPress主題帶有內置設置,可自訂單篇文章模板的外觀。如果您的主題支持這些設置,您將能夠在文章編輯屏幕上找到它們。例如,Astra主題在編輯單篇文章時提供自訂選項,您可以使用這些選項更改側邊欄、隱藏標題、菜單等。許多頂級WordPress主題還附帶即用型模板,您可以在『模板』或『文章屬性』面板中找到它們,這些模板是完整佈局,無需配置即可使用。

使用代碼手動創建自訂單篇文章模板

這種方法有點高級,因為需要您編輯主題文件、複製和粘貼代碼,並可選擇添加自訂CSS。如果您之前沒有做過此類操作,請參閱我們的教程如何在WordPress中複製和粘貼代碼。首先,您需要在電腦上打開一個純文本編輯器,如Notepad,然後將以下代碼粘貼到其中:

<?php
/
* Template Name: Featured Article
* Template Post Type: post, page, product
*/

 get_header();
?
>

這段代碼定義了一個名為『精選文章』的新模板,使其可用於post、page和product文章類型。您應將此文件保存為wpb-single-post.php,並上傳到當前主題文件夾中。

這樣,您就可以在WordPress管理區域內創建或編輯一篇文章。在文章編輯屏幕上,您會注意到一個新模板面板或文章屬性元框,其中有一個選項可以選擇這個新模板。現在,您的模板實際上是空的,所以選擇它將顯示一個白色屏幕。要修正這個問題,可以從主題的single.php文件中複製代碼並用作起點,然後進行自訂。您可以添加自訂CSS類、移除側邊欄、創建全寬模板或其他任何您想要的更改。

根據分類創建自訂單篇文章模板

您可以根據分類使用自訂單篇文章模板嗎?例如,給旅遊類別中的文章佈局不同於攝影類別中的文章。這可以通過SeedProd主題構建器或代碼來實現。

使用SeedProd根據分類創建自訂單篇文章模板

之前我們介紹了如何自訂SeedProd主題構建器的默認單篇文章模板。您可以通過複製原始模板,然後在SeedProd的可視化編輯器中進行定制,這樣您可以為每個分類設置不同的佈局。

使用代碼根據分類創建自訂單篇文章模板

首先,您需要將此代碼添加到主題的functions.php文件中,或使用代碼片段插件:

define('SINGLE_PATH', TEMPLATEPATH . '/single');
add_filter('single_template', 'my_single_template');
function my_single_template($single) {
 global $wp_query, $post;
 foreach((array)get_the_category() as $cat) :
 if(file_exists(SINGLE_PATH . '/single-cat-' . $cat->slug . '.php'))
 return SINGLE_PATH . '/single-cat-' . $cat->slug . '.php';
 endforeach;
}

這段代碼首先檢查WordPress是否請求單篇文章,如果是,則指示WordPress在主題的/single/文件夾中查找模板。

接下來,您需要在該文件夾內創建模板文件,命名為single-cat-{category-slug}.php,並根據需要進行編輯。

根據作者創建自訂單篇文章模板

這可以通過遵循與分類相同的技術實現,您需要將以下代碼添加到主題的functions.php文件中:

define('SINGLE_PATH', TEMPLATEPATH . '/single');
add_filter('single_template', 'my_single_author_template');
function my_single_author_template($single) {
 global $wp_query, $post;
 $curauth = get_userdata($wp_query->post->post_author);
 if(file_exists(SINGLE_PATH . '/single-author-' . $curauth->user_nicename . '.php'))
 return SINGLE_PATH . '/single-author-' . $curauth->user_nicename . '.php';
}


Related Posts

  • 2024-07-20
  • WordPress 主题

您是否想在 WordPress 中為不同頁面使用多個佈景主題?可以自訂網頁的外觀和布局,為文章、頁面和部分區域建立模板。但是如果您想為網站的某些部分或頁面使用完全不同的佈景主題呢?本文將指導您如何在 WordPress 中為頁面使用多個佈景主題。

閱讀更多
  • 2024-07-19
  • WordPress 主题

您是否想在 WordPress 網站上添加回頂效果?這種效果在頁面較長時非常有用,可以讓用戶輕鬆返回頁面頂部,提升網站的用戶體驗。本文將教您如何使用 jQuery 和插件在 WordPress 中添加平滑回頂效果。

閱讀更多
  • 2024-07-13
  • WordPress 主题

您是否想在 WordPress 中創建一個自定義頁面?自定義頁面允許您使用與網站其餘部分不同的佈局。許多 WordPress 網站使用自定義頁面佈局來建立銷售頁面、登陸頁面、網路研討會頁面等。在這篇文章中,我們將向您展示如何輕鬆地在 WordPress 中創建自定義頁面。

閱讀更多

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>