どうも、イソップです。
WordPressのキャプション付き画像を挿入すると、要らないwidth属性がHTMLに出力されていて、
レスポンシブデザインやフィード情報を他のサイトで利用する場合に、とても厄介です。
<figure id="attachment_***" style="width: 800px" class="wp-caption alignnone"><img class="wp-image...
記事投稿画面で、該当のwidthの数値を変更したり削除しても消すことはできません。
しかし、functions.php に出力設定を追加することで、カスタマイズが可能です。
キャプション付き画像のHTMLを変更する
以下のコードを、functions.php に追記します。
<?php
// wp-captionのカスタマイズ
add_shortcode('caption', 'custom_caption_shortcode');
function custom_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 '<figure ' . $id . 'class="wp-caption ' . esc_attr($align) . '">' . do_shortcode( $content ) . '<figcaption class="wp-caption-text">' . $caption . '</figcaption></figure>';
}
出力されるコードは、最後の部分です。
<?php
return '<figure ' . $id . 'class="wp-caption ' . esc_attr($align) . '">' ...
これでデフォルトで出力されるstyle属性を削除できました。
実際のHTMLの出力結果は次のようになります。
<figure id="attachment_273" class="wp-caption alignnone"><img class="wp-image...
style属性は不要な場合が多いので、あらかじめ出力設定しをておきましょう。