WordPress短程式碼的終極指南

WordPress短程式碼是一項強大的功能，可以輕鬆完成很酷的事情。你幾乎可以用它們做任何事情。使用短程式碼，嵌入互動式元素或建立複雜的頁面佈局就像插入一行程式碼一樣簡單。

如果要新增相簿，只需輸入以下程式碼：

【gallery ids="47 ,86, 92, 64, 48, 75, 89, 80" columns="4" size="medium"】
####【】替換為[]

這將輸出一個帶有提到的影象ID的畫廊。它將有4列，它們的最大大小將是“medium”（由WordPress定義）。

不需要任何醜陋的HTML程式碼。

畫廊簡碼示例

短程式碼消除了對複雜指令碼的需要。即使您幾乎沒有程式設計技能，也可以在他們的幫助下輕鬆新增動態內容。

它們在WordPress開發人員中非常受歡迎，因為它們極大地幫助了自動化內容和設計建立。簡碼之於WordPress開發人員，就像巨集之於資料分析師，或鍵盤快捷鍵之於專業圖形設計師。

在本指南中，您將瞭解有關短程式碼的所有知識。您將通過建立自己的短程式碼瞭解如何使用Shortcode API。最後，我們將討論短程式碼的未來以及它們在WordPress的新區塊編輯器中的適用位置。

1. 什麼是短程式碼？
2. 預設的WordPress簡碼
3. 如何在WordPress中建立自定義短程式碼（初學者級別）
4. WordPress簡碼：優點與缺點
5. 簡碼和古騰堡區塊

什麼是短程式碼？

簡而言之，Shortcode = Shortcut + Code。

通常，短程式碼使用方括號標籤 [] 來定義它們的使用方式。每個短程式碼在站點中執行特定功能。它可以像格式化內容一樣簡單，也可以像定義整個網站的結構一樣複雜。

例如，您可以使用簡碼嵌入滑塊、表格或定價表。您甚至可以使用它們來建立可重複使用的頁面設計模板。

簡碼簡史

簡碼最初是由名為Ultimate Bulletin Board (UBB) 的線上論壇軟體流行起來的。1998年，他們推出了BBCode（公告牌程式碼），這是一組易於使用的標籤，供使用者輕鬆設定帖子的格式。

使用簡單的BBCode輕鬆格式化

作為一種輕量級標記語言，BBCode的工作原理與HTML相同，但它更簡單。

使用預定義標籤也更安全，因為使用者無法插入HTML程式碼並引入安全漏洞。例如，懷有惡意的使用者可以使用<script>標籤來執行JavaScript程式碼並破壞網站的功能。

不久之後，其他線上論壇軟體，如phpBB、XMB Forum和vBulletin，在他們的留言板中新增了BBCode功能。

短程式碼使管理員能夠更好地控制使用者可以做什麼和不能做什麼。此外，它們允許使用者通過簡單的標籤來格式化他們的內容。

由於相同的安全原因，WordPress會阻止PHP程式碼在站點內容中執行。為了克服這個限制，WordPress 2.5在2008年隨著Shortcode API的釋出引入了短程式碼功能。事實證明，它是許多WordPress外掛和主題開發人員最常用的功能之一。

什麼是WordPress簡碼？

WordPress短程式碼是方括號字串 ( [ ] )，它神奇地轉變為前端迷人的東西。它們為使用者提供了一種建立和更改複雜內容的簡便方法，而無需擔心複雜的HTML或嵌入程式碼。

WordPress簡碼簡單易用

兩種型別的短程式碼

WordPress中主要有兩種型別的短程式碼。

自閉合和封閉短程式碼可以在有或沒有屬性的情況下有效

自閉合短程式碼：這些不需要結束標記。

示例：相簿簡碼不需要結束標記。我們用不同的屬性新增它需要的一切。

封閉短程式碼：這些需要一個結束標籤。封閉短程式碼通常操縱開始和結束標記之間的內容。

例如：標題短碼被用於環繞任何內容的標題。它主要用於為影象新增標題，但它適用於任何HTML元素。

一些短程式碼可以使用或不使用屬性。這取決於它們是如何定義的。

預設的WordPress簡碼

WordPress帶有6個預設短程式碼：

