Diseño páginas web Madrid, Marketing Online y Diseño gráfico - Tlfs: 91 494 45 24 - 608 408 159 info@ideaweb.es

Qué son y qué hacen los shortcodes en WordPres

En algunas ocasiones necesitamos tener funciones personalizadas y poderlas reutilizar en más de un lugar; para ello podemos utilizar “atajos” que nos permiten reutilizar código de forma rápida y sencilla en vez de escribir nuestro código una y otra vez.

Por ejemplo, imaginad que hecéis un pequeño programilla, mínimo que imprime en pantalla una imagen, esa imagen tenéis que usarla recurrentemente en muchos post o entradas de blog, ¿cada vez que tengías que usarla váis a aladir magen buscarla, añadirla, etc…? no, mejor crea un shortcode, y, cada vez que tengas que usar la imagen tan solo pones el shorcode que hayas creado en el texto, por ejemplo: [imagen_mia] y ¡voila! en un segundo está listo. Otra ventaja es que si esa imagen hay que cambiarla en un futuro, imagina que alguien te paga por aparecer en el 50% de tus artículos y luego ese anunciante deja de pagarte y comienzas con otro ¿irías uno por uno todos tus post quitando la imagen y poniendo la del nuevo anunciante? ¡locura! pues con un shirtcode, tan solo cambiarías la imagen que has enlazado en tu código de creación de shortcode y, zumbando, a otra cosa…

 

Como crear shortcodes personalizados en Wordpress

Esto tan chulo lo podemos hacer en WordPress creando los llamados shortcode personalizados que en ideaWeb.es os vamos a enseñar a crear. Podemos generar tantos cómo funciones diferentes (o bloque de código), queramos tener en nuestra web y luego colocarlos (llamarlos con los corchetes) donde necesitemos hacer referencia a cada funcionalidad en concreto. Es decir, donde coloquemos la palabra que le hayamos asignado entre corchetes allí hará lo que le hayamos programado en el código o función. Podemos darle enl nombre que queramos, pero tened cuidado al nombrarlo no le pongamos nombres que ya estén reservados por plugins u otros shortcodes generados por nosotros.

Vamos a ver como crear un shortcode personalizado, son unos sencillos pasos y ya verás lo útiles que son. Los pasos a seguir para crear un shortcode en WordPress los veremos a continuación, son claros y sencillos.

 

¿Como crear un shortcode en WordPress?

  1. Crear el código que necesitemos.
  2. Guardar ese código en alguna carpeta, por ejemplo wp-content será un buen lugar.
  3. Incluir este nuevo archivo en el functions.php del tema que tengamos activo.
  4. Hacer referencia al código abreviado usando add_shortcode(‘shortcode’, ‘funcion’).
  5. Colocar el atajo donde lo quieras usar.

 

Ejemplo práctico de creación de Shortcode en WordPress

Ahora veremos un ejemplo de como crear un shortcode, veréis que es una tarea muy rápida y sencilla y que nos sirve de enorme utilidad a la hora de reutilizar codigo y realizar tareas recurrentes para mostrar aplicaciones, contenido o resultados, esto es algo muy habitual en desarrollo web, en ideaWeb lo usamos muchos para los proyectos de nuestros clientes, ya que en varias ocasiones necesitamos usar recurrentemente código en diferentes sitios de nuestra página web. Vamos a ello.

Ejemplo de shortcode que muestra un mensaje cada vez que se utiliza:

Paso 1: Empecemos por crear un código muy simple que sólo nos mostrará un sencillo mensaje, en este supuesto queremos crear un shortcode que al colocar [ideaweb] al final de nuestros post, automáticamente nos muestre un mensaje:

<?php

function shortcode_ideaweb() {

return ‘<p>Gracias por leer los artículos que publicamos en <a href=»https://ideaweb.es»>ideaWeb</a>.</p>’;

}

add_shortcode(‘ideaweb’, ‘shortcode_ideaweb’);

?>

Esta función podría ser tan compleja como fuera necesaria para nuestro proyecto de función ideaWeb. Este ejemplo tan sólo muestra un mensaje, pero, recuerda que dentro del código, por supuesto tu puedes programar lo que desees.

 

Paso 2: Guardaremos este código en un archivo .php y luego lo pondremos en la carpeta wp-content.

Es recomendable crear un archivo diferente para cada shortcode que queramos generar y aunque podríamos guardar esta función directamente en functions.php, NO es una buena práctica porque eso nos dará errores a largo plazo.

Otra opción sería crear nuestro propio plugin (ver artículo).

En esta ocasión guardaremos el código en un archivo que llamaremos mi_shortcode.php y lo guardaremos dentro de la carpeta wp-content.

Guardándolo en esta carpeta no habrá ningún problema si en un momento dado necesitamos actualizar WordPress o si el propio cliente hace cualquier tipo de actualización, no lo perderemos ni se borrará.

 

Paso 3: Ahora necesitamos incluir este archivo, esto es, decirle a WordPress dónde está nuestro código personalizado; esto lo haremos añadiendo una simple línea de código en el functions.php

Será esta:

include(WP_CONTENT_DIR . ‘/ mi_shortcode.php ‘);

 

Paso 4: Definamos el código ideaWeb abreviado para que realmente WordPress tenga conciencia de qué es. Para ello, justo debajo de la línea anterior que hemos colocado en functions.php, ahora colocaremos el siguiente código:

add_shortcode(‘nombre_del_codigo’, ‘nombre_de_la_funcion’);

en nuestro caso pondremos

add_shortcode(‘ideaweb’, ‘shortcode_ideaweb’);

 

Paso 5: Y ya está, listo para usarlo. Tan sólo tendrás que incluir el código [ideaweb] donde desees utilizarlo en tu sitio web.

 

Conclusión

Esperamos que os haya sido de utilidad haber aprendido a crear shortcodes con ideaWeb, y sobre todo que os haya aportado una nueva herramienta en vuestro arsenal de diseño web y desarrollo con WordPress.

Ahora a practicar creando vuestros propios shortcodes para los desarrolloso de los clientes o simplemente por practicar esta nueva ténica de diseño web con WordPress, que seguro alguna vez será la que os solucione un problema planteado en mitad de un trabajo. Ya sabéis que si deseáis realizar un proyecto a medida en WordPress en ideaWeb somos especialistas WordPress y realizamos cualquier tipo de tarea de diseño web, desarrollo web a medida y marketing online, cualquier tarea o trabajo sobre tu página web, asi que cuéntanos y te ayudamos.

 

 

 

Pin It on Pinterest