內容更新於 — 2023-06-17 15:06
WordPress 的小工具( Widget )提供了一些可以插入到網站頁面中的一些額外的功能,像是〈文章彙整〉、〈最新文章〉、〈最新留言〉、〈分類〉 … … 等等。而我們則是可以透過佈景主題中的設定,將這些小工具放到指定的位置,比如側邊欄或頁尾。
而這些小工具預設是有《標題》的,而且這個《標題》的 HTML tag 通常預設是 <h2> ,有的佈景主題可能會預設為其他的 HTML tag。但是,這樣的設定不太理想,無論在頁面或文章中,大多不會希望 h2 是小工具的《標題》,正常應該要是與頁面內容或文章相關、並且是較重要的標題,會比較適合作為 h2 。
所以,當你使用的佈景主題將 WordPress 小工具的《標題》預設成不合適的 HTML tag ,那麼,的確是可以靠一小段 php code 去修改它。
我的網站是 OXYGEN Builder 的架構,所以,我用它來示範,如果這段 php code 不適用於你的網站,那麼,就得向你的佈景主題商詢問。
示範的 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>';
}
通常,是放在《子主題》的〈 functions.php 〉這個文件裡面。但是,如果你沒有把握操作的話,也可以透過像是〈 Code Snippet ❐〉這樣的外掛,比較不容易出錯。
在這裡,我又將小工具標題的 HTML tag 改成 <b> ,如果你不打算給他任何的 heading 標籤,是可以改成其他的 HTML tag 。
而我是使用〈 Advanced Script ❐〉這套外掛,如果不會使用可以參考上圖的設定。
這個外掛比〈 Code Snippet 〉更靈活控制程式碼的掛鉤和載入方式,對網站的更友好,終身授權還可以在無限網站使用, C/P 值很高,許多使用 OXYGEN Builder 的用戶也會選擇〈 Advanced Script ❐〉。
如上圖,重新載入 OXYGEN Builder ,可以看到原本的 h2 已經變成 h6
如果你的佈景主題是 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 架構的改變,對我來說,頂多是有幾個 CSS 樣式再微調一下就好,因為在 OXYGEN Builder 中,設定 CSS 樣式是非常簡單容易的操作,所以,一點都沒有妨礙。
如果有其他的方式再調整,我會再更新上來,不過,現階段,已經非常好了。
在 OXYGEN Builder 中變更 WordPress 小工具標題的 HTML tag 就介紹到這裡,有任何問題歡迎在下方留言板討論囉!
Copyright ©miriammibao.com all rights reserved|Designed by MiriamMibao温唯 Since 2014.