Autonomía digital y tecnológica

Código e ideas para una internet distribuida

Cómo modificar el shortcode caption de WordPress para adaptarlo a HTML5 y hacerlo más responsive

Imago voragine.net
[actualizado el ]

El shortcode caption es el que usamos, aún sin darnos cuenta, para introducir imágenes con pie de foto en el contenido de un post o página.

Aunque dispone de algunos parámetros que nos permiten configurar mínimamente el estilo, la salida que genera no cuenta con las marcas semánticas para imágenes de HTML5. Además el shortcode define un ancho absoluto para la imagen, haciendo que el código no sea responsive.

Modificando el shortcode con una función que podemos incluir en un plugin o en el archivo functions.php del theme, podemos añadir estas dos características al caption:

/**
 * Improves the caption shortcode with HTML5 figure & figcaption; microdata & wai-aria attributes
 * by JoostKiens
 * https://gist.github.com/JoostKiens/4477366
 * modified by @skotperez to remove width style from output to make it more responsive.
 * 
 * @param  string $val     Empty
 * @param  array  $attr    Shortcode attributes
 * @param  string $content Shortcode content
 * @return string          Shortcode output
 */
function prefix_img_caption_shortcode_filter($val, $attr, $content = null)
{
        extract(shortcode_atts(array(
                'id'      => '',
                'align'   => 'aligncenter',
                'width'   => '',
                'caption' => ''
        ), $attr));

        // No caption, no dice... But why width? 
        if ( 1 > (int) $width || empty($caption) )
                return $val;

        if ( $id )
                $id = esc_attr( $id );

        // Add itemprop="contentURL" to image - Ugly hack
        $content = str_replace('<img', '<img itemprop="contentURL"', $content);

        return '<figure id="' . $id . '" aria-describedby="figcaption_' . $id . '" class="wp-caption ' . esc_attr($align) . '" itemscope itemtype="http://schema.org/ImageObject">' . do_shortcode( $content ) . '<figcaption id="figcaption_'. $id . '" class="wp-caption-text" itemprop="description">' . $caption . '</figcaption></figure>';
}
add_filter( 'img_caption_shortcode', 'prefix_img_caption_shortcode_filter', 10, 3 );

El snippet lo encontré en el blog de Pixels & Code.

2 comentarios

    • Por John Sanabria •

    Genial pero lo probé en la versión 4.6.1 de WordPress a través del archivo functions y no parece tener efecto. Sabes si dejó de funcionar en algún momento?

    1. Hola John,

      en la explicación faltaba el filtro para que la función que hemos creado se aplique en la generación del caption: lo he añadido al final del bloque de código.

Responder al comentario de John Sanabria

*
*

 

No hay trackbacks