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.

Shortcake plugin logo
Logo del plugin Shortcake (Shortcode UI)

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:

ejemplo funcionalidad shortcode shortcake

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

shortcake interfaz insertar elemento
shortcake interfaz insertar elemento campos

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:

NombreDescripción
attrNombre del parámetro del shortcode.
labelEtiqueta para describir los datos a ingresar.
typeEl tipo de campo puede ser: text, checkbox, textarea, radio, select, email,
url, number, and date, post_select, attachment, color.
meta(opcional) podemos usar este parámetros para especificar atributos de HTML.
Por ejemplo 'meta'=>'placeholder="nombre del país"'.

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.


¿Qué te pareció el artículo?
No molaPobreMolaMuy bueno¡Excelente! (3 votos, promedio: 5,00 de 5)
Cargando...
Mauricio Gelves
Mauricio Gelves es Lic. en Informática y trabaja como Consultor Web Freelance con su marca personal MauGelves. Se especializó en WordPress para ofrecer soluciones personalizadas y rentables a medianas y largas empresas. Es Nómade Digital desde el año 2015, actividad que combina sus dos principales pasiones: la informática y los viajes, y refleja sus experiencias a través de sus hobbies audiovisuales en Instagram y YouTube.
10 Pasos para ser Freelance - eBook Gratuito

10 pasos para convertirte en Freelance

Descarga en forma totalmente gratuita mi eBook en donde explico los 10 pasos que he dado para convertirme en Freelance.

Ingresa tu email y recibe en tu bandeja de correo el enlace para descargarte el eBook.

(Te doy mi palabra que solo enviaré un email al mes con todas mis novedades)


2 thoughts on “Revisión de plugin – Shortcake (Shortcode UI)”

  1. Hola Mauricio,
    Mi nombre es Pablo y estuve mirando detenidamente tus artículos y son muy claros y tu manera de explicar ayuda mucho. Te felicito.
    Aprovecho para consultarte si es posible «generar» un shortcode en tiempo de ejecución. Por ejemplo: tengo un plugin que inserta tablas y utiliza un shortcode donde se puede poner parámetros de la siguiente manera: [ wpdatatable id=12 var1=150], es posible codificar algo para poder pasar ese valor de «var1» en tiempo de ejecución?
    Desde ya muchas gracias

    1. Buenos días Pablo:
      Los shortcodes funcionan desde el servidor. Cualquier shortcode que generes dinámicamente, deberías enviarlo asíncronamente con Javascript, procesarlo en el servidor, recibir la respuesta y luego renderizarlo.
      Nunca me ha tocado realizar esa solución, pero pongo mis fichas a que pueda funcionar.
      Inténtalo y si lo logras envíame un email. Tal vez podamos escribir un artículo al respecto.
      Un saludo,
      Mauricio

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *