了解 WordPress 簡碼

如果您一直在使用 WordPress，那麼您可能已經使用了一些短代碼。

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

[example shortcode]

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

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

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

另請注意：閱讀這篇文章不需要任何 PHP 知識，但至少了解基礎知識會有所幫助。 此處涉及的代碼相當簡單，我已嘗試使其盡可能易於復制和自定義。 我將解釋每段代碼，但如果您是 WordPress 主題 PHP 的新手，請注意您的functions.php文件中的一些錯誤代碼可能會破壞網站。

一個有用的簡單短代碼示例

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

與其在 WordPress 可視化編輯器中創建框、圖像和文本並為其設置樣式（這充其量是一件痛苦的事，甚至可能是不可能的），我們只需創建一個短代碼來用一個簡單的片段輸出整個內容！

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

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

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

add_shortcode( 'author_bio', 'create_author_bio' );

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

在我們走得更遠之前，讓我們稍微分解一下這條線，以便我們了解這裡實際發生了什麼。 括號內的兩位文本或“參數”並不特別，真的。 他們只是名字。 讓我們來看看每一個的含義：

如何在 WordPress 中添加響應式穀歌地圖

無論您要去哪裡，Google 地圖都會為您指明方向。 在城市中導航時，能夠立即獲得方向變得至關重要。 作為最流行的地圖解決方案，廣告...

1. 第一個參數 - 在本例中為author_bio - 告訴 WordPress 您的短代碼的實際名稱。 這將是用戶可以在括號中鍵入以使用簡碼的文本。 因此，使用編寫的這段代碼， [author_bio]將是我們的短代碼來觸發我們的作者生物框。
   這段文字可以是任何東西，但最好盡量做到獨一無二。 這樣，您就不會冒與其他已安裝插件或主題中的其他人的短代碼名稱衝突的風險。
2. 第二個參數 - 在本例中為create_author_bio - 將 WordPress 指向它應該在使用此短代碼時執行的實際 PHP 函數。 我們將在下一步中創建該函數； 目前，我們只是讓 WordPress 知道它的名稱。 （此名稱也應該是唯一的，以避免衝突。）

因此，如果它有幫助，您可以考慮如下代碼：

add_shortcode( 'when_you_see_THIS_shortcode', 'do_THIS' );

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

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

現在我們需要真正製作我們剛剛命名的函數！

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

add_shortcode( 'author_bio', 'create_author_bio' );

function create_author_bio(){
//Code goes here!
}

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

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

第三步：讓函數做一些事情

現在剩下的就是讓我們的函數做我們想做的事！

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

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

<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>

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

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

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

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>';

}

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

Genesis子主題的簡單自定義

作為網頁設計師，我們一直期待著更高效地工作。 當我開始重新設計我的投資組合的一項姍姍來遲的任務時，我想起了我是多麼喜歡 WordPress 以及我有多快……

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

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

第 4 步：添加一些 CSS

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

可以將此 CSS 複製到您的（子）主題的style.css文件中，或者如果您正在運行 WordPress 4.7 或更高版本（您應該是！），您可以將此 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 不要創建我們的函數。 它非常簡單； 我們只是將現有代碼包裝在這個簡單的條件語句中：

if( !function_exists( 'create_author_bio' ) ){

//Our existing PHP goes here!

}

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

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

結論

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

這個簡碼可以很容易地適應將任何內容輸出到頁面。 GIF、HTML 和/或 JavaScript 的自定義塊、圖像或視頻……任何你想要的！

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

好消息：我們只介紹了短代碼的基礎知識，它們的功能還遠遠不止這些！ 我們將在下一部分中介紹“包裝”短代碼——可以包裹文本或內容塊的短代碼，從而為您提供更大的靈活性！