WordPress小部件完整指南:如何使用,添加和實現它們以自定義您的網站

WordPress小部件非常有用。它們使您可以在帖子或頁面本身之外將各種其他內容添加到您的網站中,以鼓勵用戶獲取信息,跟蹤鏈接或採取行動。

在這篇文章中,我將向您展示有關WordPress小部件所需的所有知識。如何將它們添加到您的網站,如何創建將其放入的窗口小部件區域,如何安裝為您提供更多插件的插件,如何編寫自己的窗口小部件的代碼等等。

首先,讓我們首先確定什麼是WordPress小部件。

只需移至Kinsta,即可將WordPress網站的速度提高200%。
        
          今天免費遷移
        
      
    
  
什麼是WordPress小部件?

在WordPress中,小部件是生活在頁面流之外的內容片段或發布內容。

小部件包含與單個帖子或頁面分開的信息,導航或媒體。在大多數情況下,每個窗口小部件都會顯示在站點的每個頁面上,但是您也可以為特定頁面(例如主頁)註冊窗口小部件區域。

要將小部件添加到您的站點,您需要將其添加到小部件區域。窗口小部件區域是由您的主題創建的,因為它們與站點的設計和布局有關,而與功能無關。

大多數WordPress主題在邊欄和頁腳中都有小部件區域,儘管有些主題在很多地方都具有多個小部件區域,例如在內容的下方或上方或頁眉中。

下面是我自己的網站之一的屏幕快照,在側邊欄和頁腳中顯示了小部件。

我網站上的小部件區域

我網站上的小部件區域

WordPress附帶了許多預載入的小部件,因此您無需安裝任何插件或編寫任何代碼即可使用它們。但是您也可以通過安裝插件或編寫自己的代碼來添加更多小部件。

這些可以涵蓋廣泛的內容類型,例如媒體,社交媒體供稿,導航,搜索,地圖等等。在您的網站上,幾乎沒有想要找到其小部件的東西。實際上,最大的挑戰通常是在所有選項之間進行選擇,而不是過度選擇。

何時使用WordPress小部件

每當您想向網站中的一個或多個頁面添加額外的內容(並且當我說頁面時,我包括帖子,檔案等)時,都應該使用小部件,但這不屬於該頁面內容。它們對於要顯示在網站每個頁面上的內容特別有用,例如最新帖子列表,購物車或號召性用語。

考慮一下需要多少用戶訪問每個窗口小部件,以及在決定放置它的位置時它的重要性。側欄中的小部件將比頁腳中的小部件突出,有些用戶甚至看不到。

因此,在人們有更多機會與之互動的側邊欄中,最好使用最新的帖子小部件或號召性用語小部件,而社交媒體Feed可能位於頁腳。

如果您的主題在主頁上還具有特殊的窗口小部件區域,則可能需要使用這些區域在站點的部門,相關內容列表或媒體(例如視頻)中導航,以歡迎人們訪問站點。

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

Jetpack插件

另外,所有社交媒體平台都有自己的插件,可通過插件目錄免費獲得。或者,您可以找到第三方插件,這些插件可讓您自定義顯示社交媒體供稿的方式。

7.購物車小部件

如果您使用WooCommerce之類的插件在網站上運行電子商務商店,則最好包含購物車小部件,以便用戶可以輕鬆地導航至商店中的購物車。

購物車小部件

購物車小部件

您可以將其放在人們可以輕鬆查看的側邊欄中,或者將其放在標題中以增加可見性(如果您的主題在此處包含小部件區域)。

像WooCommerce這樣的電子商務插件在插件中包含購物車窗口小部件和其他電子商務窗口小部件,因此,在將電子商務添加到網站後,您會發現它們已添加到窗口小部件屏幕中。

8.表單小部件

如果您希望人們與您聯繫,提出問題或註冊郵件列表,則可以在邊欄中添加一個表格。

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

9.地圖小工具

如果您的公司位於某個地理位置,並且希望人們能夠輕鬆找到您,則向您的站點添加地圖小部件會有所幫助。

您可以使用許多免費的Google Map Widget插件,例如WP Google Maps插件。

WP Google Maps插件

WP Google Maps插件

另外,如果您不想安裝插件,則可以從Google Maps獲取嵌入代碼,然後將其添加到HTML小部件中。

10.登錄小部件

