變更WordPress小工具標題的HTML Tag,OXYGEN Builder示範

|發布於:
2022-05-07
❝廣告,是為了讓這裡能夠永續經營,多多包容囉^v^❞

Last updated at — 2022-05-08 04:57

WordPress 的小工具( Widget )提供了一些可以插入到網站頁面中的一些額外的功能,像是〈文章彙整〉、〈最新文章〉、〈最新留言〉、〈分類〉 ... ... 等等。而我們則是可以透過佈景主題中的設定,將這些小工具放到指定的位置,比如側邊欄或頁尾。

而這些小工具預設是有《標題》的,而且這個《標題》的 HTML tag 通常預設是 <h2> ,有的佈景主題可能會預設為其他的 HTML tag。但是,這樣的設定不太理想,無論在頁面或文章中,大多不會希望 h2 是小工具的《標題》,正常應該要是與頁面內容或文章相關、並且是較重要的標題,會比較適合作為 h2 。

所以,當你使用的佈景主題將 WordPress 小工具的《標題》預設成不合適的 HTML tag ,那麼,的確是可以靠一小段 php code 去修改它。

我的網站是 OXYGEN Builder 的架構,所以,我用它來示範,如果這段 php code 不適用於你的網站,那麼,就得向你的佈景主題商詢問。

如何變更WordPress小工具標題的HTML Tag

before-changing|變更 WordPress 小工具標題的 HTML Tag

示範的 WordPress 小工具是〈最新留言〉,這是在 OXYGEN Builder 內建的 WordPress Widget 的〈 Recent Comments 〉,透過OXYGEN 中獨有的〈 Style Output 〉的功能,可以看到小工具標題的 HTML tag 已經被預設為 h2 。

透過下面那段 php code ,可以將小工具標題改成任何的 HTML tag ,比如 <h3> ~ <h6> ,也可以改成 <p> ,當然,也可以改成 <div> ,是個人需求,下面示範的是改成 <h6>

add_filter('widget_title', 'new_widget_html_title');
function new_widget_html_title( $title ) {
    echo $args['before_title'] = '<h6 class="widgettitle">';
    echo $args['title'] = $title;
    echo $args['after_title'] = '</h6>';
}

程式碼要放哪裡?

advanced-script|變更 WordPress 小工具標題的 HTML Tag

通常,是放在《子主題》的〈 functions.php 〉這個文件裡面。但是,如果你沒有把握操作的話,也可以透過像是〈 Code Snippet ❐〉這樣的外掛,比較不容易出錯。

在這裡,我又將小工具標題的 HTML tag 改成 <b> ,如果你不打算給他任何的 heading 標籤,是可以改成其他的 HTML tag 。

而我是使用〈 Advanced Script ❐〉這套外掛,如果不會使用可以參考上圖的設定。

這個外掛比〈 Code Snippet 〉更靈活控制程式碼的掛鉤和載入方式,對網站的更友好,終身授權還可以在無限網站使用, C/P 值很高,許多使用 OXYGEN Builder 的用戶也會選擇〈 Advanced Script ❐〉。

變更 HTML Tag 的結果

after-changing|變更 WordPress 小工具標題的 HTML Tag

如上圖,重新載入 OXYGEN Builder ,可以看到原本的 h2 已經變成 h6 

適合 Astra 的程式碼

如果你的佈景主題是 Astra ,那麼,可以改用下面這段程式碼:

add_filter( 'astra_widgets_init', 'widget_title_tag', 10, 1 );
function widget_title_tag( $atts ) {
    $atts['before_title'] = '<h6 class="widget-title">';
    $atts['after_title'] = '</h6>';

    return $atts;
}

一樣,如果你不想要改成 h6 ,別忘了要修改程式碼,將 h6 改成 p 或其他的標籤。

這裡有個注意事項,以上二段程式碼,會套用到所有的小工具的標題唷!

其他的注意事項

其實,這裏有個小 bug ,我沒試過其他的佈景主題,也有可能只發生在 OXYGEN Builder ,但是,對我來說,一點都不影響,事實上,也不會造成影響,只是 HTML 的架構些許微調。

可以比較下面二張圖,這是在 OXYGEN Builder 的 HTML 架構,原本的小工具標題是和留言列表一起包在〈 widget widget_recent_comments 〉裡面;但是,透過那段 php code 重新定義小工具標題的 HTML tag 之後,小工具標題的位置被挪到〈 widget widget_recent_comments 〉的上面,變成同一層次。

html-struture-changed|變更 WordPress 小工具標題的 HTML Tag

因為 HTML 架構的改變,對我來說,頂多是有幾個 CSS 樣式再微調一下就好,因為在 OXYGEN Builder 中,設定 CSS 樣式是非常簡單容易的操作,所以,一點都沒有妨礙。

如果有其他的方式再調整,我會再更新上來,不過,現階段,已經非常好了。

在 OXYGEN Builder 中變更 WordPress 小工具標題的 HTML tag 就介紹到這裡,有任何問題歡迎在下方留言板討論囉!

參考資料
好嘛好嘛...臨走前幫我拍拍手嘛
如果你願意免費幫助我,請在下方圓形按鈕幫我拍拍手。
最多可以按5下,那就幫我按5下吧!
算我求你啦啦啦~~~
謝謝你、我愛你❤
臉書或Google帳號就可以快速登入喲...
最新留言
▍關於作者|MiriamMibao温唯
2019.02.11,我開始了這裡…
不懂css、不懂php,當然-也不知道誰是Nginx、誰又是Apache…
硬要WordPress架站,一切自己來,所有的細節,從0開始,自己架站會遇到的問題,遇到了才知道!這一路走來,跌跌撞撞,摸索過國內外能夠解決問題的資料…
是不是該好好紀錄這一段跌跌撞撞的探索日記?或許,也能帶給你們一些幫助...
以下歡迎留言討論囉!
我只想當個旁觀者,有新的留言請通知我(按一下輸入Email信箱)
想Fallow哪種留言?
0 留言板
Inline Feedbacks
查看所有留言

Copyright ©miriammibao.com all rights reserved|Designed by MiriamMibao温唯 Since 2014.

-
Cloudways專屬折扣☞註冊輸入折扣碼
MMM8
,獲得首四月6折優惠!
Cloudways專屬折扣☞輸入折扣碼
享首四月6折優惠!
miriam wei design wp logo-4 circlemiriam wei design wp logo sticky
0
對文章有任何疑問或想法嗎?歡迎一起討論唷!x
()
x