• audio：在您的網站上嵌入音訊檔案。它包括簡單的播放控制元件，如播放和暫停。
• caption:用它在你的內容周圍加上標題。它主要用於新增影象標題，但您可以將其用於任何HTML元素。
• embed：擴充套件預設的oEmbed功能。此簡碼可讓您為嵌入設定不同的屬性，例如設定它們的最大尺寸。
• gallery：在您的網站上插入一個簡單的圖片庫。您可以使用屬性來定義使用哪些影象並自定義相簿的外觀。
• playlist：顯示帶有此自封閉短程式碼的音訊或視訊檔案的集合。你可以用它的style屬性給它一個很酷的“黑暗”模式。
• video : 嵌入視訊檔案並使用簡單的視訊播放器播放。此短程式碼支援嵌入以下格式的視訊：mp4、webm、m4v、webm、ogv、wmv、flv。

有關如何使用預設短程式碼以及它們支援哪些屬性的更多詳細資訊，您可以參考連結的Codex文件。

如何使用WordPress簡碼

在WordPress中使用短程式碼是一個簡單的過程。但這取決於您要將它們新增到站點的哪個位置。請務必閱讀短程式碼文件以瞭解其工作原理。瞭解它支援的屬性，這樣您就可以準確地獲得您想要的東西。

在頁面和文章中使用WordPress簡碼

首先，轉到要插入短程式碼的頁面/文章編輯器。

如果您使用的是Gutenberg編輯器，則可以在獨立的Shortcodes塊中新增shortcode標籤。我們可以在小工具部分找到它。

在古騰堡中新增短程式碼區塊

古騰堡的專用短程式碼區塊

還在使用經典編輯器（或外掛）？您可以以經典方式輸入短程式碼標籤。一些短程式碼甚至可能在編輯器螢幕中有一個按鈕可以輕鬆插入它們。

在經典編輯器中新增短程式碼

在側邊欄小工具中使用WordPress簡碼

也可以在側邊欄小部件中插入簡碼。要新增它們，請轉到外觀»小工具並將文字小工具新增到要新增快捷方式的部分。

使用文字小工具在側邊欄中新增短程式碼

將短程式碼貼上到文字小工具中並儲存。您可以訪問您網站的前端並在側邊欄中檢視短程式碼的輸出。

可以在側邊欄中看到簡碼輸出（相簿）

注意： WordPress 4.8及以下版本不支援側邊欄小工具中的短程式碼。閱讀WordPress 4.9更新中的小工具改進以瞭解更多資訊。

在頁首和頁尾中使用WordPress簡碼

WordPress短程式碼通常用於頁面、文章和小工具。但是您有一種簡單的方法可以在站點的任何位置插入短程式碼。

假設您想在頁尾或評論部分之前的所有帖子中新增號召性用語按鈕。該do_shortcode()回撥函式就派上用場了這裡。

您需要將以下程式碼新增到主題的header.php、footer.php或其任何模板檔案中：

<?php echo do_shortcode("[name_of_your_shortcode]"); ?>

這將在您插入程式碼的位置輸出短程式碼。

您需要在引號之間包含方括號以迴應短程式碼。僅僅包括它的名字是行不通的。

同樣，您可以使用do_shortcode()回撥函式在WordPress中的任何位置啟用短程式碼，例如在評論部分。

Shortcode API簡介

在WordPress的簡碼API定義瞭如何使用簡碼定製和擴充套件您的網站的功能。它使開發人員能夠建立獨特的內容（例如表單、輪播、滑塊等），使用者可以通過貼上相關的短程式碼將這些內容新增到他們的網站中。

在短程式碼的幫助下，您幾乎可以將您能想到的任何功能新增到您的網站。

API支援自閉合和封閉短程式碼。它處理所有棘手的解析，幷包含用於設定和獲取預設屬性的輔助函式。

藉助API，您可以直接深入開發和自定義短程式碼，而不是浪費寶貴的時間為您製作的每個短程式碼定義正規表示式。

瞭解短程式碼API的基礎知識

每次您在WordPress中開啟頁面或發帖時，它都會在處理網站內容時查詢已註冊的短程式碼。

如果找到註冊的簡碼，簡碼 API 將接管並返回簡碼的輸出。返回的輸出字串替換它新增位置中的短程式碼標籤。

