ウィジェットのタイトルにHTMLタグを入力する方法

記事に記載したコードは、スキンに追加されています。

はじめに
完成イメージ
実装方法
さいごに

はじめに

WordPressの標準機能では、ウィジェットのタイトルにHTMLタグを入力することはできません。
タグを入力しても、自動的に除去されてテキストのみが表示されてしまいます。

しかし、タイトル前にアイコンを追加したい場合など、HTMLタグを使いたいケースもあるでしょう。
そこで、ウィジェットタイトルにHTMLタグを入力できるようにします。

この記事では、この方法について説明します。

完成イメージ

実装方法

以下の手順で実装します。

ラベル
ウィジェットのタイトル入力
以下の手順で入力します。
1. 外観→ウィジェットでウィジェットを配置します。
2. ウィジェットのタイトルにHTMLタグを入力します（<>の代わりに[]を使用）。
```
[i class="fas fa-calendar-alt"][/i] カレンダー
```

ラベル

PHPを追加

以下のコードをfunctions.phpに追加します。

add_filter('widget_title', function ($title) {
  if (!is_string($title)) {
    return $title;
  }

  $rules = [
    '['       => '<',
    ']'       => '>',
    '&#8216;' => "'",
    '&#8217;' => "'",
    '&#8221;' => '"',
    '&#8220;' => '"',
  ];

  foreach ($rules as $search => $replace) {
    $title = str_replace($search, $replace, $title);
  }

  return $title;
});

さいごに

今回紹介した方法を使えば、ウィジェットのタイトルにHTMLタグを適用し、アイコンなどを自由に追加できます。
カスタマイズ性を高め、より魅力的なデザインを実現しましょう。

ウィジェットタイトルのHTML入力可能に変更

本スキンでは、ウィジェットタイトル入力時の置換入力する独自構文に対応させることで、通常WordPressで自動除去されるHTMLタグの入力を可能にし、タイトルへのアイコン表示などデザイン表現の幅を広げる自由度の高いウィジェット構築環境を実現します。