了解 WordPress 簡碼

如果您長期使用 WordPress，您可能已經使用過一些簡碼。

短代碼是方便的小片段，可讓您將某種特殊功能插入到您的內容中，否則這些功能是不可能實現的。 例如：許多圖片庫和滑塊插件為您提供了一個簡碼，您可以將其簡單地插入到您的內容中的任何您喜歡的位置，以使適當的圖像出現在那裡。 短代碼通常看起來像這樣：

[example shortcode]

換句話說：短代碼會導致將它們放置在文本中的任何地方發生一些特殊的事情。
但是您不僅限於預定義的簡碼； 您可以定義自定義簡碼來做任何您想做的事！ 它們可以是簡單的、複雜的或介於兩者之間的任何東西。

在本系列中，我們將從一個簡單的短代碼開始，然後逐步學習一些更複雜（甚至更有用！）的示例。

注意：我們將在這裡主要使用 PHP，特別是在您主題的 functions.php 文件中。 如果您沒有使用子主題（或可以編輯而不必擔心更新會覆蓋您的更改的自定義/入門主題），您需要在開始之前創建一個子主題。

另請注意：閱讀本文不需要任何 PHP 知識，但至少了解基礎知識會有所幫助。 這裡涉及的代碼比較簡單，我們盡量做到了方便複製和定制。 我們將解釋每一段代碼，但如果您對 WordPress 主題 PHP 完全陌生，請注意您的functions.php文件中的一些錯誤代碼可能會破壞該站點。

一個有用的簡單簡碼示例

假設我們想要一個短代碼，將一個特殊的作者信息部分注入到帖子中，如下所示：

我們不會在 WordPress 可視化編輯器中創建和設置框、圖像和文本的樣式，而是創建一個簡碼，用一個簡單的片段輸出整個內容！

（旁注：WordPress 有更好的方法來處理作者簡介，但我們堅持使用這個示例，因為它很好地展示了使用短代碼將特定內容塊放在頁面上是多麼容易。）

第 1 步：在主題的 functions.php 文件中添加簡碼

您將使用add_shortcode函數為您的短代碼命名，並告訴 WordPress 在使用該短代碼時它應該做什麼。 將此行添加到主題的functions.php文件中：

 [php]add_shortcode( 'author_bio', 'create_author_bio' );[/php]

在functions.php中的什麼位置並不重要，但為了避免衝突，我們建議將其放在最後。 （但是，如果文件以關閉的 ?> 標記結尾，它應該就在該標記之前，而不是之後。）

在我們繼續之前，讓我們稍微分解一下這條線，以便我們了解這裡實際發生的事情。 括號內的兩位文本或“參數”並不特殊，真的； 他們只是名字。 讓我們回顧一下每一個的含義：

1. 第一個參數：在這種情況下， author_bio – 告訴 WordPress 您的短代碼的實際名稱。 這將是用戶可以在括號中鍵入的文本以使用短代碼。 因此，根據編寫的代碼， [author_bio]將成為我們觸發作者簡介框的簡碼。
   此文本可以是任何內容，但最好始終保持獨特。 這樣，您就不會冒著您的簡碼名稱與其他已安裝的插件或主題中的其他人的名稱發生衝突的風險。
2. 第二個參數：在這種情況下， create_author_bio – 將 WordPress 指向它應該在使用此短代碼時執行的實際 PHP 函數。 我們將在下一步中創建該功能； 現在，我們只是讓 WordPress 知道它的名字是什麼。 （這個名字也應該是唯一的，以避免衝突。）

因此，如果有幫助，您可以考慮這樣的代碼：

 [php]add_shortcode( 'when_you_see_THIS_shortcode', 'do_THIS' );[/php]

如果您對更具體的細節感興趣，請查看add_shortcode Codex 條目。

第 2 步：創建處理簡碼的函數

現在我們需要實際創建我們剛剛命名的函數！

