wordpress小工具非常有用。它們?cè)试S您在文章正文或頁(yè)面本身之外向您的網(wǎng)站添加各種額外內(nèi)容，從而鼓勵(lì)用戶獲取信息、關(guān)注鏈接或采取行動(dòng)。

在這篇文章中，我將向您展示您需要了解的有關(guān)WordPress小工具的所有信息。如何將它們添加到您的站點(diǎn)，如何創(chuàng)建小工具區(qū)域以放置它們，如何安裝為您提供更多它們的插件，如何編寫自己的小工具，等等。

1. 什么是WordPress小工具？
2. 何時(shí)使用WordPress小工具
3. WordPress中的11個(gè)小工具示例
4. 如何將小工具添加到您的WordPress網(wǎng)站
5. 如何為您的主題添加新的小工具區(qū)域
6. 如何使用小工具API編寫小工具

首先，讓我們從識(shí)別什么是WordPress小工具開始。

什么是WordPress小工具？

在WordPress中，小工具是位于頁(yè)面流或發(fā)布內(nèi)容之外的內(nèi)容片段。

小工具包含獨(dú)立于單個(gè)文章或頁(yè)面的信息、導(dǎo)航或媒體。在大多數(shù)情況下，每個(gè)小工具都會(huì)顯示在站點(diǎn)的每個(gè)頁(yè)面上，但您也可以為特定頁(yè)面（例如主頁(yè)）注冊(cè)小工具區(qū)域。

要將小工具添加到您的站點(diǎn)，您需要將其添加到小工具區(qū)域。小工具區(qū)域是由您的主題創(chuàng)建的，因?yàn)樗鼈兣c您網(wǎng)站的設(shè)計(jì)和布局有關(guān)，而不是與功能有關(guān)。

大多數(shù)wordpress主題在側(cè)邊欄和頁(yè)腳中都有小工具區(qū)域，盡管有些主題會(huì)在很多地方有多個(gè)小工具區(qū)域，例如內(nèi)容下方或上方或標(biāo)題中。

下面是我自己的網(wǎng)站之一的屏幕截圖，顯示了側(cè)邊欄和頁(yè)腳中的小工具。

我網(wǎng)站中的小工具區(qū)域

WordPress預(yù)裝了一堆小工具，因此您無需安裝任何插件或編寫任何代碼即可使用它們。但是您也可以通過安裝插件或編寫自己的代碼來添加更多小工具。

這些可以涵蓋廣泛的內(nèi)容類型，例如媒體、社交媒體提要、導(dǎo)航、搜索、地圖等等。您可能希望在您的網(wǎng)站上找到的小工具很少。事實(shí)上，最大的挑戰(zhàn)往往是在所有選項(xiàng)之間做出選擇，而不是過火。

何時(shí)使用WordPress小工具

每當(dāng)您想向站點(diǎn)中的一個(gè)或多個(gè)頁(yè)面添加額外內(nèi)容（當(dāng)我說頁(yè)面時(shí)，我包括文章、檔案等）時(shí)，您都應(yīng)該使用小工具，但這不是該頁(yè)面內(nèi)容的一部分。它們對(duì)于您希望在網(wǎng)站的每個(gè)頁(yè)面上顯示的內(nèi)容特別有用，例如您的最新文章列表、購(gòu)物車或號(hào)召性用語(yǔ)按鈕。

想想有多少用戶需要訪問每個(gè)小工具，以及當(dāng)您決定將其放置在何處時(shí)它的重要性。側(cè)邊欄中的小工具將比頁(yè)腳中的小工具更突出，一些用戶甚至可能看不到。

因此，最新的文章小工具或號(hào)召性用語(yǔ)小工具在人們有更多機(jī)會(huì)與他們互動(dòng)的側(cè)邊欄中可能會(huì)更好，而社交媒體提要可以放在頁(yè)腳中。

如果您的主題還具有用于主頁(yè)的特殊小工具區(qū)域，您可能希望使用這些小工具區(qū)域在您的站點(diǎn)的部門、相關(guān)內(nèi)容列表或媒體（例如歡迎人們?cè)L問站點(diǎn)的視頻）中導(dǎo)航。

WordPress中的11個(gè)小工具示例

了解WordPress小工具提供的可能性的最佳方法是查看它們的一些示例。讓我們看一下您經(jīng)常在WordPress網(wǎng)站上看到的11種類型的小工具。

1. 最近的文章小工具

最近的文章小工具可能是博客中最常用的小工具。

它使您可以在站點(diǎn)上每個(gè)頁(yè)面的側(cè)邊欄或頁(yè)腳中顯示最新文章的列表，從而增加人們?yōu)g覽該站點(diǎn)并閱讀大量文章的可能性。

