2012.3.5 サイドバーのリストを手直しする

HTML4の仕様では<a>タグがインライン要素となっており、
<div>タグや<li>タグといったブロック要素を子に持つこと出来ず、
ブラウザの仕様上は<div>の内部全体をアンカー(リンク元)として機能させる使い方が出来ても、
HTML4の仕様には準拠していないのでアレである、といった感じだったと思うんですが。

HTML5になってコンテンツモデルという概念が出てきたらしく、
この概念では<a>タグはtransparetな要素となっており親要素の属性を受け継ぐとのこと。
すなわち、<div><a><div>…</div></a></div>といった記法が文法的に許容されるらしい、おそらく。

ということで、折角なのでWordPressのサイドバーを弄ってみることに。
現状だとdiv:hoverでdiv要素にカーソルが重なった際に背景色が変化するんだけど、
肝心のアンカーとして機能する部分は文字だけである、という不便な仕様。

<li><a><div>…</div><a><li>なる構造もHTML5に準拠しているようなので、
そんなワケで<a>要素のなかにdivタグを仕込んでみることにします。

まずは recent post から、ウィジェットの作成には Executable php widget を利用。
以前まではプラグイン Customizable Post Listings の c2c_get_recent_posts() 関数を使っていたんですが、
今回は折角なんで日付を絶対位置として右下に固定し、かつ
記事タイトルと日付とが重なって表示されないように、
記事タイトルの文字列長(半角換算)を mb_strwidth() 関数を使って調整します。
(このときの文字列長は固定値の決め打ち、しゃーなしだな)

他の要素(カテゴリ、過去ログ、ブックマーク)についても、
デフォのウィジェットだと痒いところに手が届かないので
wp_list_categories()やwp_get_archives()、wp_list_bookmarks()といった関数を
preg_matchで適当に検索置換して都合の良い感じに改変します。
(直接db叩いてリスト整形した方が正規表現で置換するより圧倒的にサーバの負荷が軽そうですががが)

結構というかかなりいい加減な感じですが、
素人工事だとこんな感じでいいんじゃないかなー、と。
余裕があったら Executable php widget からプラグインの形に直したいかも

<ul id="recent_posts" class="mod_widgets">
<?php
	$encode = get_bloginfo('charset');
	$recent_posts = wp_get_recent_posts('numberposts=10&post_status=publish');
	foreach( $recent_posts as $recent ) {
		$br_flg = ( mb_strwidth( $recent["post_title"], $encode) % 40 > 28 );
		$style = $br_flg?' style="padding-bottom:1.5em"':'';
		echo '<li><a href="'.get_permalink($recent["ID"]).'" title="view post'.$recent["ID"].'"><div'.$style.'>'.$recent["post_title"].'<span class="post_date">('.mysql2date('n/j',$recent["post_date"]).')</span></div></a></li>';
	}
?>
</ul>
.mod_widgets div .post_date, .mod_widgets div .cat_num, .mod_widgets div .archive_num {
	color: #888;
	position: absolute;
	right: 0;
	bottom: 0;
}
最近の投稿 カテゴリ

コメントをどうぞ