WordPress小工具終極指南

WordPress小工具非常有用。它們使您可以在文章或頁面本身之外的網(wǎng)站上添加各種額外內(nèi)容，以鼓勵用戶獲取信息、跟蹤鏈接或采取行動。

在這篇文章中，我將向您展示有關(guān)WordPress小工具所需的一切。如何將它們添加到您的網(wǎng)站，如何創(chuàng)建將其放入的小工具區(qū)域，如何安裝提供更多小工具的插件，如何編寫自己的小工具的代碼等等。

推薦閱讀：WordPress側(cè)邊欄終極指南

首先，讓我們開始確定什么是WordPress小工具。

什么是WordPress小工具？

在WordPress中，小工具是存在于頁面或文章內(nèi)容之外的內(nèi)容片段。

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

要將小工具添加到您的站點，您需要將其添加到小工具區(qū)域。小工具區(qū)域是由您的主題創(chuàng)建的，因為它們與您網(wǎng)站的設(shè)計和布局有關(guān)。

大多數(shù)WordPress主題在側(cè)邊欄和頁腳中都有小工具區(qū)域，也有些主題在很多地方都具有多個小工具區(qū)域，例如在內(nèi)容下方或上方或頁眉中。

下面是我自己的網(wǎng)站之一的屏幕快照，在側(cè)邊欄的內(nèi)容就是通過小工具添加的。

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

這些可以涵蓋廣泛的內(nèi)容類型，例如媒體、社交媒體、導(dǎo)航菜單、搜索、地圖等等。在您的網(wǎng)站上，幾乎沒有想要找到其小工具的東西。實際上，最大的挑戰(zhàn)通常是在所有選項之間進行選擇，而不是過度選擇。

何時使用WordPress小工具

每當(dāng)您想向網(wǎng)站中的一個或多個頁面添加額外的內(nèi)容時，都應(yīng)該使用小工具（這里所說的頁面，包括文章、存檔頁面等），但這不屬于該頁面內(nèi)容。它們對于要顯示在網(wǎng)站每個頁面上的內(nèi)容特別有用，例如最新列表、購物車或號召性用語。

通常我們需要考慮小工具的重要性來安排它們的位置。側(cè)欄中的小工具將比頁腳中的小工具突出，有些用戶甚至看不到頁腳的小工具。

因此，在人們有更多機會與之互動的側(cè)邊欄中，最好使用最新文章小工具或號召性用語小工具，而社交媒體訂閱可位于頁腳。

如果您的主題在主頁上還具有特殊的小工具區(qū)域，則可能需要使用這些區(qū)域在站點的各個部門，相關(guān)內(nèi)容列表或媒體（例如歡迎人們訪問該站點的視頻）中導(dǎo)航。

WordPress的11個小工具示例

理解WordPress小工具的最好方法是查看其中的一些示例。讓我們看一下您在WordPress網(wǎng)站上經(jīng)常看到的11種小工具類型。

1.最新文章小工具

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

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

WordPress已預(yù)裝了“最新文章/近期文章”小工具。它使您可以設(shè)置要顯示的文章數(shù)量以及要給小工具指定的標(biāo)題。

如果您想添加額外的功能，則可以為其他小工具安裝插件（如WordPress Popular Posts），該插件可顯示最受歡迎的內(nèi)容。或者，每次用戶訪問新屏幕時，“高級隨機文章”小工具都會刷新。

2.最近評論小工具

想要向訪問者展示您的網(wǎng)站活力如何，以及您的受眾對您的內(nèi)容的興趣如何？

“最近評論”小工具顯示您站點上的最新評論，從而使訪問者有機會直接導(dǎo)航到這些評論并加入討論。

WordPress隨附了“最近評論”小工具。同樣，如果您想添加額外的功能，則可以安裝第三方評論插件，例如WP Social Comments小工具，該插件使人們可以使用其Facebook帳戶進行評論：非常適合與社交媒體互動。

3.號召性用語小工具

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