您可以使用add_shortcode() 函式在WordPress中註冊一個短程式碼。這是它的完成方式：

add_shortcode( 'shortcode_name', 'shortcode_handler_function' );

• shortcode_name： WordPress 將在解析帖子內容時尋找的標籤。Shortcode API 建議您僅使用小寫字母、數字和下劃線來定義其值（避免使用破折號）。
• shortcode_handler_function：在 WordPress 確認存在已註冊的短程式碼後將執行的回撥函式。

短程式碼處理函式定義如下：

function shortcode_handler_function( $atts, $content, $tag ){ }

• $atts：一個關聯的屬性陣列（即鍵值對陣列）。如果沒有定義屬性，則預設為空字串。
• $content：包含的內容，如果您要定義封閉的短程式碼。它是處理函式的責任，以確保$含量值返回到輸出。
• $tag：短程式碼的標籤值（上例中的shortcode_name）。如果兩個或多個短程式碼共享相同的回撥函式（有效），$tag值將幫助您確定哪個短程式碼觸發了處理函式。

API解析短程式碼的標籤、屬性和包含的內容（如果有），繞過這些值到處理程式函式，處理程式函式處理它們並返回輸出字串。

此輸出字串替換您網站前端的短程式碼巨集。您最終在瀏覽器中看到的是此輸出。

在哪裡新增您的自定義短程式碼指令碼？

您可以將自定義短程式碼指令碼新增到主題的functions.php檔案或將它們包含在外掛中。

如果要將其新增到主題檔案，則可以按原樣執行add_shortcode()函式。

但是，如果您要將其新增到外掛中，我建議您僅在WordPress完全載入後才對其進行初始化。您可以通過將add_shortcode()函式包裝在另一個函式中來確保這一點。這稱為包裝函式：

function shortcodes_init(){
add_shortcode( 'shortcode_name', 'shortcode_handler_function' );
}
add_action('init', 'shortcodes_init');

add_action()函式將shortcodes_init函式掛鉤，使其僅在WordPress完成載入後啟動（稱為‘init’鉤子）。

如何在WordPress中建立自定義短程式碼（初學者級別）

現在我們已經介紹了基礎知識，是時候建立自定義短程式碼了。

要按照下面給出的步驟進行操作，您需要熟悉使用PHP程式碼和編輯WordPress主題檔案。當您完成本教程時，您將準備好啟動您的第一個自定義WordPress短程式碼！

我們將從最簡單的短程式碼開始，然後轉向更復雜的短程式碼。在掌握短程式碼的過程中享受您的短暫里程碑！

示例 1：使用 [current_year] 的簡碼

讓我們建立一個名為 [current_year] 的短程式碼，用於在您的網站上輸出當前年份。

如果您要向網站新增需要每年更新的內容，此短程式碼會很有幫助。例如，在您網站的頁尾中新增版權宣告。

我將使用準系統外掛來新增我的短程式碼功能。您可以將其新增到主題的functions.php檔案中並獲得相同的結果，但我不建議這樣做。不過可以測試和學習！

讓我們從建立一個外掛開始。在/wp-content/plugins/目錄中建立一個新資料夾。

注意外掛目錄的位置

我將我的外掛命名為“salcodes”，但您可以隨意命名它。

在salcodes外掛目錄中，建立一個同名的PHP檔案（salcodes.php）。完成後，將以下標題新增到您的外掛檔案中：

<?php
/*
Plugin Name:  Salcodes
Version: 1.0
Description: Output the current year in your WordPress site.
Author: Salman Ravoof
Author URI: https://www.salmanravoof.com/
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: salcodes
*/

這個簡單的外掛標頭檔案足以滿足我們的目的。您可以在WordPress Codex中瞭解有關外掛標頭要求的更多資訊。儲存此檔案，然後轉到您的WordPress儀表板以啟用外掛。

現在，讓我們註冊短程式碼及其處理函式。為此，請將以下程式碼新增到您的外掛檔案中：

/**
* [current_year] returns the Current Year as a 4-digit string.
* @return string Current Year
*/
add_shortcode( 'current_year', 'salcodes_year' );
function salcodes_init(){
function salcodes_year() {
return getdate()['year'];
}
}
add_action('init', 'salcodes_init');
/** Always end your PHP files with this closing tag */
?>

