今日はウィジェットタイトルを画像に置き換える方法について紹介します。

ちなみにこのサイトでも、ウィジェットタイトルを画像に置換しています。

frontpage_2x

 

方法#1 Widgetの種類に応じてタイトル画像を置換する

Widgetの種類(カテゴリー、テキスト、アーカイブなど)を判定して、Widget見出し画像を挿入する方法です。

functions.php

 

テーマフォルダ/imgの中に、Widgetタイトル画像を入れています。

サイドバーのパラメータを動的に変更するフィルタ”dynamic_sidebar_params”を利用します。これを使って、ウィジェットタイトル前後に追加する文字列を次のように変更します。

タイトル前 $params[0][“before_title”]
<img src="Widgetタイトル画像へのパス" /><span style="display:none;">
 タイトル後 $params[0][“before_title”]
</span>

 

このようにすることで、imgタグの挿入&タイトル文字列をスタイルを非表示指定したspanタグで囲むことで消すことができます。

 

ここではwidget_idの値に正規表現を利用してWidgetの種類を判定して、挿入する画像を切り替えています。この方法のデメリットは、同じウィジェットを複数利用できないことです。

 

方法#2 Widgetのタイトルに応じてタイトル画像を置換する

Widgetのタイトルに応じて画像を置換する方法も紹介します。外観>ウィジェット画面で、各ウィジェットに対して指定したタイトルの文字列から判定する方法です。

functions.php

 

先ほどと同じフィルタ”dynamic_sidebar_params”でwidget_idの値をチェックします。Widgetタイトルを調べるために、widget_idをwidgetの種類とID番号の値に分けます。get_option()を使ってwp_optionテーブルからWidgetタイトルの文字列をGetする・・・という流れです。

 

方法#2は、方法#1に比べて重い処理になってしまうので、Widgetの種類に応じて、これらの方法#1,2を切り替えると最適化できそうですね。

 

「WordPress Tips」の記事