如何在 WordPress 中添加短代碼

已發表: 2021-07-10

您想在您的網站上包含短代碼嗎？你來對地方了。在本指南中，我們將向您展示如何在 WordPress 中添加短代碼，並向您展示一些示例，以便您充分利用它們。

自從在 2.5 版中將短代碼添加到 WordPress 以來，用戶一直在使用它們來實現各種自定義。簡碼非常有用，它們允許我們在帖子、頁面以及我們網站上的幾乎任何地方運行特定的代碼。最重要的是，即使對於最沒有經驗的用戶，它們也非常易於使用。

什麼是簡碼？

短代碼將觸發由短代碼名稱指定的一段代碼，該名稱始終用方括號括起來，如下所示： [shortcode-name]

每個短代碼運行的代碼取決於短代碼的創建方式。許多插件提供自己的簡碼，WordPress 也默認包含一些。最好的部分是 WP 簡碼 API 允許您創建自己的自定義簡碼。

簡碼是開發人員的絕佳工具，因為它們允許您在網站的任何位置插入任何腳本。當您多次使用相同的腳本時，您可以簡單地使用相同的短代碼，而無需重複代碼。這可以幫助您節省時間並保持代碼乾淨。

此外，短代碼可以採用一些值，其工作方式類似於函數的參數。

[ shortcode val1='hi' val2='ok' ]

在打開和關閉這樣的[ shortcode ] some text [ /shortcode ]之類的短代碼時，也可以用作 HTML 標記。

總之，短代碼讓您無需編寫任何代碼（如果它是現有的短代碼）就可以在前端運行 PHP 腳本。 WordPress 和一些插件默認有一些簡碼，但您也可以根據需要創建自己的簡碼。

最後，有不同類型的簡碼：插入畫廊、WooCommerce 產品、表格、圖像等等。每個簡碼都是不同的，做不同的事情。

如果您需要更多信息，請查看有關簡碼的完整指南。

現在我們更好地了解了它們是什麼，讓我們看看如何將短代碼添加到您的 WordPress 網站。

如何在 WordPress 中添加短代碼

在我們開始之前，重要的是要注意，由於每個短代碼的構建方式不同，它們可以有或沒有值。這些值特定於每個短代碼，它們將值傳遞給代碼以獲得我們想要的結果。

正如我們之前提到的，有不同類型的短代碼，WooCommerce 短代碼是一些最常見的。例如， [ woocommerce_cart ]短代碼將在您粘貼的任何位置顯示 WooCommerce 購物車。

要對其進行測試，只需將短代碼粘貼到帖子或頁面上或像這樣輸入： [ woocommerce_cart ] 。然後，看看前端，你會在插入短代碼的地方看到 WC 推車。

注意：由於我們將編輯一些核心文件，因此在開始之前，我們建議您對您的網站進行完整備份並創建一個子主題。您可以通過編程方式或使用這些插件中的任何一個來創建一個。

添加帶有值的 WordPress 短代碼

現在讓我們使用默認庫 WordPress 短代碼來學習如何添加帶有值的短代碼。

圖庫短代碼顯示一個漂亮的圖片庫並支持多個值。您需要包含 ID 值以指定要在圖庫中顯示的圖像。此參數採用 ID 並顯示這些特定圖像。

例如，如果我們要顯示 ID 為 720、729、731 和 732 的圖像，我們將短代碼添加到帖子或頁面中，如下所示： [ gallery ids=”729,732,731,720” ]

要對其進行測試，只需粘貼短代碼，用您自己的 ID 替換圖像 ID。如果您不知道您的圖像 ID，請在媒體庫編輯器中打開它們，您將在瀏覽器 URL 上看到 ID，並在圖像詳細信息上看到永久鏈接。

在 WordPress 中添加簡碼 - 媒體庫中的圖像 ID

如果您使用的是經典文本編輯器，則只需將短代碼粘貼到內容中即可。另一方面，在古騰堡，您可以使用簡碼塊。此外，許多頁面構建器和主題包括您可以使用的其他一些短代碼管理解決方案。

古騰堡

古騰堡簡碼塊

經典編輯器

在經典編輯器中插入簡碼

添加短代碼後，檢查您網站的前端，您應該會看到如下內容：

WordPress畫廊簡碼

在模板文件中使用簡碼

使用 WordPress 短代碼的另一種方法是將它們添加到模板文件中。如果您想開發自定義解決方案，這對您來說是一個有趣的選擇。例如，這允許您在邏輯條件上運行簡碼或動態更改簡碼值，以及許多其他可能性。

您可以通過do_shortcode() PHP 函數在模板文件中使用短代碼。這是您可以在任何文件中使用的默認 WordPress 功能。

要從文件運行簡碼，只需添加以下內容：

echo do_shortcode(' [ gallery ids=”21,42,32,11” ] ');

現在自定義標題並在header.php文件中運行庫短代碼。為此，您需要使用子主題覆蓋此文件。有關如何自定義模板的更多信息，請查看本指南。

在您的 WordPress 儀表板中，通過轉到外觀 > 主題編輯器並打開header.php文件，將短代碼添加到您的標題中。轉到文件末尾並粘貼代碼，如下所示：

模板文件上的簡碼

在文件中包含上述腳本後，您將在標題中看到圖庫。

使用帶有 WordPress 鉤子的簡碼

以編程方式向 WordPress 添加短代碼的另一種方法是將它們與鉤子結合使用。如果您不熟悉鉤子，我們建議您查看本指南以了解有關它們的更多信息。