• PHP註釋中的@return標記定義了返回的輸出型別。其後是相同的簡短描述。
• current_year是短程式碼標籤或名稱。這定義了您需要在內容中新增的自關閉標籤，在本例中為 [current_year]。
• salcodes_year是將返回輸出字串的短程式碼處理函式的名稱。我們將在接下來的幾行中定義這個回撥函式。由於我們正在建立一個簡單的自關閉短程式碼，因此您不必向它傳遞任何變數值，例如$attributes、$content 或 $tag。
• salcodes_init是掛鉤到“init”的包裝函式，以確保僅在WordPress完成載入後註冊和執行短程式碼。WordPress的內建add_action()函式使這成為可能。
• getdate()是一個 PHP函式，它返回當前時間戳的日期資訊陣列。年份鍵儲存當前年份的值（作為4位字串）。因此，getdate()[‘year’]返回當前年份。這個輸出正是我們想要的。

儲存您的外掛檔案。現在是測試短程式碼是否按預期工作的時候了。

在您網站的任何位置新增短程式碼（頁面、文章、側邊欄小部件等）。我將它新增到我網站的側邊欄文字小工具。

通過將自定義短程式碼新增到站點來測試它

正如預期的那樣，它執行良好。

年份短程式碼的輸出

恭喜您達到第一個里程碑！

您剛剛建立的短程式碼沒有任何與之關聯的$attributes或$content變數。您將在以下示例中學習如何使用它們。

示例 2：CTA按鈕的簡碼

讓我們建立一個可定製的CTA按鈕短程式碼。這也將是自動關閉的（對不起$content，你需要堅持到下一個）。

我希望使用者能夠使用短程式碼屬性自定義CTA按鈕的大小和顏色。

由於最終輸出是一個按鈕元素，它的HTML屬性如href、id、class、target和label可用於輕鬆定製它。

您可以使用id和class屬性來設定按鈕的樣式，因為它們都是常見的CSS選擇器。

我沒有在這裡包裝我的處理程式函式以保持簡單的解釋。

/**
* [cta_button] returns the HTML code for a CTA Button.
* @return string Button HTML Code
*/
add_shortcode( 'cta_button', 'salcodes_cta' );
function salcodes_cta( $atts ) {
$a = shortcode_atts( array(
'link' => '#',
'id' => 'salcodes',
'color' => 'blue',
'size' => '',
'label' => 'Button',
'target' => '_self'
), $atts );
$output = '<p><a href="' . esc_url( $a['link'] ) . '" id="' . esc_attr( $a['id'] ) . '" class="button ' . esc_attr( $a['color'] ) . ' ' . esc_attr( $a['size'] ) . '" target="' . esc_attr($a['target']) . '">' . esc_attr( $a['label'] ) . '</a></p>';
return $output;
}

哇，這裡有很多東西要解開。我將逐行解釋它，以便您瞭解它是如何工作的。

• 我們在上一節中介紹了add_shortcode()函式及其工作原理。
• shortcode_atts()是一個WordPress函式，它將使用者短程式碼屬性與已知屬性相結合。它會在需要時填寫預設值（您也可以自己設定）。結果將是一個包含來自已知屬性的每個鍵的陣列，並與來自使用者定義的短程式碼屬性的值合併。
• 在短程式碼處理函式中，我們定義了一個變數 ( $a ) 並將其分配給shortcode_atts()返回的陣列。我們使用以下語法為屬性分配預設值：‘attribute’ => ‘default-value’。例如，在上面的程式碼中，我們使用語法‘label’ => ‘Button’將屬性標籤的預設值設定為Button。
• 我們可以使用陣列的PHP語法提取每個屬性鍵的值：$a[‘attribute’]。
• $output變數儲存按鈕元件的HTML程式碼（用“按鈕”類<a>標籤）。它是函式最終返回的字串。

如果要將預設連結設定為站點的主頁URL，可以使用WordPress函式home_url() 。

讓我們嘗試按原樣使用短程式碼，沒有定義屬性，看看輸出了什麼。

我正在將短程式碼新增到側邊欄文字小部件以對其進行測試

如果您想知道雙方括號 ( [[ cta_button ]] ) 的用途，它們被稱為轉義短程式碼。它們可以幫助您將站點中任何已註冊的短程式碼輸出為常規文字，如下圖所示。

