¿Qué es un shortcode?
Los shortcode son pequeños trozos de código que añaden funcionalidades a tu WordPress. Por ejemplo, si quieres vender en tu web e instalas Woocommerce traerá shortcodes como
para mostrar los productos que tiene tu tienda. Como usar los shortcodes es simple, los añades al editor de texto de tu WordPress y en el apartado visual podrás ver el resultado. Pero, pasar a la creación de shortcodes es un poco más complejo.
Si continuas leyendo, desde El mono del código entendemos que es por que quieres crear tus propios shortcodes y tienes unos conocimientos mínimos de programación, así que no vamos a pararnos a explicar conceptos básicos de esta. Dicho esto, pasamos al siguiente punto.
Cómo hacer que tus shortcodes no se rompan en cada actualización de tu tema
Una actualización de tu tema de WordPress significa que el código que tiene el tema se va a modificar, o bien php o css o ambas. Y esto es malo para tus shortcodes, porque puede que queden inutilizados, funcionando mal o a medias. Por eso, en caso de que quieras hacerlos te recomendamos crearlos sobre un child theme.
Si no sabes qué son o cómo se crean te recomendamos que veas este otro artículo sobre creación de child themes.
Cómo crear mis propios shortcodes
Antes de que te pongas a intentar crear tus shortcodes personalizados te recomendamos que mires si hay algun plugin que cubra tu necesidad. Hay veces que la solución es usar un par de plugins en vez de uno solo para cubrirla, pero la creación de shorcodes es algo elaborada. Te recomendamos que esta técnica sólo la uses cuando quieras crear algo 100% a medida y no haya nada que cubra la necesidad.
crear un módulo de inicio para cargar las categorías.
[TSA_catalog_start] [TSA_catalog_item title="SOBREMESAS" url="/sobremesas" image="2018/02/categoria-sobremesa-750x500-op.jpg" desc="Si tu oficina donde ejerces el gaming está ubicada en tu casa, o directamente no te gustan los portátiles, necesitas un 'cacharro potente' de estos"] [TSA_catalog_end]
En caso de querer añadir más categorías, simplemente tenemos que añadir un nuevo “TSA_catalog_item” y se añade una “ficha” de categoría más. De forma que, si quieres modificar la apariencia o forma de la estructura de las categorías el día de mañana simplemente tendrás que mantener y modificar un php en vez de 30 estructuras html.
Estructura HTML para luego crear el código PHP
Para la creación de shortcodes recomendamos hacerlo por partes. Nosotros trabajamos primero creando la estructura HTML y CSS en una web llamada codepen.io, en la cual, aunque no hacemos el CSS al 100% (ya que al pasarlo a WordPress el CSS del tema padre hace que normalmente tengas que hacer algunos retoques) si que hacemos la estructura lo más parecida posible a la estructura final del módulo que queremos crear. Aquí podéis ver el diseño de este modulo en Codepen.
Como podéis ver, no hay margenes, no están los colores finales, la imagen es una de muestra cualquiera, aquí lo único que hacemos es crear la estructura correctamente para luego crear el php sin miedo a romper nuestra web. Lo interesante de Codepen es que puedes crear módulos, guardarlos en tu perfil y ver las modificaciones que haces en tiempo real sin descargar nada y totalmente gratis.
Creación de estructura PHP
Con la estructura anterior podemos proceder a crear la función, el código que configurara los parámetros de entrada y el nombre del shortcode que vamos a crear. Para crear esta función entraremos al archivo functions.php de nuestro child theme, y al final del todo añadiremos nuestra función.
Nosotros vamos a contaros cómo creamos nosotros nuestro shortcode, pero básicamente, si sabéis código, con esta guía podréis crear el shortcode que queráis.
Módulo de inicio (TSA_catalog_start)
Ya que nuestro shortcode va a ser una lista de tarjetas de presentación para cada una de nuestras categorías hemos dividido el shortcode en tres partes. Una primera parte que no admite parámetros, en la cual simplemente creamos el “div” contenedor de nuestro nuevo módulo.
function TSA_catalog_start( ) {
$content_HTML = "
“; return $content_HTML; } add_shortcode(‘TSA_catalog_start’, ‘TSA_catalog_start’);
Módulo de fichas flex (TSA_catalog_item)
El módulo central que será el que se repita todo el rato. Crearemos un shortcode de este módulo por cada categoría que queramos añadir. Este shortcode utiliza parámetros por una sencilla razón: podremos configurar el título, imagen, descripción y URL de cada una de nuestras fichas.
function TSA_catalog_item( $atts ) {
$a = shortcode_atts( array(
'title' => '',
'url' => '',
'image' => '',
'desc' => '',
), $atts );
$title = $a['title'];
$url = get_option('siteurl')."/".$a['url']."/";
$image = $a['image'];
$desc = $a['desc'];
$imgPath = get_option('siteurl'). "/wp-content/uploads/" . $image;
$img_HTML = "<img title="$title" src="$imgPath" alt="$title" />";
$title_HTML = "
” . $title . “
“; $desc_HTML =”
” . $desc . ”
“; $content_To_View = ”
” . $img_HTML . ”
” . $title_HTML . $desc_HTML . “
“; return $content_To_View; } add_shortcode(‘TSA_catalog_item’, ‘TSA_catalog_item’);
En este módulo existe el parámetro $atts que indica que va a tener atributos, estos atributos los recogemos en la variable $a mediante el código:
$a = shortcode_atts( array(
'title' => '',
'url' => '',
'image' => '',
'desc' => '',
), $atts );
Cuando añadimos aquí un campo, ya sea “title”, “src” o el nombre que le queráis dar, simplemente estamos habilitando a que el usuario escriba esa palabra en el shortcode y nosotros capturemos el valor. Después, nosotros almacenamos ese valor en variables para no complicar mucho el código, como podéis ver aquí.
$title = $a['title'];
$url = get_option('siteurl')."/".$a['url']."/";
$image = $a['image'];
$desc = $a['desc'];
$imgPath = get_option('siteurl'). "/wp-content/uploads/" . $image;
$img_HTML = "<img title="$title" src="$imgPath" alt="$title" />";
$title_HTML = "
” . $title . “
“; $desc_HTML =”
” . $desc . ”
“;
Por último, creamos la sentencia php, que no es más que replicar la estructura que habíamos creado en Codepen pero añadiendo las variables que queremos modificar nosotros desde nuestro backend de WordPress.
Modulo de cierre (TSA_catalog_end)
Este módulo, al igual que el de inicio, solo sirve para el contenedor padre (en este caso para cerrarlo), tampoco admite parámetros y simplemente cierra el “div” que hemos abierto en el módulo de inicio.
function TSA_catalog_end( ) {
$content_HTML = "
“; return $content_HTML; } add_shortcode(‘TSA_catalog_end’, ‘TSA_catalog_end’);
Cómo aplicar nuestro CSS al shortcode
Esta parte es sencilla pero pesada. Gran parte de la maquetación que tengáis en Codepen servirá para vuestro módulo de WordPress, pero otra parte seguramente la perdáis por diversos factores: el ancho de tu tema de WordPress no es el mismo que en Codepen, los margenes no se ajustan bien al crearlo, imágenes que se descuadran… Por esto, recomendamos hacer la maquetación final una vez tengáis el shortcode subido a vuestro WordPress. Además, es muy importante cuidar la versión responsive de tu módulo, piensa que toda la navegabilidad esta migrando poco a poco a formatos móviles, de manera que Google tiene esto muy en cuenta. No hagas que tu módulo perjudique a tu web.
¿Necesito eliminar mi child theme y volver a subirlo con cada cambio que quiera hacer a mis Shortcodes?
Por supuesto que no, podréis editar y crear vuestros shortcodes directamente desde el editor de apariencia de vuestro WordPress. De manera que, podréis cambiar vuestro CSS y PHP y actualizarlo con un click, sin necesidad de andar subiendo y bajando el child theme.
Lo que si recomendamos es tener cuidado a la hora de crear el PHP. Si te equivocas con el CSS no hay problema, pero con el PHP es posible que tires tu propia web. Recomendamos que antes de actualizar compruebes pequeñas erratas a la hora de crear el shortcode y, por otro lado, tengas una copia de tu child theme antes de modificarlo, de forma que si lo rompes, al restaurar tu child theme entrando al FTP de tu web podrás volver a tener control de tu Backend y seguir creando contenido.
Solo quiero crear uno o dos shortcodes, instalar un child theme para esto…
Este pensamiento nos ha surgido a nosotros en alguna web que otra… Si este es tu caso tienes algunas opciones como el plugin “Code snippets“, el cual te deja crear las estructuras php y guardarlas. El propio plugin te genera el shortcode que tendrás que poner en el editor de texto de tu pagina o entrada en la que quieras añadir tu módulo. Eso si, el CSS tendrás que añadirlo directamente en tu tema padre con esta opción, ya que si instalas este plugin es por que intención de tener un child theme (por lo menos de primeras) no tienes.
Aunque quedan puntos por tratar en el tintero, esta es la base para crear shortcodes. Vuestro límite es vuestro nivel de programación, así que si vemos que os gusta hacer el mono con los shortcodes haremos más guías sobre su creación.
