web-dev-qa-db-ja.com

Wordpressの画像キャプションをH2、H3タグ内にラップする方法

Googleを検索したところ、Wordpressの画像キャプションを変更してキャプションをH2またはH3で囲む方法については言及されていません。

画像キャプションをH2、H3タグ内にどのようにラップするのですか？

ありがとう。

imagescaptions
4
Steve

フィルタimg_caption_shortcodeにフックして、キャプション付きの画像全体を置き換えることができます。ここで私はWP4.5からキャプションショートコード機能をコピーし、あなたのテーマがHTML5サポートをそのまま宣言している場合は使用していたバージョンをそのまま（figcaptionを使用して）、h2を使用するように非HTML5バージョンを修正しました。

function wpse_233354_img_caption_shortcode( $empty, $attr, $content = null ) {
    // New-style shortcode with the caption inside the shortcode with the link and image tags.
    if ( ! isset( $attr['caption'] ) ) {
        if ( preg_match( '#((?:<a [^>]+>\s*)?<img [^>]+>(?:\s*</a>)?)(.*)#is', $content, $matches ) ) {
            $content = $matches[1];
            $attr['caption'] = trim( $matches[2] );
        }
    } elseif ( strpos( $attr['caption'], '<' ) !== false ) {
        $attr['caption'] = wp_kses( $attr['caption'], 'post' );
    }

    $atts = shortcode_atts( array(
        'id'      => '',
        'align'   => 'alignnone',
        'width'   => '',
        'caption' => '',
        'class'   => '',
    ), $attr, 'caption' );

    $atts['width'] = (int) $atts['width'];
    if ( $atts['width'] < 1 || empty( $atts['caption'] ) )
        return $content;

    if ( ! empty( $atts['id'] ) )
        $atts['id'] = 'id="' . esc_attr( sanitize_html_class( $atts['id'] ) ) . '" ';

    $class = trim( 'wp-caption ' . $atts['align'] . ' ' . $atts['class'] );

    $html5 = current_theme_supports( 'html5', 'caption' );
    // HTML5 captions never added the extra 10px to the image width
    $width = $html5 ? $atts['width'] : ( 10 + $atts['width'] );

    /**
     * Filter the width of an image's caption.
     *
     * By default, the caption is 10 pixels greater than the width of the image,
     * to prevent post content from running up against a floated image.
     *
     * @since 3.7.0
     *
     * @see img_caption_shortcode()
     *
     * @param int    $width    Width of the caption in pixels. To remove this inline style,
     *                         return zero.
     * @param array  $atts     Attributes of the caption shortcode.
     * @param string $content  The image element, possibly wrapped in a hyperlink.
     */
    $caption_width = apply_filters( 'img_caption_shortcode_width', $width, $atts, $content );

    $style = '';
    if ( $caption_width )
        $style = 'style="width: ' . (int) $caption_width . 'px" ';

    $html = '';
    if ( $html5 ) {
        $html = '<figure ' . $atts['id'] . $style . 'class="' . esc_attr( $class ) . '">'
        . do_shortcode( $content ) . '<figcaption class="wp-caption-text">' . $atts['caption'] . '</figcaption></figure>';
    } else {
        $html = '<div ' . $atts['id'] . $style . 'class="' . esc_attr( $class ) . '">'
        . do_shortcode( $content ) . '<h2 class="wp-caption-text">' . $atts['caption'] . '</h2></div>';
    }

    return $html;
}

add_filter( 'img_caption_shortcode', 'wpse_233354_img_caption_shortcode', 10, 3 );
4
Andy Macaulay-Brook

WordPressでは、img_caption_shortcodeフックのカスタムフィルタを使用して[caption]ショートコードのHTML出力を修正できます。あなたが望むものを変更することができます。フィルタは表示されるべき完全なHTMLコードを含む文字列を返すべきです。

コーデックスに あなたはそれを変更する方法の完全な例を持っています。

add_filter( 'img_caption_shortcode', 'wpse_233363_img_caption_shortcode', 10, 3 );

function wpse_233363_img_caption_shortcode( $empty, $attr, $content ){
    $attr = shortcode_atts( array(
        'id'      => '',
        'align'   => 'alignnone',
        'width'   => '',
        'caption' => ''
    ), $attr );

    if ( 1 > (int) $attr['width'] || empty( $attr['caption'] ) ) {
        return '';
    }

    if ( $attr['id'] ) {
        $attr['id'] = 'id="' . esc_attr( $attr['id'] ) . '" ';
    }

    return '<div ' . $attr['id']
    . 'class="wp-caption ' . esc_attr( $attr['align'] ) . '" '
    . 'style="max-width: ' . ( 10 + (int) $attr['width'] ) . 'px;">'
    . do_shortcode( $content )
    . '<p class="wp-caption-text">' . $attr['caption'] . '</p>'
    . '</div>';

}
0
Fabman