如何將小部件區域添加到 WordPress（塊和經典主題）

小部件是向 WordPress 網站的不同位置添加額外功能、特性和信息的一種流行方式。 它們允許您放置任何內容，從日曆上的聯繫表格到您網頁上的最新博客文章列表。

然而，為了做到這一點，您首先需要小部件區域——至少在經典的 WordPress 主題中是這樣。 這些是 WordPress 主題的特殊指定部分，如果您在後端向它們添加小部件，它們也會顯示在前端。

另一方面，使用 WordPress 站點編輯器阻止主題不再有小部件區域。 在這裡，添加小部件的工作方式與以前截然不同，這足以涵蓋整個主題。

在下文中，我們來看看將小部件添加到您的 WordPress 主題的不同方法。 我們討論瞭如何使用小部件化區域並在經典主題中創建新區域，以及如何使小部件顯示在您的塊主題中。

什麼是小部件以及如何使用它們？

在討論更多技術性內容之前，讓我們首先真正快速地了解一下我們在使用與 WordPress 相關的術語“小部件”時所談論的內容。 如果您使用的是像二十二十一這樣的非塊主題，您可以在外觀 > 小部件下找到它們的設置。

這顯示了當前主題中可用的所有小部件區域（此處，它只是頁腳）及其包含的小部件。 此處可見的所有內容也對應於您網站的前端。

通常，小工具區域位於頁腳、側邊欄或頁眉中。 但是，您也可以將它們放在幾乎任何您想要的地方（您很快就會看到）。

如何在您的站點上顯示小部件

小部件菜單曾經有一個不同的用戶界面，但現在它已經被轉換為像 WordPress 的其他部分一樣與塊編輯器一起工作。 因此，您可以像使用 WordPress Gutenberg 編輯器的任何其他實例一樣使用它。

通過塊插入器（左上角的藍色加號按鈕）或其在小部件區域中的較小版本添加塊。 您還可以按照通常的方式刪除塊，並在右側邊欄中更改它們的外觀和行為。

您可以使用的塊涵蓋常用選項。 段落、標題、表格、圖片——一切皆有可能。

通常，小部件區域用於信息自行更新的更動態的部分。 您仍然可以在塊插入器的“小部件”類別下找到它們。

如您所見，它們包括顯示檔案和類別、頁面列表或最新帖子和評論、RSS 提要或搜索欄等內容。 不要忘記單擊右上角的更新，這樣您在此處所做的任何更改都會永久生效。

或者，您也可以在 WordPress 自定義程序（外觀 > 自定義）和小部件選項卡中找到所有這些設置。

此處的優點是您可以直接在編輯器中預覽頁面上的所有內容。

在經典 WordPress 主題中創建新的小部件區域

好的，到目前為止一切順利。 我們已經確定了什麼是小部件以及您可以在經典主題的哪一部分中管理它們。

但是，如果您對可用的小部件區域的選擇不滿意怎麼辦？ 如果您希望能夠在主題的其他位置添加小部件怎麼辦？

在那種情況下，您必須自己創建它們，這就是我們現在要經歷的。

1.註冊您的小工具區

在 WordPress 主題中創建小部件區域是一個兩步過程。 第一步是註冊它們。

您可以使用functions.php中的register_sidebar()函數來做到這一點。 它看起來像這樣：

 function ns_register_top_banner_widget() { register_sidebar( array( 'name' => 'Top Bar', 'id' => 'top-bar-widgets', 'description' => 'Widgets in this area will appear in a bar at the top of the site.', 'before_widget' => '<div class="widget top-bar-widget">', 'after_widget' => '</div>', 'before_sidebar'=> '<div>', 'after_sidebar'=> '</div>', ) ); } add_action( 'widgets_init', 'ns_register_top_banner_widget' );

注意：與許多主題更改一樣，建議您以子主題的形式實現它。

對代碼片段的不同部分及其含義的一些解釋：

• name — 這是將出現在 WordPress 後端的小部件區域的名稱。
• id — 您需要為小部件區域提供一個 id，以便稍後顯示它。
• description ——這曾經顯示在小部件菜單中。 例如，您可以使用它向其他用戶解釋側邊欄的位置。 但是，它只會出現在不使用小部件塊編輯器的 WordPress 版本中，因此您也可以忽略它。
• before_sidebar和after_sidebar — 這兩個參數允許您在小部件區域之前和之後添加 HTML 標記。 這樣，例如，您可以將其包裝在<div>容器中。
• before_widget和after_widget — 與上面相同，但適用於出現在該區域中的任何小部件。

