WordPress小工具完整指南：如何使用、新增和實施它們來自定義您的網站

WordPress小工具非常有用。它們允許您在文章正文或頁面本身之外向您的網站新增各種額外內容，從而鼓勵使用者獲取資訊、關注連結或採取行動。

在這篇文章中，我將向您展示您需要了解的有關WordPress小工具的所有資訊。如何將它們新增到您的站點，如何建立小工具區域以放置它們，如何安裝為您提供更多它們的外掛，如何編寫自己的小工具，等等。

1. 什麼是WordPress小工具？
2. 何時使用WordPress小工具
3. WordPress中的11個小工具示例
4. 如何將小工具新增到您的WordPress網站
5. 如何為您的主題新增新的小工具區域
6. 如何使用小工具API編寫小工具

首先，讓我們從識別什麼是WordPress小工具開始。

什麼是WordPress小工具？

在WordPress中，小工具是位於頁面流或釋出內容之外的內容片段。

小工具包含獨立於單個文章或頁面的資訊、導航或媒體。在大多數情況下，每個小工具都會顯示在站點的每個頁面上，但您也可以為特定頁面（例如主頁）註冊小工具區域。

要將小工具新增到您的站點，您需要將其新增到小工具區域。小工具區域是由您的主題建立的，因為它們與您網站的設計和佈局有關，而不是與功能有關。

大多數WordPress主題在側邊欄和頁尾中都有小工具區域，儘管有些主題會在很多地方有多個小工具區域，例如內容下方或上方或標題中。

下面是我自己的網站之一的螢幕截圖，顯示了側邊欄和頁尾中的小工具。

我網站中的小工具區域

WordPress預裝了一堆小工具，因此您無需安裝任何外掛或編寫任何程式碼即可使用它們。但是您也可以通過安裝外掛或編寫自己的程式碼來新增更多小工具。

這些可以涵蓋廣泛的內容型別，例如媒體、社交媒體提要、導航、搜尋、地圖等等。您可能希望在您的網站上找到的小工具很少。事實上，最大的挑戰往往是在所有選項之間做出選擇，而不是過火。

何時使用WordPress小工具

每當您想向站點中的一個或多個頁面新增額外內容（當我說頁面時，我包括文章、檔案等）時，您都應該使用小工具，但這不是該頁面內容的一部分。它們對於您希望在網站的每個頁面上顯示的內容特別有用，例如您的最新文章列表、購物車或號召性用語按鈕。

想想有多少使用者需要訪問每個小工具，以及當您決定將其放置在何處時它的重要性。側邊欄中的小工具將比頁尾中的小工具更突出，一些使用者甚至可能看不到。

因此，最新的文章小工具或號召性用語小工具在人們有更多機會與他們互動的側邊欄中可能會更好，而社交媒體提要可以放在頁尾中。

如果您的主題還具有用於主頁的特殊小工具區域，您可能希望使用這些小工具區域在您的站點的部門、相關內容列表或媒體（例如歡迎人們訪問站點的視訊）中導航。

WordPress中的11個小工具示例

瞭解WordPress小工具提供的可能性的最佳方法是檢視它們的一些示例。讓我們看一下您經常在WordPress網站上看到的11種型別的小工具。

1. 最近的文章小工具

最近的文章小工具可能是部落格中最常用的小工具。

它使您可以在站點上每個頁面的側邊欄或頁尾中顯示最新文章的列表，從而增加人們瀏覽該站點並閱讀大量文章的可能性。

最近的文章小工具預裝了WordPress。它使您可以設定要顯示的文章數量以及要為小工具提供的標題。

最近的文章小工具

如果您想新增額外的功能，您可以為替代小工具（如WordPress熱門文章）安裝外掛，該小工具會顯示最受歡迎的內容。或者，每次使用者訪問新螢幕時，高階隨機文章小工具都會重新整理。

2. 最近評論小工具

想要向訪問者展示您的網站的活力以及您的受眾與您的內容的互動程度？

最近的評論小工具顯示您網站上的最新評論，讓訪問者有機會直接導航到這些評論並加入討論。

最近的評論小工具

