如何在您的 WordPress 主題中使用簡碼

已發表: 2023-06-13

你想在你的 WordPress 主題中使用簡碼嗎?

通常,您會在帖子、頁面或側邊欄小部件等內容區域中使用短代碼。 但是,有時您可能想在 WordPress 主題中添加一個簡碼。

在本文中,我們將向您展示如何輕鬆地將任何短代碼添加到您的 WordPress 主題。

How to use shortcodes in your WordPress themes

為什麼在您的 WordPress 主題中使用短代碼?

短代碼允許您向您的網站添加各種功能,包括圖片庫、表單、社交媒體源等等。

WordPress 帶有一些內置的短代碼,但也有許多流行的 WordPress 插件可以將短代碼添加到您的站點。

例如,WPForms 有易於使用的塊,但它也提供短代碼,以便您可以將表單添加到網站的其他區域。

An example of a WordPress shortcode, provided by WPForms

大多數時候,您會在帖子和頁面等內容區域中添加簡碼。

要了解更多信息,請參閱我們關於如何在 WordPress 中添加短代碼的完整指南。

Adding a shortcode block to a WordPress page or post

但是,有時您可能希望在 WordPress 主題文件中使用簡碼。

這允許您將動態元素添加到您無法使用標準 WordPress 帖子編輯器編輯的區域,例如 404 頁面。 這也是在多個頁面上使用相同簡碼的簡單方法。

例如,您可以將短代碼添加到主題的頁面或帖子模板中。

考慮到這一點,讓我們看看如何在 WordPress 主題中使用短代碼。 只需使用下面的快速鏈接直接跳轉到您要使用的方法。

  • 方法 1:使用全站編輯器(僅限塊主題)
  • 方法 2:編輯您的 WordPress 主題文件(適用於任何 WordPress 主題)
  • 方法 3:創建您自己的 WordPress 主題(完全可定制)

方法 1:使用全站編輯器(僅限塊主題)

在 WordPress 主題中使用短代碼的最簡單方法是使用完整的站點編輯器。 這允許您將簡碼塊添加到您網站的任何部分。

但是,此方法僅適用於基於塊的主題,如 Hestia Pro。 如果您沒有使用啟用塊的主題,那麼您將需要使用不同的方法。

要開始,請轉到 WordPress 儀表板中的主題 » 編輯器

Opening the WordPress full-site editor

默認情況下,完整的站點編輯器會顯示您主題的主頁模板,但您可以將短代碼添加到任何模板或模板部分,例如頁眉或頁腳。

要查看所有可用選項,只需選擇“模板”或“模板部件”。

Adding a shortcode to a WordPress template

您現在可以單擊要編輯的模板或模板部件。

例如,我們將向 404 頁面模板添加一個短代碼,但無論您選擇哪個模板,步驟都將完全相同。

Adding a shortcode to a WordPress theme using a full-site editor (FSE)

WordPress 現在將顯示模板或模板部分的預覽。

要添加簡碼,請繼續並單擊小鉛筆圖標。

Editing a WordPress theme's 404 template using the full-site editor (FSE)

完成後,單擊左上角的藍色“+”圖標。

在搜索欄中,您需要輸入“簡碼”。

Adding a shortcode block to a WordPress theme

當出現正確的塊時,將其拖放到主題模板上。

您現在可以粘貼或鍵入要使用的短代碼。

Adding Shortcode blocks to a WordPress theme

之後,繼續並單擊“保存”按鈕。

現在,只需訪問您的 WordPress 博客即可查看正在運行的短代碼。

An example of a shortcode, on a 404 page template

方法 2:編輯您的 WordPress 主題文件(適用於任何 WordPress 主題)

您還可以通過編輯主題文件向 WordPress 主題添加短代碼。 這種方法更高級,但它適用於每個 WordPress 主題。

如果您之前沒有向您的站點添加代碼,請查看我們的分步指南,了解如何在 WordPress 中復制和粘貼代碼。

您可以直接修改單個主題文件,但這使得在不丟失自定義的情況下更新 WordPress 主題變得困難。 因此,我們建議通過創建子主題來覆蓋主題文件。

如果您正在創建自定義主題,則可以添加或修改現有主題文件中的代碼。

編輯主題文件時,您不能以與標準內容區域相同的格式添加短代碼。 您不會看到簡碼的輸出,而是會在屏幕上看到簡碼本身。

