Advertisement
  1. Web Design
  2. Theme Development

Cómo extender Visual Composer con elementos de contenido personalizados

by
Read Time:12 minsLanguages:

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

En el tutorial anterior, analizamos Visual Composer para desarrolladores de temas; licencias y configuración técnica. En este tutorial llevaremos las cosas más allá, ampliaremos Visual Composer y lo configuraremos para crear páginas.

Funcionalidad predeterminada de Visual Composer

Antes de analizar realmente la creación de una página, repasemos algunas de las funciones predeterminadas.

Elementos de contenido

Visual Composer viene con una amplia gama de elementos de contenido integrados. Además de esto, Visual Composer ofrece más de 200 complementos, tanto gratuitos como de pago.

De forma predeterminada, Visual Composer está habilitado solo para páginas, pero también puedes habilitarlo para publicaciones e incluso para tipos de publicaciones personalizadas. Estas y más opciones se pueden administrar desde Visual Composer Role Manager. Allí también puedes controlar quién puede usar Visual Composer en tu administrador.

El Shortcode Manager te permite agregar elementos personalizados con parámetros. De alguna manera, el equivalente centrado en el usuario del método del desarrollador de asignación de nuevos elementos.

Generador de cuadrículas avanzado

Una de las herramientas más atractivas para los usuarios es el generador de cuadrículas. Con él, los usuarios pueden crear cualquier tipo de cuadrícula, con imágenes, texto, botones, publicaciones, entre otros, sin tocar el código. También se encuentran disponibles cuadrículas de mampostería.

Mmm gridsMmm gridsMmm grids
Cuadrículas mmm

Biblioteca de plantillas

La biblioteca de plantillas le brinda a los usuarios acceso a plantillas profesionales para la estructura de la página. Los ejemplos típicos incluyen diseños de artículos, diseños de páginas de destino, páginas de paralaje, portafolios, lo que sea. Como desarrollador, puedes incluso crear los tuyos propios e incluirlos en el contenido de demostración de tu tema.

Redoble de tambores por favor...

Y, finalmente, llegamos a lo que podría decirse que es la parte más importante de Visual Composer: el editor. Este es un editor de back-end y front-end, y con él los usuarios pueden crear páginas sin conocimientos de codificación.

Visual Composers back end editorVisual Composers back end editorVisual Composers back end editor
Editor back-end de Visual Composer
Visual Composers front-end editorVisual Composers front-end editorVisual Composers front-end editor
Editor front-end de Visual Composer

Con el editor front-end editas exactamente lo que ves. ¡Sin duda, es más Lo que ves es lo que obtienes que el editor WYSIWYG de WordPress predeterminado!

El constructor de páginas funciona con un sistema de filas y columnas. Cada elemento agregado a la página se ajusta dentro de un contenedor de filas. Se pueden agregar varios elementos a la misma fila, en columnas o más filas anidadas. La siguiente captura de pantalla destaca cómo se pueden agregar, editar y eliminar elementos, filas y columnas.

Habiendo cubierto las funciones básicas disponibles, no dirijamos nuestra atención a algunos desarrollos. Ampliaremos la funcionalidad predeterminada de Visual Composer y agregar nuevos elementos personalizados.

Ampliación de Visual Composer

Para anular cualquier elemento en Visual Composer, primero debes copiar el archivo de plantilla de la carpeta del plugin Visual Composer (js_composer) > incluir > plantillas a la carpeta yourtheme > vc_templates. Del tutorial anterior, es posible que recuerdes que en nuestro tema Focuson tenemos cuatro archivos:

  1. vc_column.php
  2. vc_column_text.php
  3. vc_row.php
  4. vc_video.php

Y como comentamos, aquí es muy importante nombrar. Estas plantillas deben ser nombradas exactamente como están en la carpeta predeterminada del plugin VC.