如果您運行的是會員網站,則登錄小部件將使人們可以輕鬆登錄而無需進入單獨的登錄頁面。

WordPress隨附的Meta小部件包含一個登錄鏈接,但其中還包含您可能不想要的其他內容,因此,我建議為此從插件目錄中使用單獨的插件。

「使用Ajax登錄」小部件為您提供了一個小部件中的登錄表單,這意味著人們可以從任何頁面登錄到您的站點。

使用Ajax小部件插件登錄

使用Ajax小部件插件登錄

11.搜索小部件

搜索小部件是一個非常簡單但非常有用的小部件,它預裝了WordPress。

搜索小部件

搜索小部件

將其添加到側邊欄或標題中,可以使人們更輕鬆地在您的網站上查找內容。

如果您想增強搜索小部件的功能,可以安裝免費的WP Google搜索小部件,它使用Google搜索。

如何將小部件添加到您的WordPress網站

一旦確定了WordPress網站所需的小部件類型,就可以安裝它們了。

不要試圖添加太多。數量越多,用戶注意到它們的可能性就越小。相反,請專註於側欄的兩個或三個關鍵小部件。您可以在頁腳中添加更多內容,但無論如何它們都不太重要。

並且,如果您的主題中有任何其他窗口小部件區域,請確定要在其中放置哪些窗口小部件。確保它們適合您網站的布局和設計。

有三種添加小部件的方法:

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

為您的WordPress網站查找小部件

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

WordPress隨附的小部件

如果其中一個預安裝的小部件完成了您需要的操作,請使用它。這將節省您的時間,並減少在您的網站上運行的代碼。

預裝的WordPress小部件

預裝的WordPress小部件

預安裝的小部件為:

  • 檔案:按月鏈接到檔案,專為博客而設計,但現在已經過時了。

  • 日曆:您的帖子的日曆,同樣適用於博客,特別是在您的博客對時間敏感的情況下(但如今並不常見)。

  • 自定義HTML:最大的靈活性,可通過在HTML中鍵入或粘貼來添加所需的任何內容(例如Google表單)。如果您不喜歡編碼,請避免使用。

  • 圖像:顯示媒體庫中的圖像。

  • 導航菜單:顯示主導航菜單或您創建的單獨菜單。

  • 最近評論:最近評論的列表及其鏈接。

  • 標籤云:雲格式的標籤列表,帶有指向相關檔案的鏈接。

  • 視頻:嵌入來自YouTube或任何其他流媒體服務的視頻。

  • 音頻:嵌入播客,播放器,歌曲或其他音頻片段。

  • 類別:您博客中類別的列表,以及指向存檔頁面的鏈接。

  • 圖庫:比圖像小部件更高級,顯示圖像庫。

  • 元:元數據,例如登錄鏈接和RSS源。 WordPress初期的宿醉,現在不太有用。

  • 頁面:顯示網站頁面的列表以及鏈接。

  • 最近的帖子:顯示您最近的帖子列表,以鼓勵人們閱讀。

  • 搜索:一個簡單的搜索框。

  • 文字:您要添加的任何文字,例如有關網站的信息。

使用插件添加小部件

WordPress插件目錄有數千個免費的小部件插件,這些插件將為您提供更多小部件供您選擇。

除此之外,許多其他插件還包括小部件,例如為您提供購物車小部件的電子商務插件等。

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

如何為您的網站找到合適的小部件

要為您找到合適的WordPress小部件,請遵循以下提示:

  1. 從小部件中準確確定您的需求。它需要具有什麼功能,您希望它看起來如何?是否需要鏈接到任何第三方API?
  2. 檢查內置的小部件,看看是否有滿足您需求的小部件。測試任何相關的軟體,如果找到合適的軟體,那就太好了。如果不…
  3. 檢查插件目錄,您可以通過「插件」>「添加新文件」訪問該目錄。嘗試搜索多個詞以找到適合您的插件,然後搜索帶有或不帶有「 widget」字樣的字詞。有時,不專註於小部件的插件會將小部件作為更廣泛的功能集的一部分。
  4. 如果您在免費插件中找不到合適的插件,請尋找一個高級插件。向其他WordPress用戶詢問建議,並在選擇評論之前查看評論。

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

如何在WordPress的側邊欄和頁腳中添加小部件

現在,您已經選擇了小部件,是時候將其添加到您的網站了。

