Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Theme Development

Cómo Integrar Visual Composer En Tus Temas de WordPress

by
Read Time:8 minsLanguages:

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

Visual Composer es un plugin de WordPress que permite construir páginas usando una interfaz de arrastrar-y-soltar. Otorga a los usuarios el poder para maquetar páginas fácilmente, y proporciona a los desarrolladores la oportunidad de agregar valor a sus temas de WordPress. En éste tutorial abordaremos las implicaciones legales y técnicas de integrar Visual Composer en Temas, listos para la venta.

Visual Composer viene con:

  • Editor de WordPress combinado fronte-end y back-end.
  • 40+ elementos de contenido integrados listos para usarse y 200+ complementos, diseñados para llevar tu sitio web al siguiente nivel.
  • La librería de plantillas dando a los usuarios de WordPress acceso a cientos de plantillas de maquetado de alta calidad.
  • Constructor de piel para rápidamente cambiar la apariencia visual del tema.
  • Constructor de grilla avanzado para posts, portafolio, multimedia, y tipos de post personalizados.

Así que esas son las principales prestaciones de Visual Composer, todas incluídas, además soporte profesional por $34 (licencia regular a partir de Diciembre de 2016).

Visual Composer para Desarrolladores de Temas

Pensemos por un momento en por qué los desarrolladores de temas deberían integrar o extender Visual Composer, y cuáles son las implicaciones de la licencia para hacer eso.

Vender Temas de WordPress puede ser un negocio lucrativo, si vas a vender individualmente o a través de un mercado como ThemeForest. Como autores de temas (Ninzio Themes) entendemos las recompensas, pero sabemos qué tan difícil puede ser desarrollar temas, y lo que cada desarrollador quiere de su producto.

  • Tiempo y costo de desarrollo reducido
  • Un producto de alta calidad.
  • Ingreso por ventas maximizado
  • Tiempo de soporte reducido
  • Enfocarse en nuevas prestaciones y mercadotecnia

¿Y sabes qué? Visual Composer puede ayudarte a lograr éstas metas directa o indirectamente. Dejame explicarte cómo:

Muchos temas de WordPress tienen Constructores de Páginas integrados, y construirlos se convirtió en una tendencia en los años anteriores, pero hoy en día, con el aumento de la competencia, es extremadamente desventajoso en términos de costos y tiempo desarrollar una solución personalizada para tu tema. En lugar de eso, Visual Composer puede ser integrado en tu tema, y ofrecido a tu compradores gratuitamente (gratis únicamente para usar con tu tema).

Si exploras los mejores temas de Wordpress de Themeforest notarás que casi cada tema tiene integrado Visual Composer, aún temas que tienen su propio constructor de páginas personalizado integrado. Visual Composer es un producto bien conocido, probado miles de veces por millones de usuarios y desarrolladores.

ThemeForests top WordPress themesThemeForests top WordPress themesThemeForests top WordPress themes
Los mejores temas de WordPress en Themeforest

En éste punto dejamos claro por qué Visual Composer se ha convertido (casi) en un conocimiento requerido para los exitosos desarrolladores de temas de WordPress, y por qué deberías considerar integrarlo en tus temas.

Las siguientes preguntas son: ¿cómo integramos Visual Composer, y tenemos el derecho de hacer eso?

Integración de Temas: Guía Legal

Si eres desarrollador de temas que piensa incluir Visual Composer en tus temas, aquí está un rápido sumario de lo que se necesita:

"El 22 de Enero de 2013, Envato actualizó sus licencias y ya no es posible utilizar artículos de mercados dentro de tus propios artículos que se vendan en mercados de Envato, sin un acuerdo de sociedad entre dos autores. En éste caso entre mí (Michael M) y tu (autor del tema)." - Michael M

Así que... si quieres incluir Visual Composer en tu tema ¿tienes que escribirle a Michael? Por suerte, no. Éste proceso ha sido automatizado. Examinemos, paso por paso, cómo podemos correctamente obtener licencia de Visual Composer.

Comprar Licencia Extendida

Primero necesitarás comprar la licencica extendida de Visual Composer de CodeCanyon. Al momento de escribir éste artículo el precio para una licencica extendida es de $170.

Visual Composers extended license from CodeCanyonVisual Composers extended license from CodeCanyonVisual Composers extended license from CodeCanyon
Licencia Extendida de Visual Composer de CodeCanyon

¿Qué es una "Licencia Extendida"?

La licencia extendida permite el uso del plugin, por tí o por un clilente, en un sólo producto que se le puede cobrar a los usuarios finales. El precio total incluye el precio del artículo y una cuota al comprador.

Esencialmente, tu compras una licencia de desarrollador para usar Visual Composer con uno de tus temas. Los clientes que compran ese tema no requieren comparar la licencia regular de Visual Composer.

¿Qué No Cubre?

No puedes usar la licencia extendida para múltiples temas, ni puedes compartir tu licencia extendida con alguien más. No tendrás que compartir la clave de la licencia con tus clientes, y tus clientes no necesitarán activar Visual Composer (la copia que viene con tu tema).

¿Qué Hay Sobre las Actualizaciones de Visual Composer?

Una de las preguntas más comunes que escuchamos en Ninzio Themes es: "No puedo actualizar Visual Composer". Ésto no es hecho por el cliente final; cada actualización de Visual Composer debe ser probada e incluída en las actualizaciones de temas.

La "Licencia In-Stock"

Pero espera un minuto-WPBakery dice "ya no es posible usar artículos de mercados dentro de tus propios artículos que se vendan en mercados de Envato". Así que ¿cómo incluyes Visual Composer en tus temas para vender en ThemeForest si la licencia extendida no permite eso? Aquí es dónde el "acuerdo" espcial entre tí y Michael M (el autor del Plugin Visual Composer) entra en juego: la "Licencia In-Stock".

