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 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 etiqetareturn »
{$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.
Nueva categoría de elementos en Visual Composer.
- Línea 08: El parámetro
nameespecificamos el nombre de nuestro módulo de Visual Composer. - Línea 09: En el parámetro
basedebemos especificar el nombre del shortcode que utilizaremos, en este casosc-textbox. - Línea 10: En el parámetro
descriptionespecificamos una breve descripción de lo que realiza este módulo. - Línea 11: Definimos como
trueel parámetroshow_settings_on_createpara 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
iconpodemos especificarle una URL o bien una clase con el icono a mostrar en el cuadro de diálogo de VIsual Composer.
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
paramsdebemos 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
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).
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.
