WordPress 小工具 ( Widget ) 增加自定義模組區塊（ OceanWP）

歡迎回到鵠學苑— WordPress 網頁設計超詳細攻略– WordPress 小工具 ( Widget ) 增加自定義模組區塊（ OceanWP），WordPress 後台在外觀選單中有一個 WordPress 小工具區塊，主要功能是製作網站側邊欄（ sidebar ）以及網站頁尾底部（ footer ）的內容，當網站改版或者想要加入更多相關資訊時，主題所支援的  WordPres 小工具欄位卻太少，讓整體網站發展性受到限制，此時該怎麼辦呢？
鵠學苑在經過範例網站測試後，為各位提供以 PHP 新增 WordPress 小工具區域的語法，並且在任何支援 WordPress 小工具所定義的範圍中都可以正常顯示 WordPress 小工具內容，當然在本篇教學中會提供鵠學院範例網站中所使用的主題（ OceanWP ），讓各位站長可以去比對自家網站的 WordPress 小工具模組是否適用，接下來跟著鵠學院的腳步，讓我們開始學習吧！
(小提醒：本篇教學是以 OceanWP 作為範例網站主題，在 PHP 語法上會與其他網站主題有所不同！)

WordPress.org PHP 學習資訊
https://codex.wordpress.org/Know_Your_Sources#Learning_PHP
WordPress.org 支援與論壇
https://tw.wordpress.org/support/

新增 PHP 語法增加小工具可用區域

第一步：在WordPress 網站後台進入到外觀 → 小工具的選項，可以看到圖二中標示的位置就是範例網站主題 OceanWP 所支援的兩個小工具區塊，分別是 Default Sidebar 及 Left Sidebar，也就是説在筆者所架設的範例網站中，WordPress 小工具側邊欄用的區塊只有兩個。

第二步：接者示範如何新增 WordPress 小工具區域，在外觀中點選子項目主題編輯器。

第三步：選中當前使用的主題，此步驟先不要選取子主題，在右側檔案清單中選擇佈景主題函式庫 funtion.php。

第四步：在 funtion.php 左上角的 search 中輸入 footer，找到 OceanWP 主題中 WordPress 小工具區域 PHP 寫法，如下所示：

/**
* Registers sidebars
*
* @since 1.0.0
*/
public static function register_sidebars() {

// Footer 1
register_sidebar( array(
'name' => esc_html__( 'Footer 1', 'oceanwp' ),
'id' => 'footer-one',
'description' => esc_html__( 'Widgets in this area are used in the first footer region.', 'oceanwp' ),
'before_widget' => '<div id="%1$s" class="footer-widget %2$s clr">',
'after_widget' => '</div>',
'before_title' => '<h4 class="widget-title">',
'after_title' => '</h4>',
) );

}

 

其中綠色的位置是必須或可以變動的文字，footer 1 是定義為此小工具區域的名稱，因此要更改，id 屬性在 HTML 中具有唯一識別的特性，如果不更改將無法識別此元素，所以也必須要做更動，Widgets in this area are used in the first footer region.則是對此小工具的說明，可以不用做變更，不會影響到功能。// Footer 1 是這一段語法的註解，簡單而言是給網站開發者辨識程式碼所代表的功能，因此將其改成與小工具區域名稱同樣即可。

紅色的文字是網站使用的主題名稱，如果你的網站主題 WordPress 小工具 PHP 寫法與 OceanWP  相同，那麼紅色文字應該是你當前使用的主題名稱。

第五步：將 // Footer 1 以下的程式碼都複製起來，右上角主題選項切換到子主題，一樣點選佈景主題函式庫 funtion.php

第六步：會在子主題的 funtion.php 最下方空白處加入以下語法，筆者的 WordPress 小工具 footer 區域總共有四個，因此以 footer 5 來示範：

// 新增footer 5 小工具區域

function side_widgets_init() {
register_sidebar(array(
'name' => esc_html__( 'Footer 5', 'oceanwp' ),
'id' => 'footer-five',
'description' => esc_html__( 'Widgets in this area are used in the fifth footer region.', 'oceanwp' ),
'before_widget' => '<div id="%1$s" class="footer-widget %2$s clr">',
'after_widget' => '</div>',
'before_title' => '<h4 class="widgettitle">',
'after_title' => '</h4>',
));

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

 

加入位置大致上如下圖所示。

第七步：回到小工具選項中查看，Footer 5 區域已成功建立。

第八步：如果說是想要在 WordPress 小工具新增側邊欄區域，則可以加入以下語法：

/// 新增right sidebar 欄位 
register_sidebar( array(
'name' => esc_html__( 'Right Sidebar', 'oceanwp' ),
'id' => 'sidebar-3',
'description' => esc_html__( 'Widgets in this area are used in the right sidebar region.', 'oceanwp' ),
'before_widget' => '<div id="%1$s" class="sidebar-box %2$s clr">',
'after_widget' => '</div>',
'before_title' => '<h4 class="widget-title">',
'after_title' => '</h4>',
));
}
add_action( 'widgets_init', 'side_widgets_init' );

 

與 Footer 5 一樣的方式修改及新增。

第九步：會同樣回到小工具項目中，可以看到 Right Sidebar 區域以建立。

第十步：在 Right Sidebar 中加入想要顯示的網站元素，測試是否功能正常，可以看到圖二中文章的右側邊欄正確顯示網頁元素，表示新增成功。

OceanWP 介紹 － 輕量網站架構＋易學架站方式
https://www.design-hu.com.tw/wordpress/wordpress-themes/oceanwp-introduction.html

結語：

不同網站所使用的 WordPress 主題，新增小工具的方式也有所不同，在本次教學示範的以 PHP 語法新增 WordPress 小工具區域只是其中的一種方法，如果說以筆者分享的操作模式無法在你的網站新增 WordPress 小工具區塊，建議可以到當初購買主題的網站尋找論壇資源，如果購買的主題服務很完善，也有很多人在討論，相信很快就會找到增加 WordPress 小工具位置的方法。

今天的教學到這裡告一段落了，不要忘記在右方訂閱電子報，以持續關注鵠學苑的最新 WordPress 教學文章，想學習超詳細的 WordPress 攻略嗎？來 鵠學院 就對了！我們下次的教學見～

架站相關文章：

網站架設知識推薦閱讀：

Astra 2.0 更新，超過 40 萬網站架設的 WordPress 主題推薦！
Google 在地商家 新增訊息功能，在 Google 地圖上即時通訊！
HTTPS 、 SSL 是什麼 ？ SSL憑證 對網站來說重要嗎？