發生這種情況是因為 WordPress 不會在主題模板文件中執行簡碼。 相反,您需要明確告訴 WordPress 使用do_shortcode函數運行短代碼。

有關更多信息,請參閱我們關於如何輕鬆添加自定義代碼的指南。

以下是您將添加到 WordPress 主題文件的代碼示例:

echo do_shortcode('[gallery]');

只需將“圖庫”替換為您要使用的短代碼即可。

如果您不確定在哪裡添加簡碼,請參閱我們的 WordPress 模板層次結構初學者指南。

如果您要添加帶有額外參數的短代碼,那麼代碼片段也會發生一些變化。

假設您使用 WPForms 創建了一個聯繫表單。 在這種情況下,您將需要使用標準的 WPForms 簡碼加上表單的 ID:

echo do_shortcode("[wpforms]");

故障排除:do_shortcode 不工作時該怎麼辦

有時,您可能會向主題文件添加簡碼,但代碼的輸出不會出現在您的 WordPress 網站上。 這通常意味著短代碼取決於 WordPress 插件或您網站上的其他代碼。

如果 do_shortcode 功能不起作用,請確保提供短代碼的插件已安裝並通過轉到插件»已安裝的插件激活。

在下圖中,WPForms 已安裝但已停用,因此echo do_shortcode代碼將不起作用。

How to instal and activate a WordPress plugin

您還可以通過將shortcode_exists()函數添加到 index.php 文件來檢查是否有可供您使用的簡碼。

在以下代碼段中,我們正在檢查 WPForms 代碼段是否可以在我們的網站上使用:

if ( shortcode_exists( 'wpforms' ))  {
  echo do_shortcode("[[wpforms]]");
}

如果您仍然沒有在您的網站上看到短代碼輸出,請嘗試清除 WordPress 緩存,因為您看到的可能是您網站的過時版本。

方法 3:創建您自己的 WordPress 主題(完全可定制)

另一種選擇是創建自定義 WordPress 主題。 這是一種更高級的方法,但它允許您向 WordPress 主題的任何區域添加任意數量的短代碼。 您還可以進行其他更改以創建完全具有您想要的功能和設計的主題。

過去,您需要遵循複雜的 WordPress 教程並編寫代碼來構建自定義 WordPress 主題。 但是,現在無需使用 SeedProd 編寫一行代碼即可創建自定義主題。

SeedProd 是最好的 WordPress 頁面構建器,還帶有主題構建器。 這使您可以使用拖放來設計自己的主題。

SeedProd's advanced theme builder feature

有關分步說明,請參閱我們的指南,了解如何創建自定義 WordPress 主題(無需任何代碼)。

創建主題後,您可以通過轉到SeedProd » Theme Builder將短代碼添加到 WordPress 網站的任何部分。

Custom WordPress theme templates

在這裡,找到要使用短代碼的模板。

然後,只需將鼠標懸停在該模板上,並在出現時單擊“編輯設計”。

Creating a custom theme using SeedProd

這將在 SeedProd 的拖放頁面構建器中打開模板。

在左側菜單中,滾動到“高級”部分。 在這裡,找到 Shortcode 塊並將其拖到您的佈局上。

Adding a Shortcode block to a theme using SeedProd

在實時預覽中,只需單擊以選擇簡碼塊。

您現在可以將簡碼添加到“簡碼”框中。

Adding a contact form to a WordPress theme using shortcode

默認情況下,SeedProd 不會在實時預覽中顯示簡碼輸出。

要查看您的簡碼,請單擊“顯示簡碼選項”切換。

Previewing the shortcode output in SeedProd

之後,您可能希望通過選擇“高級”選項卡向簡碼輸出添加一些樣式。

在這裡,您可以更改間距、添加自定義 CSS,甚至添加 CSS 動畫效果。

Styling shortcode output using the SeedProd theme builder

當您對頁面的外觀感到滿意時,只需單擊“保存”按鈕。

之後,選擇“發布”以使短代碼生效。

Publishing a custom WordPress theme using SeedProd

您現在可以訪問您的網站以查看正在運行的自定義短代碼。

我們希望本教程能幫助您了解如何在 WordPress 主題中使用短代碼。 您可能還想查看我們的指南,了解如何在 WordPress 中創建登錄頁面,以及我們的專家挑選的 WordPress 最佳社交媒體插件。

如果您喜歡這篇文章,請訂閱我們的 YouTube 頻道以獲取 WordPress 視頻教程。 您還可以在 Twitter 和 Facebook 上找到我們。