WordPress のデフォルトで使えるショートコードで [caption][/caption] というものがあります。ショートコードで囲むだけでキャプションを含むタグを出力してくれるのですが、このコードになぜか style 要素にて width が指定されてしまっているのでこれを取り除いたり、値を変更するカスタマイズをしました。
2017 年 11 月 15 日 にリリースされた WordPress 4.9 より出力される HTML コード内の CSS がレスポンシブデザインに対応するため width から max-width に変更されたので、記事の一部を変更しました。
2018 年 4 月 3 日にリリースされた WordPress 4.9.5 にて出力される HTML コードが max-width から 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="(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 を書かないと適応されません。
前述したとおり出力されるコードが max-width に変更されたので、 width が効くようになっています。
WordPress 4.9.5 にてまた width に戻りましたので、 CSS で指定した width の値が効かなくなっています。
ということで、このインラインの 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="(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="(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 属性を削除したり変更したりするために長々とコードを書く必要はないようです。
