Crear un shortcode, e incluir JavaScript y Bootstrap

Como veíamos en nuestro anterior artículo de esta serie, los shortcodes son pequeños bloques de código que nos permiten hacer cómodamente tareas repetitivas. Vamos a ver, pues, cómo podemos crear un shortcode básico, y cómo podemos enriquecerlo para que parezca más profesional.

Creando nuestro primer shortcode[indice][linea titulo=”Nuestro primer shortcode” ancla=”#ancla1″][linea titulo=”Mejorando el shortcode” ancla=”#ancla2″][linea titulo=”La modulación” ancla=”#ancla3″][linea titulo=”El estilo CSS” ancla=”#ancla4″][/indice]

Vamos a crear un shortcode básico, para implementar un índice de contenidos en nuestros artículos. En un principio será básico, para posteriormente hacerlo un poco más elaborado.

Empezamos añadiendo el siguiente código a nuestro archivo functions.php:

Si alguien piensa que esto es muy complicado, pensad que con conocimientos no excesivamente avanzados de HTML y PHP, he desarrollado este shortcode en unas 2 horas, ayudado también con algunas consultas por la red, por supuesto.

Démosle estilo añadiendo a style.css lo siguiente:

Para que funcione, en cada título que vayamos a emplear debemos insertar el siguiente código, antes, durante o después:

<a name=”ancla1″></a>

En lugar de ancla podéis poner el texto que queráis, siempre y cuando no empleéis espacios (yo suelo utilizar subrayado ‘_’). Luego, para crear el cuadro, añadir al texto:

indice entre corchetes

linea titulo=”titulo 1″ ancla=”#ancla1″ entre corchetes

linea titulo=”titulo 2″ ancla=”#ancla2″ entre corchetes

/indice entre corchetes

NOTA: Recordad incluir la almohadilla ‘#’ antes del nombre del ancla en el shortcode.

 

Mejorando nuestro primer shortcode con JavaScript y Bootstrap

Ahora vamos a hacer nuestro índice de contenidos comprimible. Para ello, vamos a introducirnos en Bootstrap, empleando una función JavaScript que dispone, collapse. Con ella, conseguiremos que una caja se muestre o se oculte clicando en una opción que habilitaremos para ello.

Para poder utilizar collapse, debemos instalar otra función JavaScript de Bootstrap, transition, la cual, a su vez, requiere que esté instalado jQuery.

Si sólo fuera para este caso, buscaríamos la manera de realizar el código exclusivamente con JavaScript puro y duro. Pero como más adelante estudiaremos cómo implementar Bootstrap en nuestro tema, vamos a empezar ahora.

Lo primero que necesitamos es jQuery. Deberemos descargarnos el fichero desde aquí. Nos podemos descargar la versión 1.12.3 o 2.2.3, que básicamente son la misma, pero la primera tiene soporte para Internet Explorer versiones 6, 7 y 8. Yo, en concreto, prefiero la segunda. Además, tenéis las opciones de formato producción o formato desarrollo. Como no vamos a modificar nada de este código, mejor el formato producción, que está comprimido y ocupa menos espacio y menos tiempo de carga.

Para descargar collapse.jstransition.js nos vamos a la página oficial de Bootstrap y allí a ‘Customize’ (http://getbootstrap.com/customize/). Desactivamos las casillas de los ficheros ‘Less’ y de los plugins ‘jQuery’ y activamos las casillas exclusivas de CollapseTransitions. Clicamos en ‘Download’ abajo de la página y nos descargará un archivo comprimido zip que contiene dos archivos, ‘bootstrap.js’ y ‘bootstrap.min.js’. Ambos contienen el código que necesitamos, sólo que el archivo ‘min’ está comprimido. Otra opción es irnos a Github y descargarnos los archivos desde allí (https://github.com/twbs/bootstrap/tree/master/js).

Los dos o tres archivos que tenemos, los instalaremos en el tema ubicándolos en una nueva carpeta ‘js‘ que incluiremos en el directorio del tema (nuestro tema empieza a tener cuerpo).

Para activarlos y poder utilizar el código, en header.php incluiremos las siguientes líneas justo antes de <?php wp_head(); ?>:

Es importante guardar el orden en que instalamos los diferentes códigos. Si lo altermos puede no funcionar, o generar algún error interno.

Luego, iremos al archivo de plantilla functions.php, y cambiaremos el código del shortcode ‘indice’, quedando así:

¿Qué hemos hecho? Básicamente, hemos añadido un vínculo que nos gestiona la visualización de la caja id=”contenido” mediante el parámetro data-toggle=”collapse” y la referencia href=”#contenido”. A la caja le debemos dar una clase class=”collapse in”, donde ‘in’ indica que está mostrada en un inicio.

Luego, el código javaScript ocultará la lista y cambiará el texto del vínculo a Mostrar, cuando se haya ocultado la caja ‘contenido’, y viceversa.

 

Finalmente, la modulación

Vamos a coger el código nuevo que hemos introducido en el archivo functions.php y, con él, vamos a crear un nuevo archivo, shortcodes.php, que guardaremos en la subcarpeta ‘partes’.

En functions.php, al final, añadiremos la línea de código

Con ello, conseguimos dos cosas. Modulación del código, y poder utilizar nuestros shortcodes en cualquier tema que empleemos en WordPress.

No os olvidéis de añadir todos los comentarios acerca del funcionamiento del código y de lo que haga falta, ya que, con el tiempo, habrá cosas que se os olvidarán.

 

El estilo CSS

Para que nuestro shortcode se vea como queremos, en el archivo style.css añadiremos el siguiente bloque de código:

Y nos quedará como el que véis al inicio de este artículo.

 

En fin, hemos visto cómo desarrollar un shortcode básico, en un principio, que luego hemos mejorado mediante JavaScript, jQuery y Bootstrap, que hemos visto de soslayo, como introducción para próximos artículos. No está mal para un artículo que no estaba previsto, sino que ha surgido por mi propia curiosidad, ¿no?. Además, en menos de media hora, con el tema de la modulación, lo he implementado en este theme, el ‘Twenty Sixteen’ de WordPress.

En el próximo artículo veremos cómo podemos mostrar todos los artículos pertenecientes a una categoría.

Una respuesta a “Crear un shortcode, e incluir JavaScript y Bootstrap”

Deja un comentario

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