您的小工具可以是一個簡單的按鈕，也可以使用文本小工具或HTML小工具甚至圖像小工具來定制，所有這些都預(yù)裝了WordPress。

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

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

您還可以使用小工具來鼓勵人們在您的網(wǎng)站上瀏覽。

有幾個選項：分類或標(biāo)簽云小工具以及導(dǎo)航菜單小工具。

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

您甚至可以將主導(dǎo)航菜單添加到小工具區(qū)域，盡管只有在導(dǎo)航菜單較小的情況下才可以使用。

在網(wǎng)站的頁腳中添加導(dǎo)航菜單將鼓勵到達文章末尾的人們?yōu)g覽您的網(wǎng)站。對于移動用戶，在到達文章末尾后可能需要進行大量滾動才能回到主導(dǎo)航菜單，這特別有用。

或者，您可以使用內(nèi)置的分類小工具來顯示站點中的分類列表，或者使用標(biāo)簽云小工具來使人們可以輕松訪問標(biāo)簽檔案。

5.媒體小工具

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

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

另外，“視頻”小工具可讓您將來自YouTube或Vimeo的視頻直接流到站點的小工具區(qū)域。如果您的站點在主頁上具有特殊的小工具區(qū)域，這將特別有用，但是在頁腳中也不錯，當(dāng)人們到達文章末尾時可以引起人們的注意。

6.社交媒體小工具

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

獲得用于最大平臺（Facebook、Twitter、Instagram）的社交媒體小工具的一種方法是安裝Jetpack插件，其中包括所有這些以及更多內(nèi)容。

注：中文用戶不要安裝這個Jetpack插件，無法正常使用！！！

另外，所有社交媒體平臺都有自己的插件，可通過插件目錄免費獲得。

7.購物車小工具

如果您正在使用WooCommerce之類的插件在網(wǎng)站上運行電子商務(wù)商店，則最好包含購物車小工具，以便用戶可以輕松導(dǎo)航到商店中的購物車。

您可以將其放在人們可以輕松看到的側(cè)邊欄中，或者將其放在頁眉中以增加可見性（如果您的主題在此處包含小工具區(qū)域）。

像WooCommerce這樣的電子商務(wù)插件在插件中包括購物車小工具和其他電子商務(wù)小工具，因此，在將電子商務(wù)添加到站點后，您會發(fā)現(xiàn)它們已添加到“小工具”屏幕中。

8.表單小工具

如果您希望人們與您聯(lián)系、提出問題或注冊郵件列表，則可以在邊欄中添加一個表單。

WordPress中沒有提供表單小工具，但是您可以添加插件來提供它們，例如免費的Contact Form 7或高級但功能強大的Gravity Forms。

拓展閱讀：6個好用的WordPress表單生成器插件比較

9.地圖小工具

如果您的公司位于某個地理位置，并且希望人們能夠輕松找到您，則向您的站點添加地圖小工具會有所幫助。

您可以使用許多免費的地圖插件，例如WP Google Maps 和 WP Baidu Map 插件。

10.登錄小工具

如果您正在運行會員網(wǎng)站，則登錄小工具將使人們可以輕松登錄而無需進入單獨的登錄頁面。

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

“Login With Ajax”插件為您提供了小工具中的登錄表單，這意味著人們可以從任何頁面登錄到您的站點。

拓展閱讀：10+自定義 WordPress 登錄、注冊表單的優(yōu)秀插件

11.搜索小工具

搜索小工具是一個非常簡單但非常有用的小工具，WordPress已經(jīng)內(nèi)置了該小工具。

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

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

一旦確定了WordPress網(wǎng)站所需的小工具類型，就可以安裝它們了。

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

并且如果您的主題中有任何其他小工具區(qū)域，請確定要在其中放置哪些小工具。確保它們適合您網(wǎng)站的布局和設(shè)計。

有三種添加小工具的方法：

• 使用WordPress隨附的小工具。
• 從插件目錄添加第三方小工具。
• 購買包含小工具的高級插件。

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

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

