【WordPress】wp-captionの不要なstyle属性を削除する

【WordPress】wp-captionの不要なstyle属性を削除する

【告知】 10/14(土)新潟県上越市でIT勉強会を開催します!!

スポンサーリンク

どうも、イソップです。

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属性は不要な場合が多いので、あらかじめ出力設定しをておきましょう

【WordPress】wp-captionの不要なstyle属性を削除する


イソップへのお悩み相談募集中

イソップに相談しませんか?

当ブログで紹介しているような、Web制作やフリーランスへの悩みをイソップに相談してみませんか?
回答できることがあれば記事の中でご紹介します。