graphyテーマで画像キャプションの表示HTMLやcssを変更する

graphyテーマはとても美しくて全般的には気に入っているのですが、画像のキャプションがはみ出るのだけがちょっと気に入りません。

フルサイズの画像では大丈夫ですが、サムネイルサイズになるとちょっと不格好。

こんな感じです。

これをはみ出ないように、画像の幅とキャプションの幅が一緒になるように修正します。

画像キャプションを出力しているHTMLコードを変更

まずは画像キャプションを出力しているHTMLコードを変更します。functions.phpをいじります。

参考:http://pressstocker.com/image-caption/

今回は、WordPress純正テーマであるTwenty Fifteenなどが使っているfigureやfigcaption（HTML5）で書いてみました。

本来class名はwp-cationやwp-caption-textなのですが、不用意なスタイルの重複を避けるため、またいちいち上書きでスタイルを書き足すのが面倒なために、新しいclass名を wp-cap , wp-cap-text としました。

//wp-captionの変更　WPが標準で出力する画像とキャプションの出力形式の変更
add_shortcode('caption', 'my_img_caption_shortcode');
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, 'caption'));

	if ( 1 > (int) $width || empty($caption) )
		return $content;
	
		if ( $id ) $id = 'id="' . esc_attr($id) . '" ';
		//graphy標準はこれ→ return '<div ' . $id . 'class="wp-caption ' . esc_attr($align) . '" style="width: ' . (10 + (int) $width) . 'px">' . do_shortcode( $content ) . '<p class="wp-caption-text">' . $caption . '</p></div>';
		//画像キャプションのHTMLを変更
		return '<figure ' . $id .' style="width: ' . (0 + (int) $width) . 'px" class="wp-cap ' . esc_attr($align). '">' . do_shortcode( $content ) . '<figcaption class="wp-cap-text">' . $caption . '</figcaption></figure>';
}

cssの修正

そしてcssを追加します。

細かいスタイル（色color:やfont-size:大きさ）などは好きにしてもらっていいのですが、キモは「max-width: 100%;」これで画像の幅とfigcaptionの幅が同じになります。

/*画像と画像キャプション*/
.wp-cap {
	color: #666;
	font-size: 90%;
	font-style: normal;
	margin-bottom: 24px;
	max-width: 100%;/*これがキモ*/
}
.wp-cap img[class*="wp-image-"] {
	display: block;
	margin: 6px auto 0;
}
.wp-cap-text {
	text-align: center;
	background: #f2f2f2;
}
.wp-cap .wp-cap-text {
	padding: 0.5em;
}
/* /画像と画像キャプション*/