最近的評論小工具隨WordPress一起提供。同樣，如果您想新增額外的功能，您可以安裝第三方評論外掛，例如WP Social Comments小工具，它允許人們使用他們的Facebook帳戶發表評論：有利於社交媒體參與。

3.號召性用語小工具

小工具的一個很好的用途是鼓勵人們採取行動，您可以通過號召性用語小工具來做到這一點。

您的小工具可以是一個簡單的按鈕，或者您可以使用文字小工具或HTML小工具甚至影象小工具建立更定製的東西，所有這些都預裝在WordPress中。

在我自己的一個網站上，我建立了一個號召性用語小工具，鼓勵人們註冊我的郵件列表。這使用了內建的HTML小工具，我在其中包含了一個影象、一些文字和一個我用HTML編碼的按鈕。

我網站上的號召性用語小工具

4. 導航小工具

您還可以使用小工具來鼓勵人們瀏覽您的網站。

有幾個選項：類別或標籤雲小工具和導航選單小工具。

導航選單小工具可讓您在站點中建立自定義導航選單以及主導航選單，然後將其新增到小工具區域。

您甚至可以將主導航選單新增到小工具區域，儘管這僅在您有一個小的導航選單時才有效。

導航選單小工具

將導航選單新增到您網站的頁尾將鼓勵人們到達文章末尾以瀏覽您的網站。這對於在到達文章末尾後可能需要進行大量滾動才能返回主導航選單的移動使用者特別有用。

或者，您可以使用內建的類別小工具來顯示站點中的類別列表，或者使用標籤雲小工具來方便人們訪問標籤檔案。

5. 媒體小工具

將媒體新增到您的側邊欄或頁尾將使您的網站栩栩如生，併為使用者提供一些可以檢視或與之互動的內容。

您可以使用內建的影象小工具在側邊欄或頁尾中顯示任何影象，它也可以讓您將該影象轉換為連結。

圖片小工具

或者，視訊小工具可讓您將來自YouTube或Vimeo的視訊直接流式傳輸到您網站的小工具區域。如果您的網站在主頁上有特殊的小工具區域，這將特別有用，但在頁尾中也可以很好地作為在人們到達文章末尾時吸引人們注意力的一種方式。

6. 社交媒體小工具

如果您想與通過社交媒體訪問您網站的人互動，將您的社交媒體供稿新增到您網站的側邊欄或頁尾將向人們展示您在社交媒體上的活躍度，並鼓勵他們喜歡或關注您。

訪問最大平臺（Facebook、Twitter、Instagram）的社交媒體小工具的一種方法是安裝Jetpack外掛，其中包括所有這些以及更多。

Jetpack外掛

或者，所有社交媒體平臺都有自己的外掛，可通過外掛目錄免費獲得。或者，您可以找到第三方外掛，讓您自定義顯示社交媒體提要的方式。

7. 購物車小工具

如果您使用WooCommerce之類的外掛在您的網站上執行電子商務商店，最好包含一個購物車小工具，以便使用者可以輕鬆導航到他們在商店中的任何地方的購物車。

購物車小工具

您可以將其放在人們可以輕鬆看到的側邊欄中，或者如果您的主題在那裡包含小工具區域，則可以將其放在標題中以增加可見性。

WooCommerce等電子商務外掛包括購物車小工具和其他電子商務小工具作為外掛的一部分，因此一旦您將電子商務新增到您的網站，您會發現它們已新增到您的小工具螢幕中。

8. 表單小工具

如果您希望人們與您聯絡、提出問題或註冊郵件列表，您可以將表單新增到側邊欄。

WordPress不包含表單小工具，但您可以新增外掛來提供它們，例如免費的Contact Form 7或高階但非常強大的Gravity Forms。

9. 地圖小工具

如果您的企業位於實際位置，並且您希望人們能夠輕鬆找到您，那麼在您的站點中新增地圖小工具會有所幫助。

您可以使用許多免費的Google地圖小工具外掛或其他WordPress地圖外掛，例如WP Google Maps外掛。

WP Google Maps外掛

