Shortcake: User Interface para los shortcodes de WordPress

Shortcake es una nueva funcionalidad de WordPress que permitirá establecer una interfaz amigable para los shortcodes. Posibilitará insertar un shortcode como si de un elemento de la librería multimedia se tratara, haciendo la vida más fácil a usuarios no experimentados.

Shortcake es una funcionalidad que se espera desde hace tiempo y que se integrará próximamente en el core de WordPress. Actualmente está disponible en forma de plugin, por si quieres probarla.

Sin duda Shortcake es un avance que facilitará el trabajo a los usuarios. En lugar de tener que escribir manualmente el shortcode en el editor de texto y configurar sus parámetros, dispondrán de una interfaz gráfica para completar estos datos. Aparecerá un nuevo elemento en la librería multimedia: Insertar elemento en Entrada que mostrará los Shortcakes disponibles:

Una vez seleccionado el elemento que deseemos, en la siguiente pantalla se nos mostrará los campos que tenemos disponibles para configurar nuestro shortcode:

Estos pantallazos corresponden a un ejemplo que hemos construido para un shortcode que añade una cita (blockquote) y la fuente original. Veamos cómo sería el código que añadiríamos a nuestro functions.php:

<?php

// Función que construye el shortcode
function shortcake_example_callback( $attr, $content, $shortcode_tag ) {
    $attr = shortcode_atts( array(
        'source' => '',
    ), $attr, $shortcode_tag );

    ob_start();?>
    <blockquote>
        <p><?php echo wpautop( wp_kses_post( $content ) );?></br>
        <strong><?php echo wp_kses_post( $attr[ 'source' ] ); ?></strong></p>
    </section>
    <?php
    return ob_get_clean();
}
add_shortcode( 'shortcake_example', 'shortcake_example_callback' );

// Registramos la UI para el Shortcode.
function shortcake_ui_example() {
    $fields = array(
        array(
            'label' => esc_html__( 'Fuente', 'shortcode-ui-example' ),
            'attr' => 'source',
            'type' => 'text',
            'encode' => true,
            'meta' => array(
                'placeholder' => esc_html__( 'Fuente', 'shortcode-ui-example' ),
                'data-test' => 1,
            ),
        ),
    );

    $shortcode_ui_args = array(
        // Etiqueta nombre del shortcode en UI. Requerido.
        'label' => esc_html__( 'blockquote', 'shortcode-ui-example' ),
        // Icono del shortcode. Opcional.
        'listItemImage' => 'dashicons-editor-quote',
        // Limitar el uso del shortcode a tipos de posts específicos. Opcional.
        'post_type' => array( 'post' ),
        // UI para el contenido interno del shortcode. Opcional
        'inner_content' => array(
            'label' => esc_html__( 'Texto', 'shortcode-ui-example' ),
            'description' => esc_html__( 'Escribe la cita aquí', 'shortcode-ui-example' ),
        ),
        // Establecemos los campos adicionales declarados anteriormente. Opcional.
        'attrs' => $fields,
    );
    shortcode_ui_register_for_shortcode( 'shortcake_example', $shortcode_ui_args );
}
add_action( 'register_shortcode_ui', 'shortcake_ui_example' );

Como puede observarse en el código disponemos de dos funciones. La primera crea el shortcode como se viene haciendo habitualmente, y la segunda crea la UI para el shortcode.

La segunda función (shortcake_ui_example) la añadimos al action register_shortcode_ui. En esta función pasamos una serie de argumentos a nuestro shortcode (shortcode_example) a través de la función shortcode_ui_register_for_shortcode.

Shortcake es muy potente y la API que tiene es muy dinámica. Nos permitirá establecer campos de tipo texto, textarea, fichero, fecha, color, etc… incluso decidir para qué tipo de post queremos nuestro Shortcake!

• « Añadir cabeceras HTTP de seguridad…
• Cómo evitar la actualización de… »