Revisión de plugin – Shortcake (Shortcode UI)

El cliente te solicita una funcionalidad que por algún motivo decides implementar con un shortcode. Explicarle cómo debe escribirlo en sus post o cómo definir sus parámetros puede convertirse en un auténtico infierno sumado a los posibles errores que puedan llegar a surgir. Es aquí cuando el plugin Shortcake viene a salvarnos. Con pocas líneas de código PHP podemos convertir un shortcode en un elemento que puede añadirse fácilmente mediante una interfaz gráfica.

Ejemplo de funcionalidad

Uno de nuestros clientes tiene una página web de viajes y nos solicita que en cada uno de sus artículos, aparte del contenido, quiere una ficha con los datos básicos del viaje: un título, una imagen destacada, una descripción, el precio y el posible color de fondo de la ficha. Esta información debe mostrarse con un estilo propio como el que vemos en la siguiente imagen:

Para facilitarle la tarea al cliente y que todas las fichas tengan el mismo aspecto vamos a hacer en primer lugar un shortcode, que acepte como parámetros el nombre del país, la descripción, el precio, el color de fondo y una imagen. El código PHP quedaría de la siguiente manera:

<?php
function fichaviaje_func( $atts ){
	ob_start();
	// Seteo un color por defecto para el fondo.
	$bcolor = empty($atts['fv_bcolor'])?'#444444':$atts['fv_bcolor'];
	?>
		<div class="fviaje" style="background-color: ;">
			
			<?php
				if ( !empty($atts['fv_destacada']) ):
					// Obtengo la URL del adjunto
					$image_url = wp_get_attachment_image_src($atts['fv_destacada']); ?>
					<img src="<?php echo $image_url[0]; ?>" class="fviaje__feat">
			<?php endif; ?>
			<h3 class="fviaje__h"><?php echo $atts['fv_pais']; ?></h3>
			<p class="fviaje__b"><?php echo $atts['fv_descripcion']; ?></p>
			<hr>
			<p class="fviaje__price">Precio: <strong><?php echo $atts['fv_price']; ?>€</strong></p>
		</div>
	<?php
	return ob_get_clean();
}
add_shortcode( 'fichaviaje', 'fichaviaje_func' );

Aplicamos también el siguiente estilo:

.fviaje {
	color: #ffffff;
	padding: 10px 10px 10px 130px;
	position: relative;
}
	.fviaje__feat {
		left: 10px;
		position: absolute;
		width: 100px;
	}
	.fviaje__h {
		color: #ffffff;
		font-weight: bold;
		padding-top: 0;
	}
 	.fviaje__b { margin: 0; }
		.fviaje__b:before,
		.fviaje__b:after{ content: '"'; }

Con este shortcode el usuario podría incluir las fichas de viajes en su contenido de la siguiente manera:
[fichaviaje fv_destacada="10" fv_bcolor="#444444" fv_pais="Turquía" fv_descripcion="Visita Turquía en 5 días" fv_price="99,75"]

Al igual que yo estarán pensando que no es muy práctico enseñarle a usar este código al usuario final. Puede dar lugar a errores, equivocaciones y llamadas constantes para preguntarnos cómo funcionaba. Es aquí cuando entra en juego el plugin Shortecake (Shortcode UI). Podemos ofrecer la misma funcionalidad pero a través de una interfaz gráfica que facilite la tarea de carga de contenido a los usuarios finales utilizando el mismo cuadro de diálogo de multimedia de WordPress.

Pantallas finales

Registrar el shortcode en ShortCake

El plugin no tiene ninguna pantalla de opciones ni configuración en el administrador de WordPress. Solo nos da unas ciertas funciones de PHP que podemos utilizar para registrar nuestro shortcode y aplicarle todos los parámetros necesarios para formar la interfaz gráfica.

Aplica el siguiente código a tu fichero functions.php de tu tema activo o bien en tu plugin, para generar las interfaces del punto anterior.

add_action( 'register_shortcode_ui', 'shortcode_ui_fichaviaje' );
function shortcode_ui_fichaviaje() {
	$fields = array(
		// SELECT DE COLOR 
		array (
			'attr'		=> 'fv_bcolor',
			'label'		=> esc_html__('Color de fondo'),
			'type'   	=> 'color'
		),

		// SELECTOR DE IMAGEN
		array(
			'attr'		=> 'fv_destacada',
			'label'		=> esc_html__('Imagen'),
			'type'      => 'attachment',
			'libraryType' => array( 'image' ),
			'addButton'   => esc_html__( 'Seleccionar'),
			'frameTitle'  => esc_html__( 'Seleccionar imagen')
		),
		// NOMBRE DEL PAIS
		array(
			'attr'   	=> 'fv_pais',
			'label'  	=> esc_html__( 'Nombre del País' ),
			'meta'		=> array(
				'placeholder' => esc_html__('Nombre del país')
			),
			'type'   	=> 'text'
		),

		// DESCRIPTION DEL PAIS
		array(
			'attr'   	=> 'fv_descripcion',
			'label'  	=> esc_html__( 'Descripción del País' ),
			'type'   	=> 'textarea'
		),

		// PRECIO
		array(
			'attr'   	=> 'fv_price',
			'label'  	=> esc_html__( 'Precio' ),
			'type'   	=> 'number',
			'meta'		=> array(
				'step'	=> '.01'
			)
		)
	);

	$shortcode_ui_args = array(
		'label' => esc_html__( 'Ficha de viaje' ),
		'listItemImage' => 'dashicons-tickets-alt',
		'post_type' => array( 'post' ),
		'attrs' => $fields,
	);
	shortcode_ui_register_for_shortcode( 'fichaviaje', $shortcode_ui_args );
}

Podemos observar que la magia de este plugin radica en la función shortcode_ui_register_for_shortcode( 'fichaviaje', $shortcode_ui_args ); que une el shortcode con los parámetros y configuraciones propias del Shortcake.

Parámetros de configuración

Como se puede observar en el código, el plugin nos permite especificar los distintos campos que necesitamos para completar los parámetros de nuestro shortcode. Cada array de campo requiere de los siguientes valores:

Dependiendo del tipo de campo que especifiquemos tendremos más o menos opciones para configurar los parámetros.

Para más información sobre los distintos campos y su configuración pueden acceder a los ejemplos del repositorio oficial del plugin.

Conclusión

Vemos una vez más que el análisis de la información que el usuario debe cargar es primordial en las primeras instancias del proyecto. Este tipo de solución es una de entre las tantas que podemos ofrecer para facilitar y mantener en un entorno controlado la información que los usuarios administran en WordPress.