2008-06

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

ただ、設定がタイトなので、タイトル部分を装飾するのがちょっと難しいのが残念なところです。
タイトルの背景画像は 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 の知識の話なので、それはまた別のお話。ということで。

最近更新が滞ってます。既存の仕事が忙しかったり、新しいテンプレを書いたりしてたせいですが、、、

そんな中、日本の WordPress ユーザのためのハブサイト wp-users.jpを立ち上げ、リリースしました。

wp-users.jp は、あらゆるレベルの WordPress ユーザ間コミュニティを目指して、リンク集として稼働しています。将来的にはリンク以外の情報をサイト内に蓄えることも検討したいですが、現時点では個々のノウハウが点在しているのを集約していく、以上のことを実現するのは難しいと考えています。まだまだこれからなサイトですが、多くの人の役に立つハブサイトになるようにがんばりたいと思いますので、ご期待ください。協力していただける方も随時募集していますので、ぜひ声をかけてください。よろしくお願いします。