您可以將窗口小部件添加到主題提供的任何活動窗口小部件區域。如果您的主題所在的位置沒有小部件區域,請嘗試尋找其他主題。

在本文的稍後部分,我將向您展示如何對自己的小部件區域進行編碼。

有兩種方法可以將小部件添加到您的站點:

  • 通過使用定製器。轉到管理菜單中的外觀>定製程序>小部件,或者從屏幕頂部的管理欄中轉到自定義>小部件。
  • 通過窗口小部件管理屏幕。轉到管理菜單中的外觀>窗口小部件,或從管理欄中單擊自定義>窗口小部件。

定製程序中的小部件

定製程序中的小部件

我將在短期內向您展示如何使用這兩種方法,但首先讓我們看一下小部件區域以及為什麼要使用主題進行處理。

小部件不僅僅用於側邊欄

根據您的WordPress主題,您可能會發現您在多個位置都有小部件區域。

大多數主題在邊欄和頁腳中都有小部件區域。但是有些也將它們放在其他位置,例如內容下方或上方或標題中。

如果您轉到WordPress管理員中的「小部件設置」屏幕,則可以查看主題中的所有小部件區域。

我在很多地方使用帶有多個小部件區域的主題。您可以在下面的屏幕截圖中看到,內容的上方和下方,頂部的頁眉,主頁腳下方都有小部件區域。

小部件設定畫面,小部件區域

小部件設定畫面,小部件區域

如果要將小部件添加到站點中的其他位置,則有必要查找具有多個小部件區域的主題。最好的方法是使用框架主題。

在主題中某個位置而不是側邊欄或頁腳的小部件的一個很好的例子是,像在我的一個網站上一樣,在頁眉中添加搜索欄。

標頭中的搜索欄

標頭中的搜索欄

小部件區域和主題

小部件區域被編碼到主題模板文件以及主題功能文件中。

在這裡,您可以看到我在主題函數文件中使用的代碼,以添加將在標題中使用的小部件區域。

register_sidebar(數組(
 ‘name’=> __(’Header Widget Area’,’rmccollin’),
 ‘id’=>’header-widget-area’,
 ‘description’=> __(’位於標題右側,站點標題和描述旁邊的小部件區域。’,’rmccollin’),
 ‘before_widget’=>’

‘,
 ‘after_widget’=>’

‘,
 ‘before_title’=>’

‘,
 ‘after_title’=>’

‘,
));

這是我的header.php文件中的代碼,該代碼將小部件區域添加到主題的正確位置。

if(is_active_sidebar(’header-widget-area’)){?>

<?php}

如果要在主題中添加額外的窗口小部件區域,則需要添加相同類型的代碼。我將在本文後面的部分中向您展示如何執行此操作。

別忘了,如果您的主題沒有想要的小部件區域那麼多,那麼您始終可以執行以下兩項操作之一:

  • 查找一個確實具有您想要的小部件區域的主題。
  • 將新的小部件區域編碼為您的主題或主題的子代。

在主題中所有需要的位置都具有小部件區域後,就可以開始向其添加小部件了。

如何使用窗口小部件屏幕添加窗口小部件

有兩種方法可以將小部件添加到WordPress網站。第一個是使用WordPress管理員中的「小部件」屏幕。

單擊外觀>小部件。這將打開小部件屏幕。

小部件屏幕

小部件屏幕

要添加小部件,您可以執行以下兩項操作之一:

  • 將其從左側的小部件列表中拖到相關的小部件區域中。
  • 點擊您要添加的小部件,您將看到可以添加它的位置的列表。選擇所需的小部件區域,然後單擊添加小部件按鈕。

選擇窗口小部件區域和窗口小部件

選擇窗口小部件區域和窗口小部件

然後,您可能需要編輯窗口小部件在窗口小部件區域內的位置。

您可以在每個小部件區域中添加任意數量的小部件,但不要太過分。您可以在小部件區域內拖動它們,以正確的順序獲得它們。如果您決定不喜歡它們的外觀,也可以將它們從一個窗口小部件區域拖到另一個窗口中。

您還可以使用鍵盤在「小部件」屏幕上添加小部件,因此,如果您無權訪問滑鼠,則仍然可以添加小部件。

在輔助功能模式下添加和編輯小部件

如果您無法使用滑鼠,則可以通過鍵盤使用「小部件」屏幕。

