Cómo crear un módulo personalizado para Beaver Builder
Hoy en día, una de las formas más populares de crear un sitio de WordPress es utilizar un creador de páginas. Es tan popular que WordPress 5.0 viene con uno por defecto, Gutenberg. Con un generador de páginas, evita codificar varias plantillas para su tema de WordPress; solo tiene que crearlos como resolver un rompecabezas, arrastrando diferentes cuadros hasta que su página se vea como quiere que se vea. Gracias a este enfoque, puede crear su sitio incluso si no codifica en absoluto. No es un enfoque perfecto y tiene varios problemas, por ejemplo, una página puede tardar mucho tiempo en cargarse dependiendo de su contenido, por lo que necesitaría usar un caché, pero definitivamente es un enfoque que ahorra tiempo.
Un creador de páginas que hemos usado en varios sitios es Beaver Builder. Es ordenado, potente, fácil de aprender y comprender y, lo que es más importante, altamente personalizable. Esta es la razón principal por la que lo hemos estado usando mucho; permite modificar sus diferentes módulos o incluso crear uno propio, según sus necesidades. Gracias a esto, hemos podido implementar diseños increíbles sin (casi) ningún esfuerzo.
Creando el módulo personalizado
Para comenzar, Beaver Builder recomienda crear un complemento para administrar sus nuevos módulos personalizados. De esta manera, puede reutilizarlos en todos sus proyectos sin esfuerzo. Además, evita conflictos con otros complementos del Beaver Builder o con el propio generador de páginas.
Entonces, creemos un complemento llamado My Awesome Plugin agregando un nuevo archivo wp-content/plugins/my awesome plugin/my-awesome-plugin.php. Allí, debería agregar este código
/**
* Plugin Name: My Awesome Plugin
* Plugin URI: https://www.myawesomeplugin.com
* Description: Custom modules for the Beaver Builder Plugin.
* Version: 1.0
* Author: Swapps
* Author URI: https://swapps.com/
*/
define( 'MY_MODULES_DIR', plugin_dir_path( __FILE__ ) );
define( 'MY_MODULES_URL', plugins_url( '/', __FILE__ ) );
function my_load_module_examples() {
if ( class_exists( 'FLBuilder' ) ) {
// Include your custom modules here.
require_once 'my-awesome-module/my-awesome-module.php';
}
}
add_action( 'init', 'my_load_module_examples' );
Como puede observar, estamos agregando nuestro primer módulo llamado my-awesome-module. En my-awesome-module/my-awesome-module.php vamos a agregar el código que nos permitirá registrar y personalizar nuestro complemento. Entonces, agregue el siguiente código
<?php
class MyAwesomeModule extends FLBuilderModule {
public function __construct()
{
parent::__construct(array(
'name' => __( 'My Awesome Module', 'fl-builder' ),
'description' => __( 'A totally awesome module!', 'fl-builder' ),
'group' => __( 'My Awesome Plugin', 'fl-builder' ),
'category' => __( 'My Awesome Plugin base', 'fl-builder' ),
'dir' => MY_MODULES_DIR . 'my-awesome-module/',
'url' => MY_MODULES_URL . 'my-awesome-module/',
'icon' => 'button.svg',
'editor_export' => true, // Defaults to true and can be omitted.
'enabled' => true, // Defaults to true and can be omitted.
'partial_refresh' => false, // Defaults to false and can be omitted.
));
}
public function example_method(){
return "Hello World!";
}
}
FLBuilder::register_module( 'MyAwesomeModule', array(
'my-tab-1' => array(
'title' => __( 'Tab 1', 'fl-builder' ),
'sections' => array(
'my-section-1' => array(
'title' => __( 'Section 1', 'fl-builder' ),
'fields' => array(
'my_field_1' => array(
'type' => 'text',
'label' => __( 'Text Field 1', 'fl-builder' ),
),
'my_field_2' => array(
'type' => 'text',
'label' => __( 'Text Field 2', 'fl-builder' ),
)
)
)
)
)
) );
?>
La primera sección del código anterior define la clase que utilizará nuestro módulo. Se extiende desde FLBuilderModule, que es la clase base que Beaver Builder usa en todos sus módulos. En esta clase, configura el nombre del módulo, el icono, el grupo, etc. Además, puede definir los métodos de clase que puede usar para obtener información al representar el módulo.
La segunda sección se encarga de agregar la configuración de su módulo. Estas configuraciones son las diferentes opciones que el módulo puede ofrecer al usarlo para crear una página. Hay varios tipos de configuraciones que puede usar; puede obtener la lista completa aquí.
Una vez que agreguemos este código, podemos agregar nuestro increíble módulo desde el selector de módulos. Su configuración se verá más o menos así.
Luego, necesitamos agregar algunos html para renderizar nuestro increíble módulo. Para esto, cree un archivo my-module/includes/frontend.php y agregue el html que necesita para su módulo. Para este ejemplo, vamos a mantenerlo simple.
<div class="fl-example-text">
<h1><?php echo $settings->my_field_1; ?></h1>
<p><?php echo $settings->my_field_2; ?></p>
<span style="color:red"><?php echo $module->example_method(); ?></span>
</div>
Como puede observar, todos los campos de configuración que se registraron están disponibles utilizando el objeto $settings. Además, podemos llamar a nuestros métodos de módulos personalizados directamente usando el objeto $module. Una vez que agreguemos este código, podemos agregar nuestro módulo a nuestra página utilizando el generador de páginas. Una vez que lo guardemos, se verá así
¡Y eso es todo! ahora tenemos nuestro primer módulo personalizado. Incluso podemos agregar css, js o más html para personalizarlo y hacerlo funcionar como esperamos. Puedes encontrar la guía completa aquí
En general, Beaver Builder facilita su desarrollo al ocuparse de muchas repeticiones que puede ignorar, pero también le brinda suficientes herramientas para controlar la situación todo el tiempo en caso de que lo necesite. Además, le permite agregar sus propios módulos de una manera simple y fácil de entender. Con esto, implementar incluso el diseño más complejo en su sitio web será pan comido para usted y su equipo. Entonces, ¡pruébelo!
