所有關於 WordPress 簡碼

已發表: 2021-02-19

如果您曾經使用過 WordPress 主題，那麼您可能遇到過 WordPress 短代碼……看起來有點像這樣：

 [button type="twitter"]

不過，您是否了解簡碼是什麼以及它們如何工作是另一回事！主題作者廣泛使用短代碼，但有時只是“假設”用戶會知道它們是什麼以及它們是如何工作的，而實際上它們可能會很混亂！

好消息是簡碼易於理解和使用。在本文中，我們將先看看短代碼，以了解如何充分利用它們，然後再了解如何構建自己的短代碼！

讓我們跳進去！

什麼是 WordPress 簡碼？

早在 WordPress 發布 v2.5 時（那是在 2008 年），WordPress 就引入了短代碼，從那時起，它們就被廣泛用於大多數主題和插件中。

那麼，簡碼到底是什麼？好吧，簡而言之（對不起，無法抗拒），短代碼是一些代碼，幾乎可以在您網站的任何地方使用以插入功能或功能。因此，您不必費力地編寫使用 HTML 的社交媒體圖標，而是可以插入一個短代碼，它“告訴”WordPress 在您插入某個短代碼的任何地方插入一個社交媒體圖標。（在此示例中）社交媒體圖標的樣式和功能由主題開發人員預先定義，因此從編程角度來看，所有繁重的工作都已為您完成。

因此，也許您想在博客文章的底部放置一個 Facebook 圖標。無需手動插入，添加超鏈接，更新圖標大小等，您可能需要做的就是放入主題作者“預編程”的短代碼，如下所示：

 social icon="facebook"]

在這一點上重申，您不能只添加自己設計的短代碼並期望它們能夠工作，這一點很重要。它們確實需要作為選項添加到您的主題中。通常，主題帶有許多預先構建的短代碼，主題說明將包括一個可用的短代碼列表供您選擇。

簡碼是非開發人員無需編寫代碼即可顯示多種類型內容的絕佳捷徑，也是一種可以為開發人員節省時間的工具。

您可以使用 WordPress 簡碼做什麼？

簡碼用於從號召性用語 (CTA) 按鈕、動態廣告框、聯繫表單、圖片庫、滑塊等插入廣泛的內容……但是，如上所述，簡碼選項是什麼可用的取決於您使用的主題和插件。

使用 Contact Form 7 插件的簡碼示例

使用簡碼的不僅僅是主題。當今最流行的聯繫表格插件之一，聯繫表格 7，使用簡碼允許用戶快速輕鬆地將聯繫表格嵌入到他們選擇的位置。

為此，一旦您安裝了 Contact Form 7，您只需執行以下操作即可將表單添加到頁面或在您的網站上發布。

第一步：

轉到菜單 Contact > Contact Forms 並創建一個新表單或使用插件隨附的現有表單。

複製與表單對應的[contact-form-7 title="Contact form 1"]短代碼。

第二步：

將短代碼粘貼到您希望表單出現的位置，如下所示：

保存頁面，然後您應該會看到：

就是這樣！您剛剛成功使用簡碼在您的網站上嵌入了聯繫表格。如您所見，短代碼非常易於使用，並且可以加快原本複雜且耗時的任務。

使用默認的 WordPress 簡碼

儘管您可能會使用的大多數簡碼都是在安裝主題或插件時引入的。然而，WordPress 本身確實有一些您可以使用的“默認”短代碼。這些包括：

聲音的
標題
嵌入
畫廊
播放列表
視頻

這些簡碼可在您的整個站點中使用，以添加一系列內容，例如音頻播放器。在下圖中，我們展示了在 Footer 小部件中使用的內容。

要了解如何更詳細地使用這些簡碼，請查看有關這些簡碼的 WordPress 支持文章。

那麼，當您使用的 WordPress 或主題/插件沒有提供您特定目的所需的短代碼時，您會怎麼做？容易……創建你自己的！

創建您自己的 WordPress 簡碼

WordPress 有一個 Shortcode API，可用於相對輕鬆地開發您自己的短代碼。讓我們來看看現在創建自己的短代碼所需的基本步驟。

第一步：

在此示例中，我們將創建一個 CTA（號召性用語）按鈕，讀者可以單擊該按鈕以重定向到聯繫表單。

