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

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

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

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

我的網站是 OXYGEN Builder 的架構，所以，我用它來示範，如果這段 php code 不適用於你的網站，那麼，就得向你的佈景主題商詢問。版權聲明 - 內容來源：Copyright © Miriam Mibao 温唯miriammibao.com，如需轉載/引用，須保留/註記此來源。

如何變更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>版權聲明 - 內容來源：Copyright © Miriam Mibao 温唯miriammibao.com，如需轉載/引用，須保留/註記此來源。

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 。版權聲明 - 內容來源：Copyright © Miriam Mibao 温唯miriammibao.com，如需轉載/引用，須保留/註記此來源。

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

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

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

如果有其他的方式再調整，我會再更新上來，不過，現階段，已經非常好了。版權聲明 - 內容來源：Copyright © Miriam Mibao 温唯miriammibao.com，如需轉載/引用，須保留/註記此來源。

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