parte2

Creando un Addon para Visual Composer (Parte II)

by | Aug 24, 2016 | Tutoriales | 1 comment

AÑADIENDO OPCIONES A NUESTRO ADDON

En la primera parte de esta guia vimos como crear la estructura base de un plugin, la cual hasta ese punto, no era relativa ni especifica para Visual Composer. En esta segunda parte, crearemos un modulo de opciones para Visual Composer el cual servira para añadir miembros de un equipo, con imagen del integrante, posicion de trabajo, descripcion y algunas opciones adicionales.

 

FUNCION VC_MAP

Asi como Visual Composer facilita el desarrollo de sitios web para usuarios comunes, tambien nos la pone facil a nosotros los programadores con su amplio abanico de funciones y opciones. La funcion vc_map() es de momento la que mas nos interesa, ya que con ella registraremos nuestro nuevo modulo y sus respectivas opciones en Visual Composer. Los parametros que acepta vc_map() son listados a continuacion:

name String Nombre de nuestro nuevo Modulo (Legible para humanos)
base String Shortcode tag. Por ejemplo[mig_miembro_equipo] . Aqui el tag seria mig_miembro_equipo sin corchetes
description String Descripcion de nuestro Modulo
class String Clase CSS que se utilizara para mostrar nuestro modulo en el backend de nuestro sitio
show_settings_on_create Boolean Si se define como “true”, desplegara la pantalla de opciones del modulo justo tras ser insertado en el constructor visual
weight Integer Content elements with greater weight will be rendered first in “Content Elements” grid (Available from 3.7 version)
category String Categoria que mejor describe la funcionalidad de nuestro Addon. Las categorias por defecto incluidas en Visual Composer son Content, Social, Structure. Puedes añadir tu propia categoria tan solo escribiendo el nuevo nombre de categoria.
group String Grupo al que pertenecera este nuevo Modulo.  (Disponible desde  Visual Composer 4.1)
admin_enqueue_js String|Array URL absoluta de algun archivo js que añada funcionalidades a tu nuevo modulo y que deba ser cargado en el backend.
admin_enqueue_css String|Array URL absoluta de algun archivo css que añada funcionalidades a tu nuevo modulo y que deba ser cargado en el backend.
front_enqueue_js String|Array URL absoluta de algun archivo js que añada funcionalidades a tu nuevo modulo y que deba ser cargado en el frontend.
front_enqueue_css String|Array URL absoluta de algun archivo css que añada funcionalidades a tu nuevo modulo y que deba ser cargado en el backend.
icon String URL o clase CSS class con icono. puedes encontrar mas info  aqui
custom_markup String Marco html personalizado para representar el shortcode en el editor visual
js_view String Añadir backbone.js personalizado.
html_template String Directorio del template del shortcode.
deprecated String Ingrese el numero de version desde donde debe ser considerado como “deprecated” y se movera a la pestaña correspondiente.
content_element Boolean Si se setea como false, se vera oculto y no podra ser añadido con el boton añadir elemento.
params

NO todos los parametros listados anteriormenteson obligatorios.

 

USANDO VC_MAP() EN NUESTRO NUEVO MODULO

Abriremos el archivo llamado “mig_addon_vcomposer_opciones.php” ( creado en la primera parte de nuestra guia) e ingresaremos el codigo a continuacion:

Guardamos. Ya hecho esto, podriamos comprimir la carpeta en un archivo .zip y subirla a nuestra instalacion. Si hemos hecho todo bien, al ir a una nueva pagina y listar los modulos, nos deberia aparecer como en la imagen a continuacion: modulo-añadido Se ve bien, no? Si presionamos, no aparecera nada…ya que no hemos añadido ninguna opcion a nuestro modulo. Antes de hacerlo, veamos que opciones nos presenta Visual Composer, asi decidimos cual es mas apropiada para cada caso.

Valor
Descripcion
textarea_html Area de texto que muestra el editor WYSIWYG . Importante: Solo se puede utilizar UN editor por modulo el cual es utilizado para mostrar el contenido.
textfield Campo de texto simple
textarea Area de texto simple
dropdown Campo de opciones seleccionable. Se debe utilizar un array con el listado de opciones disponibles.
attach_image Campo para añadir Imagen
attach_images Campo para añadir multiples images
posttypes Muestra casillas seleccionables con los tipos de post, paginas o tipos de post personalizados.
colorpicker Seleccionador de color
exploded_textarea Area de texto donde cada linea  sera implosionada con una coma(,)
widgetised_sidebars Dropdown element with set of available widget regions, that are registered in the active wp theme
textarea_raw_html Text area, its content will be coded into base64 (this allows you to store raw js or raw html code)
vc_link Seleccionador de links. Luego en la funcion que muestre el shortcode se debe usar en el interior de href de la siguiente manera $href = vc_build_link( $href ); para usar el atributo del link.
checkbox crea una o multiples casillas seleccionables (checkbox)
loop Constructor de Loop.
css Editor de CSS
Puedes añadir mas opciones. Ya hablare de esto en algun nuevo tutorial.

Estas opciones se utilizan como el valor para “type” de los parametros que contendra nuestro modulo. Un parametro completo deberia quedar de la siguiente manera:

Cada parametro de nuestro nuevo modulo debe seguir una estructura similar a la anterior. Como dijimos al comienzo de esta segunda entrega, este modulo de ejemplo servira para añadir miembros de un equipo, con imagen del integrante, posicion de trabajo, descripcion y algunas opciones adicionales. Para enriquecer un poco esta guia, permitiremos al usuario elegir el tamaño del nombre y el color de texto de la descripcion.  Nuestro modulo deberia quedar asi:

Ahora las opciones han sido añadidas al modulo y si actualizamos el plugin en nuestra instalacion, deberiamos ver algo como esto al seleccionar el modulo:

modulo-ajusted

 

Muy Bien, Felicitaciones! Ya tienes el modulo y todos sus ajustes. En la proxima entrega veremos como hacer uso de los parametros y sus valores para que se muestren correctamente en la funcion apropiada. De momento, ya eres capaz de crear todas las opciones necesarias para tu proximo Addon.

¿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).

1 Comment

Trackbacks/Pingbacks

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