如何在h2、h3标签内包装WordPress图片标题?

时间:2016-07-27 作者:Steve

我在Google上搜索过,没有发现任何关于如何将Wordpress图像标题改成H2或H3格式的内容。

如何在H2、H3标签中包装图像标题?

谢谢

2 个回复
最合适的回答,由SO网友:Andy Macaulay-Brook 整理而成

你可以挂上过滤器img_caption_shortcode 并替换整个标题图像。这里,我复制了WP4中的caption shortcode函数。5,如果主题声明支持HTML5(使用figcaption),并将非HTML5版本修改为使用h2,则保留使用的版本。

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 );

SO网友:Fabman

在WordPress中,您可以使用img\\u caption\\u shortcode挂钩上的自定义过滤器修改[字幕]短代码的HTML输出。你可以随心所欲地改变事情。过滤器应返回一个字符串,其中包含应显示的完整HTML代码。

In the codex 您有一个如何修改它的完整示例。

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>\';

}

相关推荐

Images with overlay

我有一些图片在一个容器中,我想添加一个覆盖和图标。这不是现成的,但我找到了一些有用的代码:HTML:<div class=\"main\"> <span class=\"featured\"><img src=\"http://joshrodg.com/IMG_001-258x258.jpg\" title=\"\" alt=\"\"></span> </div> CSS:.featured {