Habiendo duplicado el archivo de plantilla, estás listo para sobrescribirlo. Veamos, por ejemplo, lo que hay en el primer archivo vc_columns.php. Si estás familiarizado con la creación de códigos cortos, no habrá nada nuevo para ti aquí.

La estructura del archivo se puede dividir en tres partes:

  1. Extraer atributos de código corto
  2. Preparar la configuración para la salida
  3. Salida de la estructura de código corto

Pero, ¿qué pasa si quieres agregar o eliminar atributos de código corto existentes, cómo lidiarías con eso? Conoce tres nuevas funciones:

vc_remove_param();

Esta función elimina el parámetro de código corto de un elemento existente o personalizado. Para eliminar el atributo, ve al código corto específico con el nombre, por ejemplo, vc_column y el nombre del atributo, por ejemplo, el_class.

vc_add_param();

Esta función le agrega nuevos parámetros a un elemento existente o personalizado. Al igual que con la función vc_remove_param(), ve al código corto específico con su nombre, por ejemplo, vc_column e incluye la matriz de parámetros:

vc_add_params();

Esta función es similar a vc_add_param(), pero te permite añadir varios parámetros a un elemento. Puedes encontrar una lista de todos los tipos de parámetros aquí.

Para agregar o eliminar nuevos parámetros, así como agregar nuevos elementos, debes editar el archivo de integración, que en nuestro caso es ninzio_vc.php.

  1. Comenzamos deshabilitando el editor front-end. El editor front-end es una característica realmente interesante, pero nuestros elementos personalizados no lo admiten. Depende de ti, como desarrollador de temas, si quieres admitir los editores front-end y/o back-end.
  2. Elimina todos los parámetros innecesarios o no admitidos de los elementos de destino con vc_remove_param();
  3. Añadir nuevos parámetros a los elementos existentes con las funciones vc_add_param(); o vc_add_params();.
  4. Luego, agrega nuevos elementos..

Cómo agregar elementos personalizados

La adición de nuevos elementos de contenido a Visual Composer se produce cuando un archivo de códigos cortos está presente en tu tema o complemento de tema, como en nuestro caso, por lo que primero debemos verificar con la función si nuestro plugin ninzio-addons está instalado y activo:

¿Cómo entiende Visual Composer que se han agregado nuevos elementos? Con add_action();.

Usaremos la acción init, dándonos esto:

Ya estamos listos para añadir nuestros nuevos elementos, para lo cual necesitamos otra nueva función:

vc_map();

Esta función requiere un parámetro: una matriz de atributos especiales que describen tu código corto. Como ejemplo agregaremos un elemento separador personalizado:

¡Son muchos atributos! Destacaremos los más importantes:

  • name proporciona un nombre descriptivo único al elemento personalizado. Los usuarios lo verán en la pestaña Visual Composer.
  • base, no menos importante que name, es el nombre de la etiqueta de código corto. Si estás familiarizado con la creación de códigos cortos personalizados, sabrás que todos los códigos cortos personalizados tienen etiquetas. Por ejemplo, nuestro separador personalizado tiene una etiqueta nz_sep. La base del elemento debe ser única y debe nombrarse exactamente como el nombre del código corto en tu archivo shortcodes.php (como lo tenemos en nuestro tema Focuson):
  • class no es crítica pero es una opción importante, que actúa como un identificador no único. La nomenclatura debe ser descriptiva y sin espacios, utilizar guiones o guiones bajos.
  • show_settings_on_create es un parámetro booleano y autodescriptivo.
  • category es muy importante. Si quieres agrupar tus elementos personalizados dentro de una pestaña de menú personalizado en el menú elementos de Visual Composer, debes agregar una categoría personalizada. Si quieres incluir elementos en una categoría existente, usa el nombre de esa pestaña de menú existente:
  • icon es similar a class. Agregamos un nombre de icono para que podamos diseñar el código corto en el menú de Visual Composer. Por ejemplo:
  • description agrega una pequeña descripción al elemento personalizado. Los usuarios verán esto.
  • js_view es un parámetro muy importante. Cuando tienes elementos que comprenden componentes principales y secundarios (por ejemplo, cuadros de contenido, que tienen un contenedor principal elementos de cuadro primario y secundario, donde los elementos principales y secundarios tienen atributos separados), este atributo debe tener el valor VcColumnView. Examinaremos los detalles más complejos en un momento.
  • params es la matriz de parámetros que se va a agregar al elemento personalizado. Se comporta de forma similar a la función vc_add_params(), pero anidado en la función vc_map().