最近的文章小工具預(yù)裝了WordPress。它使您可以設(shè)置要顯示的文章數(shù)量以及要為小工具提供的標(biāo)題。

最近的文章小工具

如果您想添加額外的功能，您可以為替代小工具（如WordPress熱門文章）安裝插件，該小工具會(huì)顯示最受歡迎的內(nèi)容。或者，每次用戶訪問新屏幕時(shí)，高級(jí)隨機(jī)文章小工具都會(huì)刷新。

2. 最近評(píng)論小工具

想要向訪問者展示您的網(wǎng)站的活力以及您的受眾與您的內(nèi)容的互動(dòng)程度？

最近的評(píng)論小工具顯示您網(wǎng)站上的最新評(píng)論，讓訪問者有機(jī)會(huì)直接導(dǎo)航到這些評(píng)論并加入討論。

最近的評(píng)論小工具

最近的評(píng)論小工具隨WordPress一起提供。同樣，如果您想添加額外的功能，您可以安裝第三方評(píng)論插件，例如WP Social Comments小工具，它允許人們使用他們的Facebook帳戶發(fā)表評(píng)論：有利于社交媒體參與。

3.號(hào)召性用語(yǔ)小工具

小工具的一個(gè)很好的用途是鼓勵(lì)人們采取行動(dòng)，您可以通過號(hào)召性用語(yǔ)小工具來做到這一點(diǎn)。

您的小工具可以是一個(gè)簡(jiǎn)單的按鈕，或者您可以使用文本小工具或HTML小工具甚至圖像小工具創(chuàng)建更定制的東西，所有這些都預(yù)裝在WordPress中。

在我自己的一個(gè)網(wǎng)站上，我創(chuàng)建了一個(gè)號(hào)召性用語(yǔ)小工具，鼓勵(lì)人們注冊(cè)我的郵件列表。這使用了內(nèi)置的HTML小工具，我在其中包含了一個(gè)圖像、一些文本和一個(gè)我用HTML編碼的按鈕。

我網(wǎng)站上的號(hào)召性用語(yǔ)小工具

4. 導(dǎo)航小工具

您還可以使用小工具來鼓勵(lì)人們?yōu)g覽您的網(wǎng)站。

有幾個(gè)選項(xiàng)：類別或標(biāo)簽云小工具和導(dǎo)航菜單小工具。

導(dǎo)航菜單小工具可讓您在站點(diǎn)中創(chuàng)建自定義導(dǎo)航菜單以及主導(dǎo)航菜單，然后將其添加到小工具區(qū)域。

您甚至可以將主導(dǎo)航菜單添加到小工具區(qū)域，盡管這僅在您有一個(gè)小的導(dǎo)航菜單時(shí)才有效。

導(dǎo)航菜單小工具

將導(dǎo)航菜單添加到您網(wǎng)站的頁(yè)腳將鼓勵(lì)人們到達(dá)文章末尾以瀏覽您的網(wǎng)站。這對(duì)于在到達(dá)文章末尾后可能需要進(jìn)行大量滾動(dòng)才能返回主導(dǎo)航菜單的移動(dòng)用戶特別有用。

或者，您可以使用內(nèi)置的類別小工具來顯示站點(diǎn)中的類別列表，或者使用標(biāo)簽云小工具來方便人們?cè)L問標(biāo)簽檔案。

5. 媒體小工具

將媒體添加到您的側(cè)邊欄或頁(yè)腳將使您的網(wǎng)站栩栩如生，并為用戶提供一些可以查看或與之交互的內(nèi)容。

您可以使用內(nèi)置的圖像小工具在側(cè)邊欄或頁(yè)腳中顯示任何圖像，它也可以讓您將該圖像轉(zhuǎn)換為鏈接。

圖片小工具

或者，視頻小工具可讓您將來自YouTube或Vimeo的視頻直接流式傳輸?shù)侥W(wǎng)站的小工具區(qū)域。如果您的網(wǎng)站在主頁(yè)上有特殊的小工具區(qū)域，這將特別有用，但在頁(yè)腳中也可以很好地作為在人們到達(dá)文章末尾時(shí)吸引人們注意力的一種方式。

6. 社交媒體小工具

如果您想與通過社交媒體訪問您網(wǎng)站的人互動(dòng)，將您的社交媒體供稿添加到您網(wǎng)站的側(cè)邊欄或頁(yè)腳將向人們展示您在社交媒體上的活躍度，并鼓勵(lì)他們喜歡或關(guān)注您。

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

Jetpack插件

或者，所有社交媒體平臺(tái)都有自己的插件，可通過插件目錄免費(fèi)獲得?；蛘?，您可以找到第三方插件，讓您自定義顯示社交媒體提要的方式。

7. 購(gòu)物車小工具