CTA按鈕短程式碼的輸出顯示它按預期完美執行

沒有屬性的CTA按鈕的HTML輸出。

使用者可以使用簡碼自定義按鈕的大小和顏色。我們已經在處理函式中設定了它們的預設值，但是我們需要註冊樣式表並將其排入可用資源列表中。此樣式表應包含短程式碼中定義的所有類。

您也可以在主題的全域性樣式表中設定這些類，但建議單獨載入它們。這確保即使您更改或更新您的WordPress主題，這些類仍將與短程式碼一起載入。

/** Enqueuing the Stylesheet for the CTA Button */
function salcodes_enqueue_scripts() {
global $post;
if( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'cta_button') ) {
wp_register_style( 'salcodes-stylesheet',  plugin_dir_url( __FILE__ ) . 'css/style.css' );
wp_enqueue_style( 'salcodes-stylesheet' );
}
}
add_action( 'wp_enqueue_scripts', 'salcodes_enqueue_scripts');

salcodes_enqueue_scripts()函式定義了$post全域性變數，然後通過確認兩個條件：

• • is_a()：檢查$post是否是WP_Post物件的例項。它指的是WordPress中的所有文章型別。
  • has_shortcode()：檢查文章內容是否包含[cta_button]短程式碼。

如果這兩個條件都為true，則該函式會註冊CSS資料夾中包含的style.css樣式表並將其排入佇列。 plugin_dir_url( $file ) 函式，可以很容易地獲取外掛的目錄的URL。

我不會在此處向您展示CSS程式碼，但您可以在本節末尾連結的原始碼中找到它。

最後，讓我們通過將[cta_button]短程式碼新增到文章內容來測試它：

請注意自定義連結、顏色、大小和標籤屬性

下圖顯示了CTA按鈕在前端的外觀：

CTA按鈕現在具有新的URL、顏色、大小和標籤

現在您已經學習瞭如何定義自定義屬性和包含樣式，您可以向CTA按鈕短程式碼新增各種其他功能。例如，您可以為使用者提供新增動畫、懸停效果和各種其他按鈕樣式的選項。

示例 3：使用$content的簡碼

對於我們的最後一個示例，讓我們構建一個名為[boxed]的封閉短程式碼，它在帶有彩色標題的框中輸出其標籤之間的任何內容。

讓我們開始註冊短程式碼並定義其處理程式函式。

/**
* [boxed] returns the HTML code for a content box with colored titles.
* @return string HTML code for boxed content
*/
add_shortcode( 'boxed', 'salcodes_boxed' );
function salcodes_boxed( $atts, $content = null, $tag = '' ) {
$a = shortcode_atts( array(
'title' => 'Title',
'title_color' => 'white',
'color' => 'blue',
), $atts );
$output = '<div class="salcodes-boxed" style="border:2px solid ' . esc_attr( $a['color'] ) . ';">'.'<div class="salcodes-boxed-title" style="background-color:' . esc_attr( $a['color'] ) . ';"><h3 style="color:' . esc_attr( $a['title_color'] ) . ';">' . esc_attr( $a['title'] ) . '</h3></div>'.'<div class="salcodes-boxed-content"><p>' . esc_attr( $content ) . '</p></div>'.'</div>';
return $output;
}

• $content = null：這將短程式碼註冊為封閉型別。您可以在處理程式函式中使用$content變數來根據需要更改輸出。
• $tag = ”：這定義了簡碼的$tag變數。在這個例子中它不是必需的，但是包含它是一個很好的做法。

在本例中，我們使用內聯CSS樣式修改內容。

短程式碼中使用的任何類的樣式都像我們在前面的短程式碼示例中所做的那樣註冊和入隊。

但是有兩個短程式碼使用相同的樣式表意味著如果使用它們中的任何一個，您必須載入它。所以，讓我們更新salcodes_enqueue_scripts()函式：

/** Enqueuing the Stylesheet for Salcodes */
function salcodes_enqueue_scripts() {
global $post;
$has_shortcode = has_shortcode( $post->post_content, 'cta_button' ) || has_shortcode( $post->post_content, 'boxed' );
if( is_a( $post, 'WP_Post' ) && $has_shortcode ) {
wp_register_style( 'salcodes-stylesheet',  plugin_dir_url( __FILE__ ) . 'css/style.css' );
wp_enqueue_style( 'salcodes-stylesheet' );
}
}
add_action( 'wp_enqueue_scripts', 'salcodes_enqueue_scripts');

