¿Cómo envolver los títulos de imagen de Wordpress dentro de las etiquetas H2, H3?

4

He buscado en Google y no encuentro ninguna mención de cómo cambiar los títulos de imagen de Wordpress para envolver el título en un H2 o H3.

¿Cómo envolvemos los títulos de las imágenes dentro de las etiquetas H2, H3?

Gracias.

    
pregunta Steve 27.07.2016 - 12:38

2 respuestas

4

Puedes enganchar en el filtro img_caption_shortcode y reemplazar toda la imagen con subtítulos. Aquí copié la función de shortcode de subtítulos de WP4.5, dejé la versión utilizada si su tema declara el soporte de HTML5 tal como está (utilizando figcaption) y modifiqué la versión no HTML5 para usar 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 );
    
respondido por el Andy Macaulay-Brook 27.07.2016 - 13:48
0

En WordPress puedes modificar la salida HTML del shortcode [caption] usando un filtro personalizado en el gancho img_caption_shortcode. Puedes cambiar las cosas como quieras. El filtro debe devolver una cadena que contenga el código HTML completo que se debe mostrar.

En el códice tiene un ejemplo completo de cómo modificarlo.

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

}
    
respondido por el Fabman 27.07.2016 - 13:51

Lea otras preguntas en las etiquetas