Shortcodes de WordPress

Los shortcodes son pequeños códigos de texto que generan un contenido más o menos complejo. Se colocan en el contenido de las páginas, entradas, widgets y en otras partes de WordPress y puedes identificarlos por que van entre corchetes [shortcode].

Un ejemplo de shortcode puede ser [video] que genera el código html necesario para que el navegador muestre un vídeo correctamente:

[video src="video-source.mp4"]

WordPress viene con varios shortcodes por defecto. Los puedes ver en Codex.

Tipos de shortcode

Los shortcodes puedes ser de tres tipos:

  1. Sencillos. Para funcionar sólo necesita ser declarado con una sola palabra.
[randompost]
  1. Con atributos, que modifican el comportamiento del shortcode (pueden ser opcionales).
[photo id=12 width=100]
  1. Con apertura y cierre (con atributos o sin ellos), donde el contenido se coloca entre la etiquetas de apertura y cierre. Estos shortcodes existen para permitir que otros shortcodes puedan ejecutarse dentro de ellos.
[column widht=50] Contenido tratado por el shortcode [/column]

Shortcode para compartir en twitter

Como ejemplo voy a crear un shortcode que genere un enlace para compartir en Twitter. Se podrá usar en las entradas del blog. No es muy original, pero sirve como ejemplo.

Primero necesito un plugin vacío, así que voy a la ruta wp-content/plugins de mi WordPress y creo una carpeta shortcodetwitter. Dentro de la carpeta creo un archivo shortcodetwitter.php con el siguiente código:

<?php
/*
Plugin Name: ShortcodeTwitter
Version: 1.0
Description: Shortcode to share on Twitter
Author: Pinto
Author URI: http://bitado.com
Plugin URI: http://bitado.com
Text Domain: shortcodetwitter
Domain Path: /languages
*/

Para los shortcodes, WordPress nos proporciona la función add_shortcode( $tag , $func ), con dos parámetros:

  • tag Es el nombre del del shortcode
  • func Es la función que genera el contenido

Mi shortcode será sct_sharetwitter y su función shortcodetwitter_sharetwitter:

add_shortcode( 'sct_sharetwitter', 'shortcodetwitter_sharetwitter' );
function shortcodetwitter_sharetwitter( $atts, $content = null ) {
    return $content;
}

La variable $content es el contenido que muestra el shortcode.

Ahora voy a construir la url del enlace para compartir. Twitter usa esta estructura

http://twitter.com/intent/tweet?url=...&amp;text=...

  • En url debo poner la url de mi entrada
  • En text debo poner el título de mi entrada

Estos dos campos deben ir codificados para ser usados como parte de una consulta url. Y esto se hace con la función urlencode.

$link_twitter = 'http://twitter.com/intent/tweet?url=' . urlencode( get_permalink() ) . '&amp;text=' . urlencode( get_the_title() );

Ahora completo el resto del enlace en la variable $content

$content = '<a target="_blank" href="' . $link_twitter . '">' . 'Compartir en Twitter' . '</a>';

La función shortcodetwitter_sharetwitter debe quedar asi:

function shortcodetwitter_sharetwitter( $atts, $content = null ) {

    $link_twitter = 'http://twitter.com/intent/tweet?url=' . urlencode( get_permalink() ) . '&amp;text=' . urlencode( get_the_title() );

    $content = '<a target="_blank" href="' . $link_twitter . '">' . 'Compartir en Twitter' . '</a>';

    return $content;
}
add_shortcode( 'sct_sharetwitter', 'shortcodetwitter_sharetwitter' );

Cuando uso el shortcode en una entrada:

[sct_sharetwitter]

Se muestra el siguiente enlace:

Compartir Twitter

Con estilo

El enlace funciona pero el resultado visual es muy soso, así que voy a darle un aspecto más moderno.

Primero creo un archivo shortcodetwitter.css con este contenido:

.sct-twitter,
.sct-twitter:hover {
    text-decoration: none;
    color: #4099FF;
}

.sct-twitter:before {
    font-family: "dashicons";
    content: "301";
    font-size: 24px;
    padding-right: 6px;
}

Y después “encolo” el archivo css en mi plugin, usando la función wp_enqueue_style y el hook wp_enqueue_scripts:

function shortcodetwitter_css() {

    wp_enqueue_style( 'shortcodetwitter-style', plugins_url( '/shortcodetwitter.css', __FILE__ ) );
}
add_action( 'wp_enqueue_scripts', 'shortcodetwitter_css' );

Si te fijas, en el código css estoy usando una fuente llamada dashicon. WordPress usa esta fuente en el panel de administración y contiene el icono de Twitter que necesito. Para utiliar la fuente en mi plugin tan sólo debo “encolarla” de esta forma: wp_enqueue_style( 'dashicons' );. Por lo que la función queda así:

function shortcodetwitter_css() {

    wp_enqueue_style( 'shortcodetwitter-style', plugins_url( '/shortcodetwitter.css', __FILE__ ) );
    wp_enqueue_style( 'dashicons' );
}
add_action( 'wp_enqueue_scripts', 'shortcodetwitter_css' );

Aun es necesario hacer otra modificación. En la función shortcodetwitter_sharetwitter debo añadir la clase class="sct-twitter" al enlace.

$content = '<a class="sct-twitter" target="_blank" href="' . $link_twitter . '">' . 'Compartir en Twitter' . '</a>';  

Con todo esto consigo un enlace con un aspecto más agradable:

Compartir Twitter Con Css

Atributos del shortcode

Voy a complicar un poco el shortcode añadiendo dos atributos (son opcionales):

  • text: Es el texto del enlace. Por defecto es ‘Compartir en Twitter’.
  • size: Es el tamaño del icono. Puede tener dos valores big o small. Por defecto es small.

La función shortcodetwitter_sharetwitter lleva dos parámetros: $atts y $content = null. El primero contiene los atributos del shortcode y el segundo el contenido que se va a mostrar.

Para la gestión de atributos WordPress nos proporciona una función muy útil: shortcode_atts. Devuelve un array con los atributos que necesito:

$atts_sharetwitter = shortcode_atts( array(
    'text' => 'Compartir en Twitter',
    'size' => 'small',
), $atts );

El primer atributo lo uso para cambiar el texto del enlace:

$content = '<a class="sct-twitter" target="_blank" href="' . $link_twitter . '">' . $atts_sharetwitter['text'] . '</a>';

El segundo atributo nos va a indicar el tamaño del icono, si su valor es big añadimos las clase sct-twitter-big al enlace:

$bigclass = '';
if ( $atts_sharetwitter['size'] == 'big' )
    $bigclass = 'sct-twitter-big';

$content = '<a class="sct-twitter ' . $bigclass . '" target="_blank" href="' . $link_twitter . '">' . $atts_sharetwitter['text'] . '</a>';

Para que surja efecto debemos añadir la clase sct-twitter-big en al archivo shortcodetwitter.css:

.sct-twitter-big:before {
    font-size: 32px;    
}

Hago una prueba del shortcode con atributos:

[sct_sharetwitter text="Comparte!" size="big"]

Y muestra esto:

Compartir Twitter Con Css Big

¡Ya está todo!. Puedes ver todo el código en github

Problemas con los shortcodes

En este tutorial he creado el shortcode en un plugin y es por una razón. Si tu cambias de theme los shortcodes del plugin siguen funcionando. Si los shortcodes están implementados en el theme y cambias de theme, las entradas, páginas y otras partes que usan shortcodes, no funcionarán y mostrarán un texto feo entre corchetes. ¡Deberás cambiar todo el contenido de tu WordPress!.

Hay muchos themes de pago que contienen una cantidad enorme de shortcodes implementados. Hay que tener cuidado con estos themes y valorar si en el futuro vas a cambiar de theme, por que si es así, el cambio te va a dar muchos dolores de cabeza.

Shortcodes en todos lados

Un extra interesante, por defecto los shortcodes funcionan en las entradas y en las páginas. Para habilitarlos en otras partes de WordPress debes utilizar los siguientes filtros:

  • En widgets: add_filter('widget_text', 'do_shortcode');
  • En comentarios: add_filter( 'comment_text', 'do_shortcode' );
  • En resúmenes (excerpt): add_filter( 'the_excerpt', 'do_shortcode');
  • En categorías y etiquetas: add_filter( 'term_description', 'do_shortcode');

Los shortcodes son muy útiles y con ellos se puede hacer cualquier cosa, tan sólo acuérdate de programarlos en un plugin.

Puedes bajar todo el código en github

Deja un comentario

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