為了幫助保持井井有條，我們建議您將所有短代碼保存在一個單獨的文件中（而不是將代碼添加到現有文件中）。為此，請在與主題的functions.php文件相同的文件夾下創建一個新的空文件，並將其命名為my-shortcodes.php 。在此之後將此文件包含到您的functions.php文件中，如下所示：

 include('my-shortcodes.php');

雖然正如我們剛才所說，我們建議在單獨的文件中創建您的短代碼，但為了本文的目的，我們將繼續將我們的新代碼直接添加到我們的functions.php文件中以幫助保留示例盡可能清楚。

我們將使用wp-includes/shortcodes.php文件中引入的add_shortcode函數。這個函數需要兩個參數，短代碼標籤和回調函數。

 add_shortcode( string $tag, callable $callback )

第二步：

這是您可以放入functions.php文件中的一段代碼：

 add_shortcode( 'my_cta_button', 'my_cta_function' ); function my_cta_function() { return '<span class="cta_button"><a href="THE_CONTACT_FORM_URL">Let us know you are interested</a></span>'; }

請注意，標記和函數名稱僅包含小寫字母和下劃線。

不要忘記將“THE_CONTACT_FORM_URL”替換為您要將用戶重定向到的聯繫表單的 URL。

此外，您可以選擇在style.css文件中使用此 CSS 代碼，以使按鈕看起來更具視覺吸引力：

 .cta_button a { color: white; text-decoration: none; } .cta_button { text-align: center; color: #fff !important; text-transform: uppercase; text-decoration: none; background: #ed3330; padding: 20px; border-radius: 5px; display: inline-block; border: none; transition: all 0.4s ease 0s; } .cta_button:hover { background: #434343; letter-spacing: 1px; -webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57); -moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57); box-shadow: 5px 40px -10px rgba(0,0,0,0.57); transition: all 0.4s ease 0s; }

第三步：

在網站內容中顯示您的簡碼就像在任何其他簡碼中一樣。在這個例子中，我們的簡碼是[my_cta_button] 。將此添加到帖子或頁面，當您查看頁面時應該會看到如下內容：

此示例輸出在我們提供的 PHP 代碼中預定義的內容。讓我們看看如何允許管理員用戶在需要時自定義簡碼輸出。

接受用戶屬性的簡碼

要創建具有用戶可編輯屬性的簡碼，您必須定義一個屬性數組，您希望允許用戶在回調函數中進行更改。例如，您可能希望能夠更改默認標題和按鈕的 url。

 add_shortcode( 'my_cta_button', 'my_cta_function' ); function my_cta_function( $atts ) { $params = shortcode_atts( array( 'title' => 'Let us know you are interested', 'url' => 'THE_CONTACT_FORM_URL' ), $atts ); return '<span class="cta_button"><a href="' . $params['url'] .'">' . $params['title'] .'</a></span>'; }

在上面的代碼中，我們使用了shortcode_atts函數將用戶定義的屬性與已知屬性結合起來。這樣，您必須為您需要的每個 CTA 按鈕創建一個不同的短代碼函數，但只有一個每次都重定向到用戶指定的任何地方。

這段代碼的使用應該這樣指定： [my_cta_button title='My Custom Title' url='MY_URL']

在模板文件中添加簡碼

從開發人員的角度來看，還有一種快速方法可以通過在相應的模板文件中調用短代碼來強制將短代碼包含在您網站的預定義位置。例如，如果我們希望 CTA 按鈕顯示在每個帖子或頁面的底部，我們可以編輯單個模板並使用do_shortcode函數。在 Twenty Twenty 主題中，我們編輯了singular.php文件並在主 div 容器的關閉下插入了這一行：

 <?php echo do_shortcode('[my_cta_button]'); ?>

結果將顯示在帖子內容下方和頁腳小部件之前。

結論

在結束本文之前，請記住，如果您使用主題或插件提供的簡碼，然後您禁用該主題/插件，那麼這些簡碼將停止工作（您將只剩下簡碼括號顯示在您網站的前端）。

有了這個小警告，在構建網站時，短代碼是一項非常有用的功能。它們在 WordPress 中被廣泛使用，如果您還沒有接受使用它們，那麼也許現在是時候重新審視一下短代碼了！