或者，如果您不想安裝外掛，您可以從Google地圖中獲取嵌入程式碼並將其新增到HTML小工具中。

10.登入小工具

如果您正在執行會員站點，登入小工具將使人們可以輕鬆登入您的站點，而無需轉到單獨的登入頁面。

WordPress附帶的Meta小工具包含一個登入連結，但它還包含您可能不想要的其他內容，因此我建議使用外掛目錄中的單獨外掛。

Login with Ajax小工具在小工具中為您提供了一個登入表單，這意味著人們可以從任何頁面登入您的站點。

使用Ajax小工具外掛登入

11. 搜尋小工具

一個非常簡單但非常有用的小工具是搜尋小工具，它預裝了WordPress。

搜尋小工具

將此新增到您的側邊欄或標題中，您可以讓人們更容易在您的網站上找到內容。

如果您想增強搜尋小工具的功能，您可以安裝免費的WP Google搜尋小工具，它使用Google搜尋。

如何將小工具新增到您的WordPress網站

一旦你決定了你的WordPress網站需要什麼樣的小工具，就該安裝它們了。

不要試圖新增太多。數量越多，使用者注意到它們的可能性就越小。相反，專注於側邊欄的兩個或三個關鍵小工具。您可以在頁尾中新增更多內容，無論如何它們都不那麼重要。

如果您的主題中有任何額外的小工具區域，請決定將哪些小工具放入其中。確保它們符合您網站的佈局和設計。

可以通過三種方式新增小工具：

• 使用WordPress自帶的小工具。
• 從外掛目錄新增第三方小工具。
• 購買包含小工具的高階外掛。

為您的WordPress網站查詢小工具

有大量可用的小工具，因此很難選擇安裝哪一個。讓我們看一下這些選項，然後檢查如何選擇最適合自己的選項。

WordPress附帶的小工具

如果其中一個預安裝的小工具可以滿足您的需要，請使用它。這將節省您的時間，並意味著在您的網站上執行的程式碼更少。

預裝的WordPress小工具

預裝的小工具是：

• 檔案：按月連結到檔案，專為部落格設計，但現在已經過時了。
• 日曆：您的文章日曆，同樣適用於部落格，特別是如果您的部落格對時間敏感（但現在不那麼常見）。
• 自定義HTML：極致的靈活性，通過在HTML中鍵入或貼上來新增您想要的任何內容（如Google表單）。如果您對編碼不滿意，請避免使用。
• 圖片：顯示媒體庫中的圖片。
• 導航選單：顯示主導航選單或您建立的單獨選單。
• 最近評論：最近評論的列表以及指向它們的連結。
• 標籤雲：雲格式的標籤列表，帶有相關檔案的連結。
• 視訊：嵌入來自YouTube或任何其他流媒體服務的視訊。
• 音訊：嵌入播客、播放器、歌曲或其他音訊剪輯。
• 類別：您部落格中的類別列表，帶有指向存檔頁面的連結。
• 相簿：比影象小工具更高階，顯示影象庫。
• Meta：後設資料，例如登入連結和RSS Feed。WordPress早期的宿醉，現在不是很有用。
• 頁面：顯示您網站的頁面列表以及連結。
• 最近的文章：顯示您最近的文章列表，以鼓勵人們閱讀它們。
• 搜尋：一個簡單的搜尋框。
• 文字：您要新增的任何文字，例如有關站點的資訊。

使用外掛新增小工具

WordPress外掛目錄有數以千計的免費小工具外掛，可為您提供更多可供選擇的小工具。

除此之外，許多其他外掛還包括小工具，例如為您提供購物車小工具的電子商務外掛等等。

如果外掛目錄沒有您需要的外掛，您可能會決定新增一個高階外掛。有時這些會提供更多功能或更直觀的介面。但有時您會在免費外掛中找到相同的功能，因此在為外掛付費之前，請仔細搜尋外掛目錄。

如何為您的網站找到合適的小工具

要為您找到合適的WordPress小工具，請遵循以下提示：