WordPress內(nèi)置的小工具

如果其中一個預(yù)安裝的小工具完成了您需要的操作，請使用它。這將節(jié)省您的時間，并減少在您的網(wǎng)站上運行的代碼。

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

• 文章歸檔：按月鏈接到歸檔頁面，專為博客而設(shè)計，但現(xiàn)在已經(jīng)過時了。
• 日歷：您的文章的日歷，同樣適用于博客，特別是在您的博客對時間敏感的情況下（但如今并不常見）。
• 自定義HTML：最大的靈活性，您可以通過在HTML中鍵入或粘貼來添加所需的任何內(nèi)容。如果您不喜歡編碼，請避免使用。
• 圖像：顯示媒體庫中的圖像。
• 導(dǎo)航菜單：顯示主導(dǎo)航菜單或您創(chuàng)建的單獨菜單。
• 近期評論：最近評論的列表及其鏈接。
• 標(biāo)簽云：云格式的標(biāo)簽列表，帶有指向相關(guān)歸檔的鏈接。
• 視頻：嵌入來自YouTube或其他任何流媒體服務(wù)的視頻。
• 音頻：嵌入播客、播放器、歌曲或其他音頻片段
• 分類目錄：博客中文章分類的列表，以及指向存檔頁面的鏈接。
• 畫廊：比圖像小工具更高級，顯示相冊。
• 功能：元數(shù)據(jù)，例如登錄鏈接和RSS feed。
• 頁面：顯示帶有鏈接的網(wǎng)站頁面列表。
• 最近文章：顯示您最近的文章列表，以鼓勵人們閱讀。
• 搜索：一個簡單的搜索框。
• 文本：您要添加的任何文字，例如有關(guān)網(wǎng)站的信息。

使用插件添加小工具

WordPress插件目錄中有數(shù)千個免費的小工具插件，這些插件將為您提供更多小工具供您選擇。

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

如果插件目錄中沒有您需要的插件，則可以決定添加高級插件。有時這些會提供更多功能或更直觀的界面。但是有時您會在免費插件中找到相同的功能，因此在支付插件費用之前，請先搜索插件目錄。

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

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

1. 從小工具中準(zhǔn)確確定您的需求。它需要具有什么功能，您希望它看起來如何？是否需要鏈接到任何第三方API？
2. 檢查內(nèi)置的小工具，看是否有滿足您需求的小工具。測試任何相關(guān)的測試，如果找到合適的測試，那就太好了。
3. 檢查插件目錄，您可以通過插件> 安裝插件訪問該目錄。嘗試搜索多個詞以找到適合您的插件，然后搜索帶有或不帶有“widget”一詞。有時，不專注于小工具的插件會將小工具為更廣泛的功能集的一部分。
4. 如果在免費插件中找不到合適的插件，請尋找 高級插件。向其他WordPress用戶詢問建議，并在選擇其中一項之前查看評論。

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

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

現(xiàn)在您已經(jīng)選擇了小工具，是時候?qū)⑵涮砑拥侥恼军c了。

您可以將小工具添加到主題提供的任何活動小工具區(qū)域。如果您的主題所在的位置沒有小工具區(qū)域，請嘗試尋找其他主題。

在本文的稍后部分，我將向您展示如何對自己的小工具區(qū)域進行編碼。

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

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

我將很快向您展示如何使用這兩種方法，但首先讓我們看一下小工具區(qū)域以及為什么要使用主題進行處理。

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

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

大多數(shù)主題在側(cè)邊欄和頁腳中都有小工具區(qū)域。但是有些也將它們放在其他位置，例如內(nèi)容下方或上方或頁眉中。

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

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

如果要將小工具添加到站點中的其他位置，則有必要查找具有多個小工具區(qū)域的主題。

在您的主題中不是側(cè)邊欄或頁腳的地方放置小工具的一個很好的例子是，像在我的一個網(wǎng)站上一樣，在頁眉中添加搜索欄。

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

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