如果您使用WooCommerce之類的插件在您的網(wǎng)站上運(yùn)行電子商務(wù)商店，最好包含一個(gè)購(gòu)物車小工具，以便用戶可以輕松導(dǎo)航到他們?cè)谏痰曛械娜魏蔚胤降馁?gòu)物車。

購(gòu)物車小工具

您可以將其放在人們可以輕松看到的側(cè)邊欄中，或者如果您的主題在那里包含小工具區(qū)域，則可以將其放在標(biāo)題中以增加可見性。

WooCommerce等電子商務(wù)插件包括購(gòu)物車小工具和其他電子商務(wù)小工具作為插件的一部分，因此一旦您將電子商務(wù)添加到您的網(wǎng)站，您會(huì)發(fā)現(xiàn)它們已添加到您的小工具屏幕中。

8. 表單小工具

如果您希望人們與您聯(lián)系、提出問題或注冊(cè)郵件列表，您可以將表單添加到側(cè)邊欄。

WordPress不包含表單小工具，但您可以添加插件來提供它們，例如免費(fèi)的Contact Form 7或高級(jí)但非常強(qiáng)大的Gravity Forms。

9. 地圖小工具

如果您的企業(yè)位于實(shí)際位置，并且您希望人們能夠輕松找到您，那么在您的站點(diǎn)中添加地圖小工具會(huì)有所幫助。

您可以使用許多免費(fèi)的Google地圖小工具插件或其他WordPress地圖插件，例如WP Google Maps插件。

WP Google Maps插件

或者，如果您不想安裝插件，您可以從Google地圖中獲取嵌入代碼并將其添加到HTML小工具中。

10.登錄小工具

如果您正在運(yùn)行會(huì)員站點(diǎn)，登錄小工具將使人們可以輕松登錄您的站點(diǎn)，而無需轉(zhuǎn)到單獨(dú)的登錄頁(yè)面。

WordPress附帶的Meta小工具包含一個(gè)登錄鏈接，但它還包含您可能不想要的其他內(nèi)容，因此我建議使用插件目錄中的單獨(dú)插件。

Login with Ajax小工具在小工具中為您提供了一個(gè)登錄表單，這意味著人們可以從任何頁(yè)面登錄您的站點(diǎn)。

使用Ajax小工具插件登錄

11. 搜索小工具

一個(gè)非常簡(jiǎn)單但非常有用的小工具是搜索小工具，它預(yù)裝了WordPress。

搜索小工具

將此添加到您的側(cè)邊欄或標(biāo)題中，您可以讓人們更容易在您的網(wǎng)站上找到內(nèi)容。

如果您想增強(qiáng)搜索小工具的功能，您可以安裝免費(fèi)的WP Google搜索小工具，它使用Google搜索。

如何將小工具添加到您的WordPress網(wǎng)站

一旦你決定了你的WordPress網(wǎng)站需要什么樣的小工具，就該安裝它們了。

不要試圖添加太多。數(shù)量越多，用戶注意到它們的可能性就越小。相反，專注于側(cè)邊欄的兩個(gè)或三個(gè)關(guān)鍵小工具。您可以在頁(yè)腳中添加更多內(nèi)容，無論如何它們都不那么重要。

如果您的主題中有任何額外的小工具區(qū)域，請(qǐng)決定將哪些小工具放入其中。確保它們符合您網(wǎng)站的布局和設(shè)計(jì)。

可以通過三種方式添加小工具：

• 使用WordPress自帶的小工具。
• 從插件目錄添加第三方小工具。
• 購(gòu)買包含小工具的高級(jí)插件。

為您的WordPress網(wǎng)站查找小工具

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

WordPress附帶的小工具

如果其中一個(gè)預(yù)安裝的小工具可以滿足您的需要，請(qǐng)使用它。這將節(jié)省您的時(shí)間，并意味著在您的網(wǎng)站上運(yùn)行的代碼更少。

預(yù)裝的WordPress小工具

預(yù)裝的小工具是：

