Jump to the content

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

WordPress

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

    どうも、イソップです。

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

    注目記事

    最近の記事

    ぼくが書いてます

    フロントエンドエンジニア

    イソップ

    ページの先頭に戻る

    Search results

    ×