要使用帶有鉤子的短代碼，您需要do_shortcode()函數，就像我們在上一節中看到的那樣。

以下腳本適用於子主題的functions.php文件。我們使用wp_footer()鉤子，所以這將打印在網站的頁腳上。

/* Shortcode with wp_footer hook*/ add_action('wp_footer','QuadLayers_footer_shortcode'); function QuadLayers_footer_shortcode(){ echo do_shortcode(' /* Shortcode with wp_footer hook*/ add_action('wp_footer','QuadLayers_footer_shortcode'); function QuadLayers_footer_shortcode(){ echo do_shortcode(' [ products ids="623" ] '); } '); }

默認情況下，此短代碼隨 WooCommerce 提供，用於顯示產品。在本例中，我們使用它來顯示 ID = 623 的單個產品。

使用帶有 WordPress 鉤子的簡碼

有關如何在您的網站上自定義頁腳的更多信息，請查看本指南。

如何在 WordPress 中創建自定義簡碼

另一個有趣的選擇是創建自己的自定義簡碼。這並不難，但它需要一些基本的開發人員技能和一些編碼知識。如果您不是高級用戶，請不要擔心。即使是最沒有經驗的程序員也會發現這很容易。

WordPress 為我們提供了add_shortcode()函數來構建和添加我們自己的短代碼。讓我們看看如何使用此函數通過一些示例腳本創建自定義短代碼。

為登錄和註銷的用戶顯示不同的消息

以下腳本將創建一個簡碼並向用戶打印一條消息。為了讓它更有趣，我們應用了一個條件來為登錄和註銷的用戶顯示不同的消息。

 /* 短代碼登錄*/
add_shortcode('loggedin','QuadLayers_shortcode_loggedin');
函數 QuadLayers_shortcode_loggedin($atts){
    if(is_user_logged_in()==true){
        $response='您已登錄';
    }
    別的{
        $response='你已登出';
    }
返回$響應；
}

使用 if，我們檢查用戶是否已登錄，如果為真則顯示消息“您已登錄”，否則顯示“您已註銷”。

如何在 WordPress 中創建自定義簡碼

按 ID 顯示單個帖子

另一種選擇是添加一個 WordPress 簡碼，它顯示我們將作為簡碼中的值傳遞的指定帖子。

 add_shortcode('get-post','QuadLayers_shortcode_post');
函數 QuadLayers_shortcode_post($atts) {
    $a = shortcode_atts( array('id' => '',), $atts ); 
    $args = array('post_type' => 'post','p' => $a['id']); 
    $query = new WP_Query($args); 
    $query->the_post();
    $string = '<h3>'.get_the_title().'</h3>' ; 
    $string.=the_post_thumbnail();
    $string .= get_the_content();
    返回$字符串；
}

在此示例中，我們添加了短代碼[ get-post ] ，它看起來像這樣：

按 ID 顯示單個帖子

在邏輯條件下運行不同的簡碼

在此示例中，我們將創建一個自定義簡碼以在邏輯條件下運行不同的簡碼。

我們的自定義簡碼將顯示使用聯繫表單插件創建的不同表單。因此，我們將為登錄和註銷的用戶打印不同的表單。

 add_shortcode('show-form','QuadLayers_custom_shortcode');
函數 QuadLayers_custom_shortcode(){
    if(is_user_logged_in()==true){
        $response='<h3>聯繫我們</h3>';
        $response.='[wpforms]';
    }
    別的{
        $response='<h3>訂閱我們的時事通訊</h3>';
        $response.='[wpforms]';
    }
    echo do_shortcode($response);
}

再一次，我們使用條件if來檢查用戶是否登錄，並基於此顯示特定的表單。

在邏輯條件下運行不同的簡碼

筆記

創建簡碼時始終返回數據。如果你回應它，你可能會遇到一些與你應該顯示內容的位置有關的問題
do_shortcode(); 函數在大多數模板文件中都很好用，但由於需要回顯，它也可能會引發一些問題
許多插件提供您可以自由使用的簡碼。但是，某些簡碼可能不適用於帖子、頁面或嘗試在頁眉、頁腳或側邊欄小部件上使用它們時。這取決於簡碼的複雜程度及其構建方式
如果您在 Gutenberg 編輯器上使用自定義簡碼時看到一些錯誤，這意味著您的簡碼與古騰堡不兼容。無論如何它都可以在前端工作，您可以嘗試切換到默認編輯器以消除此錯誤

結論

總之，短代碼是有用的工具，可讓您在站點的任何位置運行特定的代碼。當您多次使用相同的腳本時，您可以創建一個短代碼並使用它來避免一遍又一遍地重複代碼。簡碼即使對於初學者也很容易使用，並幫助您節省時間。

在本指南中，我們看到了在 WordPress 中添加短代碼的不同方法。我們已經學習瞭如何在值、模板文件和鉤子中使用短代碼。最重要的是，我們了解瞭如何創建自定義短代碼，並為您提供了幾個示例腳本，您可以根據需要進行調整。

要了解有關短代碼以及如何自定義您的網站的更多信息，請查看以下帖子：

WooCommerce 簡碼：終極指南
如何自定義 WooCommerce 商店頁面
在 WooCommerce 中自定義產品頁面

您是否在 WordPress 網站中添加了簡碼？您按照本指南有任何問題嗎？在下面的評論中讓我們知道！