Share
En el tutorial anterior vimos Visual Composer para desarrolladores de temas; Licencias y configuración técnica. En este tutorial vamos a ir más allá, extendiendo Visual Composer y configurándolo para construir páginas.
Antes de ver cómo construimos una página, analicemos algunas de las características predeterminadas.
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..
Por defecto, Visual Composer está habilitado solo para páginas, pero también puede habilitarlo para publicaciones e incluso tipos de publicaciones personalizadas. Estas y más opciones pueden administrarse desde el Visual Composer Role Manager. Allí también puedes controlar quién puede usar Visual Composer en tu administrador.
El Shortcode Manager le permite agregar elementos personalizados con parámetros. De alguna manera, el equivalente centrado en el usuario del método de desarrollador de mapear nuevos elementos.
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, etc., sin tocar el código. Rejillas tipo albañilería también están disponibles..
Mmm grillasLa biblioteca de plantillas proporciona 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, carteras, lo que sea. Como desarrollador, incluso puedes crear el tuyo propio e incluirlo con el contenido de demostración del tema..
Y, finalmente, llegamos a lo que posiblemente sea la parte más importante de Visual Composer: el editor. Este es un back-end y un editor de aplicaciones para usuario, y con él los usuarios pueden crear páginas sin conocimientos de codificación.
Editor de back-end de Visual Composer
Editor frontal del compositor visualCon el editor de front-end editas exactamente lo que ves. Ciertamente es mas Lo que ves, es lo que tienes que el editor de WordPress WYSIWYG predeterminado!
El generador de páginas funciona con un sistema de filas y columnas. Cada elemento agregado a la página se envuelve dentro de un contenedor de fila. 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, columnas..
Habiendo cubierto las características básicas disponibles, no prestemos atención a algún desarrollo. Vamos a ampliar la funcionalidad predeterminada de Visual Composer y agregar nuevos elementos personalizados.
Para anular cualquier elemento en Visual Composer, primero debe copiar el archivo de plantilla de la carpeta del complemento Visual Composer (js_composer)> include> templates al tu tema> vc_templates carpeta. Del tutorial anterior puede recordar que en nuestro tema Focuson tenemos cuatro archivos:
Y como discutimos, nombrar es muy importante aquí. Estas plantillas deben nombrarse exactamente como están en la carpeta de complemento de VC predeterminada.
Una vez duplicado el archivo de plantilla, está listo para sobrescribirlo. Veamos, por ejemplo, qué hay en el primer archivo vc_columns.php. Si está familiarizado con la creación de shortcode no habrá nada nuevo para usted aquí..
La estructura de archivos se puede dividir en tres partes:
Pero ¿qué sucede si desea agregar o eliminar los atributos de código abreviado existentes? ¿Cómo lidiaría con eso? Conoce tres nuevas funciones:
Esta función elimina el parámetro de código abreviado de un elemento existente o personalizado. Para eliminar el atributo, dirija el shortcode específico con el nombre, por ejemplo vc_column y el nombre del atributo, por ejemplo el_clase.
Accentsconagua
vc_remove_param ("vc_column", "el_class");Esta función agrega nuevos parámetros a un elemento existente o personalizado. Como con el vc_remove_param () función, dirija el shortcode específico con su nombre, por ejemplo vc_column e incluir la matriz de parámetros:
vc_add_param ('vc_column', array ("type" => "dropdown", "class" => "", "header" => "Animate", "param_name" => "animate", "value" => array ( "Falso" => 'falso', "Verdadero" => 'verdadero')));Esta función es similar a vc_add_param (), pero le permite agregar múltiples 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 para agregar nuevos elementos, debe editar el archivo de integración, que en nuestro caso es ninzio_vc.php.
vc_remove_param (); vc_add_param (); o vc_add_params (); funciones.La adición de nuevos elementos de contenido a Visual Composer se produce cuando un archivo de códigos cortos está presente en su tema o complemento de tema, como en nuestro caso, por lo que primero debemos verificar con la función si nuestro complemento ninzio-addons está instalado y activo:
if (definido ('NINZIO_ADDONS') && file_exists (get_template_directory (). '/plugins/ninzio-addons.zip')) ... el código de los nuevos elementos va aquí ...¿Cómo entiende Visual Composer que se han agregado nuevos elementos? Con add_action ();.
add_action ('init', 'focuson_ninzio_integrateVC'); función focuson_ninzio_integrateVC () ... nuevos elementosUsaremos la acción. en eso, dándonos esto:
if (definido ('NINZIO_ADDONS') && file_exists (get_template_directory (). '/plugins/ninzio-addons.zip')) add_action ('init', 'focuson_ninzio_integrateVC'); función focuson_ninzio_integrateVC () ... nuevos elementosAhora estamos listos para agregar nuestros nuevos elementos, para los cuales necesitamos otra función nueva:
Esta función requiere un parámetro: una matriz de atributos especiales que describen su shortcode. Como ejemplo agregaremos un elemento separador personalizado:
"Separador", 'base' => "nz_sep", 'clase' => 'nz-sep', 'show_settings_on_create' => false, 'category' => esc_html __ ("Ninzio", 'focuson'), 'icon' => 'icono-separador', 'descripción' => 'Use este elemento para separar el contenido', 'js_view' => ", 'params' => array (... ¡Eso es un montón de atributos! Vamos a destacar los más importantes:
nombre le da un nombre descriptivo único a su elemento personalizado. Los usuarios lo verán en la pestaña Visual Composer..base, no menos importante que nombre, es el nombre de la etiqueta shortcode. Si está familiarizado con la creación de códigos cortos personalizados, sabrá que todos los códigos cortos personalizados tienen etiquetas. Por ejemplo, nuestro separador personalizado tiene un nz_sep etiqueta. El elemento base debe ser único y debe nombrarse exactamente como el nombre del código corto está en su archivo shortcodes.php (como el que tenemos en nuestro tema Focuson):'20', 'bottom' => '20', 'type' => 'solid', 'color' => '#eeeeee', 'align' => 'left', 'width' => ", 'height '=> "), $ atts)); $ styles = ""; if (isset ($ color) &&! empty ($ color)) $ styles. = 'border-bottom-color:'. $ color. ';'; if (isset ($ width) &&! empty ($ width)) $ styles. = 'width:'. absint ($ width). 'px;'; else $ styles. = 'width: 100%;'; if (isset ($ height) &&! empty ($ height)) $ styles. = 'border-bottom-width:'. absint ($ height). 'px;'; if (isset ($ type) &&! empty ($ type)) $ styles. = 'border-bottom-style:'. $ type. ';'; if (isset ($ top) &&! empty ($ top)) $ styles. = 'margin-top:'. absint ($ top). 'px;'; if (isset ($ bottom) &&! empty ($ bottom)) $ styles. = 'margin-bottom:'. absint ($ bottom). 'px;'; $ output = ''; devuelve $ output; add_shortcode ('nz_sep', 'nz_sep'); ?>
clase no es crítico, pero es una opción importante, que sirve como un identificador no único. La denominación debe ser descriptiva y sin espacios, usar guiones o guiones bajos.show_settings_on_create Es un parámetro booleano y autodescriptivo..categoría es muy importante. Si desea agrupar sus elementos personalizados dentro de una pestaña del menú personalizado en el menú de elementos de Visual Composer, debe agregar una categoría personalizada. Si quieres incluir elementos en un existente categoría usa el nombre de esa pestaña del menú existente: 
icono es parecido a clase. Agregamos un nombre de icono para que podamos diseñar el shortcode en el menú de Visual Composer. Por ejemplo:i.icon-separator, .nz-sep .vc_element-icon background-image: url (... /images/shortcodes/sep.png )!important;
descripción agrega una pequeña descripción a su elemento personalizado. Los usuarios verán esto.js_view Es un parámetro muy importante. Cuando tiene elementos que comprenden componentes primarios y secundarios (por ejemplo, cuadros de contenido, que tienen un contenedor principal, elementos primarios y secundarios, donde los elementos primarios 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 agregarán a su elemento personalizado. Se comporta de manera similar a la vc_add_params () función, pero anidada en el vc_map () función.Los elementos de contenedor con elementos secundarios requieren alguna configuración específica antes de agregar. En el vc_map () Necesitamos agregar un par de parámetros más para hacer de nuestros elementos un contenedor o el elemento secundario de otro elemento..
Por ejemplo, digamos que queremos agregar un nuevo elemento "Casillas de contenido". Nuestro elemento de cuadro de contenido consta de dos partes:
Un cuadro de contenido puede tener elementos de cuadro hijo ilimitados. Así que tenemos dos problemas para resolver:
Para evitar la mayor confusión posible, echemos un vistazo a un elemento existente. En nuestro tema Focuson tenemos un elemento de "Cuadros de contenido", con dos parámetros adicionales de particular interés:
"as_parent" => array ('only' => 'nz_box')Recuerda el base parámetro de nuestro vc_map () ¿función? Adjunto as_parent, estamos registrando el nz_content_box elemento como padre solamente para nz_box elemento hijo.
"js_view" => 'VcColumnView'
Cuando js_view se establece en VcColumnView Visual Composer agrega funcionalidad de IU adicional al elemento en el editor, por lo que podemos agregar un nuevo elemento secundario.
En el mismo sentido, nuestra nz_box El código del elemento tiene un parámetro adicional:
"as_child" => array ('only' => 'nz_content_box'),Con as_child estamos registrando el nz_box Elemento de niño, pero solamente para nz_content_box elemento padre.
Si ahora visita el menú de Visual Composer y hace clic en el nuevo agregado Caja de contenido Elemento, ya verás… no está funcionando. No se ha agregado ninguna funcionalidad padre / hijo, porque todavía hay una cosa que debemos hacer: necesitamos extender a las clases:
WPBakeryShortCodesContainerWPBakeryShortCodeLa primera clase es responsable de los elementos principales, la segunda es responsable de los elementos secundarios. Entonces, justo después de la función de acción agregar:
if (class_exists ('WPBakeryShortCodesContainer')) clase WPBakeryShortCode_nz_Content_Box extiende WPBakeryShortCodesContainer Como recordará, la base del elemento principal del cuadro de contenido era nz_content_box, este nombre también debe estar presente en el nombre de la clase que extiende la WPBakeryShortCodesContainer clase. En nuestro caso el nuevo nombre de clase es WPBakeryShortCode_nz_Content_Box.
if (class_exists ('WPBakeryShortCode')) clase WPBakeryShortCode_nz_Box extiende WPBakeryShortCode Lo mismo es cierto para el elemento hijo. El nombre base era nz_box y el nuevo nombre de la clase será WPBakeryShortCode_nz_Box.
Como sea que nombre su base de elementos, debe estar presente en el nuevo nombre de clase.
Ahora, si echas un vistazo al editor de la página una vez más, verás que el nuevo elemento del cuadro de contenido tiene funcionalidad hijo / padre.
Después del arduo trabajo podemos cosechar los frutos de nuestro trabajo. Echa un vistazo a la página principal de Focuson Theme. Vamos a construir esa página de inicio con Visual Composer.
La estructura se puede dividir en varias secciones:
Recrear esto no es más que el trabajo de un momento con Visual Composer.
Envolveremos cada bloque dentro del elemento separado "Fila" con al menos un elemento "Columna". Como comentamos, esta es la estructura mínima y requerida de las páginas de Visual Composer..
El tema Focuson ha integrado el Revolution Slider. El control deslizante no se agrega con Visual Composer, sin embargo, una vez que instale Revolution Slider y Visual Composer, notará un nuevo elemento "Revolution deslizador". Este es un complemento gratuito del control deslizante Revolution, y con ese elemento puede colocar un control deslizante en la página, incluso si su tema no está integrado con Visual Composer.
¿Recuerdas el ejemplo del elemento "Cajas de contenido"? Podemos crear cuadros de contenido sorprendentes con nuestro elemento personalizado:
En esta sección utilizamos
Casi todos los elementos aquí son personalizados añadidos.
Para los contadores utilizamos las opciones de fondo de fila (imagen y color) para la estética. Todas estas opciones son personalizadas añadidas desde Ninzio. Ponemos el elemento personalizado de contador dentro de esa fila de estilo.
Con las columnas de Visual Composer podemos agregar contenido de doble columna:
Casi todos estos elementos se agregan a la medida, solo el elemento "Encabezado personalizado" viene como predeterminado con Visual Composer. En el editor de back-end parece asimétrico, pero en el front-end verá una estructura de aspecto agradable. La gestión de contenido no se trata simplemente de llenar páginas, también es un proceso lógico y creativo. Debe tener en cuenta las dimensiones de las imágenes y el texto, y considerar su aspecto 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 Opciones de respuesta pestaña donde puede ajustar el tamaño de la columna dependiendo de los grupos de dispositivos.
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..
Este es un elemento adicional de Ninzio; un carrusel de miembros del equipo.
De nuevo aquí no hay nada inusual; un elemento de fila ordinario 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 la fila, por lo que la columna de la derecha aquí está vacía..
También hemos creado un elemento personalizado para agregar testimonios. De nuevo, nada inusual en el juego aquí.
Y la última sección es logos de patrocinadores. Es un carrusel de logotipos dentro de una fila con un color de fondo gris. Este elemento también es agregado a la medida..
¡Eso es! Ahora sabe todo lo que se necesita para integrar Visual Composer con su tema y crear páginas de forma rápida y sencilla. Como recurso para estudios posteriores, le sugiero que eche un vistazo a la página wiki oficial de Visual Composer. Si tiene alguna pregunta, no dude en dejar un comentario a continuación.!
