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

您想在您的 WordPress 主題中使用短代碼嗎?通常,您將在帖子、頁面或側邊欄小部件等內容區域內使用簡碼。但是,有時您可能希望在WordPress主題中添加一個短代碼。在本文中,我們將向您展示如何輕鬆地將任何短代碼添加到您的 WordPress 主題中。

如何在WordPress主題中使用短代碼

爲什麼要在你的WordPress主題中使用簡碼?

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

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

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

由WPForms提供的WordPress短代碼示例

大多數情況下,您將在帖子和頁面等內容區域中添加短代碼。

將簡碼塊添加到WordPress頁面或帖子

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

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

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

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

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

但是,此方法僅適用於基於塊的主題,例如 Hestia Pro。如果您沒有使用啓用塊的主題,則需要改用其他方法。

要開始使用,請轉到 主題 » 編輯器 在 WordPress 儀表板中。

打開WordPress全站編輯器

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

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

將簡碼添加到WordPress模板

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

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

使用全站點編輯器 (FSE) 向 WordPress 主題添加簡碼

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

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

使用全站編輯器 (FSE) 編輯 WordPress 主題的 404 模板

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

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

將簡碼塊添加到WordPress主題

出現右側塊時,將其拖放到主題模板上。

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

將簡碼塊添加到 WordPress 主題

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

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

404 頁面模板上的短代碼示例

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

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

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

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

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

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

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

echo do_shortcode('[gallery]');

只需將“圖庫”替換爲您要使用的簡碼即可。

如果要添加帶有額外參數的簡碼,則代碼片段也會稍有變化。

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

echo do_shortcode( "[wpforms id='92']" );

故障排除:當do_shortcode不起作用時該怎麼辦

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

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

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

如何安裝和激活WordPress插件

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

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

f ( shortcode_exists( 'wpforms' ))  {
  echo do_shortcode("[[wpforms id='147']]");
}

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

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

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

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

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

種子生產的高級主題構建器功能

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

自定義WordPress主題模板

在這裏,找到要使用簡碼的模板。

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

使用 SeedProd 創建自定義主題

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

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

使用 SeedProd 將簡碼塊添加到主題

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

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

使用簡碼將聯繫表單添加到 WordPress 主題

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

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

在種子生產中預覽簡碼輸出

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

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

使用 SeedProd 主題構建器設置簡碼輸出樣式

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

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

使用 SeedProd 發佈自定義 WordPress 主題

您現在可以訪問您的網站以查看自定義簡碼的實際效果。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章