還有其他參數可以與register_sidebar()一起使用。 您可以在文檔中了解有關它們的更多信息。 然而，對於我們的目的來說，以上就足夠了。

一旦出現在functions.php中並保存文件，小部件區域將已經顯示在 WordPress 後端中。

2. 在您的 WordPress 主題中輸出小部件區域

雖然您已經可以在儀表板中看到小部件區域，但目前在其中放置任何塊或小部件都不會產生任何效果。 那是因為還沒有任何標記告訴主題輸出您添加到它的任何內容。

這是通過dynamic_sidebar()函數發生的。 例如，要在主題的任意位置輸出您在上面創建的小部件區域，您可以使用此功能：

 <?php dynamic_sidebar( 'top-bar-widgets' ); ?>

請注意代碼如何包含與之前創建的小部件區域相同的 id，以便顯示它。

雖然上面的方法有效，但使用稍微複雜的代碼片段通常是有意義的：

 <?php if ( is_active_sidebar( 'top-bar-widgets' ) ) : ?> <?php dynamic_sidebar( 'top-bar-widgets' ); ?> <?php endif; ?>

上面的代碼首先檢查有問題的小部件區域中是否有任何小部件，只有在這種情況下才將其添加到頁面。 它還包含更多標記，如 HTML 類和 id，以便更容易通過 CSS 自定義輸出。

這只剩下問題，你把這個標記放在哪裡？

答案：主題文件中您希望小部件區域出現的任何位置。 通常是在頁面模板文件內部，如page.php或single.php 。 但是，您也可以將它添加到header.php或footer.php之類的文件中。 要做出決定，了解模板層次結構並了解主題的工作原理會有所幫助。

在本例中，對於二十一主題，我們將其放在頁面打開後的header.php中。

有了代碼，當我們現在將一個小部件放入新創建的區域時，它將顯示在網站上的預期位置。

備選方案：使用 WordPress Hooks 顯示小部件區域

除了將代碼片段直接添加到您的頁面模板和主題文件中，您還可以使用 WordPress Hooks 實現相同的輸出。

這些是放置在上述文件中戰略位置的小代碼片段，您可以使用它們告訴 WordPress 在該位置執行功能，而無需將代碼實際放置在那裡。 相反，您可以將有問題的函數放在functions.php中。 這樣做的好處是可以從一個地方管理所有的小部件區域。

這對我們的案例來說會是什麼樣子？

以下是使用 WordPress 掛鉤放置小部件區域的方法：

 function ns_output_top_banner_widget() { if ( is_active_sidebar( 'top-bar-widgets' ) ) : dynamic_sidebar( 'top-bar-widgets' ); endif; } add_action( 'wp_body_open', 'ns_output_top_banner_widget' );

二十二十一主題在其頭文件中有一個名為wp_body_open()的鉤子。 通過掛鉤它，我們可以在不修改文件本身的情況下在同一個地方顯示小部件區域。

如前所述，代碼片段位於您的（子）主題的functions.php中。 此方法特別適用於包含大量 hook 的主題，例如 Genesis Framework。

如何在塊主題中添加小部件

到目前為止，我們只討論瞭如何在經典主題中創建小部件區域。 然而，塊主題又如何呢？畢竟，它可能會成為 WordPress 主題的實際標準。

在這裡，因為站點編輯器的工作方式非常不同，所以您實際上沒有小部件區域。 您還會注意到Appearance > Widgets菜單不存在。

但是，您仍然可以使用與上述類似的原則向您的主題添加小部件、內容和其他元素。

輸入頁面模板和模板部件

這里首先要注意的是，您在使用塊編輯器放置小部件時受到的限制要少得多。 由於您不限於預配置的小部件區域，您可以將任何頁面元素放置在您想要的任何位置。

但是，您仍然可以通過使用頁面模板和模板部件在經典主題中使用像小部件這樣的塊。 通過左側站點編輯器中的菜單在您的區塊中訪問它們（單擊左上角的 WordPress 徽標將其打開）。

這會為您提供站點上可用頁面模板的列表。 它們的範圍通常從歸檔模板翻頁到 404 頁面。

如果您查看經典主題中的主題文件，它類似於您會發現的內容。

另一方面，在Template Part下，您可以找到網站各部分的模板，例如頁眉、頁腳或評論部分。