• 檔案：按月鏈接到檔案，專為博客設(shè)計(jì)，但現(xiàn)在已經(jīng)過時(shí)了。
• 日歷：您的文章日歷，同樣適用于博客，特別是如果您的博客對(duì)時(shí)間敏感（但現(xiàn)在不那么常見）。
• 自定義HTML：極致的靈活性，通過在HTML中鍵入或粘貼來添加您想要的任何內(nèi)容（如Google表單）。如果您對(duì)編碼不滿意，請(qǐng)避免使用。
• 圖片：顯示媒體庫(kù)中的圖片。
• 導(dǎo)航菜單：顯示主導(dǎo)航菜單或您創(chuàng)建的單獨(dú)菜單。
• 最近評(píng)論：最近評(píng)論的列表以及指向它們的鏈接。
• 標(biāo)簽云：云格式的標(biāo)簽列表，帶有相關(guān)檔案的鏈接。
• 視頻：嵌入來自YouTube或任何其他流媒體服務(wù)的視頻。
• 音頻：嵌入播客、播放器、歌曲或其他音頻剪輯。
• 類別：您博客中的類別列表，帶有指向存檔頁(yè)面的鏈接。
• 圖庫(kù)：比圖像小工具更高級(jí)，顯示圖像庫(kù)。
• Meta：元數(shù)據(jù)，例如登錄鏈接和RSS Feed。WordPress早期的宿醉，現(xiàn)在不是很有用。
• 頁(yè)面：顯示您網(wǎng)站的頁(yè)面列表以及鏈接。
• 最近的文章：顯示您最近的文章列表，以鼓勵(lì)人們閱讀它們。
• 搜索：一個(gè)簡(jiǎn)單的搜索框。
• 文本：您要添加的任何文本，例如有關(guān)站點(diǎn)的信息。

使用插件添加小工具

WordPress插件目錄有數(shù)以千計(jì)的免費(fèi)小工具插件，可為您提供更多可供選擇的小工具。

除此之外，許多其他插件還包括小工具，例如為您提供購(gòu)物車小工具的電子商務(wù)插件等等。

如果插件目錄沒有您需要的插件，您可能會(huì)決定添加一個(gè)高級(jí)插件。有時(shí)這些會(huì)提供更多功能或更直觀的界面。但有時(shí)您會(huì)在免費(fèi)插件中找到相同的功能，因此在為插件付費(fèi)之前，請(qǐng)仔細(xì)搜索插件目錄。

如何為您的網(wǎng)站找到合適的小工具

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

1. 從小工具中準(zhǔn)確確定您需要什么。它需要具備哪些功能以及您希望它的外觀如何？它是否需要鏈接到任何第三方API？
2. 檢查內(nèi)置小工具，看看是否有滿足您需求的小工具。測(cè)試任何相關(guān)的，如果找到合適的，那就太好了。如果不…
3. 檢查插件目錄，您可以通過Plugins > Add New訪問該目錄。嘗試搜索多個(gè)術(shù)語(yǔ)以找到適合您的插件，并搜索有無“小工具”一詞。有時(shí)，不專注于小工具的插件會(huì)將小工具作為更廣泛的功能集的一部分。
4. 如果您在免費(fèi)插件中找不到合適的插件，請(qǐng)尋找高級(jí)插件。在選擇之前向其他WordPress用戶詢問建議并查看評(píng)論。

無論您選擇哪個(gè)小工具，您都需要對(duì)其進(jìn)行測(cè)試以檢查它是否可以正常工作。如果您要購(gòu)買高級(jí)插件，我建議您購(gòu)買帶有退款保證或免費(fèi)試用期的插件，以防不適合您。

如何在WordPress的側(cè)邊欄和頁(yè)腳中添加小工具

現(xiàn)在您已經(jīng)選擇了您的小工具，是時(shí)候?qū)⑺砑拥侥恼军c(diǎn)了。

您可以將小工具添加到主題提供的任何活動(dòng)小工具區(qū)域。如果您的主題在您想要的地方?jīng)]有小工具區(qū)域，請(qǐng)嘗試尋找替代主題。

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

有兩種方法可以將小工具添加到您的站點(diǎn)：

• 通過使用定制器。轉(zhuǎn)到管理菜單中的外觀 > 定制器 > 小工具，或從屏幕頂部的管理欄中轉(zhuǎn)到自定義 > 小工具。
• 通過小工具管理屏幕。轉(zhuǎn)到管理菜單中的外觀 > 小工具，或從管理欄中單擊自定義 > 小工具。

定制器中的小工具

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

小工具不僅僅用于側(cè)邊欄

根據(jù)您的WordPress主題，您可能會(huì)發(fā)現(xiàn)在多個(gè)地方都有小工具區(qū)域。

大多數(shù)主題在側(cè)邊欄和頁(yè)腳中都有小工具區(qū)域。但有些也有它們?cè)谄渌胤剑鐑?nèi)容下方或上方或標(biāo)題中。

如果您轉(zhuǎn)到WordPress管理員中的小工具設(shè)置屏幕，您將能夠看到主題中的所有小工具區(qū)域。

我在很多地方使用具有多個(gè)小工具區(qū)域的主題。您可以在下面的屏幕截圖中看到，在內(nèi)容上方和下方、頁(yè)眉中、主頁(yè)腳下方都有小工具區(qū)域。

小工具設(shè)置屏幕、小工具區(qū)域

