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

WordPress 小工具

WordPress 小工具 ( Widget ) 增加自定義模組區塊( OceanWP) 教學目的:

1. WordPress 外觀主題編輯器中新增小工具區域 , PHP 語法操作方式

歡迎回到鵠學苑— WordPress 網頁設計超詳細攻略– WordPress 小工具 ( Widget ) 增加自定義模組區塊( OceanWP),WordPress 後台在外觀選單中有一個 WordPress 小工具區塊,主要功能是製作網站側邊欄( sidebar )以及網站頁尾底部( footer )的內容,當網站改版或者想要加入更多相關資訊時,主題所支援的  WordPres 小工具欄位卻太少,讓整體網站發展性受到限制,此時該怎麼辦呢?

鵠學苑在經過範例網站測試後,為各位提供以 PHP 新增 WordPress 小工具區域的語法,並且在任何支援 WordPress 小工具所定義的範圍中都可以正常顯示 WordPress 小工具內容,當然在本篇教學中會提供鵠學院範例網站中所使用的主題( OceanWP ),讓各位站長可以去比對自家網站的 WordPress 小工具模組是否適用,接下來跟著鵠學院的腳步,讓我們開始學習吧!

WordPress.org PHP 學習資訊:https://codex.wordpress.org/Know_Your_Sources#Learning_PHP

WordPress.org 支援與論壇:https://tw.wordpress.org/support/

本篇教學文章範例主題:OceanWP 介紹 - 輕量網站架構+易學架站方式

(小提醒:本篇教學是以 OceanWP 作為範例網站主題,在 PHP 語法上會與其他網站主題有所不同!)

• 新增 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 小工具

結語:

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

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

鵠學苑

鵠學苑

我們是由一群熱愛 WordPress 網站架設的同好所組成的團隊,希望可以將這套 頂尖的 CMS 管理系統推廣給想要架站的朋友們,並且能夠在過程中互相交流心得,讓網站架設過程變得更有效率!

訂閱電子報

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

(adsbygoogle = window.adsbygoogle || []).push({});

熱門文章

(adsbygoogle = window.adsbygoogle || []).push({});

最新文章

(adsbygoogle = window.adsbygoogle || []).push({});

相關文章

(adsbygoogle = window.adsbygoogle || []).push({});

標籤雲

(adsbygoogle = window.adsbygoogle || []).push({});

Sign up for our Newsletter

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit

Scroll to Top