Una vez que has comprado la licencia extendida de CodeCanyon, ve al portal de soporte de WPBakery e ingresa con tu acceso de Envato.

WPBakery loginWPBakery loginWPBakery login
Pantalla de ingreso a WPBakery

Un mensaje emergente con ¿Autorizas al Portal de Soporte de WPBakery a conectarse a tu cuenta? aparecerá; haz click en Approve (Aprobar). Luego, si ya has comprado la licencia extendida, WPBakery automáticamente muestra tu licencia recientemente comprada en el escritorio, así que selecciona la licencia, ingresa el nombre del tema, y pulsa Submit. Tu licencia extendida se convertirá en una "Licencia In-Stock". ThemeForest lo sabe, WPBakery lo sabe, tu lo sabes-todo tiene la licencia, así que puedes incluir Visual Composer en tu tema y vender el tema en ThemeForest.

En éste punto, hemos terminado de abordar los aspectos legales de la integración de Visual Composer, ahora es momento de examinar el aspecto técnico.

Integración con el Tema: Guía Técnica

No se requiere de mucho para la integración de Visual Composer con tu tema. Explicaremos el proceso usando uno de nuestros temas, Focuson, como un ejemplo.

FocusonFocusonFocuson
Focuson

Crear el Entorno Requerido

Necesitamos lo siguiente:

  1. Un archivo php con elementos personalizados (shortcodes de tu tema). En nuestro caso éste se llama "shortcodes.php" que se localiza en el plugin "ninzio-addons" (un plugin con funcionalidad de personalizar tema). "shortcodes.php" es responsable para el resultado final de shortcodes. Para una guía de cómo crear shortcodes en WordPress, consulta el tutorial de Rohan Mehta Comenzando con Shortcodes en WordPress.
  2. Un archivo php para integrar Visual Composer. Éste archivo contiene tus opciones de elementos personalizados, mostrados en el menú del escritorio de Visual Composer. En nuestro caso éste se llama "ninzio_vc.php" y está localizado en theme folder > includes.
  3. Un directorio de plantillas Visual Composer, que contendrán archivos php de los elementos predeterminados de Visual Composer, en caso que necesites sobreescribirlos. Éste directorio debe llamarse "vc_templates", y todos los archivos localizados dentro de ese directorio deben llamarse exactamente como los del directorio "vc_templates" de Visual Composer. En nuestro caso tenemos cuatro archivos que son extendidos con estructura y funcionalidad de personalizar: "vc_column.php", "vc_column-text.php", "vc_row.php", y "vc_video.php". El directorio "vc-templates" debe ser puesto directamente dentro del directorio raíz de tu tema theme folder > vc_templates.

Al final pero no menos importante, como Visual Composer es un plugin externo, necesitamos incluirlo en el paquete de descarga del tema. Aqui tenemos dos opciones:

  1. Incluir el archivo "js_composer.zip" dentro del paquete de descarga y pedir a tus compradores instalarlo manualmente.
  2. Usar el TGM Plugin Activator para automatizar éste proceso.

Encontramos la segunda opción como la mejor para requerir y recomendar plugins para temas de WordPress. Para hacer ésto crea un directorio "plugins" dentro del directorio raíz de tu tema y coloca el archivo "js_composer_zip" (el archivo instalable de Visual Composer, que tendrás que descargar despues de la compra) en él. Para aprender más sobre el TGM Plugin Activator consulta el tutorial de  Ünver Usando la Librería TGM Plugin Activation en Tus Temas.

WordPress Theme Check

A WordPress Theme Check no le gusta cuándo un tema incluye plugins empaquetados. Emitirá una advertencia como:

REQUERIDO: archivo zip encontrado. Los plugins no se permiten en temas. El archivo zip encontrado era js_composer.zip

Afortunadamente para ésta situación no hay instrucciones oficiales. Como incluir el directorio de plugin en tu servidor va contra la licencia de Envato Plugins en Temas - Problema con Theme Check no hay otra mejor manera de incluir el plugin con el tema.

Toma un respiro

Así que, por ahora hemos...

  1. ...incluído js_composer.zip dentro del tema (focuson > plugins > js_composer.zip)
  2. ...creado el archivo php de elementos personalizados (ninzio-addons > shortcodes > shortcodes.php). Recuerda que tenemos el plugin ninzio-addons con toda la funcionalidad para personalizar en él, y viene con el tema.
  3. ...creado el archivo de integración de Visual Composer (focuson > includes > ninzio_vc.php)
  4. ...y creado el directorio "vc_templates" que contiene los elementos predeterminados de Visual Composer para extender la funcionalidad de personalizar.

Incluyendo los Componentes Requeridos

Ahora completemos la integración al incluir los componentes requeridos. Abre el archivo "functions.php" de tu tema y, con TGM Plugin Activador, agrega Visual Composer a la lista de plugins requeridos:

Ahora incluye el archivo "shortcodes.php". Como en el caso del tema Focuson éste archivo se localiza dentro del plugin "ninzio-addons", ya está incluído cuándo el plugin ninzio-addons es instalado.

Posteriormente, inclye el archivo de integración "ninzio_vc.php". Ésta parte es muy importante, pues necesitamos estar seguros de que el archivo instalable de Visual Composer "js_composer.zip" esté dentro del directorio plugins y el plugin de Visual Composer esté instalado exitosamente y activo:

Únicamente después de eso requerimos el archivo de integración "ninzio_vc.php".

Conclusión

¡Eso es todo! Visual Composer está integrado con nuestro tema y tenemos todo lo que se requiere para extenderlo. En el próximo tutorial veremos como extender y construir con Visual Composer. ¡Ahí nos vemos!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.