在這里，您可以看到我在主題函數(shù)文件中使用的代碼，以添加將在標(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' => '<div id="%1$s" class="widget-container %2$s">',
 'after_widget' => '</div>',
 'before_title' => '<h3 class="widget-title">',
 'after_title' => '</h3>',
) );

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

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 }

如果要在主題中添加額外的小工具區(qū)域，則需要添加相同類型的代碼。在本文的后面，我將向您展示如何執(zhí)行此操作。

不要忘記，如果您的主題沒有想要的小工具區(qū)域那么多，那么您始終可以執(zhí)行以下兩項操作之一：

• 查找一個確實有您想要的小工具區(qū)域的主題。
• 將新的小工具區(qū)域編碼為您的主題或主題的子主題。

在主題中所需的所有位置都有小工具區(qū)域后，就可以開始向它們添加小工具了。

如何使用小工具屏幕添加小工具

有兩種方法可以將小工具添加到WordPress網(wǎng)站。第一個是使用WordPress管理后臺的“小工具”屏幕。

單擊外觀>小工具。這將打開小工具屏幕。

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

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

然后，您可能需要編輯小工具在小工具區(qū)域中的位置。

您可以向每個小工具區(qū)域添加任意數(shù)量的小工具，但不要太過分。您可以將它們拖動到小工具區(qū)域內(nèi)，以正確的順序排列。如果您決定不喜歡它們的外觀，也可以將它們從一個小工具區(qū)域拖到另一個區(qū)域中。

您還可以使用“小工具”屏幕使用鍵盤來添加小工具，因此，如果您無權(quán)訪問鼠標(biāo)，仍然可以添加小工具。

在輔助功能模式下添加和編輯小工具

如果您不能使用鼠標(biāo)，則可以通過鍵盤使用“小工具”屏幕。

首先，通過單擊（或選擇并選擇）屏幕右上方的Enable accessibility mode鏈接，將屏幕置于輔助功能模式。

然后，屏幕將更改以反映您處于輔助功能模式下。

然后，您可以使用鍵盤上的Tab鍵在屏幕的各個元素之間導(dǎo)航，然后按Enter鍵選擇一個項目并對其進行操作。您可以選擇一個小工具，在“添加”鏈接上單擊“返回” ，然后選擇要添加的位置，或者在小工具區(qū)域中選擇一個選項卡，然后在“編輯”鏈接上單擊“返回” 。

如何在WordPress定制器添加小工具

使用定制程序添加小工具意味著您可以在添加小工具時看到它們。這樣可以更輕松地查看小工具的外觀，并根據(jù)需要在小工具區(qū)域之間移動它們。

在管理菜單中，點擊外觀>自定義。或者，從實時站點屏幕頂部的管理欄中（假設(shè)您已登錄），只需單擊自定義/Customize即可。這將打開定制器。

現(xiàn)在單擊“小工具”選項，您將看到主題中所有小工具區(qū)域的列表。單擊要在其中添加小工具的小工具區(qū)域，然后單擊添加小工具按鈕。

這為您提供了可用于您的站點的所有小工具列表。這將包括WordPress隨附的所有內(nèi)置小工具，以及您通過插件添加的任何小工具。

選擇要添加到該小工具區(qū)域的小工具，您將在右側(cè)的預(yù)覽屏幕中看到它。

您可以通過以下方式對小工具進行重新排序：在左側(cè)向上或向下拖動它們，或者單擊小工具列表下方的“重新排序”鏈接，然后單擊箭頭上下移動它們。

通過“定制程序”完成添加小工具后，不要忘記單擊左上方的“發(fā)布”按鈕，以保存您的更改。如果您不這樣做就離開定制器，則所做的任何更改都不會反映在實時站點上。

添加小工具后，請查看它們，并檢查它們?nèi)绾芜m合您的頁面設(shè)計。如果添加了太多的小工具區(qū)域，則看起來可能有些混亂。您需要刪除其中一些，也可以將它們從一個小工具區(qū)域移動到另一個區(qū)域。

