dogmap.jp

「逆光は勝利」「世はなべて三分の一」「ピーカン不許可」「頭上の余白は敵だ」

と言うわけで、投稿やページにアップロードされた画像ファイルを抽出し、サムネイルで一覧表示する WordPress 用プラグイン wp-kougabu を導入しました。
このプラグインによるサムネイルの一覧表示は こちら。

で、このプラグイン導入したページをページ分割しようと思ったんですが、私が使っているテーマ（ほぼ自作）はページ分割に対応していないことが判明。
慌てて、テンプレートタグ wp_link_pages() を追記したんですが、これが吐き出す (X)HTML が、気にくわない。
カレントページ番号に対して CSS でスタイル指定しづらいマークアップになってしまうので、ゴニョゴニョして何とかしました。

wp_link_pages() が吐き出す (X)HTML は以下のような感じです。

<p>
	1
	<a href="http://example.com/gallery/2/">2</a>
	<a href="http://example.com/gallery/3/">3</a>
	<a href="http://example.com/gallery/4/">4</a>
	<a href="http://example.com/gallery/5/">5</a>
</p>

これだと、カレントページ番号のみ（この例の場合では "1"）を囲むエレメントが無いため、カレントページ番号に対して CSS でスタイルを指定できない。

なので、以下のような (X)HTML を書き出すようにしてやりました。

<p class="navigation">
	<span class="page-numbers current">1</span>
	<a class="page-numbers" href="http://example.com/gallery/2/">2</a>
	<a class="page-numbers" href="http://example.com/gallery/3/">3</a>
	<a class="page-numbers" href="http://example.com/gallery/4/">4</a>
	<a class="page-numbers" href="http://example.com/gallery/5/">5</a>
</p>

カレントページ番号にもエレメント ( span.current ) が割り当てられるので、CSS でスタイルを簡単に指定できますね :P

これを実現するためには、テンプレートに以下のように記述してやれば良いです。

<?php
$link_pages = wp_link_pages(array('before' => '', 'after' => '', 'next_or_number' => 'number', 'echo' => '0'));
if ( $link_pages != "" ) {
	echo "<p class=\"navigation\">\n";
	if ( preg_match_all("/(<a [^>]*>[\d]+<\/a>|[\d]+)/i", $link_pages, $matched, PREG_SET_ORDER) ) {
		foreach ($matched as $link) {
			if (preg_match("/<a ([^>]*)>([\d]+)<\/a>/i", $link[0], $link_matched))
				echo "<a class=\"page-numbers\" {$link_matched[1]}>{$link_matched[2]}</a>\n";
			else
				echo "<span class=\"page-numbers current\">{$link[0]}</span>\n";
		}
	}
	echo "</p>\n";
}
?>