首先,通過單擊(或選擇並選擇)屏幕右上方的Enable accessibility mode鏈接,將屏幕置於輔助功能模式。

輔助功能模式鏈接

輔助功能模式鏈接

然後,屏幕將更改以反映您處於輔助功能模式的事實。

小部件屏幕可訪問性模式

小部件屏幕可訪問性模式

然後,您可以使用鍵盤上的Tab鍵在屏幕的各個元素之間導航,然後按Enter鍵選擇一個項目並對其進行操作。您可以選擇一個窗口小部件,然後點擊添加鏈接上的Return鍵,然後選擇要添加的位置,或者選擇一個窗口小部件區域並點擊編輯鏈接上的Return鍵。

如何使用WordPress定製器添加小部件

使用定製程序添加窗口小部件而不是窗口小部件屏幕意味著您可以在添加窗口小部件時看到它們。這使您更容易查看小部件的外觀,並根據需要在小部件區域之間移動它們。

在管理菜單中,點擊外觀>自定義。或者,從實時站點屏幕頂部的管理欄中(假設您已登錄),只需單擊「自定義」。這將打開定製器。

WordPress管理欄

WordPress管理欄

現在,單擊「窗口小部件」選項,您將看到主題中所有窗口小部件區域的列表。單擊要在其中添加窗口小部件的窗口小部件區域,然後單擊添加窗口小部件按鈕。

這為您提供了可用於您的站點的所有小部件的列表。這將包括WordPress隨附的所有內置小部件,以及您通過插件添加的所有小部件。

添加小部件按鈕

添加小部件按鈕

選擇要添加到該窗口小部件區域的窗口小部件,您將在右側的預覽屏幕中看到該窗口小部件。

您可以通過以下方式對小部件進行重新排序:在左側向上或向下拖動它們,或者單擊小部件列表下方的「重新排序」鏈接,然後單擊箭頭上下移動它們。

在定製程序中編輯窗口小部件

在定製程序中編輯窗口小部件

通過「定製程序」添加窗口小部件後,不要忘記單擊左上方的「發布」按鈕,以保存您的更改。如果您不這樣做就離開定製器,則所做的任何更改都不會反映在實時站點上。

添加小部件後,請查看它們,並檢查它們在頁面設計中的適合程度。如果您添加了太多的小部件區域,則看起來可能會有些混亂。您需要刪除其中一些,也可以將它們從一個小部件區域移動到另一個小部件區域。

在「小部件」屏幕中執行此操作非常容易,您可以在其中在小部件區域之間拖動小部件。

如何將小部件添加到特定頁面

一些主題包括僅用於特定頁面(如首頁)的窗口小部件區域。但是,如果您只想在網站的一個頁面上添加小部件,該怎麼辦?

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

以通常的方式添加一個新塊,然後選擇Widgets塊類型。

小部件塊類型

小部件塊類型

然後,您可以從為網站啟用的許多小部件中進行選擇,並將其添加到帖子或頁面的內容中。如果您要添加表單小部件,號召性用語小部件或最新帖子列表,此功能非常有用。

如何編輯小部件

將小部件添加到網站後,即可對其進行更改。單個窗口小部件將具有您可以通過「窗口小部件」屏幕或定製程序訪問的設置(與您添加窗口小部件中的哪一個無關)。

一些小部件不包含任何設置,但是其他一些小部件具有例如小部件標題或顯示的帖子數的設置。有些更複雜,需要您在單獨的設置頁面中設置小部件。查看插件開發人員的文檔。

編輯窗口小部件插件的選項包括:

  • 編輯插件的設置。
  • 將小部件從一個小部件區域移動到另一小部件區域。
  • 刪除小部件。您有兩個選擇,稍後將介紹。

要編輯窗口小部件的設置,請在窗口小部件屏幕或定製程序中找到該窗口小部件,然後簡單地編輯提供的任何選項。

編輯窗口小部件選項

編輯窗口小部件選項

要將窗口小部件從一個區域移動到另一個區域,請打開窗口小部件屏幕,然後將其從一個窗口小部件區域拖動到另一個區域。在輔助功能模式下,導航到小部件右側的箭頭,然後從選項中進行選擇。

刪除小部件

要在「小部件」屏幕中刪除小部件,請找到該小部件,然後單擊小部件設置框左下方的刪除鏈接。

