Office L

[WPCH vol.03] ウィジェットをハック。ウィジェットタイトルをちょっとおしゃれに。

ウィジェットって本当に便利ですよね。並べ替えも簡単だし、テーマを変更しても基本的にはそのまま引き継がれるし。

ただ、設定がタイトなので、タイトル部分を装飾するのがちょっと難しいのが残念なところです。
タイトルの背景画像は CSS で対応できますが、タイトルそのものを装飾するには限界があります。ウィジェットタイトルは設定時にタグを使わせてくれないからです。

今回は、このウィジェットタイトルを CSS で装飾しやすくするために、ほんの少しだけ、タグ（span要素）を許可してあげる、というコアハックです。 具体的には、wp-users.jp 日本の WordPress ユーザのためのハブサイト のウィジェットタイトルのように、タイトルを span 要素で囲むことで、きめ細かい装飾を可能にします。

ではさっそく。今回は wp-includes/widgets.php を修正します。
複数個所ありますが、全てやり方は同じで、strip_tags で、stripslashes($_POST['XXXXX-title'])を処理しているところを修正するだけです。

例：380行目付近 wp_widget_pages_control という function の中（他も多数同様）。

$newoptions['title'] = strip_tags(stripslashes($_POST['pages-title']));

これを

$newoptions['title'] = strip_tags(stripslashes($_POST['pages-title']),'<span>');

このようにします。

処理的には、管理画面でウィジェットタイトルを変更したときあたりに呼ばれて、入力値（$_POSTの値）をきれいにして、タグも消去、みたいなことをしているので、strip_tags の仕様に基づいて、span 要素を許可するようにした、ということです。

このようにすることで、CSS による装飾の幅が広がります。

HTMLとCSSの例:

<h2 class="widgettitle">monthly archive</h2>

の場合、管理画面で monthly <span>archive</span> と入力することで、

<h2 class="widgettitle">monthly <span>archive</span></h2>

のようになるので、

h2.widgettitle {
	color:#fff;
}

このような CSS に、

h2.widgettitle span {
	color:#000;
}

を追加することで、monthly は白、archive は黒、のようにできます。

あとは CSS の知識の話なので、それはまた別のお話。ということで。