由於我們剛剛在最後一步中告訴 WordPress 我們函數的名稱是 create_author_bio，一旦我們添加了新函數，我們的代碼現在應該如下所示：

 [php]add_shortcode( 'author_bio', 'create_author_bio' ); function create_author_bio(){ //Code goes here! }[/php]

您可能會注意到此函數實際上還沒有執行任何操作； 它裡面的所有內容都是評論。 我們將在下一步中解決這個問題。 現在，我們只想指出這裡實際上只有兩部分：簡碼的註冊和使用時發生的功能。 WordPress PHP 看起來很嚇人，但它真的很簡單！

旁注： create_author_bio函數是在add_shortcode函數之後還是之前並不重要。 在這種情況下，順序並不重要。

第 3 步：讓函數做某事

現在剩下的就是讓我們的功能做我們想做的事！

像這樣的函數可以做任何事情，但無論如何，它最終應該返回一個值（例如一串文本或一個數字）。 該值可以是任何長度或複雜性，但無論函數返回什麼，都會在使用我們的短代碼的任何地方出現。

出於我們的目的，這只是一些簡單的 HTML。 這是將我們的作者圖像和生物添加到具有自定義類的<aside>元素中的標記（但不要將它放在任何地方；我們只是暫時將其視為預覽）：

 [html]<aside class="author-bio-box"></span> <img src="https://upload.wikimedia.org/wikipedia/en/1/1f/Bilbo_Baggins_Tolkien_illustration.jpg"> <p>Bilbo Baggins is the author of <cite>The Hobbit</cite>, translator of various works from the elvish, and author of a number of poems and songs.</p> <p>He is the oldest Hobbit ever in Middle Earth, and spends his days in his Tol Eressea home across the sea.</p> </aside>[/html]

最終，我們將在第一行使用 author-bio-box 類來使用 CSS 設置 bio 的樣式。 （我們將使用一個類而不是 ID，以防萬一您想為多個作者編寫的內容添加多個作者簡碼。）但是請記住，這可以是我們想要放入頁面中的任何內容！

現在，我們需要做的就是讓我們的簡碼函數返回上面的 HTML！

由於functions.php文件應該只包含......好吧，PHP 函數（也是為了整潔），我們已經刪除了我們剛剛查看的那些 HTML 元素之間的換行符和空格，並將它們塞進一個字符串中（在單引號內） . 但在功能上，它仍然是我們剛剛在上面看到的相同的 HTML 片段，這就是我們最終的 PHP 代碼應該看起來的樣子：

 [html]add_shortcode( 'author_bio', 'create_author_bio' ); function create_author_bio(){ return '<aside class="author-bio-box"><img src="https://upload.wikimedia.org/wikipedia/en/1/1f/Bilbo_Baggins_Tolkien_illustration.jpg"><p>Bilbo Baggins is the author of <cite>The Hobbit</cite>, translator of various works from the elvish, and author of a number of poems and songs.</p><p>He is the oldest Hobbit ever in Middle Earth, and spends his days in his Tol Eressea home across the sea.</p></aside>'; }[/html]

我們完成了 PHP！ 一旦我們保存了包含上述最終代碼的functions.php文件，任何作者只需在任何頁面或帖子中輸入[author_bio] ，上述 HTML 就會出現在短代碼的位置！

另外，真正酷的是：如果我們需要更新我們的簡歷，我們不需要編輯它出現的每一個地方！ 相反，我們需要做的就是編輯我們的functions.php文件中的代碼，它會立即在所有地方更新。 整潔吧？

然而，為了充分利用這一點，我們可能想要為生化盒添加一些特殊的樣式。

第 4 步：添加一些 CSS

如果沒有一些樣式，簡碼就不是很好，所以讓我們添加它吧！ 您可能需要稍微調整一些值，具體取決於您自己網站的字體（上圖中的字體是 Fanwood Text）以及已經存在的 CSS 規則。 或者您可能只是想嘗試一些不同的東西！

此 CSS 可以復製到您的（子）主題的style.css文件中，或者如果您運行的是 WordPress 4.7 或更高版本（您應該是！），您可以將此 CSS 粘貼到自定義中的“附加 CSS”框中屏幕：

 [css].author-bio-box { background: #d4ead9; padding: 2em; overflow: auto; font-family: Fanwood Text; font-size: 1.2em; line-height: 1.4em; } .author-bio-box img { float: left; max-width: 128px; height: auto; margin: 0 1em 0 0; } .author-bio-box > p:first-of-type:first-letter { font-size: 3.1em; line-height: 1; float: left; margin-bottom: -.2em; } .author-bio-box > p:last-of-type { margin: 0; }[/css]

現在事情應該看起來好多了。 但是請隨意使用 CSS 使作者框成為您自己的，並讓它在您的網站上有賓至如歸的感覺！

推薦：使功能“可插入”

這不是短代碼特有的，也不是代碼工作所必需的，但這是最佳實踐，現在是提及它的好時機。

首先，了解一下 PHP 的工作原理：

還記得我們如何自己命名create_author_bio函數嗎？ 好吧， create_author_bio; 我們可以很容易地為我們的函數命名任何我們想要的名字（儘管最好是函數名稱至少給你一點關於它做什麼的提示，這就是我們選擇create_author_bio的原因）。

但事情是這樣的：如果兩個 PHP 函數被命名為相同的東西，結果將是一個阻止站點加載的致命錯誤，因為 PHP 不知道哪個函數是正確的。 PHP 不猜測，所以它就停止了。

我們需要擔心的不僅是我們的代碼； 一個 WordPress 站點可能使用來自數十個甚至數百個不同開發人員的代碼，具體取決於安裝的插件和主題。 如果同一個函數名被使用兩次，一切都會崩潰！

這很糟糕，顯然，我們希望確保這種情況永遠不會發生。

我們可以通過使我們的功能“可插入”來做到這一點； 換句話說，告訴 WordPress 如果另一個同名函數已經存在，則不要創建我們的函數。 它非常簡單； 我們只是將我們現有的代碼包裝在這個簡單的條件語句中：

 [php]if( !function_exists( 'create_author_bio' ) ){ //Our existing PHP goes here! }[/php]

該條件 if 表達式只是檢查以確保名為create_author_bio的函數尚不存在。 到目前為止，我們使用的所有 PHP 代碼都可以移動到該語句內，在{ }大括號之間。

不過，最好還是盡可能獨特地命名函數！ 使我們的函數可插入只能避免致命錯誤。 因此，如果存在命名衝突，我們的短代碼仍然無法正常工作，但至少該站點仍然可以正常運行，其他任何東西都不會被破壞。

結論

就是這樣！ 希望您喜歡創建自定義作者簡介簡碼！ 如果您已經跟進，您需要做的就是在頁面或帖子的任意位置鍵入[author_bio] ，您的代碼就會出現！

這個短代碼可以很容易地修改為將任何內容輸出到頁面。 gif、HTML 和/或 JavaScript 的自定義塊、圖像或視頻……任何你想要的！

但是，如果您只需要將單個靜態值輸出到頁面某處，則此示例很有用，但它不是很靈活。 它每次都會返回完全相同的東西，我們經常需要短代碼比這更具適應性。

好消息：我們只介紹了短代碼的基礎知識，它們的功能遠不止於此！