Cómo utilizar shortcodes en nuestro blog de WordPress

A estas alturas casi todo el mundo sabe lo que es un shortcode.

Un código corto, o shortcode, es un código de WordPress específico que te permite hacer cosas bastante chulas con muy poco esfuerzo. Los Shortcodes pueden incrustar archivos o crear objetos que normalmente requieren una gran cantidad de complicado código en una sola línea. Código corto = acceso directo.

Los shortcodes pueden llegar a ser muy útiles, en este post vamos a ver un par de ejemplos prácticos.

Normalmente vienen disponibles, a modo de plugin, dentro del repositorio de WP.

En el post de hoy vamos a ver cómo crear alguno de estos shortcodes para poder usarlo en nuestra web.

Cómo utilizar shortcodes en nuestro blog de WordPress

Crear un shortcode para mostrar el botón de Me Gusta de Facebook.

Desde la propia página de Facebook podemos obtener el código que necesitamos, puedes personalizarlo a tu gusto.
Es una cosa así:

<div id="fb-root"></div>
<script>(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.src = "//connect.facebook.net/es_LA/sdk.js#xfbml=1&version=v2.0";
 fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-layout="box_count" data-action="like" data-show-faces="false" data-share="true"></div>

1 Copia el código obtenido a tu bloc de notas, más tarde lo necesitarás.

Este mismo código lo podrías usar dentro de un widget y saldría el botón de Facebook de me gusta junto con el botón compartir, ya digo que puedes personalizarlo como quieras.

Lo que queremos hacer es usar un código corto para poder mostrar lo mismo sin tener que copiar todo ese código farragoso. Para ello usaremos los shortcodes.

2 Crea una función para poner ese código

Abre y edita el archivo functions.php de tu tema hijo y añade el siguiente código:

function botonfb()
{
 return <div class='fb-like' data-send='true' data-width='450' data-show-faces='true'></div>.
 <div id='fb-root'></div><script>(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.src = '//connect.facebook.net/es_ES/all.js#xfbml=1';
 fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));</script>";
}
add_shortcode('fb', 'botonfb');

Hemos declarado una función llamada botonfb, la cual devuelve (return) el código que previamente nos había proporcionado Facebook y todo ello dentro de las dos comillas y acabado en punto y coma. Y por último le decimos que añada y acepte fb como shortcode. Ahora si escribimos en una entrada [fb], mostrará el botón de me gusta y el de compartir de Facebook.

Sencillo ¿no?.

Y ya que hemos puesto el de Facebook vayamos un paso más y pongamos un link para Twitter.

Puedes personalizar el botón en  la página de desarrollo de Twitter.

Para ello añade el archivo functions.php este código:

function botontwitter($atts)
{
 // Extraer los posibles parámetros
 extract(shortcode_atts(array(
 // Puedes editar los textos entrecomillados, los de la derecha, eh!.
 'text' => 'Echa un vistazo:',
 'via' => 'feevolution',
 'hashtags' => '',
 ), $atts));
// Los parámetros para construir la correspondiente URL
 $attributes = '';
 if ($text != '') {
 $attributes = ' data-text' . '="' . $text . '"';
 }
 if ($via != '') {
 $attributes = $attributes . ' data-via' . '="' . $via . '"';
 }
 if ($hashtags != '') {
 $attributes = $attributes . ' data-hashtags' . '="' . $hashtags . '"';
 }
return '<a href="https://twitter.com/share" class="twitter-share-button" data-lang="es"' . $attributes . '>Twittear</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>';
}
add_shortcode('tw', 'botontwitter');

Viene a ser un poco como el anterior, sólo que aquí añadimos una serie de atributos.

Como habrás podido observar hemos hecho un shortcode bastante fácil de recordar [fb]. Pero ¿y si tengo tan mala memoria que no me acuerdo de cómo se escribe el shortcode que acabo de crear hace un minuto?

Crear un botón en el editor de WordPess

Lleva un poco más de tiempo y más acciones a realizar, en este caso es preferible acordarse del shortcode, pero como nunca está de más saber algo nuevo pues lo explico.

