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

WordPress 小工具

內容目錄

歡迎回到鵠學苑— 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 小工具

WordPress 小工具

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

WordPress 小工具

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

WordPress 小工具

第四步:在 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  相同,那麼紅色文字應該是你當前使用的主題名稱。

WordPress 小工具

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

WordPress 小工具

第六步:會在子主題的 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’ );

 

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

WordPress 小工具

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

WordPress 小工具

第八步:如果說是想要在 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 一樣的方式修改及新增。

WordPress 小工具

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

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

WordPress 小工具

WordPress 小工具

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憑證 對網站來說重要嗎?

訂閱電子報

立即訂閱鵠崙設計(鵠學苑)!我們將不定期發送架站教學文章、最新網站版型介紹以及網頁設計最優惠價格!

熱門文章

最新文章

相關文章

標籤雲

返回頂端