Los shortcodes son fragmentos de código que nos hacen la vida más fácil a la hora de trabajar con WordPress. En este HowTo aprenderás cómo funcionan y cómo crearlos desde cero.
Los shortcodes en WordPress son parecidos a los que antiguamente utilizabamos en foros, correos electrónicos y otras páginas web. A estos se les llama BBCodes (Bulletin Board Code) pero con la llegada de los editores wysiwyg se han visto relegados a un segundo plano.
Si estás creando o editanto contenido en WordPress y has visto alguna vez textos entre corchetes entonces tienes que saber que a estos se les llaman shortcodes.
Los shortcodes le hacen la vida más cómoda al usuario ya que podrá incluir códigos específicos sin necesidad de complicarse la vida con código HTML.
Le van a permitir insertar menús, carruseles, mapas de google, metadatos, citas, pestañas, gráficos, embeber vídeos, sliders o galerías de imágenes, formularios, botones, etc … En definitiva cualquier tipo de contenido que le vaya a requerir escribir una gran cantidad de código.
Formas de usar los shortcodes
El usuario va a poder usar los shortcodes de dos formas diferentes:
- Escribiendo shortcodes que no requieren etiquetas de cierre.
- Escribiendo shortcodes que requieren etiquetas de cierre y que ademas le van a permitir incluir contenido específico.
Por lo que WordPress buscará este tipo de fragmentos de código (shortcodes) y una vez que los encuentre, los analizará para así poder comprobar si estos están disponibles para su uso. En caso de encontrarlos analizará sus atributos y se lo enviará al manejador o función que tengamos definida para realizar el proceso.
|
1 2 3 4 5 |
# shortcode sin etiqueta de cierre [publicidad name="adsense" editor="artegrafico"] # shortcode con etiqueta de cierre [videos url="https://www.youtube.com/watch?v=YinYm4mbpvQ" width="500" height="300"] |
Creación de shortcodes
La función encargada de la creación de shortcodes es add_shortcode() y recibe 2 parámetros:
- El nombre del shortcode que tiene que buscar WordPress en nuestras publicaciones.
- El manejador que corresponde a la función que va a procesar los atributos y generar una salida en caso de encontrar el shortcode.
|
1 |
add_shortcode( 'nombre del shortcode', 'function'); |
El manejador o función que se va a encargar de procesar los parámetros del shortcode puede recibir hasta 3 parámetros:
- Un array con los atributos del shortcode que ha introducido el usuario.
- El contenido del shorcode en caso de permitirlo.
- Y opcionalmente el nombre del shortcode.
|
1 |
function ( $attr[], $content, $shortcode) { ... } |
Recuerda que los shortcodes pueden ser añadidos tanto en temas, plugins cómo widgets.
- Si los incluimos en Temas estos se incluyen directamente en el fichero functions.php
- En Plugins los tendremos que incluirlos una vez WordPress haya sido inicializado.
Veamos como poder incluirlos desde un plugin haciendo uso del hook init:
|
1 2 3 4 5 6 |
function shortCodesInit() { add_shortcode ( 'shortcode1', 'funcion1' ) add_shortcode ( 'shortcode2', 'funcion2' ) add_shortcode ( 'shortcode3', 'funcion3' ) } add_action ( 'init', 'shortCodesInit' ); |
Creando nuestro primer shortode
Ya sabemos la teoría por lo que ahora nos vamos a poner a crear un shortcode sencillo que nos va a permitir insertar bloques publicitarios en nuestros post. Para este ejercicio usaremos bloques publicitarios de Google Adsense.
El primer lugar vamos a ver de que partes de compondrá nuestro shortcode:
- El nombre del shortcode al que llamaremos publicidad.
- Los atributos que utilizaremos para comprobar que tipo de bloque publicitario insertar y el anunciante al que pertenece. Esto nos va a permitir incluir diferentes anunciantes según sea el caso. Si tenemos un blog con diferentes editores cada uno podrá insertar su publicidad.
|
1 |
[publicidad name='adsense' editor='artegrafico'] |
Ya sabemos cómo tiene que escribir el shortcode el usuario por lo que ahora necesitamos crearlo. Para ello vamos a insertar el siguiente código en el fichero functions.php de nuestro tema. En el icluiremos la función o manejador que se va encargar de mostrar el código en nuestros posts o páginas.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
function publicidadShortcode( $attr, $content = null ) { ob_start(); // códigos de editores de Google Adsense $adsense = [ 'artegrafico' => 'ca-pub-3094621700128975', 'dominio1' => '', 'dominio2' => '' ]; // attributos permitidos por el shortcode $attr = shortcode_atts([ 'origen' => '', 'editor' => '' ], $attr, 'adsense'); // imprimir publicidad switch ($attr['origen']) { case "adsense": echo '<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>'."\n"; echo '<script>'."\n"; echo '(adsbygoogle = window.adsbygoogle || []).push({ '."\n"; echo 'google_ad_client: "'.$adsense[esc_html($attr["editor"])].'",'."\n"; echo 'enable_page_level_ads: true'."\n"; echo '});'."\n"; echo '</script>'; break; } return ob_get_clean(); } add_shortcode( 'publicidad', 'publicidadShortcode' ); |
La función shortcode_atts()
La función shortcode_atts() nos permite recibir los atributos incluidos por el usuario y compararlos con los atributos que va a permitir el shortcode. De esta forma evitamos el uso de atributos no permitidos en este. La función shortcode_atts() puede recibir hasta 3 parámetros:
- un array con los atributos que vamos a permitir.
- un array con los atributos que ha introducido el usuario.
- Y opcionalemnte el nombre del shortcode.
|
1 2 3 4 5 |
// attributos permitidos por el shortcode $attr = shortcode_atts([ 'origen' => '', 'editor' => '' ], $attr, 'adsense'); |
Retornará tan sólo los atributos coincidentes que hemos incluido, por lo que en este caso tan sólo permitimos el uso de los atributos origen y editor.
Desactivar shortcodes
Eliminar los shortcodes que han sido incluidos en nuestras posts o páginas puede llevarnos mucho tiempo. Primeramente tendremos que buscar donde los hemos incluido para posteriormente eliminarlos uno a uno. WordPress ofrece alternativas temporales para poder deshabilitarlos y que estos no sean mostrados.
|
1 |
add_shortcode ( 'publicidad', '__return_false' ); |
Más información el la API de Shortcodes de WordPress.
