¿Cómo crear módulos de Visual Composer?

Implementamos Visual Composer y hemos desarrollado ShortCodes customizados para el proyecto WordPress de nuestro cliente ¿No sería genial incorporar estos shortcodes como módulos en el  Visual Composer? De esa forma el cliente no tiene que estar acordándose de códigos ni parámetros. Veamos cómo implementarlos.

Elementos de Visual Composer
Elementos básicos de Visual Composer

Si aún no sabes cómo generar un shortcode te invito a que visites mi artículo anterior «¿Cómo crear shortcodes en WordPress?» para que veas paso a paso cómo desarrollarlos.

¿Qué shortcode implementaremos?

Vamos a utilizar el mismo ejemplo del artículo «¿Cómo crear shortcodes en WordPress?«. Este shortcode, al que llamamos sc-textbox, implementa un texto al que podíamos especificar los siguientes campos:

  • Color de texto.
  • Color de fondo.
  • Tamaño de la fuente

Para utilizar el shortcode el usuario  debía escribir un código como el siguiente:

[sc-textbox text-color="#FFFF00" background-color="#000000" font-size="35"]Lorem Ipsum[/sc-textbox]

Para los que trabajamos a diario con WordPress este código puede resultarnos muy sencillo, pero puede no serlo para muchísimas otras personas. Por eso hemos decidido hacer un módulo en Visual Composer para que el usuario pueda completar estos campos a golpe de clics.

Os dejo el código PHP con el shortcode:

/**
 * Función que implementa el shortcode [sc-textbox]
 */
function sctextbox_callback( $atts, $content = null ) {
    
    // Genero los valores por defecto de los parámetros
    $params = shortcode_atts( array(
                                'text-color'        => '#000000',
                                'background-color'  => '#ffffff',
                                'font-size'  		=> '20',
                            ), $atts );
    
    
    // Genero el string con estilos en línea
    $style = "style= 'color:{$params['text-color']}; background-color:{$params['background-color']}; font-size:{$params['font-size']}px;'";

    // Aplico el texto y el stilo a la etiqeta

return »

{$content}

";
}
add_shortcode( 'sc-textbox', 'sctextbox_callback' );

Creando el módulo en Visual Composer

Para crear el módulo tendremos que agregar nuestro código PHP en el functions.php asociado al hook vc_before_init de Visual Composer.

function create_vc_sctextbox() {
   /**
   * 	Aquí pondremos el código para generar
   *	el módulo de Visual Composer
   */
   
}
add_action( 'vc_before_init', 'create_vc_sctextbox' );

Ahora sí tenemos todo listo para comenzar a configurar nuestro nuevo módulo de Visual Composer. Para ello utilizaremos la función vc_map() que acepta como parámetro un array al que podemos especificar los detalles del nuevo elemento. Agrego al código PHP los números de líneas para explicar a continuación la funcionalidad de cada parámetro:

function create_vc_sctextbox() {
   /**
   * 	Aquí pondremos el código para generar
   *	el módulo de Visual Composer
   */
   vc_map([
        "category" => "Cliente",
        "name" => "Custom Textbox",
        "base" => "sc-textbox",
        "description" => "Este módulo crea un texto con color, fondo y tamaño personalizado",
        "show_settings_on_create" => true,
        "class" => "vc-project-details-block",
        "icon" => "icon-wpb-slideshow",
        "params" => array(

                            // Campo para el color del texto
                            array(
                                "heading"       => "Color de texto",
                                "type"          => "colorpicker",
                                "param_name"    => "text-color",
                                "description"   => "Elige el color del texto",
                                "value"         => "#000000",
                                "admin_label"   => true
                            ),


                            // Campo para el color del fondo
                            array(
                                "heading"       => "Color de fondo",
                                "type"          => "colorpicker",
                                "param_name"    => "background-color",
                                "description"   => "Elige el color del fondo",
                                "value"         => "#ffffff",
                                "admin_label"   => true
                            ),


                            // Campo para el tamaño del texto
                            array(
                                "heading"           => "Tamaño de la tipografía",
                                "type"              => "textfield",
                                "param_name"        => "font-size",
                                "description"       => "Elige el tamaño del texto",
                                "value"             => "16",
                                "admin_label"       => true
                            ),

                        )
   ]);

}
add_action( 'vc_before_init', 'create_vc_sctextbox' );

Analizando el bloque de código

  • Línea 06: Llamamos a la función vc_map() y pasamos un array como parámetro.
  • Línea 07: El parámetro category nos permite agregar el módulo en una categoría existente (Content, Social, Structure) o crear una nueva a partir de un string. En este caso hemos creado la categoría «Cliente» para agrupar este y los demás shortcodes que creemos para el proyecto.
