Los shortcodes son una característica muy popular y útil en los sitios desarrollados con WordPress. Permite a los usuarios invocar ciertas funcionalidades directamente desde un post, una página o un área de widgets. Seguro que los habréis visto en infinidad de plugins, la verdad. El núcleo de WordPress cuenta con varios shortcodes integrados que puedes utilizar sin necesidad de instalar plugins o codificar nada de nada. Puedes ver todos los shortcodes del núcleo de WordPress en esta página si estás interesado.
Shortcode en acción
En la imagen de abajo puedes ver cómo añade un shortcode tres veces en el contenido de un post. El primero sirve para contar cuántos caracteres tiene el mensaje por defecto que hemos introducido, el segundo es para contar las palabras de dicho texto y que aparezca formateado por un mensaje tipo “Hay (c) palabras aqui”, y el tercero es simplemente para contar palabras pero con su función por defecto. Fácil de utilizar, ¿verdad?
Aquí el resultado:
Ejemplo de funcionalidad de shortcode
Vamos a desarrollar un shortcode a medida que vamos a integrar en una plantilla concreta, por lo tanto vamos a poder utilizar dicho shortcode en nuestro WordPress siempre y cuando la plantilla este activa en la plataforma. Por lo general, este es el método ideal de añadir distintas funcionalidades, además es bueno crear un child theme y modificar ese child theme en lugar de la plantilla padre. Crearemos un shortcode que muestre el número de caracteres o palabras en el post o página que se esté mostrando en ese momento.
Añadiremos el shortcode al archivo functions.php del theme, localizado en /wp-content/themes/TUPLANTILLA/functions.php. Recordaros, otra vez, que nuestro shortcode unicamente estará disponible cuando la plantilla esté activa.
Para añadir un nuevo shortcode, insertamos:
add_shortcode('count', 'getCount');
Esto indica a WordPress que vamos a añadir un shortcode llamado count y que ejecute la función getCount cuando se tope con él dentro de un contenido.
Así que, definimos nuestra funcion getCount:
function getCount($atts) {
global $post;
$content = trim(preg_replace("/[.+]/", "", strip_tags($post->post_content)));
$atts = shortcode_atts(
array(
'type' => 'words',
'text' => "This post contains #{c} " . ($atts ? esc_html($atts['type']) : "words" )
),$atts, 'count'
);
Usamos la variable global $post porque queremos ser capaces de acceder al contenido del post que ha disparado nuestra función. Extraemos el contenido del post con $post->post_content y le quitamos todos los tags de HTML y los shortcodes.
Después, asignamos ciertos valores por defecto para los atributos. Date cuenta que utilizamos un placeholder para el contador de palabras o caracteres, #{c}, que luego reemplazaremos con los dígitos reales de ese contador. Establecemos el texto por defecto, y el tipo de contador por defecto a “words”, es decir, palabras.
Después del placeholder, escapamos con la fuinción de WP esc_html y añadimos a la plantilla el argument type. Si existe bien, pero si no, le añadimos un string al final.
El segundo argumento de shortcode_atts son los atributos que le pasamos del post y el tercero es el nombre del shortcode.
if ($atts['type'] == 'characters') {
return "<span class='count'>" . preg_replace("/(\#\{c\})/",
"<span class='count-digit'>". number_format(strlen($content)) . "</span>", esc_html($atts['text'])) . "</span>";
}
Si el argumento type de nuestro shortcode se ha establecido a characters, devolvemos a la plantilla el dato con el placeholder reemplazado con el número de caracteres- Además le hemos añadido una clase especial para darle formato y personalizarlo en el futuro.
else {
$contentSingleSpace = preg_replace("/[s]+/", " ", $content);
$words = substr_count($contentSingleSpace, " ");
return "<span class='count'>" . preg_replace("/\#\{c\}/",
"<span class='count-digit'>" . number_format($words) . "</span>", esc_html($atts['text'])) . "</span>";
}
Si escribe otra cosa que no sea la palabra characters, se contabilizarán las palabras. Finalmente, vamos a dar un poco de estilo a nuestro nuevo shortcode. Añade este código en /wp-content/themes/TUPLANTILLA/style.css.
.count:first-letter {
font-size: 1.2em;
font-family: cursive;
}
.count {
color: #005fb3;
}
.count-digit {
font-weight: 900;
font-size: 1.2em;
color: #0044cc;
}
Fuente: phpgang.com