parte3

Creando un Addon para Visual Composer (Parte III)

by | Aug 25, 2016 | Tutoriales | 0 comments

En las dos ediciones anteriores de este tutorial vimos como crear la estructura base de un plugin para WordPress y luego como añadir un modulo con opciones para Visual Composer. Si no los has leido aun, aqui te dejo los links.

Creando un Addon para Visual Composer (Parte I)

Creando un Addon para Visual Composer (Parte II)

 

CREANDO UNA FUNCION QUE UTILICE LOS VALORES DE NUESTRO MODULO

Como comente en la primera entrega de este tutorial, Visual Composer es un gestionador visual de atributos y valores para shortcodes, por ende debemos crear una funcion que recoja los valores de los atributos añadidos con nuestro modulo, y añadir esta funcion a la lista de shortcodes con el tag correspondiente.

 

Analicemos el codigo que utilizamos para crear nuestro modulo y veamos cuales son los atributos que debemos rescatar.

Las lineas destacadas en el codigo anterior son las que nos interesan. En la primera linea resaltada, podemos ver el atributo “base” definiendo el tag del shortcode a utilizar (en este caso mig_miembro_equipo). El resto de las lineas resalta los atributos que contendra el shortcode insertado.

 

REGISTRANDO EL SHORTCODE

Abriremos el archivo destinado a contener la funcion que interpretara el shortcode, el cual en mi caso llame “mig_addon_vcomposer_shortcode.php” e ingresare la siguiente linea de codigo:

El primer valor DEBE SER IGUAL AL ATRIBUTO BASE DEFINIDO CON VC_MAP. El segundo, es el nombre de la funcion a ejecutar cuando WordPress vea nuestro tag insertado en alguna pagina/post y puede llevar el nombre que prefieras.

 

FUNCION QUE SE EJECUTARA CON EL SHORTCODE

A continuacion de la linea que registra nuestro shortcode en WordPress, crearemos la funcion que rescatara los valores seteados por el usuario y definiremos el uso que se les dara.

La function anterior debe ser capaz de recibir dos valores, los atributos del shortcode y el contenido de este (si es que aplicara). Para evitar errores en PHP recomiendo que las variables sean seteadas como opcionales, de la siguiente manera:

Una vez hecho esto, debemos ser capaces de extraer los valores contenidos en $atts y poder hacer uso de ellos. Para esto, utilizaremos la funcion de PHP extract, y fijaremos los valores por defecto para cada atributo en caso de que estos no hayan sido seteados por el modulo.

Ahora cada una de las key contenidas en el array se encuentra disponible para ser utilizada en el marco HTML. Recordemos que “content” corresponde al contenido que va entre los shortcodes compuestos de dos etiquetas y no es un atributo, por tanto no debe ir en la lista de $atts.

Crearemos una nueva variable la cual almacenara todo el contenido a ejecutar con la funcion, la cual llamaremos $output y le asignaremos valores a medida que vayamos creando la estructura de nuestra funcion, la cual debera quedar asi:

 

Ya con esto, nuestro modulo Para Visual Composer queda finalizado en cuanto a PHP y HTML. Ahora nos queda estilizarlo a traves de CSS.

En nuestro archivo principal (mig-addon-vcomposer.php), añadiremos las siguientes lineas de codigo:

 

Nuestro archivo principal nos deberia quedar asi:

 

No explicare CSS ya que no lo considero necesario como parte de esta guia, sin embargo dejo el link de descarga para el plugin completo. Utilizalo de la forma que desees.

Doy por finalizada la guia basica de como hacer un Addon para Visual Composer. Pronto publicare una guia con opciones avanzadas.

Espero haberte sido de ayuda y muchas gracias por leerme. No olvides compartir 😉

¿Tienes alguna duda o comentario relacionado a este post? Dejame un comentario ¿Dudas con Wordpress, Programacion, Diseño? ve a mi seccion de Preguntas y Respuestas 

Despues de años de programar y diseñar, me doy cuenta que mi pasion es ayudar. Espero te sean utiles mis articulos (aun con mi pobre redaccion).

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Hola! soy Miguras. Desarrollo themes y plugins para wordpress desde hace mas de seis años. Disfruta mi sitio!

Productos destacados

responsive-sportif-transparent Sportif Tema Wordpress deportivo