画像キャプション回りのHTMLタグをカスタマイズする

画像にキャプションを入れると、WordPressは画像タグを<img>タグで囲み、キャプションを<p>タグで囲んで、それらを<div>でくくって、さらにstyle属性で「画像＋10px」の横幅を指定してしまいます。こういうソースですね。

<div id="attachment_65" class="wp-caption alignleft" style="width: 130px">

これは画像が120pxの例です。このwidth属性でレイアウトの自由度が損なわれるので、この指定を削除する、あるいは任意のclassを追加する、といったカスタマイズ法です。ソースコードはいじらず、function.phpへの記述追加で可能です。

このHTMLタグを吐き出しているのは、wp-include内のmedia.phpです。Ver3.51のmedia.phpでは654行目に

return '<div ' . $id . 'class="wp-caption ' . esc_attr($align) . '" style="width: ' . (10 + (int) $width) . 'px">'

という記述があり、ここで取得した画像の横幅$widthに10を加えてstyleのwidthとして入れています。

ですのでこの行を書き換えれば出力されるタグも変更できますが、やはりコアファイルはいじりたくないものです。WPのバージョンアップのたびに書き直さないとなりませんし。

こういう出力ソースを変更したい場合は、たいがいフィルターで処理するのですが、ここはショートコードで処理されています。ショートコードは自分でPHPソースなどを文中に挿入するときなどに使うもので、ユーザーが作成するものと思いがちですが、WPのデフォルトでいくつか（４つと以前聞きました）仕込まれているショートコードもあり、このキャプション回りもその一つです。

ですのでフィルターではうまく処理ができませんでした（もちろん私の技術力不足の可能性も大ですが）。そこで、ショートコードを加えているなら、オリジナルのショートコードを作成して、それを好きな出力設定に変更して適応させる、という方法にしてみたらうまくいきました。

そのやり方ですが、media.phpでは、まず

add_shortcode('caption', 'img_caption_shortcode');

で img_caption_shortcode というショートコードを caption に適応させていることがわかります（610行目）。この行をコピーしてfunction.phpにペースとして、ショートコード名をオリジナルに変更します。

add_shortcode('caption', 'my_img_caption_shortcode');

のように、 my_img_caption_shortcode を適応させるようにします（名称は任意です）。

そして、media.phpの628行目から始まるimg_caption_shortcodeの中身を626行目まで丸ごとコピーして、これもfunction.phpにペースト。

そして、まずfunction名の「img_caption_shortcode」を、自分が付けた新しい名前（今の例ではmy_img_caption_shortcode）に変更して、あとは自分が出力したいように中身を書き換えればOKです。基本的には最後の return 以降の部分の書き換えになると思います。私はstyel属性を削除したかったので、こんなふうにその部分を除いたソースにしました。

function my_img_caption_shortcode($attr, $content = null) {
	if ( ! isset( $attr['caption'] ) ) {
		if ( preg_match( '#((?:<a [^>]+>\s*)?<img [^>]+>(?:\s*</a>)?)(.*)#is', $content, $matches ) ) {
			$content = $matches[1];
			$attr['caption'] = trim( $matches[2] );
		}
	}

	$output = apply_filters('img_caption_shortcode', '', $attr, $content);
	if ( $output != '' )
		return $output;

	extract(shortcode_atts(array(
		'id'	=> '',
		'align'	=> 'alignnone',
		'width'	=> '',
		'caption' => ''
	), $attr));

	if ( 1 > (int) $width || empty($caption) )
		return $content;

	if ( $id ) $id = 'id="' . esc_attr($id) . '" ';

	return '<div ' . $id . 'class="wp-caption ' . esc_attr($align) . '">'
	. do_shortcode( $content ) . '<p class="wp-caption-text">' . $caption . '</p></div>';
}

classやHTMLタグを入れたり、といった改変も可能なはずです。

もしかしたらもっとスマートなやり方があるかもしれませんので、ご存じの方は教えていただければ幸いです。

ちなみに以下のページの「ギャラリーのカスタマイズ法」を参考に、キャプション部分に応用してトライしてみました。どうもありがとうございました。

参考：y2blog » WordPressの『ギャラリー』をカスタマイズする