在窗口小部件屏幕中刪除窗口小部件

在窗口小部件屏幕中刪除窗口小部件

要在定製程序中刪除窗口小部件,請在其窗口小部件區域中找到該窗口小部件。單擊小部件名稱右側的箭頭,然後單擊小部件設置左下方的「刪除」鏈接。

在定製器中刪除窗口小部件

在定製器中刪除窗口小部件

您也可以從窗口小部件區域中刪除窗口小部件,但仍然可以通過窗口小部件屏幕使用它。

向下滾動至屏幕底部的「非活動窗口小部件」區域。將小部件拖到該區域以將其從小部件區域中刪除,但將其保留為草稿並保留其當前設置。然後,如果將來需要,可以隨時將它們拖回小部件區域。

如果您切換主題,並且新主題具有不同的小部件區域,則新主題中不適合新主題的小部件區域的所有小部件都會自動被WordPress移至「非活動小部件」列表中。

如何在主題中添加新的小部件區域

如果您的主題沒有想要的小部件區域,則可以隨時添加自己的主題區域。您可以通過添加兩段代碼來做到這一點。

讓我們在內容下方添加一個小部件區域。

在主題函數文件中創建窗口小部件區域

第一步是使用register_widget()函數設置小部件區域。

如果您使用的是第三方WordPress主題(以下是一些最佳主題),則需要創建一個子主題。這樣做的原因是,如果將來更新主題,所有更改都將丟失。

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

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

函數kinsta_register_widgets(){
 
 register_sidebar(數組(
‘name’=> __(’Content Widget Area之後,’kinsta’),
  ‘id’=>’after-content-widget-area’,
  ‘description’=> __(’內容後的小部件區域’,’kinsta’),
  ‘before_widget’=>’

‘,
  ‘after_widget’=>’

‘,
  ‘before_title’=>’

‘,
  ‘after_title’=>’

‘,

 ));

}

add_action(’widgets_init’,’kinsta_register_widgets’);

現在保存您的functions.php文件。如果您轉到「小部件」屏幕或「定製程序」,則會找到新的小部件區域,可用於添加小部件。

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

將小部件添加到主題模板文件

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

  • 如果要添加額外的側邊欄,則需要將此代碼添加到sidebar.php文件中。
  • 如果要在內容之前或之後添加小部件區域,則需要將其添加到輸出內容的任何主題模板文件中。
  • 如果要在標題中添加小部件區域,則需要將代碼添加到header.php文件中。
  • 如果您的新窗口小部件區域僅用於站點中的一頁或一種類型的內容,則需要使用WordPress模板層次結構來準確確定要使用/創建然後編輯的模板文件。因此,例如,您想在首頁上添加小部件區域,則需要創建一個front-page.php文件並在其中添加小部件區域。

確定要編輯的模板文件以及需要在其中獲得小部件區域代碼的位置之後,添加以下代碼。對於內容後面的小部件區域,我們將其添加到主題中的post.php和page.php文件中:

if(is_active_sidebar(’after-content-widget-area’)){?>

 除了class =「 after-content widget-area full-width」 role =「 complementary」>

<?php}

現在保存您的模板文件。

請注意,根據您所稱的小部件區域以及要將其放置在其中的元素,您的代碼將與我的不同。我通常使用一個side元素,因為在我看來它們是為側邊欄和小部件區域設計的。

忍者提示:如果將內容的容器元素的結尾移動到側邊欄和/或頁腳文件的開頭,則可以在此處添加它,而只需添加一次。

現在,如果您查看您的網站,您會發現添加到窗口小部件區域的所有窗口小部件都會顯示在正確的位置。如果它們不在正確的位置,請返回並編輯您的模板文件,確保代碼位於所需位置。您可能還需要編輯CSS才能找到所需的樣式。

實時網站上的小部件

實時網站上的小部件

如何使用Widgets API編碼小部件

因此,現在您知道了如何為您的站點選擇窗口小部件,如何將它們添加到您的站點以及如何註冊新的側邊欄或窗口小部件區域。下一步是學習如何創建WordPress小部件。

有時,您可能會發現沒有可用的插件來創建您想要在網站上創建的確切小部件。這意味著您必須自己編寫代碼。

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

Widgets API概述