Elementos primarios y secundarios

Los elementos de contenedor con elementos secundarios requieren una configuración específica antes de agregarlos. En la función vc_map() necesitamos agregar un par de parámetros más para hacer que nuestros elementos sean un contenedor o el hijo de otro elemento.

Por ejemplo, supongamos que queremos agregar un nuevo elemento "Cuadros de contenido". Nuestro elemento de caja de contenido consta de dos partes:

  1. el elemento primario con sus atributos
  2. y los elementos de cuadro secundarios, cada uno con sus atributos.

Un cuadro de contenido puede tener elementos de cuadro secundario ilimitados. Así que tenemos dos problemas que resolver:

  1. De alguna manera necesitamos decirle a Visual Composer que el cuadro de contenido es un elemento secundario/primario,
  2. entonces, que un cuadro es el único elemento secundario posible de un elemento de cuadro de contenido principal, y que un elemento de cuadro de contenido es el único elemento principal posible para los elementos secundarios del cuadro.

Código de elemento primario

Para evitar confusiones tanto como sea posible, miremos un elemento existente. En nuestro tema Focuson tenemos un elemento "Cuadros de contenido", con dos parámetros extra de especial interés:

¿Recuerdas el parámetro base de nuestra función vc_map()? Aquí, con as_parent, estamos registrando el elemento nz_content_box como elemento primario solo para un elemento secundario nz_box.

Cuando js_view se configura en VcColumnView Visual Composer le agrega funcionalidad de interfaz de usuario adicional al elemento en el editor, por lo que podemos agregar un nuevo elemento secundario.

Código de elemento secundario

En la misma línea, nuestro código de elemento nz_box tiene un parámetro adicional:

Con as_child estamos registrando el elemento nz_box como un elemento secundario, pero solo para un elemento primario nz_content_box.

Ampliar clases

Si ahora visitas el menú Visual Composer y haz clic en el elemento del Cuadro de contenido recién agregado, verás... no está funcionando. No se ha agregado ninguna funcionalidad de elemento primario/secundario, porque todavía hay una cosa que tenemos que hacer: tenemos que extendernos a las clases:

  • WPBakeryShortCodesContainer
  • WPBakeryShortCode

La primera clase es responsable de los elementos primarios, la segunda es responsable de los elementos secundarios. Por lo tanto, justo después de la función de acción, agrega:

Como recordarás, la base del elemento principal del cuadro de contenido era nz_content_box, este nombre también debería estar presente en el nombre de la clase que extiende la clase WPBakeryShortCodesContainer. En nuestro caso, el nuevo nombre de la clase es WPBakeryShortCode_nz_Content_Box.

Lo mismo ocurre con el elemento secundario. El nombre base era nz_box y el nuevo nombre de clase será WPBakeryShortCode_nz_Box.

Cualquiera que sea el nombre de la base de tu elemento, debe estar presente en el nombre de la nueva clase.

Ahora, si revisas el editor de páginas una vez más, verás que el nuevo elemento de cuadro de contenido tiene funcionalidad secundaria/primaria.

Creación de páginas con Visual Composer

Después del trabajo duro podemos cosechar los frutos de nuestro trabajo. Revisa la página principal del tema Focuson. Construyamos esa página de inicio con Visual Composer.