1. 從小工具中準確確定您需要什麼。它需要具備哪些功能以及您希望它的外觀如何？它是否需要連結到任何第三方API？
2. 檢查內建小工具，看看是否有滿足您需求的小工具。測試任何相關的，如果找到合適的，那就太好了。如果不…
3. 檢查外掛目錄，您可以通過Plugins > Add New訪問該目錄。嘗試搜尋多個術語以找到適合您的外掛，並搜尋有無“小工具”一詞。有時，不專注於小工具的外掛會將小工具作為更廣泛的功能集的一部分。
4. 如果您在免費外掛中找不到合適的外掛，請尋找高階外掛。在選擇之前向其他WordPress使用者詢問建議並檢視評論。

無論您選擇哪個小工具，您都需要對其進行測試以檢查它是否可以正常工作。如果您要購買高階外掛，我建議您購買帶有退款保證或免費試用期的外掛，以防不適合您。

如何在WordPress的側邊欄和頁尾中新增小工具

現在您已經選擇了您的小工具，是時候將它新增到您的站點了。

您可以將小工具新增到主題提供的任何活動小工具區域。如果您的主題在您想要的地方沒有小工具區域，請嘗試尋找替代主題。

在這篇文章的後面，我將向您展示如何編寫自己的小工具區域。

有兩種方法可以將小工具新增到您的站點：

• 通過使用定製器。轉到管理選單中的外觀 > 定製器 > 小工具，或從螢幕頂部的管理欄中轉到自定義 > 小工具。
• 通過小工具管理螢幕。轉到管理選單中的外觀 > 小工具，或從管理欄中單擊自定義 > 小工具。

定製器中的小工具

我將很快向您展示如何使用這兩種方法，但首先讓我們看一下小工具區域以及為什麼您會使用您的主題獲得這些區域。

小工具不僅僅用於側邊欄

根據您的WordPress主題，您可能會發現在多個地方都有小工具區域。

大多數主題在側邊欄和頁尾中都有小工具區域。但有些也有它們在其他地方，如內容下方或上方或標題中。

如果您轉到WordPress管理員中的小工具設定螢幕，您將能夠看到主題中的所有小工具區域。

我在很多地方使用具有多個小工具區域的主題。您可以在下面的螢幕截圖中看到，在內容上方和下方、頁首中、主頁尾下方都有小工具區域。

小工具設定螢幕、小工具區域

如果您想將小工具新增到站點中的其他位置，那麼找到具有多個小工具區域的主題是有意義的。最好的方法是使用框架主題。

一個很好的小工具示例在您的主題中不是側邊欄或頁尾的位置是在標題中新增一個搜尋欄，就像我在我的一個網站上所做的那樣。

標題中的搜尋欄

小工具區域和主題

小工具區域被編碼到主題模板檔案以及主題功能檔案中。

在這裡，您可以看到我在主題函式檔案中使用的程式碼，用於新增將進入標題的小工具區域。

