WordPress 本文エリアに自動的に HTML を挿入して Bootstrap のアイコンを見出しに表示する

2014/09/13現在、このブログは「Sparkling」というワードプレスのテーマを使用させていただいているのですが、Sparkling は Bootstrap をベースに作られていて、ワードプレスのテーマに予め表示されているスタイル以外にも、Bootstrap のスタイルを使用することが可能です。

例えば、Components · Bootstrap のページのコンポーネントとか、サンプルコード通りに HTML を書くだけでいい感じになります。

45% Complete

Default
Primary
Success
Info
Warning
Danger

そのコンポーネントの中に、ベクターで作られたアイコンが多数用意されているので、そのアイコンを見出しに使ってみたいと思います。

 Font Format で作られたベクターアイコンを見出しに

Twitter Bootstrap には通常有料である GLYPHICONS が使われているようで、ベクターで作られている素敵なアイコンが 200 glyphs も納められています。

使い方は簡単で

<!-- クラス名を変更するとアイコンも変わる -->
<span class="glyphicon glyphicon-search"></span>

を書くだけです。

ただ、

Don’t mix with other components
Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <span> and apply the icon classes to the <span>.

Only for use on empty elements
Icon classes should only be used on elements that contain no text content and have no child elements.

ということで、h2 とか、見出し要素に直接クラス名を付与するのはよく無さそうです。h2 要素にそのままクラス付与しても表示される気もしますが、とりあえずそういうことということで、サンプルのように <span> を使うことにします。

 見出し(h2 とか)にどうやってアイコン表示用の HTML を記述していくか

<!-- こんな記述を・・・ -->
<h2>見出しテキスト</h2>

<!-- こうしたい! -->
<h2><span class="glyphicon glyphicon-check"></span> 見出しテキスト</h2>

今まで書いてきた記事の見出し部分の HTML を1個1個変えて行くとか面倒すぎで嫌だし、将来アイコン外したくなったらどうすんだよ・・・ってこともあり、本文エリアに自動的に HTML を挿入プラグインとか探してみたりしたけど、見つからず。

JavaScript で動的に挿入していくしかないのか・・・(スクリプト書けないけど)、と思ってたところで、「置換」で探したら普通に関数ありました。

functions.php にコンテンツエリアに記述された特定のテキストを、指定のテキストに置換する記述を書いてあげれば、投稿済みのコンテンツをいじる必要がありません。

//文字列置き換え
function replace_text_wps($text){
  $replace = array(
    '<h2>' => '<h2><span class="glyphicon glyphicon-check"></span>&thinsp;',
    '<h3>' => '<h3><span class="glyphicon glyphicon-chevron-right"></span>&thinsp;',
  );
  $text = str_replace(array_keys($replace), $replace, $text);
  return $text;
}
add_filter('the_content', 'replace_text_wps');

 参考サイト

東京都内で仕事をしています。猫飼いたいです。30歳からピアノ始めたおじさんです。盆栽にも興味が出てきました。
最近ブログ用のTwitterアカウントを作成したので、是非フォローをしてください。@zakkiboooks

 コメントをどうぞ

  • 入力いただいたメールアドレスは公開されませんが、このブログが置いてあるサーバーに保存されます。
  • 入力いただいた情報の他に、WordPress の機能により IPアドレス を取得させていただきます。取得した IPアドレス はスパムコメントの対処ために利用され、公開することはありません。
  • 個人情報などを記入された場合、投稿いただいたコメントを表示しないか、該当箇所を編集して公開する可能性があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。