Shortcodes WordPress qué es y como crearlo

Explicaré que son los shortcodes y como hacer uno propio para utilizarlo en nuestra página web. Ya que mucha gente me pregunta como crear una estructura en las entradas de wordpress.

Tiene muchas ventaja pero la mayor ventaja es que cuando los utilizas te ahorran mucho tiempo en tareas repetitivas, por eso tenéis que saber que son y como crear vuestro propio shortcode, es muy fácil y con estos pasos sabréis crear un shortcode y  incluso poder enviarle datos a nuestro shortcode. Puede haber gente que los utilice porque hay muchos temas de wordpress que cuentan con ellos introducidos por defecto, para facilitar la organización del tema.

Que es un shortcode?

Los shortcodes son pequeños códigos que puedes añadir en el editor de WordPress. Se utiliza para añadir funciones al contenido de una pagina o entrada, sin tener que escribir el código html  de la estructura de divs, grids, etc. Directamente en el editor de cada entrada. Aquí os dejo un ejemplo simple de como sería un shortcode:

[shortcode]

Se puede añadir un shorcode insertando un código en el functions.php, de nuestro tema activo.

Algunos de los shortcode que podemos crear son botón de contacto, banner de publicidad, estructura de varias columnas, insertar videos de youtube, y un largo  etc. Las posibilidades son infinitas solo depende de la imaginación de cada uno.

Crear un shortcode en wordpress

Los pasos para crear un shortcode son:

1- Crear una función php, que sera la que tendra todo el código de nuestro shortcode.

2- Llamar a esa función para que nos funcione nuestro shortcode.

Empezamos, primero de todo abrimos nuestro functions.php del tema activo, añadimos el código siguiente (si queréis tenerlo mas organizado todo podéis crear un php, llamado shortcodes.php y desde el functions.php llamar a este con la función require_once(‘shortcodes.php’); ):

function btn_enlace_function( $atts, $content = null ) {
     extract(shortcode_atts(array('link' => ''), $atts));//extraemos el contenido de la variable link

     $html.='<div class="btn-proyectos" >// creamos la estructura html con sus clases para css
     <a title="Proyectos webs" href="'. $link . '" >// add link que hemos enviado a nuestro shortcode
      WEB
     </a>
     </div>';

    return $html;// devolvemos la estructura html que hemos realizado 
   }
add_shortcode( 'btn_enlaces', 'btn_enlace_function' ); // enlazamos nuestro shortcode con su función

El código de arriba es un pequeño shortcode, donde le enviamos un parámetro, en este caso se llama link. Declaramos una función para nuestro shortcode. En la función básicamente lo que hacemos es recoger el parámetro link, y mostrarlo en un código html para mostrarlo con una estructura y un estilo en concreto.

Para finalizar, añadimos con add_shortcode, el nombre de nuestro shortcode, en nuestro caso btn_enlace, y la función que va a llamar ese shortcode, que sería btn_enlace_function.

Ahora para finalizar ya podemos insertar nuestro shorcode en nuestro panel de administración de wordpress, vamos a una entrada o página y insertamos este código:

[btn_enlaces link="www.gmdavid.com"]

Con esto tendremos un botón que te envía a una web que hemos especificado, en este caso es mi web.

Los beneficios de utilizar shortcodes son muchos, por un lado te permite reutilizar código, ya que no tendrás que repetir mas la estructura anterior de este botón y lo puedes utilizar en tu web donde quieras con solo copiar el shortcode. Por otro lado no ensuciamos el editor de texto de wordpress con código html.

Desventajas no he encontrado ninguna, lo única desventaja podría ser que cambiaras de plantilla o tema y por lo tanto perderías todos, ya que estarían en el functions.php de tu vieja plantilla.

Las ventajas son muchas comienza a usar tus propios shortcodes en wordpress!

Si necesitáis mas información aquí encontrareis la api de shortcode de wordpress.

Espero que os haya sido de gran ayuda, cualquier duda comentar.

Si queréis algo mas especifico contactar conmigo.

Si queréis ayudar pulsar en los banners de publicidad, no cuesta nada y me anima a seguir escribiendo.

Comparte el post de: Shortcodes WordPress qué es y como crearlo