register_sidebar( array(
'name' => __( 'In Header Widget Area', 'rmccollin' ),
'id' => 'in-header-widget-area',
'description' => __( 'A widget area located to the right hand side of the header, next to the site title and description.', 'rmccollin' ),
'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );

這是我的header.php檔案中的程式碼，它將小工具區域新增到主題中的正確位置。

if ( is_active_sidebar( 'in-header-widget-area' ) ) { ?>
<aside class="in-header widget-area right" role="complementary">
<?php dynamic_sidebar( 'in-header-widget-area' ); ?>
</aside>
<?php }

如果要在主題中新增額外的小工具區域，則需要新增相同型別的程式碼。我將在本文後面向您展示如何做到這一點。

不要忘記，如果您的主題沒有您想要的那麼多小工具區域，您可以隨時執行以下兩項操作之一：

• 找到一個主題，其中包含您想要的小工具區域。
• 將新的小工具區域編碼到您的主題或主題的子項中。

一旦您在主題中的所有位置都獲得了小工具區域，您就可以開始向它們新增小工具。

如何使用小工具螢幕新增小工具

有兩種方法可以將小工具新增到您的WordPress網站。第一個是使用WordPress管理員中的小工具螢幕。

單擊外觀 > 小工具。這將開啟小工具螢幕。

小工具螢幕

要新增小工具，您可以執行以下兩項操作之一：

• 將其從左側的小工具列表中拖到相關的小工具區域中。
• 單擊要新增的小工具，您將看到可以新增它的位置列表。選擇所需的小工具區域，然後單擊新增小工具按鈕。

選擇小工具區域和小工具

然後，您可能需要編輯小工具在小工具區域內的位置。

您可以向每個小工具區域新增任意數量的小工具，但不要過度。您可以在小工具區域內拖動它們以使它們按正確的順序排列。如果您決定不喜歡它們的外觀，也可以將它們從一個小工具區域拖到另一個區域。

您還可以使用鍵盤通過小工具螢幕新增小工具，因此如果您無法使用滑鼠，您仍然可以新增小工具。

在輔助功能模式下新增和編輯小工具

如果您不能使用滑鼠，您可以使用帶有鍵盤的小工具螢幕。

首先，通過單擊（或切換到並選擇）螢幕右上角的啟用輔助功能模式連結，將螢幕置於輔助功能模式。

輔助功能模式連結

然後螢幕將發生變化以反映您處於可訪問性模式的事實。

小工具螢幕輔助功能模式

然後，您可以使用鍵盤上的Tab鍵在螢幕元素之間導航，然後按 Enter 選擇一個專案並對其進行操作。您可以選擇小工具，點選新增連結上的返回，然後選擇要新增它的位置，或者選擇小工具區域並點選編輯連結上的返回。

如何使用WordPress定製器新增小工具

使用定製器新增小工具而不是小工具螢幕意味著您可以在新增小工具時看到它們。這樣可以更輕鬆地檢視小工具的外觀，並根據需要在小工具區域之間移動它們。

在管理選單中，單擊外觀 > 自定義。或者，從實時站點螢幕頂部的管理欄中（假設您已登入），只需單擊自定義。這將開啟定製器。

WordPress管理欄

現在單擊小工具選項，您將看到主題中所有小工具區域的列表。單擊要新增小工具的小工具區域，然後單擊新增小工具按鈕。

這為您提供了可用於您的站點的所有小工具的列表。這將包括 WordPress 附帶的所有內建小工具以及您通過外掛新增的任何小工具。

新增小工具按鈕

選擇要新增到該小工具區域的小工具，您將在右側的預覽螢幕中看到它。

您可以通過在左側上下拖動小工具來重新排序小工具，或者單擊小工具列表下方的重新排序連結，然後單擊箭頭上下移動它們。

在定製器中編輯小工具

通過定製器完成新增小工具後，不要忘記單擊左上角的釋出按鈕，以便儲存您的更改。如果您離開定製器而不執行此操作，您的任何更改都不會反映在實時站點上。

新增小工具後，請檢視它們並檢查它們如何適合您的頁面設計。如果您新增了太多小工具區域，事情可能看起來有點混亂。您要麼需要刪除其中的一些，要麼可以將它們從一個小工具區域移動到另一個小工具區域。

在小工具螢幕中執行此操作非常容易，您可以在小工具區域之間拖動小工具。

如何將小工具新增到特定頁面

一些主題包括僅適用於特定頁面的小工具區域，例如主頁。但是，如果您只想將小工具新增到您網站上的一個頁面，該怎麼辦？

您可以在Gutenberg文章和頁面編輯器中執行此操作。

以通常的方式新增一個新塊，然後選擇Widgets塊型別。

小工具塊型別

然後，您可以從為您的站點啟用的許多小工具中進行選擇，並將其新增到您的文章或頁面的內容中。如果您想新增表單小工具、號召性用語小工具或最新文章列表，這將非常有用。

如何編輯小工具

將小工具新增到站點後，您可以對其進行更改。單個小工具將具有您可以通過小工具螢幕或定製器訪問的設定（無論您使用哪一個來新增小工具都無關緊要。）

一些小工具不包含任何設定，但其他小工具具有小工具標題或顯示的文章數量等設定。有些更復雜，需要您在單獨的設定頁面中設定小工具。檢查外掛開發人員的文件。

您用於編輯小工具外掛的選項包括：

• 編輯外掛的設定。
• 將小工具從一個小工具區域移動到另一個區域。
• 刪除小工具。您有兩種選擇，稍後會介紹。

要編輯小工具的設定，請在小工具螢幕或定製器中找到該小工具，然後簡單地編輯提供的任何選項。

編輯小工具選項

要將小工具從一個區域移動到另一個區域，請開啟小工具螢幕並將其從一個小工具區域拖到另一個區域。在輔助功能模式下，導航到小工具右側的箭頭並從選項中進行選擇。

刪除小工具

要在小工具螢幕中刪除小工具，請找到該小工具並單擊小工具設定框左下方的刪除連結。

在小工具螢幕中刪除小工具

要在定製器中刪除小工具，請在其小工具區域中找到該小工具。單擊小工具名稱右側的箭頭，然後單擊小工具設定左下方的刪除連結。

在定製器中刪除小工具

您還可以從小工具區域中刪除小工具，但仍然可以稍後通過小工具螢幕使用它。

向下滾動到螢幕底部的非活動小工具區域。將小工具拖動到此區域以將它們從小工具區域中刪除，但將它們保留為具有當前設定的草稿。如果您將來願意，您可以隨時將它們拖回小工具區域。

如果您切換主題並且您的新主題具有不同的小工具區域，則任何不適合新主題中小工具區域的小工具將被WordPress自動移動到非活動小工具列表中。

如何為您的主題新增新的小工具區域

如果您的主題沒有您想要的小工具區域，您可以隨時新增自己的。您可以通過新增兩段程式碼來做到這一點。

讓我們在內容下方新增一個小工具區域。

在主題函式檔案中建立小工具區域

第一步是使用該 功能設定小工具區域。register_widget()

如果您使用的是第三方WordPress主題（這裡有一些最好的主題），您需要建立一個子主題來執行此操作。這樣做的原因是，如果您將來更新主題，您的所有更改都將丟失。

如果您使用自己的主題，您可以簡單地編輯主題。

首先開啟主題的functions.php檔案。在檔案的底部，新增此程式碼。

function wbolt_register_widgets() {
register_sidebar( array(
'name' => __( 'After Content Widget Area', 'wbolt' ),
'id' => 'after-content-widget-area',
'description' => __( 'Widget area after the content', 'wbolt' ),
'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
add_action( 'widgets_init', 'wbolt_register_widgets' );

現在儲存您的functions.php檔案。如果您轉到小工具螢幕或定製器，您會發現新的小工具區域可供您新增小工具。

但如果你這樣做，它們實際上不會出現在頁面上。這是因為您需要在主題模板檔案中新增一些程式碼。

將小工具新增到主題模板檔案

首先是找出你需要使用哪個主題模板檔案。

• 如果要新增額外的側邊欄，則需要將此程式碼新增到sidebar.php檔案中。
• 如果您在內容之前或之後新增小工具區域，則需要將其新增到輸出內容的任何主題模板檔案中。
• 如果要在標題中新增小工具區域，則需要將程式碼新增到header.php檔案中。
• 如果您的新小工具區域僅適用於您網站中的一個頁面或一種型別的內容，則您需要使用WordPress 模板層次結構來準確確定您需要使用/建立哪個模板檔案，然後對其進行編輯。因此，例如，您想將小工具區域新增到您的主頁，您需要建立一個front-page.php檔案並在那裡新增您的小工具區域。

一旦確定了需要編輯的模板檔案以及小工具區域程式碼的確切位置，請新增以下程式碼。在內容之後的小工具區域的情況下，我們將其新增到我們主題中的post.php和page.php檔案中：

if ( is_active_sidebar( 'after-content-widget-area' ) ) { ?>
aside class="after-content widget-area full-width" role="complementary">
<?php dynamic_sidebar( 'after-content-widget-area' ); ?>
</aside>
<?php }

現在儲存您的模板檔案。

請注意，您的程式碼將與我的不同，具體取決於您所稱的小工具區域以及您想要將其放置在其中的元素。我通常使用side元素，因為在我看來它們是為側邊欄和小工具區域設計的。

忍者提示：如果您將內容的容器元素的結尾移動到側邊欄和/或頁尾檔案的開頭，那麼您可以在此處新增它，並且只需要新增一次。

現在，如果您檢視您的站點，您會發現您新增到小工具區域的任何小工具都會顯示在正確的位置。如果它們不在正確的位置，請返回並編輯您的模板檔案，確保程式碼位於您想要的位置。您可能還需要編輯您的CSS以獲得您想要的方式。

實時站點上的小工具

如何使用小工具API編寫小工具

所以現在您知道如何為您的站點選擇小工具，如何將它們新增到您的站點，以及如何註冊新的側邊欄或小工具區域。下一步是學習如何建立WordPress小工具。

有時，您可能會發現沒有可用於在您的網站上建立您想要的確切小工具的外掛。這意味著您必須自己編寫程式碼。

在此示例中，我將向您展示如何編寫一個非常簡單的號召性用語小工具。

小工具API概述

WordPress中的小工具API包括您註冊、建立和編碼小工具所需的所有程式碼。小工具API包括：

• 用於構建新小工具的類。
• 註冊小工具並將其部署在您的站點上的功能。
• 登出小工具的功能，例如從父主題中登出。

在這裡，我們將使用一個類來構建一個小工具。第一步是建立一個外掛來儲存小工具。

為您的WordPress小工具建立外掛

要建立自己的小工具，您需要編寫一個外掛。不要將新小工具的程式碼新增到您的主題中，因為小工具是關於功能的，而不是關於顯示的。如果您將來更改主題，您仍希望能夠訪問該小工具。

首先建立一個空外掛。在您的目錄中建立一個外掛資料夾wp-content/plugins並向其中新增一個空檔案。給它一個合適的名字。開啟該檔案並新增此程式碼。

<?php
/**
* Plugin Name: Wbolt Call to Action Widget
* Plugin URI: https://rachelmccollin.com
* Description: A simple call to action widget.
* Version: 1.0
* Author: Rachel McCollin
* Author URI: https://rachelmccollin.co.uk
*/

您需要將作者URI和外掛URI編輯為您自己的。這將為您建立一個外掛，您可以通過外掛螢幕啟用該外掛。

外掛螢幕中的小工具外掛

但是如果你啟用它，什麼都不會發生。您將不得不向您的外掛新增一些程式碼。

為小工具建立一個類

小工具的程式碼在一個類中。所以接下來新增。

class wbolt_Cta_Widget extends WP_Widget { }

建立建構函式

進入類的第一件事是建立小工具的建構函式。將此新增到類的大括號內。

//widget constructor function
function __construct() {
$widget_options = array (
'classname' => 'wbolt_cta_widget',
'description' => 'Add a call to action box with your own text and link.'
);
parent::__construct( 'wbolt_cta_widget', 'Call to Action', $widget_options );
}

這開始構建小工具。

建立表單以輸出小工具

接下來，我們需要一個表單，小工具螢幕和定製器將使用該表單來建立小工具。新增這個，仍然在大括號內。

//function to output the widget form
function form( $instance ) {
$title = ! empty( $instance['title'] ) ? $instance['title'] : '';
$link = ! empty( $instance['link'] ) ? $instance['link'] : 'Your link here';
$text = ! empty( $instance['text'] ) ? $instance['text'] : 'Your text here';
?>
<p>
<label for="<?php echo $this->get_field_id( 'title'); ?>">Title:</label>
<input class="widefat" type="text" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo esc_attr( $title ); ?>" /></p>
<p>
<label for="<?php echo $this->get_field_id( 'text'); ?>">Text in the call to action box:</label>
<input class="widefat" type="text" id="<?php echo $this->get_field_id( 'text' ); ?>" name="<?php echo $this->get_field_name( 'text' ); ?>" value="<?php echo esc_attr( $text ); ?>" /></p>
<p>
<label for="<?php echo $this->get_field_id( 'link'); ?>">Your link:</label>
<input class="widefat" type="text" id="<?php echo $this->get_field_id( 'link' ); ?>" name="<?php echo $this->get_field_name( 'link' ); ?>" value="<?php echo esc_attr( $link ); ?>" /></p>
<?php }

這為使用者提供了一個表單，他們可以使用該表單來新增文字和指向行動號召框的連結。

建立儲存小工具的函式

現在您需要儲存輸入到該表單的任何內容。新增這個。

//function to define the data saved by the widget
function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance['title'] = strip_tags( $new_instance['title'] );
$instance['text'] = strip_tags( $new_instance['text'] );
$instance['link'] = strip_tags( $new_instance['link'] );
return $instance;          
}

這會將使用者輸入的資料儲存到小工具設定中。

建立輸出小工具的函式

現在您需要新增將在網站上顯示小工具的程式碼。再次，在大括號內新增：

//function to output the widget form

function form( $instance ) {

 $title = ! empty( $instance['title'] ) ? $instance['title'] : '';
 $link = ! empty( $instance['link'] ) ? $instance['link'] : 'Your link here';
 $text = ! empty( $instance['text'] ) ? $instance['text'] : 'Your text here';
?>

<p>
 <label for="<?php echo $this->get_field_id( 'title'); ?>">Title:</label>
 <input class="widefat" type="text" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo esc_attr( $title ); ?>" /></p>

<p>
 <label for="<?php echo $this->get_field_id( 'text'); ?>">Text in the call to action box:</label>
 <input class="widefat" type="text" id="<?php echo $this->get_field_id( 'text' ); ?>" name="<?php echo $this->get_field_name( 'text' ); ?>" value="<?php echo esc_attr( $text ); ?>" /></p>

<p>
 <label for="<?php echo $this->get_field_id( 'link'); ?>">Your link:</label>
 <input class="widefat" type="text" id="<?php echo $this->get_field_id( 'link' ); ?>" name="<?php echo $this->get_field_name( 'link' ); ?>" value="<?php echo esc_attr( $link ); ?>" /></p>

<?php }

註冊小工具

現在您已經編寫好了課程，是時候註冊WordPress小工具以使其正常工作了。在類外新增此程式碼。

//function to register the widget
function wbolt_register_cta_widget() {
register_widget( 'wbolt_Cta_Widget' );
}
add_action( 'widgets_init', 'wbolt_register_cta_widget' );

現在儲存您的外掛檔案。轉到小工具螢幕，您將看到要使用的小工具。

小工具螢幕中的新小工具

如果將其新增到小工具區域並新增文字和連結，它將在實時站點中輸出。

實時站點中的新小工具

現在可能看起來不太好。你需要新增一些CSS來設定它的樣式。

將CSS新增到小工具

要將 CSS 新增到您的外掛中，您需要建立一個樣式表並將其排入您的外掛中。將此新增到課程之前的外掛檔案中。

function wbolt_widget_enqueue_styles() {
wp_register_style( 'widget_cta_css', plugins_url( 'css/style.css', __FILE__ ) );
wp_enqueue_style( 'widget_cta_css' );
}
add_action( 'wp_enqueue_scripts', 'wbolt_widget_enqueue_styles' );

現在您需要在外掛的資料夾中新增一個style.css檔案併為其新增任何樣式。我會把它留給你！

您現在有一個簡單的號召性用語按鈕，您可以將其新增到您網站上的任何小工具區域。例如，如果您將其新增到側邊欄，人們將能夠使用它從網站上的任何位置訪問您的註冊頁面。

您可以使用額外的設定和選項建立更復雜的小工具，但這讓您瞭解如何開始建立自己的小工具。

如果你想檢視我的這個外掛的程式碼，包括樣式，你可以在Github上找到它。

小結

小工具是我最喜歡的WordPress功能之一。它們可以使您的網站栩栩如生，並幫助您獲得更多註冊或將更多訪問者轉化為客戶。您可以將WordPress小工具新增到主題中的任何現有小工具區域，也可以新增額外的小工具區域，以便在更多位置新增更多小工具。

還有很多地方可以找到小工具。WordPress預裝了一些，您也可以通過外掛安裝更多。但這還不是全部，如果您覺得舒服，您還可以使用Widgets API編寫自己的小工具。