アップロードした画像にキャプションを設定した際、標準の状態で書き出されるHTMLの出力形式では使い勝手があまりよくないので、この書き出されるHTMLをWordPressのコアファイルをいじらずに変更します。

標準の状態では、画像にキャプションを設定した時は下記のようなHTMLが書き出されます。

<div id="attachment_14" class="wp-caption alignnone" style="width: ○○○px">
	<img class="size-medium wp-image-14" alt="○○○" src="○○○.jpg" width="○○○" height="○○○" />
	<p class="wp-caption-text">キャプションの内容</p>
</div>

ここで注意しておく点は、<div>タグに自動的に付与される「style="width: ○○○px"」です。
このwidthは「画像の幅+10px」で直接HTMLに書き出されます。
時に便利であり、時に邪魔であり…。

そのまま使うか？
+10pxを取り除くか？
スタイルそのものを削除するか？

など、このことも合わせて以下の変更方法を参考にしてみてください。

キャプションを書き出すHTMLの変更方法

function.phpに以下を追加します。

function.php

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) . '" ';

	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に書き出される箇所を変更します。
変更する箇所は、27行目になります。

<div>タグに付与される横幅を画像サイズと同じにする

<div>タグに自動的に付与される横幅の指定「style="width: ○○○px"」を画像と同じ横幅にするには、 (10 + (int) $width) を $width に書き換えます。

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

<div>タグに付与される横幅のスタイル自体を削除する

<div>タグに自動的に付与される横幅の指定「style="width: ○○○px"」そのものを削除します。

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

キャプション内容の前に定型の文言を追加する

キャプションの内容の前に「Photo credit: 」と表示されるようにしてみます。

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

用途に合わせてHTMLタグやテキスト、id、classなど、変更・削除・追加が行えます。

私がよく使用する書き方

見映えや配置についてはCSSで調整することを前提として、不要なものを削除し、下記のようなスッキリしたHTMLでキャプションを書き出す変更をしています。

<p class="alignnone">
	<img class="size-medium wp-image-14" alt="○○○" src="○○○.jpg" width="○○○" height="○○○" />
	<span class="caption-text">キャプションの内容</span>
</p>

• 画像とキャプションを括っている<div>タグを<p>に変更し、「id」「class="wp-caption"」「style」を削除
• キャプションの内容を括っている<p>タグを<span>に変更し、「class="wp-caption-text"」を削除
• <span>タグに新たに「class="caption-text"」を追加（CSSでの配置指定用）

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

以上、「WordPress：画像にキャプションを設定した時に書き出されるHTMLを変更」でした。