Para facilitarnos la tarea de introducir nuestro shortcode desde el editor de WordPress necesitaremos crear un pequeño plugin que realice esta tarea, vamos a ello.

Creando nuestro primer plugin sencillo

Más información sobre cómo crear un plugin en la página oficial de WordPress

1 Mediante FTP o desde tu panel de administración del dominio crea una carpeta dentro del directorio plugins.

Ej. wp-content/plugins/plugin-facebook

2 Crea dentro de esa carpeta que acabas de crear, otra que se llame js. Aquí irá el archivo que ejecutará nuestro shortcode.

Ej wp-content/plugins/plugin-facebook/js

3 Volvamos atrás. Crea un archivo PHP, llámalo como quieras, ej. megusta.php y añade este código

<?php
/*
Plugin Name: Plugin Me Gusta
Plugin URI: http://www.freelanceevolution.com/miplugin
Description: muestra shortcode de Me gusta y compartir en Facebook
Author: Carlos
Author URI: http://www.freelanceevolution.com/
Version: 1.0
License: GPL
*/
function fe_add_my_tc_button() {
 global $typenow;
 // comprobamos los permisos de usuario
 if ( !current_user_can('edit_posts') && !current_user_can('edit_pages') ) {
 return;
 }
 // sólo para post o páginas
 if( ! in_array( $typenow, array( 'post', 'page' ) ) )
 return;
 //  WYSIWYG habilitado
 if ( get_user_option('rich_editing') == 'true') {
 add_filter("mce_external_plugins", "fe_add_tinymce_plugin");
 add_filter('mce_buttons', 'fe_register_my_tc_button');
 }
}
add_action('admin_head', 'fe_add_my_tc_button');
function fe_add_tinymce_plugin($plugin_array) {
 $plugin_array['fe_tc_button'] = plugins_url( 'js/text-button.js', __FILE__ ); // ruta archivo js
 return $plugin_array;
}
function fe_register_my_tc_button($buttons) {
 array_push($buttons, "fe_tc_button");
 return $buttons;
}
// Crear shortcode para mostrar me gusta de Facebook
function botonfb()
{
 return "<div class='fb-like' data-send='true' data-width='450' data-show-faces='true'></div>" .
 "<div id='fb-root'></div><script>(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.src = '//connect.facebook.net/es_ES/all.js#xfbml=1';
 fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));</script>";
}
add_shortcode('fb', 'botonfb');

Hemos registrado nuestro plugin. Si ahora vas a plugins verás que ahí está el que acabamos de crear. No lo actives todavía porque no hará nada, nos falta el archivo js. Aquí va.

Archivo js

( function() {
 tinymce.PluginManager.add( 'fe_test', function( editor, url ) {
 // texto del botón y shortcode generado
 editor.addButton( 'fe_test_button_key', {
 text: 'Facebook',
 icon: false,
 onclick: function() {
 editor.insertContent('[fb]');
 }
 } );
 } );
} )();

Una vez activado el plugin edita o añade una entrada, verás que en el editor WP aparecerá nuestro botón que, de manera sencilla, añade un botón Me gusta más un botón de compartir en Facebook.

×Ten en cuenta que... …deberás quitar la función que genera el shortcode de Facebook del archivo functions.php de tu tema hijo ya que ha sido trasladada al plugin

Shortcodes en los Widgets

Para que este código funcione en los widgets añade esto:

add_filter('widget_text', 'do_shortcode');

 

Y tu, ¿Usas shortodes en tus temas?

¿Sabes ya qué esconde el editor visual de WordPress?

Encontrarás la respuesta a esta pregunta en el próximo post.

Carlos A para FreelanceEvolution

5 Comentarios en “Cómo utilizar shortcodes en nuestro blog de WordPress

  1. Uf, cuando veo tanto código me empiezan a coger sudores fríos. Me tendré que relajar a tope para afrontarlo porque tiene muy buena pinta y seguro que no es tan complicado como me parece.
    Gracias por el post 😉

    1. La verdad es que tanto código da miedo pero con un poco de paciencia y tras probar mucho le vas cogiendo más o menos el truqui.
      Gracias por comentar PAtricia.
      Saludos

Deja un comentario

Your email address will not be published.Los campos requeridos están marcados *