お問い合わせはコチラから

WordPress ウィジェットのタイトルにHTMLタグを使用する方法

サイト運営

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を一部にだけ当てたいという場面は結構あります。

そんな時は、今回のカスタマイズが役に立つと思います。

この記事が気に入ったら フォローしよう
最新情報をお届けします。
この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

オランダで生きていく
タイトルとURLをコピーしました