wordpress-introduccion-shortcodes

Introducción a plugin shortcode

La API de shortcodes es un conjunto de funciones para crear los códigos cortos de WordPress, para su uso en publicaciones y páginas. Por ejemplo, el siguiente código corto (en el cuerpo de una publicación o página) agregaría una galería de fotos de imágenes adjuntas a esa publicación o página: [galería]

La API permite a los desarrolladores crear tipos especiales de contenido (por ejemplo, formularios, generadores de contenido) que los usuarios pueden adjuntar a determinadas páginas añadiendo el código corto correspondiente al texto de la página.

WordPress

Este ejemplo aborda lo siguiente:

  • Crear un shortcode simple, que agrega 3 links a WordPress
  • Crear y agregar estilos para el shortcode
  • Incluir estilos externos, en este caso, FontAwesome

Lo primero que debemos hacer es ir al directorio wp-content/plugins; en este directorio, creamos un directorio llamado yantb-link, aunque en realidad, se puede llamar como ustedes estimen conveniente.

En este directorio, debemos ir creando los archivos que vamos a necesitar, partimos con el CSS que es en lo que menos nos enfocamos. creamos wp-content/plugins/yantb-link/style.css y agregamos el siguiente código:

Claro está, que el CSS cambia dependiendo de nuestra necesidad y el template que estemos utilizando.

Con el estilo creado, creamos wp-content/plugins/yantb-link/index.php. Debemos recordar que index.php es el archivo de entrada del plugin.

Este archivo luce de la siguiente manera

En este archivo, debemos fijarnos en lo siguiente

1. Inicia con comentarios, estos comentarios son muy necesarios, gracias a ellos, podemos identificarlo en la sección de plugins de nuestro WordPress

yantb-link-admin-plugins

Desde esta misma sección, activamos nuestro plugin.

2.  la función yantbLink, básicamente tiene la lógica de todo el plugin. Por un lado, llama a las funciones registerStylesgenerateLink cuando es necesario, y por otro, retorna el resultado.

La función shortcode_atts, lo que hace es recibir un valor, en este caso $atts. En él, buscará los elementos del array, es decir, facebook, twitter y google, si los encuentra, asigna el valor recibido, sino, asigna el valor por defecto que se indica.

3. La función registerStyles está registrando los estilos del plugin, por un lado, está llamando al archivo interno style.css, que se encuentra en el directorio del plugin, y por otro, está llamando a una fuente externa, que es la de FontAwesome.

4. La función generateLink recibe parámetros para construir el HTML de cada link.

 

Finalmente, al activarlo, e ir a una entrada o página, agregamos el código del shortcode, por ejemplo

[yantb_link facebook=”https://www.facebook.com/ityantb/” twitter=”http://www.sintwitter.com” google=”https://plus.google.com/112270179289709544171″]

Aquí vemos que pasamos como parámetro los datos que nuestra función necesita. Viéndose de la siguiente manera

yantb-link