如果您想將小工具添加到站點(diǎn)中的其他位置，那么找到具有多個(gè)小工具區(qū)域的主題是有意義的。最好的方法是使用框架主題。

一個(gè)很好的小工具示例在您的主題中不是側(cè)邊欄或頁(yè)腳的位置是在標(biāo)題中添加一個(gè)搜索欄，就像我在我的一個(gè)網(wǎng)站上所做的那樣。

標(biāo)題中的搜索欄

小工具區(qū)域和主題

小工具區(qū)域被編碼到主題模板文件以及主題功能文件中。

在這里，您可以看到我在主題函數(shù)文件中使用的代碼，用于添加將進(jìn)入標(biāo)題的小工具區(qū)域。

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' => '
',
'after_widget' => '
',
'before_title' => '
',
'after_title' => '
',
) );

這是我的header.php文件中的代碼，它將小工具區(qū)域添加到主題中的正確位置。

if ( is_active_sidebar( 'in-header-widget-area' ) ) { ?>


如果要在主題中添加額外的小工具區(qū)域，則需要添加相同類型的代碼。我將在本文后面向您展示如何做到這一點(diǎn)。
不要忘記，如果您的主題沒有您想要的那么多小工具區(qū)域，您可以隨時(shí)執(zhí)行以下兩項(xiàng)操作之一：

找到一個(gè)主題，其中包含您想要的小工具區(qū)域。
將新的小工具區(qū)域編碼到您的主題或主題的子項(xiàng)中。

一旦您在主題中的所有位置都獲得了小工具區(qū)域，您就可以開始向它們添加小工具。
如何使用小工具屏幕添加小工具
有兩種方法可以將小工具添加到您的WordPress網(wǎng)站。第一個(gè)是使用WordPress管理員中的小工具屏幕。
單擊外觀 > 小工具。這將打開小工具屏幕。

小工具屏幕
要添加小工具，您可以執(zhí)行以下兩項(xiàng)操作之一：

將其從左側(cè)的小工具列表中拖到相關(guān)的小工具區(qū)域中。
單擊要添加的小工具，您將看到可以添加它的位置列表。選擇所需的小工具區(qū)域，然后單擊添加小工具按鈕。


選擇小工具區(qū)域和小工具
然后，您可能需要編輯小工具在小工具區(qū)域內(nèi)的位置。
您可以向每個(gè)小工具區(qū)域添加任意數(shù)量的小工具，但不要過度。您可以在小工具區(qū)域內(nèi)拖動(dòng)它們以使它們按正確的順序排列。如果您決定不喜歡它們的外觀，也可以將它們從一個(gè)小工具區(qū)域拖到另一個(gè)區(qū)域。
您還可以使用鍵盤通過小工具屏幕添加小工具，因此如果您無法使用鼠標(biāo)，您仍然可以添加小工具。
在輔助功能模式下添加和編輯小工具
如果您不能使用鼠標(biāo)，您可以使用帶有鍵盤的小工具屏幕。
首先，通過單擊（或切換到并選擇）屏幕右上角的啟用輔助功能模式鏈接，將屏幕置于輔助功能模式。

輔助功能模式鏈接
然后屏幕將發(fā)生變化以反映您處于可訪問性模式的事實(shí)。

小工具屏幕輔助功能模式
然后，您可以使用鍵盤上的Tab鍵在屏幕元素之間導(dǎo)航，然后按 Enter 選擇一個(gè)項(xiàng)目并對(duì)其進(jìn)行操作。您可以選擇小工具，點(diǎn)擊添加鏈接上的返回，然后選擇要添加它的位置，或者選擇小工具區(qū)域并點(diǎn)擊編輯鏈接上的返回。
如何使用WordPress定制器添加小工具
使用定制器添加小工具而不是小工具屏幕意味著您可以在添加小工具時(shí)看到它們。這樣可以更輕松地查看小工具的外觀，并根據(jù)需要在小工具區(qū)域之間移動(dòng)它們。
在管理菜單中，單擊外觀 > 自定義?；蛘撸瑥膶?shí)時(shí)站點(diǎn)屏幕頂部的管理欄中（假設(shè)您已登錄），只需單擊自定義。這將打開定制器。

WordPress管理欄
現(xiàn)在單擊小工具選項(xiàng)，您將看到主題中所有小工具區(qū)域的列表。單擊要添加小工具的小工具區(qū)域，然后單擊添加小工具按鈕。
這為您提供了可用于您的站點(diǎn)的所有小工具的列表。這將包括 WordPress 附帶的所有內(nèi)置小工具以及您通過插件添加的任何小工具。

添加小工具按鈕
選擇要添加到該小工具區(qū)域的小工具，您將在右側(cè)的預(yù)覽屏幕中看到它。
您可以通過在左側(cè)上下拖動(dòng)小工具來重新排序小工具，或者單擊小工具列表下方的重新排序鏈接，然后單擊箭頭上下移動(dòng)它們。

