Blog sobre desarrollo WordPress en Español Desarrollo WordPress en Español
shortcake

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:

shortcakes

 

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

shortcake campos

 

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:

// 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 que tipo de post queremos nuestro Shortcake!

NOTA

Cuando Shortcake esté disponible no significa que todos los shortcodes tengan esta interfaz, es decir, que si ya estás utilizando o tu tema/plugin usa shortcodes, estos no tendrán esta interfaz por defecto, habrá que crearla para cada shortcode por separado. Aquí un ejemplo en GitHub más extenso donde se utilizan diferentes tipos de campos: https://github.com/wp-shortcake/shortcake/blob/master/dev.php

Puede que también te interese

Cómo añadir un enlace para los ajustes en el listado de plugins
Cómo añadir un enlace para los ajustes en el listado de plugins
Si estas desarrollando un plugin o vas a desarrollarlo, puede resultarte de utilidad saber cómo añadir un enlace para los ajustes de tu plugin en el…
Reduce el HTML de tu WordPress para bajar el peso de la página
Reduce el HTML de tu WordPress para bajar el peso de la página
La parte pública de una web o expresado de otro modo, lo que el navegador pinta, no es más que un documento HTML, donde encontraremos…
Cómo restringir el acceso al back-end de WordPress a usuarios no administradores
Cómo restringir el acceso al back-end de WordPress a usuarios no administradores
A continuación vamos a ver cómo bloquear o restringir el acceso al back-end o escritorio de WordPress (con y sin plugins), incluso ocultaremos el admin…
WordPress transients, opciones que expiran en el tiempo
WordPress transients, opciones que expiran en el tiempo
En la entrada anterior vimos cómo trabajar con la API de opciones de WordPress. En ésta vamos a ver qué son los transients. Los transients…