• $has_shortcode：一個使用者定義的變數，用於檢查頁面/文章上是否存在任一短程式碼。|| (或者operator)使這成為可能。

現在，讓我們用我們的[boxed]短程式碼進行旋轉。

新增boxed短程式碼以及標題、title_color和顏色屬性。

下面的螢幕截圖顯示了我們得到的輸出。

畢竟一個漂亮的盒子並不難得到！

既然您已經學會了如何製作自己的短程式碼，您就可以跳出 [box] 並賦予它們自己的旋轉。不要忘記與我們分享您的創作！

如果需要，您可以從這裡下載Shortcode Plugin原始碼。

WordPress簡碼：優點與缺點

優點

• 簡碼簡化了在WordPress站點中新增複雜功能的過程。您幾乎可以通過鍵入一行程式碼來新增任何內容。
• 短程式碼使開發工作流程自動化。每次要插入某個功能時，它們都無需編寫複雜的指令碼。
• 短程式碼比新增HTML程式碼或PHP指令碼更加使用者友好。
• 短程式碼可以捆綁在外掛中。即使您更新WordPress或更改/更新您的主題，短程式碼仍然有效並繼續像以前一樣工作。
• 在外掛中捆綁短程式碼使它們易於在多個WordPress網站中使用。如果您是處理許多站點的開發人員，那麼準備好所有自定義短程式碼是一個救星。
• 由於簡碼也接受屬性，使用者可以通過更改其屬性選項來修改相同簡碼的行為方式。

缺點

• 短程式碼對於終端使用者來說並不直觀，尤其是在頁面上使用了很多短程式碼時。在這種情況下，它們更適合開發人員。
• 很難通過檢視短程式碼來判斷它的作用。正是出於這個原因，WordPress核心團隊恰當地將它們命名為“神祕肉嵌入程式碼”。
• 如果您更改主題，與主題捆綁在一起的短程式碼將停止工作。
• 簡碼的語法不明確。例如，其中一些支援可選關閉，因此如果它們是巢狀的，您可以將它們用作自關閉或封閉或什至兩者。您可以猜測它是如何快速變得超級混亂的。
• 由於標籤衝突或互操作性問題，短程式碼可能會破壞HTML。在任何網站的前端看到它們從來都不是一個好景象。
• 短程式碼會給您的伺服器增加額外的負擔。隨著頁面/文章上短程式碼數量的增加，此負載也會增加。太多的短程式碼會使您的網站陷入困境（例如，大多數頁面構建器的輸出）。

簡碼和古騰堡區塊

引入古騰堡降低了短程式碼的可取性。使用者現在可以直接從編輯器介面新增區塊，而不用處理簡碼標記，無論它多麼簡單。

如果您想新增短程式碼，Gutenberg甚至帶有專用塊來新增短程式碼。區塊是新的簡碼。

如果你可以用一個短程式碼來做，你就可以把它作為一個區塊來做。” — James Huff，Automattic的工程師

這解釋了為什麼所有流行的短程式碼都被轉換為區塊。許多WordPress開發人員已經轉向讓他們的產品和服務專門與區塊編輯器 (Gutenberg) 一起使用。

但這並不意味著短程式碼的世界末日。WordPress核心團隊承諾對塊編輯器進行許多改進，您可以在2022主題中看到，但在那之前，短程式碼將繼續存在！

小結

使用短程式碼可以輕鬆地將複雜的功能新增到WordPress網站的任何位置。它們為使用者提供易於鍵入的標籤，可以使用這些標籤而無需擔心涉及複雜的程式碼。

雖然生活中可能沒有捷徑，但在WordPress中肯定有很多短程式碼可供使用。我最喜歡的是Angie Makes的Shortcodes Ultimate和Shortcodes。

如果你找不到你要找的那個，你可以自己建立一個。

您甚至可以使用Shortcoder外掛建立自定義短程式碼的快捷方式。它會為您處理所有必需品。請記住：人生苦短，請使用簡碼！