在定制器中編輯小工具
通過定制器完成添加小工具后，不要忘記單擊左上角的發(fā)布按鈕，以便保存您的更改。如果您離開定制器而不執(zhí)行此操作，您的任何更改都不會(huì)反映在實(shí)時(shí)站點(diǎn)上。
添加小工具后，請(qǐng)查看它們并檢查它們?nèi)绾芜m合您的頁(yè)面設(shè)計(jì)。如果您添加了太多小工具區(qū)域，事情可能看起來有點(diǎn)混亂。您要么需要?jiǎng)h除其中的一些，要么可以將它們從一個(gè)小工具區(qū)域移動(dòng)到另一個(gè)小工具區(qū)域。
在小工具屏幕中執(zhí)行此操作非常容易，您可以在小工具區(qū)域之間拖動(dòng)小工具。
如何將小工具添加到特定頁(yè)面
一些主題包括僅適用于特定頁(yè)面的小工具區(qū)域，例如主頁(yè)。但是，如果您只想將小工具添加到您網(wǎng)站上的一個(gè)頁(yè)面，該怎么辦？
您可以在Gutenberg文章和頁(yè)面編輯器中執(zhí)行此操作。
以通常的方式添加一個(gè)新塊，然后選擇Widgets塊類型。

小工具塊類型
然后，您可以從為您的站點(diǎn)啟用的許多小工具中進(jìn)行選擇，并將其添加到您的文章或頁(yè)面的內(nèi)容中。如果您想添加表單小工具、號(hào)召性用語(yǔ)小工具或最新文章列表，這將非常有用。
如何編輯小工具
將小工具添加到站點(diǎn)后，您可以對(duì)其進(jìn)行更改。單個(gè)小工具將具有您可以通過小工具屏幕或定制器訪問的設(shè)置（無論您使用哪一個(gè)來添加小工具都無關(guān)緊要。）
一些小工具不包含任何設(shè)置，但其他小工具具有小工具標(biāo)題或顯示的文章數(shù)量等設(shè)置。有些更復(fù)雜，需要您在單獨(dú)的設(shè)置頁(yè)面中設(shè)置小工具。檢查插件開發(fā)人員的文檔。
您用于編輯小工具插件的選項(xiàng)包括：

編輯插件的設(shè)置。
將小工具從一個(gè)小工具區(qū)域移動(dòng)到另一個(gè)區(qū)域。
刪除小工具。您有兩種選擇，稍后會(huì)介紹。

要編輯小工具的設(shè)置，請(qǐng)?jiān)谛」ぞ咂聊换蚨ㄖ破髦姓业皆撔」ぞ撸缓蠛?jiǎn)單地編輯提供的任何選項(xiàng)。

編輯小工具選項(xiàng)
要將小工具從一個(gè)區(qū)域移動(dòng)到另一個(gè)區(qū)域，請(qǐng)打開小工具屏幕并將其從一個(gè)小工具區(qū)域拖到另一個(gè)區(qū)域。在輔助功能模式下，導(dǎo)航到小工具右側(cè)的箭頭并從選項(xiàng)中進(jìn)行選擇。
刪除小工具
要在小工具屏幕中刪除小工具，請(qǐng)找到該小工具并單擊小工具設(shè)置框左下方的刪除鏈接。

在小工具屏幕中刪除小工具
要在定制器中刪除小工具，請(qǐng)?jiān)谄湫」ぞ邊^(qū)域中找到該小工具。單擊小工具名稱右側(cè)的箭頭，然后單擊小工具設(shè)置左下方的刪除鏈接。