La estructura se puede dividir en varias secciones:

  • Slider de presentación
  • Cuadros de contenido
  • Proyectos destacados
  • Contadores
  • Información adicional, como "Por qué elegirnos", que consta de dos columnas
  • Banner
  • Miembros del equipo
  • Un bloque más de información adicional con dos columnas
  • Testimonios de clientes
  • Logotipos de patrocinadores

Recrear esto es solo el trabajo de un momento con Visual Composer.

Ajustaremos cada bloque dentro del elemento "Fila" separado con al menos un elemento "Columna". Como comentamos, esta es la estructura mínima y requerida de las páginas de Visual Composer.

Slider de presentación

El tema Focuson integró el Slider Revolution. El slider no se agrega con Visual Composer, sin embargo, una vez que instales Revolution Slider y Visual Composer, notarás un nuevo elemento "Revolution slider". Este es un complemento gratuito del slider Revolution, y con ese elemento puedes colocar un slider en la página, incluso si tu tema no está integrado con Visual Composer.

Cuadros de contenido

¿Recuerdas el elemento de ejemplo "Cuadros de contenido"? Podemos construir cuadros de contenido increíbles con nuestro elemento personalizado:

Proyectos Destacados

En esta sección usamos

  1. un text_column
  2. un elemento gap, para agregar espacio
  3. una imagen única centrada (que sirve como un buen divisor de línea)
  4. otro elemento gap
  5. y el elemento "Proyectos recientes"

Casi todos los elementos aquí se agregan de forma personalizada.

Contadores

Para los contadores usamos opciones de fondo de fila (imagen y color) por estética. Todas estas opciones se agregan de forma personalizada desde Ninzio. Colocamos el elemento personalizado de contador dentro de esa fila con estilo.

Bloque de información "Por qué elegirnos"

Con las columnas de Visual Composer podemos agregar contenido de doble columna:

Casi todos estos elementos se agregan de forma personalizada, solo el elemento "Encabezado personalizado" viene por defecto con Visual Composer. En el editor de back-end, parece asimétrico, pero en el front-end verás una estructura atractiva. La gestión de contenido no se trata simplemente de llenar páginas, también es un proceso lógico y creativo. Hay que tener en cuenta las dimensiones de las imágenes y el texto, y considerar cómo se ven en diferentes dispositivos. A veces también se necesitan correcciones de respuesta. Afortunadamente, Visual Composer tiene las herramientas necesarias. En las opciones de edición de columnas, puedes encontrar la pestaña Opciones de respuesta, donde puedes ajustar el tamaño de la columna según los grupos de dispositivos.

Banner

Esto no es más que una fila con una imagen de fondo y un efecto de paralaje, una pequeña cantidad de contenido con una información sobre herramientas, título y botones.

Miembros del equipo

Este es un elemento adicional de Ninzio; un carrusel de miembros del equipo.

Bloque de información "Soluciones creativas"

Una vez más, no hay nada inusual aquí; un elemento de fila normal con dos columnas, cada una con contenido.

Pero aquí el truco es que la imagen de la derecha no está ubicada dentro de la segunda columna, en realidad está configurada como imagen de fondo de fila, por lo que la columna de la derecha aquí está vacía.

Testimonios de clientes

También creamos un elemento personalizado para agregar testimonios. Una vez más, no hay nada inusual en juego aquí.

Logotipos de patrocinadores

Y la última sección son los logotipos de los patrocinadores. Es un carrusel de logotipos dentro de una fila con un color de fondo gris. Este elemento también se agrega de forma personalizada.

Conclusión

¡Eso es todo! Ahora ya sabes todo lo que se necesita para integrar Visual Composer con tu tema y crear páginas de forma rápida y sencilla. Como recurso para un estudio más a fondo, te sugiero que revises la página wiki oficial de Visual Composer. Si tienes alguna pregunta, ¡por favor no dudes en dejar un comentario!

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.