ぼやき

0

WordPress のデフォルトで使えるショートコードで [caption][/caption] というものがあります。ショートコードで囲むだけでキャプションを含むタグを出力してくれるのですが、このコードになせが style 要素にて width が指定されてしまっているのでこれを取り除いたり、値を変更するカスタマイズをしました。

ショートコード caption とその出力

以下はテストサイトにアップロードした画像をデフォルト機能のメディアを追加からキャプションつきで埋め込んだものです。(テストサイトにて行ったものなので、画像は表示されません。)

[caption id="attachment_243" align="aligncenter" width="300"]<a data-size="2592x1944" href="http://theme.1010uzu.com/wp/wp-content/uploads/2012/02/DSCF0163.jpg"><img src="http://theme.1010uzu.com/wp/wp-content/uploads/2012/02/DSCF0163-300x225.jpg" alt="飛行機から撮った雲" width="300" height="225" class="size-medium wp-image-243" /></a> 飛行機からの雲[/caption]

これを投稿するとショートコードが展開されて以下のようになります。

<div id="attachment_243" style="width: 310px" class="wp-caption aligncenter"><a href="http://theme.1010uzu.com/wp/wp-content/uploads/2012/02/DSCF0163.jpg" data-size="2592x1944" class="liimagelink lazy-container" style="padding-bottom:75%"><img alt="飛行機から撮った雲" width="300" height="225" class="size-medium wp-image-243 lazyload" data-sizes="(max-width: 300px) 100vw, 300px" data-srcset="http://theme.1010uzu.com/wp/wp-content/uploads/2012/02/DSCF0163-300x225.jpg 300w, http://theme.1010uzu.com/wp/wp-content/uploads/2012/02/DSCF0163-1024x768.jpg 1024w" data-src="http://theme.1010uzu.com/wp/wp-content/uploads/2012/02/DSCF0163-300x225.jpg"><noscript><img src="http://theme.1010uzu.com/wp/wp-content/uploads/2012/02/DSCF0163-300x225.jpg" alt="飛行機から撮った雲" width="300" height="225" class="size-medium wp-image-243 lazyload"></noscript></a><p class="wp-caption-text"> 飛行機からの雲</p></div>

wp-caption などをクラスに持つ div 要素で囲まれるのですが、それに style="width: 310px" とインラインで表示されてしまいます。これは ショートコード caption の width 属性の幅に 10 px 足したものと思われます。 CSS でインラインの style 要素は一番優先順位が高いので .wp-caption に外部 CSS から width を指定しても !important を書かないと適応されません。

ということで、このインラインの style 要素を削除したり、値を変えたりしてみることにします。

ショートコード caption は img_caption_shortcode() で整形される

ネットで検索してみたのですが、調べ方が悪かったのか、日本語でも英語でも検索で出てくるサイトはなぜかショートコードを上書きするという手法でインラインの style 要素を削除しています。そんな大掛かりなことをしなくてもいいのではないかと思い、コードを見てみました。

caption のショートコードは wp-includes/media.php 内の img_caption_shortcode() という関数で実行されているようです。

→ WordPress.org : img_caption_shortcode()

1562 行目に 10 を足して witdh の幅を大きくしている記述があります。

$width = $html5 ? $atts['width'] : ( 10 + $atts['width'] );

そしてそのすぐ下に img_caption_shortcode_width というフィルターフックがあります。これを使うことで style 要素を削除して出力しないようにしたり、 style 属性の witdh の値を変えたりできます。 WordPress 3.7.0 から使えるフィルターフックのようですが、あまり使われていないのでしょうか。

wp-caption の style 属性を削除するコード

続きのコードを読むと caption の style 要素を削除するには img_caption_shortcode_width のフックの戻り値にゼロを渡せばよいようです。続く 1582 行目の if 文が偽になり style 要素の文字列が空になります。

ゼロを返すコードは以下のようです。

function custom_img_caption_shortcode_width( $width ){
	return 0;
}
add_filter( 'img_caption_shortcode_width', 'custom_img_caption_shortcode_width' );

ゼロを返すだけなので関数を定義する必要もないだろうと考え、無名関数を使って以下のように書き直しました。これなら 1 行ですね。

add_filter( 'img_caption_shortcode_width', function(){ return 0; } );

実行すると以下のような HTML が出力されます。 style 要素はなくなってます。

<div id="attachment_243" class="wp-caption aligncenter"><a href="http://theme.1010uzu.com/wp/wp-content/uploads/2012/02/DSCF0163.jpg" data-size="2592x1944" class="liimagelink lazy-container" style="padding-bottom:75%"><img alt="飛行機から撮った雲" width="300" height="225" class="size-medium wp-image-243 lazyload" data-sizes="(max-width: 300px) 100vw, 300px" data-srcset="http://theme.1010uzu.com/wp/wp-content/uploads/2012/02/DSCF0163-300x225.jpg 300w, http://theme.1010uzu.com/wp/wp-content/uploads/2012/02/DSCF0163-1024x768.jpg 1024w" data-src="http://theme.1010uzu.com/wp/wp-content/uploads/2012/02/DSCF0163-300x225.jpg"><noscript><img src="http://theme.1010uzu.com/wp/wp-content/uploads/2012/02/DSCF0163-300x225.jpg" alt="飛行機から撮った雲" width="300" height="225" class="size-medium wp-image-243 lazyload"></noscript></a><p class="wp-caption-text"> 飛行機からの雲</p></div>

wp-caption の style 属性の幅の値を変更するコード

ショートコード caption で出力される div 要素の幅を変えるには以下のようにすればよいです。

function custom_img_caption_shortcode_width( $width, $atts ){
	$width = 12 + $atts['width'];
	return $width;
}
add_filter( 'img_caption_shortcode_width', 'custom_img_caption_shortcode_width', 10, 2 );

上記コードを実行すると以下のようになります。 style 要素の witdh の値が 12 px 増えています。

<div id="attachment_243" style="width: 312px" class="wp-caption aligncenter"><a href="http://theme.1010uzu.com/wp/wp-content/uploads/2012/02/DSCF0163.jpg" data-size="2592x1944" class="liimagelink lazy-container" style="padding-bottom:75%"><img alt="飛行機から撮った雲" width="300" height="225" class="size-medium wp-image-243 lazyload" data-sizes="(max-width: 300px) 100vw, 300px" data-srcset="http://theme.1010uzu.com/wp/wp-content/uploads/2012/02/DSCF0163-300x225.jpg 300w, http://theme.1010uzu.com/wp/wp-content/uploads/2012/02/DSCF0163-1024x768.jpg 1024w" data-src="http://theme.1010uzu.com/wp/wp-content/uploads/2012/02/DSCF0163-300x225.jpg"><noscript><img src="http://theme.1010uzu.com/wp/wp-content/uploads/2012/02/DSCF0163-300x225.jpg" alt="飛行機から撮った雲" width="300" height="225" class="size-medium wp-image-243 lazyload"></noscript></a><p class="wp-caption-text"> 飛行機からの雲</p></div>

ショートコードの caption で出力される div 要素の style 属性を削除したり変更したりするのに長々とコードを書く必要はないようです。

関連記事