<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>キャプション &#8211; WordPressカスタマイズ、サイト作成メモ</title>
	<atom:link href="https://msn100.org/tag/%e3%82%ad%e3%83%a3%e3%83%97%e3%82%b7%e3%83%a7%e3%83%b3/feed" rel="self" type="application/rss+xml" />
	<link>https://msn100.org</link>
	<description>WordPressサイト制作を手がけるToshiyuki TanakaのFAQ、ヒント、Tipsなどの覚え書きです</description>
	<lastBuildDate>Mon, 20 Oct 2025 03:44:42 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>
<atom:link rel="hub" href="https://pubsubhubbub.appspot.com"/>
<atom:link rel="hub" href="https://pubsubhubbub.superfeedr.com"/>
<atom:link rel="hub" href="https://websubhub.com/hub"/>
<atom:link rel="self" href="https://msn100.org/tag/%e3%82%ad%e3%83%a3%e3%83%97%e3%82%b7%e3%83%a7%e3%83%b3/feed"/>
	<item>
		<title>画像キャプション回りのHTMLタグをカスタマイズする</title>
		<link>https://msn100.org/code/caption_html.html</link>
					<comments>https://msn100.org/code/caption_html.html#comments</comments>
		
		<dc:creator><![CDATA[Kota]]></dc:creator>
		<pubDate>Thu, 21 Feb 2013 15:44:12 +0000</pubDate>
				<category><![CDATA[ソースコード改変]]></category>
		<category><![CDATA[HTMLタグ]]></category>
		<category><![CDATA[ショートコード]]></category>
		<category><![CDATA[functions.php]]></category>
		<category><![CDATA[画像]]></category>
		<category><![CDATA[キャプション]]></category>
		<guid isPermaLink="false">http://msn100.org/?p=177</guid>

					<description><![CDATA[画像にキャプションを入れると、WordPressは画像タグを&#60;img&#62;タグで囲み、キャプションを&#60;p&#62;タグで囲んで、それらを&#60;div&#62;でくくって、さらにstyle属性で「画像＋10px [&#8230;]]]></description>
										<content:encoded><![CDATA[<p>画像にキャプションを入れると、WordPressは画像タグを&lt;img&gt;タグで囲み、キャプションを&lt;p&gt;タグで囲んで、それらを&lt;div&gt;でくくって、さらにstyle属性で「画像＋10px」の横幅を指定してしまいます。こういうソースですね。</p>
<pre class="brush: xml; light: true; title: ; notranslate">&lt;div id=&quot;attachment_65&quot; class=&quot;wp-caption alignleft&quot; style=&quot;width: 130px&quot;&gt;</pre>
<p>これは画像が120pxの例です。このwidth属性でレイアウトの自由度が損なわれるので、この指定を削除する、あるいは任意のclassを追加する、といったカスタマイズ法です。ソースコードはいじらず、function.phpへの記述追加で可能です。<br />
<span id="more-177"></span></p>
<p>このHTMLタグを吐き出しているのは、<strong>wp-include内のmedia.php</strong>です。Ver3.51のmedia.phpでは654行目に</p>
<pre class="brush: php; light: true; title: ; notranslate">return '&lt;div ' . $id . 'class=&quot;wp-caption ' . esc_attr($align) . '&quot; style=&quot;width: ' . (10 + (int) $width) . 'px&quot;&gt;'</pre>
<p>という記述があり、ここで取得した画像の横幅$widthに10を加えてstyleのwidthとして入れています。</p>
<p>ですのでこの行を書き換えれば出力されるタグも変更できますが、やはりコアファイルはいじりたくないものです。WPのバージョンアップのたびに書き直さないとなりませんし。</p>
<p>こういう出力ソースを変更したい場合は、たいがいフィルターで処理するのですが、ここはショートコードで処理されています。ショートコードは自分でPHPソースなどを文中に挿入するときなどに使うもので、ユーザーが作成するものと思いがちですが、WPのデフォルトでいくつか（４つと以前聞きました）仕込まれているショートコードもあり、このキャプション回りもその一つです。</p>
<p>ですのでフィルターではうまく処理ができませんでした（もちろん私の技術力不足の可能性も大ですが）。そこで、ショートコードを加えているなら、オリジナルのショートコードを作成して、それを好きな出力設定に変更して適応させる、という方法にしてみたらうまくいきました。</p>
<p>そのやり方ですが、media.phpでは、まず</p>
<pre class="brush: php; light: true; title: ; notranslate">add_shortcode('caption', 'img_caption_shortcode');</pre>
<p>で <strong>img_caption_shortcode</strong> というショートコードを caption に適応させていることがわかります（610行目）。この行をコピーしてfunction.phpにペースとして、ショートコード名をオリジナルに変更します。</p>
<pre class="brush: php; light: true; title: ; notranslate">add_shortcode('caption', 'my_img_caption_shortcode');</pre>
<p>のように、 <strong>my_img_caption_shortcode</strong> を適応させるようにします（名称は任意です）。</p>
<p>そして、media.phpの628行目から始まるimg_caption_shortcodeの中身を626行目まで丸ごとコピーして、これもfunction.phpにペースト。</p>
<p>そして、まずfunction名の「img_caption_shortcode」を、自分が付けた新しい名前（今の例ではmy_img_caption_shortcode）に変更して、あとは自分が出力したいように中身を書き換えればOKです。基本的には最後の <strong>return</strong> 以降の部分の書き換えになると思います。私はstyel属性を削除したかったので、こんなふうにその部分を除いたソースにしました。</p>
<pre class="brush: php; highlight: [25]; title: ; notranslate">function my_img_caption_shortcode($attr, $content = null) {
	if ( ! isset( $attr&#x5B;'caption'] ) ) {
		if ( preg_match( '#((?:&lt;a &#x5B;^&gt;]+&gt;\s*)?&lt;img &#x5B;^&gt;]+&gt;(?:\s*&lt;/a&gt;)?)(.*)#is', $content, $matches ) ) {
			$content = $matches&#x5B;1];
			$attr&#x5B;'caption'] = trim( $matches&#x5B;2] );
		}
	}

	$output = apply_filters('img_caption_shortcode', '', $attr, $content);
	if ( $output != '' )
		return $output;

	extract(shortcode_atts(array(
		'id'	=&gt; '',
		'align'	=&gt; 'alignnone',
		'width'	=&gt; '',
		'caption' =&gt; ''
	), $attr));

	if ( 1 &gt; (int) $width || empty($caption) )
		return $content;

	if ( $id ) $id = 'id=&quot;' . esc_attr($id) . '&quot; ';

	return '&lt;div ' . $id . 'class=&quot;wp-caption ' . esc_attr($align) . '&quot;&gt;'
	. do_shortcode( $content ) . '&lt;p class=&quot;wp-caption-text&quot;&gt;' . $caption . '&lt;/p&gt;&lt;/div&gt;';
}</pre>
<p>classやHTMLタグを入れたり、といった改変も可能なはずです。</p>
<p>もしかしたらもっとスマートなやり方があるかもしれませんので、ご存じの方は教えていただければ幸いです。</p>
<p>ちなみに以下のページの「ギャラリーのカスタマイズ法」を参考に、キャプション部分に応用してトライしてみました。どうもありがとうございました。</p>
<p>参考：<a href="http://y2web.net/blog/inet/wp/gallery-customize-618/">y2blog » WordPressの『ギャラリー』をカスタマイズする</a></p>
]]></content:encoded>
					
					<wfw:commentRss>https://msn100.org/code/caption_html.html/feed</wfw:commentRss>
			<slash:comments>4</slash:comments>
		
		
			</item>
	</channel>
</rss>
