WordPressのウィジェットのタイトルにはHTMLタグが使えません。タイトルにHTMLタグを入力しても保存する時に消えてしまいます。
その影響で、アイコンフォントなどを<i>タグでタイトルに直接書くと消えてしまいます。
この記事では、WordpressのウィジェットのタイトルにHTMLタグを使用するカスタマイズをご紹介します。
方法1:Wordpress ウィジェットのタイトルにHTMLタグを使用するカスタマイズ
Widget titleのフィルターフック（widget_title）を使用して、HTMLタグを有効化できるようにします。
このカスタマイズは、HTMLタグを直接書くのではなく、疑似的にHTMLタグを記述して置き換える処理を行うものです。
スニペット
Unicode文字が表現できないので、&を全角にしてあります。
半角に戻してご使用ください。
<?php
function html_widget_title( $title ) {
//HTML tag opening/closing brackets
$title = str_replace( '[', '<', $title );
$title = str_replace( ']', '>', $title );
$title = str_replace( '＆#8216;',"'", $title); // Left Single Quotation Mark
$title = str_replace( '＆#8217;',"'", $title); // Right Single Quotation Mark
$title = str_replace( '＆#8221;','"', $title); // Right Double Quotation Mark
$title = str_replace( '＆#8220;','"', $title); // Left Double Quotation Mark
return $title;
}
add_filter( 'widget_title','html_widget_title' );使い方
HTMLタグの”<“は”[“、”>”は”]”に置き換えて書くだけです。
ショートコードのように見えますが、ショートコードではありません。
[br /] [span class="AAAA BBBB"]テキスト[/span]
方法2:ウィジェットタイトルにショートコードを有効化する
今回のHTMLタグを有効化するカスタマイズはショートコードと同じフォーマットですが、ショートコードを有効化する下記のカスタマイズと併用しても問題なく動きます。
// Enable shortcodes in widgets
add_filter('widget_title', 'do_shortcode');
add_filter('widget_text', 'do_shortcode');ショートコードが使えるのでああれば、各HTMLタグをショートコード化しても同じことは実現できると思います。
HTMLタグごとにショートコードを作る手間があるので、今回のHTMLタグを直接記述できるカスタマイズの方が優れていると思います。
HTMLタグをショートコード化の例
brタグをスマホサイズの時だけ有効にするショートコード[br_sp]を作成してみます。
function my_shortcode() {
return '<br class="sp_only">';
}
add_shortcode( 'br_sp', 'my_shortcode' );CSSのメディアクエリで表示、非表示を切り替えます。
.sp_only{
display:none;
}
@media (max-width:768px){
.sp_only{
display:block;
}
}まとめ
ウィジェットのタイトルを改行したい時や、spanタグを使ってCSSを一部にだけ当てたいという場面は結構あります。
そんな時は、今回のカスタマイズが役に立つと思います。
