2014/09/13現在、このブログは「Sparkling」というワードプレスのテーマを使用させていただいているのですが、Sparkling は Bootstrap をベースに作られていて、ワードプレスのテーマに予め表示されているスタイル以外にも、Bootstrap のスタイルを使用することが可能です。
例えば、Components · Bootstrap のページのコンポーネントとか、サンプルコード通りに HTML を書くだけでいい感じになります。
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> ',
'<h3>' => '<h3><span class="glyphicon glyphicon-chevron-right"></span> ',
);
$text = str_replace(array_keys($replace), $replace, $text);
return $text;
}
add_filter('the_content', 'replace_text_wps');