WordPress中的Widgets API包含註冊,創建和編碼Widget所需的所有代碼。 Widgets API包括:

  • 用於構建新窗口小部件的類。
  • 用於註冊小部件並在您的站點上裝飾​​它們的功能。
  • 用於取消註冊小部件的功能,例如從父主題中取消註冊。

在這裡,我們將使用一個類來構建窗口小部件。第一步是創建一個插件來保存小部件。

為您的WordPress小部件創建一個插件

要創建自己的小部件,您需要編寫插件代碼。不要將新窗口小部件的代碼添加到您的主題中,因為窗口小部件是關於功能而不是顯示。如果將來更改主題,則仍希望能夠訪問該小部件。

首先創建一個空插件。在wp-content / plugins目錄中創建一個plugin文件夾,並向其中添加一個空文件。給它起一個適當的名字。打開該文件並添加此代碼。

<?php / ** *插件名稱:Kinsta號召性用語小部件  *插件URI:https://rachelmccollin.com *說明:一個簡單的號召性用語小部件。 *版本:1.0 *作者:瑞秋·麥克林(Rachel McCollin) *作者URI:https://rachelmccollin.co.uk * /

您需要將作者URI和插件URI編輯為您自己的。這將為您創建一個插件,您可以通過「插件」屏幕將其激活。

插件屏幕中的小部件插件

插件屏幕中的小部件插件

但是,如果您激活它,則什麼也不會發生。您將必須在插件中添加一些代碼。

為小部件創建一個類

小部件的代碼在一個類中。因此,接下來添加。

kinsta_Cta_Widget類擴展了WP_Widget {

}
創建構造函數

進入類的第一件事是創建小部件的構造函數。將此添加到類的大括弧內。

//小工具構造函數

函數__construct(){

 $ widget_options =數組(
  ‘classname’=>’kinsta_cta_widget’,
  ”說明’=>’添加帶有您自己的文本和鏈接的號召性用語框。
 );

 parent :: __ construct(’kinsta_cta_widget’,’行動號召’,$ widget_options);

}

這開始構建小部件。

創建表單以輸出小部件

接下來,我們需要一個窗體,窗口小部件屏幕和定製程序將使用該窗體來創建窗口小部件。仍然在花括弧內添加它。

//輸出小部件形式的函數

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’;
?>


get_field_id( ‘link’); ?>”>Your link:
‘ . $text . ‘‘;
  ?>

Register the Widget

Now you have your class written, it』s time to register the WordPress widget so it works. Add this code outside the class.

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

 register_widget( ‘kinsta_Cta_Widget’ );

}
add_action( ‘widgets_init’, ‘kinsta_register_cta_widget’ );

Now save your plugin file. Go to the Widgets screen and you』ll see the widget for use.

New widget in widgets screen

New widget in widgets screen

If you add it to a widget area and add text and a link to it, it will be output in the live site.

New widget in the live site

New widget in the live site

It might not look all that good right now. You need to add some CSS to style it.

Adding CSS to the Widget

To add CSS to your plugin, you need to create a stylesheet and enqueue it in your plugin. Add this to your plugin file before the class.

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’ );

Now you need to add a style.css file inside the plugin』s folder and add any styling to that. I』ll leave that to you!

You now have a simple call to action button that you can add to any widget area on your site. If you add it to your sidebar, for example, people will be able to use it to get to your sign up page from anywhere on the site.

You can create more complex widgets with extra settings and options, but this gives you an idea of how to get started creating your own widget.

If you want to see my code for this plugin, including the styling, you can find it on Github. If you』re starting with code, here』s an in-depth guide on git vs GitHub and how to get started with both.

Widgets are one of the best WordPress features! They can literally change your site from ‘meh’ to ‘yes!’ ?? Learn what they are, how to use them, and how to code your own widgets with this in-depth guide!

Click to Tweet

Summary

Widgets are one of my favorite features of WordPress. They can bring your website to life, and help you get more signups or convert more visitors to customers. You can add WordPress widgets to any existing widget area in your theme, or you can add extra widget areas so that you can add more widgets in more places.

There are also plenty of places to find widgets. WordPress comes with a number of them pre-installed, and you can also install more of them via plugins. But that』s not all, if you feel comfortable, you can also code your own widgets using the Widgets API.

Now it』s your turn: how do you use WordPress widgets on your site? How many are you using?

0 Shares

相關文章