在定制器中刪除小工具
您還可以從小工具區(qū)域中刪除小工具，但仍然可以稍后通過小工具屏幕使用它。
向下滾動(dòng)到屏幕底部的非活動(dòng)小工具區(qū)域。將小工具拖動(dòng)到此區(qū)域以將它們從小工具區(qū)域中刪除，但將它們保留為具有當(dāng)前設(shè)置的草稿。如果您將來愿意，您可以隨時(shí)將它們拖回小工具區(qū)域。
如果您切換主題并且您的新主題具有不同的小工具區(qū)域，則任何不適合新主題中小工具區(qū)域的小工具將被WordPress自動(dòng)移動(dòng)到非活動(dòng)小工具列表中。
如何為您的主題添加新的小工具區(qū)域
如果您的主題沒有您想要的小工具區(qū)域，您可以隨時(shí)添加自己的。您可以通過添加兩段代碼來做到這一點(diǎn)。
讓我們?cè)趦?nèi)容下方添加一個(gè)小工具區(qū)域。
在主題函數(shù)文件中創(chuàng)建小工具區(qū)域
第一步是使用該?功能設(shè)置小工具區(qū)域。register_widget()
如果您使用的是第三方WordPress主題（這里有一些最好的主題），您需要?jiǎng)?chuàng)建一個(gè)子主題來執(zhí)行此操作。這樣做的原因是，如果您將來更新主題，您的所有更改都將丟失。
如果您使用自己的主題，您可以簡(jiǎn)單地編輯主題。
首先打開主題的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' => '
',
'after_widget' => '
',
'before_title' => '
',
'after_title' => '
',
) );
}
add_action( 'widgets_init', 'wbolt_register_widgets' );
現(xiàn)在保存您的functions.php文件。如果您轉(zhuǎn)到小工具屏幕或定制器，您會(huì)發(fā)現(xiàn)新的小工具區(qū)域可供您添加小工具。
但如果你這樣做，它們實(shí)際上不會(huì)出現(xiàn)在頁(yè)面上。這是因?yàn)槟枰谥黝}模板文件中添加一些代碼。
將小工具添加到主題模板文件
首先是找出你需要使用哪個(gè)主題模板文件。

如果要添加額外的側(cè)邊欄，則需要將此代碼添加到sidebar.php文件中。
如果您在內(nèi)容之前或之后添加小工具區(qū)域，則需要將其添加到輸出內(nèi)容的任何主題模板文件中。
如果要在標(biāo)題中添加小工具區(qū)域，則需要將代碼添加到header.php文件中。
如果您的新小工具區(qū)域僅適用于您網(wǎng)站中的一個(gè)頁(yè)面或一種類型的內(nèi)容，則您需要使用WordPress 模板層次結(jié)構(gòu)來準(zhǔn)確確定您需要使用/創(chuàng)建哪個(gè)模板文件，然后對(duì)其進(jìn)行編輯。因此，例如，您想將小工具區(qū)域添加到您的主頁(yè)，您需要?jiǎng)?chuàng)建一個(gè)front-page.php文件并在那里添加您的小工具區(qū)域。

一旦確定了需要編輯的模板文件以及小工具區(qū)域代碼的確切位置，請(qǐng)?zhí)砑右韵麓a。在內(nèi)容之后的小工具區(qū)域的情況下，我們將其添加到我們主題中的post.php和page.php文件中：
if ( is_active_sidebar( 'after-content-widget-area' ) ) { ?>
aside class="after-content widget-area full-width" role="complementary">



現(xiàn)在保存您的模板文件。
請(qǐng)注意，您的代碼將與我的不同，具體取決于您所稱的小工具區(qū)域以及您想要將其放置在其中的元素。我通常使用side元素，因?yàn)樵谖铱磥硭鼈兪菫閭?cè)邊欄和小工具區(qū)域設(shè)計(jì)的。
忍者提示：如果您將內(nèi)容的容器元素的結(jié)尾移動(dòng)到側(cè)邊欄和/或頁(yè)腳文件的開頭，那么您可以在此處添加它，并且只需要添加一次。
現(xiàn)在，如果您查看您的站點(diǎn)，您會(huì)發(fā)現(xiàn)您添加到小工具區(qū)域的任何小工具都會(huì)顯示在正確的位置。如果它們不在正確的位置，請(qǐng)返回并編輯您的模板文件，確保代碼位于您想要的位置。您可能還需要編輯您的CSS以獲得您想要的方式。

實(shí)時(shí)站點(diǎn)上的小工具
如何使用小工具API編寫小工具
所以現(xiàn)在您知道如何為您的站點(diǎn)選擇小工具，如何將它們添加到您的站點(diǎn)，以及如何注冊(cè)新的側(cè)邊欄或小工具區(qū)域。下一步是學(xué)習(xí)如何創(chuàng)建WordPress小工具。
有時(shí)，您可能會(huì)發(fā)現(xiàn)沒有可用于在您的網(wǎng)站上創(chuàng)建您想要的確切小工具的插件。這意味著您必須自己編寫代碼。
在此示例中，我將向您展示如何編寫一個(gè)非常簡(jiǎn)單的號(hào)召性用語(yǔ)小工具。
小工具API概述
WordPress中的小工具API包括您注冊(cè)、創(chuàng)建和編碼小工具所需的所有代碼。小工具API包括：

用于構(gòu)建新小工具的類。
注冊(cè)小工具并將其部署在您的站點(diǎn)上的功能。
注銷小工具的功能，例如從父主題中注銷。