在“小工具”屏幕中執(zhí)行此操作確實很容易，您可以在其中在小工具區(qū)域之間拖動小工具。

如何將小工具添加到特定頁面

一些主題包括僅用于特定頁面（如首頁）的小工具區(qū)域。但是，如果您只想在網(wǎng)站的一個頁面上添加小工具，該怎么辦？

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

以通常的方式添加一個新塊，然后選擇小工具/Widgets塊類型。

然后，您可以從為網(wǎng)站啟用的許多小工具中進行選擇，并將其添加到文章或頁面的內(nèi)容中。如果要添加表單小工具、號召性用語小工具或最新文章列表，此功能非常有用。

如何編輯小工具

將小工具添加到站點后，即可對其進行更改。單個小工具將具有您可以通過“小工具”屏幕或定制程序訪問的設(shè)置（與您添加小工具無關(guān)）。

一些小工具不包含任何設(shè)置，但是其他一些小工具具有例如小工具標(biāo)題或顯示的文章數(shù)的設(shè)置。有些更復(fù)雜，需要您在單獨的設(shè)置頁面中設(shè)置小工具。查看插件開發(fā)人員的文檔。

編輯小工具插件的選項包括：

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

要編輯小工具的設(shè)置，請在小工具屏幕或定制程序中找到該小工具，然后簡單地編輯提供的任何選項。

要將小工具從一個區(qū)域移動到另一個區(qū)域，請打開小工具屏幕，然后將其從一個區(qū)域拖動到另一個區(qū)域。在輔助功能模式下，導(dǎo)航到小甘菊右側(cè)的箭頭，然后從選項中進行選擇。

刪除小工具

要在“小工具”屏幕中刪除小工具，請找到該小工具，然后單擊小工具設(shè)置框左下方的刪除鏈接。

要在定制程序中刪除小工具，請在其小工具區(qū)域中找到該小工具。單擊小工具名稱右側(cè)的箭頭，然后單擊小工具設(shè)置左下方的“刪除”鏈接。

您也可以從小工具區(qū)域中刪除小工具，但仍然可以在以后通過小工具屏幕使用它。

向下滾動至屏幕底部的非活動小工具區(qū)域。將小工具拖到該區(qū)域以將其從小工具區(qū)域中刪除，但將其保留為草稿并保留其當(dāng)前設(shè)置。然后，您將來可以隨時將它們拖回到小工具區(qū)域。

如果切換主題，并且新主題具有不同的小工具區(qū)域，則新主題中不適合新主題的小工具區(qū)域的小工具將自動被WordPress移至“非活動小工具”列表。

如何向主題添加新的小工具區(qū)域

如果您的主題沒有想要的小工具區(qū)域，則可以隨時添加自己的區(qū)域。您可以通過添加兩段代碼來實現(xiàn)。

讓我們在內(nèi)容下方添加一個小工具區(qū)域。

在主題函數(shù)文件中創(chuàng)建小工具區(qū)域

第一步是使用函數(shù)register_widget()設(shè)置小工具區(qū)域 。

如果您使用的是第三方WordPress主題，則需要創(chuàng)建一個子主題來實現(xiàn)。這樣做的原因是，如果將來更新主題，所有的修改都將丟失，所以采用子主題方式來避免這個問題。

如果您使用自己的主題，則只需編輯主題即可。

首先打開主題的functions.php文件。在文件底部，添加此代碼。