單擊其中任何一個以在編輯器中打開。 或者，您也可以通過模板編輯器更改模板和模板部件。 這是站點編輯器的略微簡化版本，您可以通過普通頁面編輯器打開它。 只需打開您想要的頁面，單擊Template下的模板名稱，然後單擊Edit template 。

您還可以從下拉編輯器中選擇另一個模板。

添加新元素/小部件

如果您知道頁面模板的工作原理，您可能會明白，您在此處所做的任何更改不僅會影響單個頁面，還會影響您網站上使用頁面模板或模板部分的每一個內容。 因此，您添加到其中的任何頁面元素都會出現在您網站上所有這些元素處於活動狀態的地方。

例如，您可以將最新的帖子小部件添加到頁腳模板部分。

如果你這樣做並保存，它也會出現在網站的前端，對於這個模板部分存在的每個頁面。

如果您考慮一下，這與經典小部件區域的工作方式並沒有太大不同。 它們也是一種添加頁面元素和內容的簡單方式，以便它們可以在整個網站的同一位置複製。

這裡唯一的區別是不需要編輯文件。 相反，您可以在可視化編輯器中完成所有操作，WordPress 會為您創建和修改文件。

在 WordPress 塊主題中創建新的“小部件區域”

那麼，如何在塊主題中創建新的小部件區域？

答案是：你真的不知道。 然而，最接近它的是創建新的頁面模板和模板部件。 這樣做可以讓您添加僅在您網站的有限部分顯示的內容。

讓我們看一個例子，讓事情更清楚。 假設你想做我們在頂部手動做的同樣的事情。 在過去，您必須註冊一個小部件區域，然後添加代碼才能將其輸出。 使用站點編輯器，您可以實現相同的目的。 只是在這種情況下，就容易多了。

一種可能性是創建一個新的模板部件。 為此，在編輯器的模板部件菜單下，單擊頂部的加號圖標。

在出現的菜單中，為其命名（例如，“帶頂欄的頁眉”）並選擇類型（在本例中，當然是頁眉），然後開始編輯。 用您需要或想要的任何頁面元素、小部件和內容填充它。

完成後，您仍然需要將其分配給您希望它出現的頁面模板。

為此，轉到該模板（在本例中為Home ）並找到現有標題。 單擊它，然後單擊三個點以打開其菜單，然後選擇Replace header 。

這將打開一個菜單，其中包含您網站上可用的模板部件和模式。

選擇剛剛創建的模板進行輸入，然後保存頁面模板。 如果您現在返回您網站的前端，您會在頁面上看到新創建的頁眉（並且僅在那裡）。

如何添加新的小部件/塊

在討論如何在塊主題中創建小部件和小部件區域時，剩下的最後一個問題是如何添加更多小部件選擇。 畢竟，默認情況下，您只限於少數幾個選項。 幸運的是，有不同的方法可以添加更多。

其一，您可以安裝 Gutenberg 塊插件，其中許多包含不同的小部件塊，例如表單、地圖或輪播。

此外，您還可以安裝具有小部件功能的單個塊。 為此，首先單擊 WordPress 站點編輯器中的塊插入器。

打開後，在頂部的字段中輸入您要查找的塊類型的搜索詞。 除了您網站上已有的任何選項外，編輯器還將搜索 WordPress 塊目錄並顯示合適的選項。

如果某些東西聽起來像您正在尋找的東西，只需單擊有問題的塊即可將其安裝到您的站點並將其插入頁面的當前位置。 將其放置在您希望它出現並保存的頁面模板或模板部分中。 然後，在您網站的前端欣賞它。

順便說一句，您可以隨時刪除在插件菜單中安裝的單個塊，以防您不再需要它們。

Widgetizing WordPress 主題並不難

在 WordPress 中添加小部件和小部件區域是在您的站點上顯示各種功能和信息的一項重要技能。 它們有助於使您的站點更具交互性、信息量和可用性。

在經典主題中，創建小部件區域的方法更具技術性。 您需要對 WordPress 文件架構有基本的了解，並且熟悉代碼編輯器和對 PHP 代碼進行調整。 另一方面，在塊主題中，您只需使用鼠標光標即可執行相同操作。

重要的是要牢記原則是相同的，只是實現方式不同。 現在您知道它是如何完成的，請使用這些知識來改進您的網站！

您想放置在您的網站上的必備小部件是什麼？ 您使用的是經典主題還是塊主題來實現它？ 讓我們在評論中知道！