En este artículo vamos a ver cómo crear shortcodes para emplearlos en una página web creada en WordPress que nos permiten mediante diferentes códigos la ejecución de funciones para mostrar información o estructuras que habitualmente precisamos en nuestros contenidos.
Las funciones que vamos a definir las podemos agregar al fichero functions.php de nuestro theme o como veremos a lo largo del post también es posible crear un plugin en el que añadir las funciones que definamos.
La definición de un plugin es interesante ya que nos lo podemos llevar a otro WP que precisemos para no tener que ir copiando y pegando funciones entre archivos functions.php, en definitiva, es más práctico.
Los códigos de los que estamos hablando se agregan desde el panel de administración de WordPress a nuestras páginas, post o incluso post personalizados (custom post type).
Para la nomenclatura de los shortcodes desde el backend se encierran entre corchetes [].
En algunos casos será un único elemento el que ejecute la función siendo así [funcion], otro de los casos puede ser cuando deseamos imprimir cierto contenido y éste debe estar encerrado entre estructuras html pudiendo ser del siguiente modo [nuevodiv] contenido del div [/nuevodiv]. Quizás por ahora resulte algo confuso pero vamos a verlo con ejemplos ya que es la mejor manera de verlo.
Una de las ventajas del uso de este tipo de código es que nos va a permitir ahorrar carácteres y tiempo ya que al ejecutar una función que repetimos habitualmente no será preciso escribirla cada vez desde el panel de administración de WordPress, además que desde el panel por defecto de WordPress no es posible agregar código PHP.
Bien, pongamos el ejemplo que en ciertos posts, al final deseamos imprimir un formulario pero no lo deseamos en todos, siendo así, nuestra solución pasa por un shortcode que podamos agregar desde el content cada vez que lo necesitemos.
De otro modo si quisieramos agregar el formulario desde a todos los post deberíamos tirar mano de las plantillas para que fuera todo más cómodo, pero bien, eso es otra historia, ahora vamos a dar paso a ver cómo definir shortcodes en nuestro functions.php y al final del post veremos como meterlo en un plugin.
Contenido
Definir shortcodes
Vamos a definir nuestro primer shortcode en el que precisamos crear una función y a continuación lo registraremos mediante add_shortcode en nuestro fichero functions.php de nuestro theme.
Add_shortcode precisa de un nombre que llamaremos desde nuestro contenido así como la función que devuelve y que hemos definido. Vamos a ver el siguiente ejemplo en el que una vez registrado nuestro shortcode y llamado desde el content de la página o artículo devolverla un párrafo con el texto Lorem ipsum dolor sit amet.
<?php function shortcode_texto() { return '<p>Lorem ipsum dolor sit amet</p>'; } add_shortcode('mitexto', 'shortcode_texto'); ?> |
Para realizar la llamada en nuestro content del post o página bastará con escribir:
[mitexto] |
Si ahora realizamos la previsualización en el frontend veremos que se imprime el texto citado.
Este es un ejemplo sencillo ahora pasamos a un segundo ejemplo un poco más complejo en el que deseamos imprimir un texto que estará encerrado en un div con clase atencionTexto, el texto encerrado en este caso será variable, es decir, cada vez introduciremos el texto que deseemos desde la gestión del post.
<?php function atencion_div( $atts, $content = null) { $return = '<div class="atencionTexto">'; $return .= $content; $return .= '</div>'; return $return; //También es posible obtener el mismo resultado con el siguiente código // return '<div class="atencionTexto">' . $content . '</div>'; } add_shortcode( 'atencion', 'atencion_div' ); ?> |
En add_shortcode se pueden pasar tres parámetros al shortcode para que devuelva el resultado de la función y son $atts, $content y $ tag, puedes revisar la información de la API de shortcode aquí.
La llamada la realizaríamos del siguiente modo: [atencion] Introduce aquí tu texto [/atencion] y el código HTML generado sería el siguiente:
<div class="atencionTexto"> Introduce aquí tu texto </div> |
Ahora planteamos un tercer caso en el vamos a crear un shortcode que mostrará un listado de cuatro artículos aleatoriamente de nuestro blog, de tal modo que cada vez que recargemos la página los elementos del listado serán diferentes. En el caso que no existán artículos que mostrar se imprimirá la respuesta No hay artículos.
Para ello recurrimos al código que empleamos en un post anterior que nos permite obtener un listado de todos los posts de nuestro blog, el código es el siguiente adaptado a este caso:
<?php function short_creapost(){ ob_start(); $args=array( 'post_type' => 'post', 'post_status' => 'publish', 'orderby' => 'rand', 'posts_per_page' => '4', ); // The Query $the_query = new WP_Query( $args ); // The Loop echo '<ul>'; if ( $the_query->have_posts() ) { while ( $the_query->have_posts() ) { $the_query->the_post(); ?> <li id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <a href="<?php the_permalink();?>" title="<?php the_title();?>" target="_blank"><?php the_title();?></a> </li><!-- #post-ID --> <?php }} else { echo 'No hay artículos'; // no se encontraron artículos } /* Restore original Post Data */ wp_reset_postdata(); echo '</ul>'; return ob_get_clean(); } add_shortcode('creapost', 'short_creapost'); ?> |
Del código anterior los elementos más destacados son las funciones PHP ob_start y ob_get_clean que puedes consultar también en la API de shortcode o en el siguiente artículo.
Estas funciones permiten mostrar el contenido de la query en el lugar correcto del content, de otro modo aparecería al inicio del content siempre. Es útil conocer este aspecto ya que si delante de nuestro shortcode tenemos otros elementos mantendrá el orden de aparición.
Bien la llamada a la función la haremos mediante:
[creapost] |
Dentro del content de nuestra página o post devolviendonos el listado comentado.
Como último caso planteado vamos a tomar el código anterior pero mediante los atributos del shortcode indicaremos que los artículos que deseamos serán de una categoría determinada. En este caso nos devolverá los cuatro artículos mostrados en un listado aleatoriamente de una categoría determinada. Vemos a continuación el código:
<?php function short_creapost_variables($atts){ ob_start(); extract( shortcode_atts( array ( 'categoria' => '', ), $atts ) ); $args=array( 'post_type' => 'post', 'post_status' => 'publish', 'orderby' => 'rand', 'posts_per_page' => '4', 'category_name' => $categoria, ); // The Query $the_query = new WP_Query( $args ); // The Loop echo '<ul>'; if ( $the_query->have_posts() ) { while ( $the_query->have_posts() ) { $the_query->the_post(); ?> <li id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <a href="<?php the_permalink();?>" title="<?php the_title();?>" target="_blank"><?php the_title();?></a> </li><!-- #post-ID --> <?php }} else { echo 'No hay artículos'; // no se encontraron artículos } /* Restore original Post Data */ wp_reset_postdata(); echo '</ul>'; return ob_get_clean(); } add_shortcode('creapost_categoria', 'short_creapost_variables'); ?> |
Como referencias interesantes a esta función son shortcode_atts y extract.
Para realizar la llamada desde el content deberíamos hacerlo del siguiente modo:
[creapost_categoria categoria='catx'] |
Donde catx es la categoría variable que deberíamos indicarle al shortcode. Sería una categoría que exista y que contenga entradas del blog.
Haciendo un plugin con los shortcodes
Finalmente para tener todos nuestros shortcodes bien organizados los juntaremos en un plugin, para ello bastará con definir nuestro plugin al que llamamos shortcodes-plugin.php y tendría la siguiente cabecera.
<?php /* Plugin Name: shortcodes-plugin Plugin URI: https://www.santinavarro.es Description: Plugin de ejemplo para incorporar a nuestro theme shortcodes Version: 1.0 Author: Santi Navarro Author URI: https://www.santinavarro.es License: GPLv2 */ //Pega aquí todas tus funciones para shortcodes ?> |
Ahora bastaría con ir agregando las funciones correspondientes al mismo. Para activarlo lo llevamos a la carpeta de plugins y como siempre lo activamos desde el backend de WordPress.
Conclusión
A lo largo del artículo hemos realizado un repaso de cómo podemos hacer nuestros shortcodes y hemos visto algunos códigos de ejemplo. Espero que os sea de utilidad, gracias por vuestro tiempo y un saludo. Ah y no olvideis compartir! 🙂
Aquí os dejo algunas referencias interesantes por si deseais ampliar el tema:
Create a Shortcode to List Posts With Multiple Parameters
WordPress Shortcodes: A Complete Guide
Generador WP – Shorcodes