function kinsta_register_widgets() {
 
 register_sidebar( array(
  'name' => __( 'After Content Widget Area', 'kinsta' ),
  'id' => 'after-content-widget-area',
  'description' => __( 'Widget area after the content', 'kinsta' ),
  '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', 'kinsta_register_widgets' );

現(xiàn)在保存您的functions.php文件。如果轉(zhuǎn)到“小工具”屏幕或“外觀-自定義”，則會找到新增的小工具區(qū)域。

但是，如果您這樣做，它們實際上將不會顯示在頁面上。這是因為您需要向主題模板文件中添加一些代碼。

將小工具添加到主題模板文件

第一件事是找出您需要使用哪個主題模板文件。

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

確定要編輯的模板文件以及在小工具區(qū)域的代碼的確切位置后，添加以下代碼。對于內(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">
  <?php dynamic_sidebar( 'after-content-widget-area' ); ?>
 </aside>

<?php }

現(xiàn)在保存您的模板文件。

請注意，根據(jù)您所稱的小工具區(qū)域以及要將其放置在內(nèi)部的元素，您的代碼將與我的不同。我通常使用一個side元素，因為在我看來它們是為側(cè)邊欄和小工具區(qū)域設(shè)計的。

提示：如果將內(nèi)容的容器元素的結(jié)尾移動到側(cè)邊欄和/或頁腳文件的開頭，則可以在此處添加該內(nèi)容，而只需添加一次。

現(xiàn)在，如果您查看您的站點，您會發(fā)現(xiàn)添加到小工具區(qū)域的所有小工具都將顯示在正確的位置。如果它們不在正確的位置，請返回并編輯您的模板文件，確保代碼位于所需位置。您可能還需要編輯CSS才能找到所需的樣式。

如何使用Widgets API編碼小工具

因此，現(xiàn)在您知道了如何為您的站點選擇小工具，如何將它們添加到您的站點以及如何注冊新的側(cè)邊欄或小工具區(qū)域。下一步是學(xué)習(xí)如何創(chuàng)建WordPress小工具。

有時，您可能會發(fā)現(xiàn)沒有可用的插件來創(chuàng)建您想要的站點上的小工具。這意味著您必須自己編寫代碼。

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

Widgets API概述

WordPress中的Widgets API包括注冊，創(chuàng)建和編碼Widget所需的所有代碼。Widgets API包括：

• 用于構(gòu)建新小工具的類。
• 用于注冊小工具并在您的站點上裝飾??它們的功能。
• 取消小工具注冊的功能，例如從父主題注銷。

在這里，我們將使用一個類來構(gòu)建小工具。第一步是創(chuàng)建一個插件來保存小工具。

為您的WordPress小工具創(chuàng)建一個插件

要創(chuàng)建自己的小工具，您需要編寫插件代碼。不要將小工具的代碼添加到主題中，因為小工具是關(guān)于功能而不是外觀顯示。如果將來更改主題，則仍希望能夠訪問該小工具。

首先創(chuàng)建一個空插件。在wp-content/plugins目錄中創(chuàng)建一個插件文件夾，然后向其中添加一個空文件。給它起一個適當(dāng)?shù)拿帧４蜷_該文件并添加此代碼。

<?php
/**
 * Plugin Name: Kinsta 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編輯為您自己的。這將為您創(chuàng)建一個插件，您可以通過“插件”屏幕將其激活。

但是，如果激活它，將不會發(fā)生任何事情。您將必須在插件中添加一些代碼。

為小工具創(chuàng)建一個類

小工具的代碼在一個類中。因此，接下來添加。

class kinsta_Cta_Widget extends WP_Widget {

}

創(chuàng)建構(gòu)造函數(shù)

進入類的第一件事是創(chuàng)建小工具的構(gòu)造函數(shù)。將此添加到類的大括號內(nèi)。

//widget constructor function

function __construct() {

 $widget_options = array (
  'classname' => 'kinsta_cta_widget',
  'description' => 'Add a call to action box with your own text and link.'
 );

 parent::__construct( 'kinsta_cta_widget', 'Call to Action', $widget_options );

}

這開始構(gòu)建小工具。

創(chuàng)建表單以輸出小工具

接下來，我們需要一個窗口，小工具屏幕和定制程序?qū)⑹褂迷摯绑w來創(chuàng)建小工具。仍然在花括號內(nèi)添加此內(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';
?>

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

這為用戶提供了一個他們可以用來添加文本的表格以及指向號召性用語框的鏈接。

創(chuàng)建函數(shù)以保存小工具

現(xiàn)在，您需要保存輸入該表單的所有內(nèi)容。加上這個

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

}

這會將用戶輸入的數(shù)據(jù)保存到小工具設(shè)置中。

創(chuàng)建函數(shù)以輸出小工具

現(xiàn)在，您需要添加將在網(wǎng)站上顯示小工具的代碼。同樣，將其添加到花括號中：

//function to display the widget in the site

function widget( $args, $instance ) {
 //define variables
 $title = apply_filters( 'widget_title', $instance['title'] );
 $text = $instance['text'];
 $link = $instance['link'];

 //output code
 echo $args['before_widget'];
 ?>

 <div class="cta">
  <?php if ( ! empty( $title ) ) {
  echo $args['before_title'] . $title . $args['after_title'];
};
  echo '<a href="' . $link . '">' . $text . '</a>';
  ?>
 </div>

 <?php
 echo $args['after_widget'];

}

注冊小工具

現(xiàn)在您已經(jīng)編寫了課程，是時候注冊WordPress小工具了，它可以正常工作了。將此代碼添加到類之外。

//function to register the widget
function kinsta_register_cta_widget() {

 register_widget( 'kinsta_Cta_Widget' );
  
}
add_action( 'widgets_init', 'kinsta_register_cta_widget' );

現(xiàn)在保存您的插件文件。轉(zhuǎn)到小工具屏幕，您將看到要使用的小工具。

如果將其添加到小工具區(qū)域并添加文本和鏈接，它將在實時站點中輸出。

現(xiàn)在可能看起來并不那么好。您需要添加一些CSS樣式。

將CSS添加到小工具

要將CSS添加到您的插件中，您需要創(chuàng)建一個樣式表并將其放入您的插件中。在課程開始之前將其添加到您的插件文件中。

function kinsta_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', 'kinsta_widget_enqueue_styles' );

現(xiàn)在，您需要在插件的文件夾中添加一個style.css文件，并為其添加任何樣式。這個就靠你自己了！

現(xiàn)在，您有了一個簡單的號召性用語按鈕，您可以將其添加到網(wǎng)站上的任何小工具區(qū)域。例如，如果您將其添加到側(cè)邊欄中，則人們將能夠使用它從網(wǎng)站上的任何地方訪問您的注冊頁面。

您可以使用其他設(shè)置和選項來創(chuàng)建更復(fù)雜的小工具，但這使您了解如何開始創(chuàng)建自己的小工具。

如果要查看此插件的代碼（包括樣式），可以在Github上找到它。

總結(jié)

小工具是WordPress最棒的功能之一。它們可以使您的網(wǎng)站栩栩如生，并幫助您獲得更多訂閱用戶或?qū)⒏嘣L問者轉(zhuǎn)化為客戶。您可以將WordPress小根據(jù)添加到主題中的任何現(xiàn)有小工具區(qū)域，也可以添加額外的小工具區(qū)域，以便可以在更多位置添加更多小工具。

也有很多地方可以找到小工具。WordPress預(yù)先安裝了許多工具，您也可以通過插件安裝更多小工具。您甚至還可以使用Widgets API編寫自己的小工具。

注：文本出自 kinsta.com，由 WordPress大學(xué)翻譯整理。

推薦閱讀：

• WordPress 快速入門視頻教程38：小工具的操作
• WordPress添加頁腳小工具區(qū)域
• WordPress 根據(jù)用戶角色和登錄狀態(tài)顯示不同內(nèi)容和小工具
• 在正確的工具區(qū)域內(nèi)顯示你創(chuàng)建的WordPress小工具
• 一步步創(chuàng)建你的第一個 WordPress 小工具
• WordPress 小工具指定頁面顯示: Conditional Widgets
• WordPress在指定頁面顯示/隱藏小工具的插件：Restrict Widgets