在這里，我們將使用一個(gè)類來構(gòu)建一個(gè)小工具。第一步是創(chuàng)建一個(gè)插件來保存小工具。
為您的WordPress小工具創(chuàng)建插件
要?jiǎng)?chuàng)建自己的小工具，您需要編寫一個(gè)插件。不要將新小工具的代碼添加到您的主題中，因?yàn)樾」ぞ呤顷P(guān)于功能的，而不是關(guān)于顯示的。如果您將來更改主題，您仍希望能夠訪問該小工具。
首先創(chuàng)建一個(gè)空插件。在您的目錄中創(chuàng)建一個(gè)插件文件夾wp-content/plugins并向其中添加一個(gè)空文件。給它一個(gè)合適的名字。打開該文件并添加此代碼。

您需要將作者URI和插件URI編輯為您自己的。這將為您創(chuàng)建一個(gè)插件，您可以通過插件屏幕激活該插件。

插件屏幕中的小工具插件
但是如果你激活它，什么都不會(huì)發(fā)生。您將不得不向您的插件添加一些代碼。
為小工具創(chuàng)建一個(gè)類
小工具的代碼在一個(gè)類中。所以接下來添加。
class wbolt_Cta_Widget extends WP_Widget { }
創(chuàng)建構(gòu)造函數(shù)
進(jìn)入類的第一件事是創(chuàng)建小工具的構(gòu)造函數(shù)。將此添加到類的大括號(hào)內(nèi)。
//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 );
}
這開始構(gòu)建小工具。
創(chuàng)建表單以輸出小工具
接下來，我們需要一個(gè)表單，小工具屏幕和定制器將使用該表單來創(chuàng)建小工具。添加這個(gè)，仍然在大括號(hào)內(nèi)。
//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';
?>

Title:


Text in the call to action box:


Your link:


這為用戶提供了一個(gè)表單，他們可以使用該表單來添加文本和指向行動(dòng)號(hào)召框的鏈接。
創(chuàng)建保存小工具的函數(shù)
現(xiàn)在您需要保存輸入到該表單的任何內(nèi)容。添加這個(gè)。
//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;          
}
這會(huì)將用戶輸入的數(shù)據(jù)保存到小工具設(shè)置中。
創(chuàng)建輸出小工具的函數(shù)
現(xiàn)在您需要添加將在網(wǎng)站上顯示小工具的代碼。再次，在大括號(hào)內(nèi)添加：
//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';
?>


 Title:
 


 Text in the call to action box:
 


 Your link:
 


注冊(cè)小工具
現(xiàn)在您已經(jīng)編寫好了課程，是時(shí)候注冊(cè)WordPress小工具以使其正常工作了。在類外添加此代碼。
//function to register the widget
function wbolt_register_cta_widget() {
register_widget( 'wbolt_Cta_Widget' );
}
add_action( 'widgets_init', 'wbolt_register_cta_widget' );
現(xiàn)在保存您的插件文件。轉(zhuǎn)到小工具屏幕，您將看到要使用的小工具。

小工具屏幕中的新小工具
如果將其添加到小工具區(qū)域并添加文本和鏈接，它將在實(shí)時(shí)站點(diǎn)中輸出。

實(shí)時(shí)站點(diǎn)中的新小工具
現(xiàn)在可能看起來不太好。你需要添加一些CSS來設(shè)置它的樣式。
將CSS添加到小工具
要將 CSS 添加到您的插件中，您需要?jiǎng)?chuàng)建一個(gè)樣式表并將其排入您的插件中。將此添加到課程之前的插件文件中。
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' );
現(xiàn)在您需要在插件的文件夾中添加一個(gè)style.css文件并為其添加任何樣式。我會(huì)把它留給你！
您現(xiàn)在有一個(gè)簡(jiǎn)單的號(hào)召性用語(yǔ)按鈕，您可以將其添加到您網(wǎng)站上的任何小工具區(qū)域。例如，如果您將其添加到側(cè)邊欄，人們將能夠使用它從網(wǎng)站上的任何位置訪問您的注冊(cè)頁(yè)面。
您可以使用額外的設(shè)置和選項(xiàng)創(chuàng)建更復(fù)雜的小工具，但這讓您了解如何開始創(chuàng)建自己的小工具。
如果你想查看我的這個(gè)插件的代碼，包括樣式，你可以在Github上找到它。
小結(jié)
小工具是我最喜歡的WordPress功能之一。它們可以使您的網(wǎng)站栩栩如生，并幫助您獲得更多注冊(cè)或?qū)⒏嘣L問者轉(zhuǎn)化為客戶。您可以將WordPress小工具添加到主題中的任何現(xiàn)有小工具區(qū)域，也可以添加額外的小工具區(qū)域，以便在更多位置添加更多小工具。
還有很多地方可以找到小工具。WordPress預(yù)裝了一些，您也可以通過插件安裝更多。但這還不是全部，如果您覺得舒服，您還可以使用Widgets API編寫自己的小工具。