categoría en visual composer
Nueva categoría de elementos en Visual Composer.
  • Línea 08: El parámetro name especificamos el nombre de nuestro módulo de Visual Composer.
  • Línea 09: En el parámetro base debemos especificar el nombre del shortcode que utilizaremos, en este caso sc-textbox.
  • Línea 10: En el parámetro description especificamos una breve descripción de lo que realiza este módulo.
  • Línea 11: Definimos como true el parámetro show_settings_on_create para que al arrastrarlo a una columna despliegue el cuadro de diálogo con las demás configuraciones.
  • Línea 12: Podemos definir una clase customizada que se agregará al HTML del módulo (útil si tenemos que aplicar algún estilo CSS o alguna funcionalidad javascript).
  • Línea 13: Al parámetro icon podemos especificarle una URL o bien una clase con el icono a mostrar en el cuadro de diálogo de VIsual Composer.
Módulo Visual Composer explicado
Ejemplo del nuevo módulo creado y las referencias a las respectivas líneas del código PHP.
  • Línea 14: En el parámetro params debemos especificar los campos que puede editar el usuario para utilizar este módulo.
    • De la línea 17 a la 24 declaramos los parámetros para el campo «Color de texto».
    • De la línea 28 a la 35 declaramos los parámetros para el campo «Color de fondo».
    • De la línea 39 a la 46 declaramos los parámetros para el campo «Tamaño del texto»
Módulo Visual Composer con campos personalizados
Módulo Visual Composer con campos personalizados

Parámetros de los campos

Detallo a continuación los parámetros utilizados para registrar los campos del ejemplo.

  • heading: Utilizaremos este parámetro para indicar el título del campo.
  • param_name: Especifica en este parámetro el nombre del parámetro del shortcode al que debe aplicarse el valor.
  • description: Agrega una pequeña descripción para que el usuario qué valor tiene que especificar en el campo.
  • value: ¿El campo tiene algún valor por defecto? Éste es el parámetro para especificarlo.
  • admin_label: Si este parámetros es true, se mostrarán los valores del campo en el elemento del visual composer (fuera del cuadro de diálogo).

    Visual Composer admin_label
    En caso de que el parámetro admin_label es se muestran los valores de los campos en el elemento.
  • type: Este campo es el más importante ya que en él especificamos qué tipo de información vamos a guardar.
    Los valores más comunes son:

    • textarea_html: el WYSIWYG estándar de WordPress.
    • textfield: una simple caja de texto como la que hemos utilizado para el campo «tamaño de la tipografía».
    • textarea: un campo textarea.
    • dropdown: un selector de opciones que pasamos como parámetro a traves de un array.
    • attach_image: este tipo de campo nos permite cargar o seleccionar una imagen de nuestra librería.
    • posttypes: este campo nos muestra los «post types» disponibles con checkboxes para permitir su selección.
    • colorpicker: un selector de colores como el que hemos utilizado para los campos «Color del texto» y «Color de fondo».
    • textarea_raw_html: es un textarea en el que podemos agregar código HTML.
    • checkbox: campo de checkbox que puede tener 1 o más valores.

Conclusión

Siguiendo estos pasos podrás generar todos los módulos de Visual Composer que desees para los shortcodes de tu proyecto. Por fortuna la documentación de Visual Composer es excelente, podrás seguir ahondando sobre la función vc_map() y mucho más en su página web.


¿Qué te pareció el artículo?
No molaPobreMolaMuy bueno¡Excelente! (4 votos, promedio: 5,00 de 5)
Cargando…
Mauricio Gelves
Mauricio Gelves es Lic. en Informática y trabaja como Consultor Web Freelance con su marca personal MauGelves. Se especializó en WordPress para ofrecer soluciones personalizadas y rentables a medianas y largas empresas. Es Nómade Digital desde el año 2015, actividad que combina sus dos principales pasiones: la informática y los viajes, y refleja sus experiencias a través de sus hobbies audiovisuales en Instagram y YouTube.
10 Pasos para ser Freelance - eBook Gratuito

10 pasos para convertirte en Freelance

Descarga en forma totalmente gratuita mi eBook en donde explico los 10 pasos que he dado para convertirme en Freelance.

Ingresa tu email y recibe en tu bandeja de correo el enlace para descargarte el eBook.

(Te doy mi palabra que solo enviaré un email al mes con todas mis novedades)


5 thoughts on “¿Cómo crear módulos de Visual Composer?”

  1. Hola,

    he seguido todos los pasos y cuando guardo el archivo, y recargo la pagina web, se queda en blanco.

    He mirado el archivo functions.php para ver cual es el error y me dice que una de las lineas finales, la que contiene ]); tiene un sintaxis de error .

    Concretamente el error dice asi:

    Syntax error, unexpected ‘]’, expecting ‘)’

    He probado a cambiar varias veces, pero entonces siempre me salta con otro error.

    Cual puede ser el problema?

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

× ¿Puedo ayudarte?