El WordPress Customizr ha ido adquiriendo más y más relevancia en las últimas versiones de WordPress, desde las últimas tres se ha ido aumentando la importancia de este apartado de WordPress.
Para la gente menos hábil con el Escritorio de WordPress el Customizr viene muy bien para personalizar la apariencia de nuestro WordPress. El personalizador es esa parte que aparece a la izquierda de nuestra pantalla cuando entramos en la opción de Apariencia -> Personalizar o desde la barra superior de administrador cuando navegamos por la web estando logeados como tales haciendo clic en personalizar.
Cuando accedemos desde estos sitios se nos presenta la web como nosotros la veríamos desde la parte pública pero con un menú a la izquierda donde podremos seleccionar diferentes aspectos del sitio web. Lo bueno, en este caso, es que nosotros podemos añadir elementos a configurar en este área y con Genesis Framework la tarea se simplifica muy mucho.
Entendiendo el WordPress Customizr
Para añadir las propias opciones en el personalizador necesitaremos al menos el gancho customizer_register al cual engancharemos una función que se encargará de gestionar los elementos, es decir, añadirlos, añadir secciones y controles y el segundo de cargar el CSS.
add_action('customize_register', 'jiac_mi_customizer');
function jiac_mi_customizer($wp_customize) {
...
}
Dentro de esta función es donde comentaba que podíamos añadir:
Secciones: Será un apartado dentro de Personalizador, por ejemplo «Identidad del Sitio», «Migas de Pan», «Información de Contacto». En definitiva, son agrupaciones de opciones relacionadas entre sí. Para añadir secciones se usa la función $wp_customize->add_section(), para ver los parámetros que acepta lo podéis hacer en el CODEX de WordPress.
Opciones: Son las diferentes opciones que se pueden configurar dentro de una sección, para añadir opciones se ha de hacer con la función $wp_customize->add_setting($id, $args) y al igual que en el caso anterior podéis ver toda la información de la función en el CODEX de WordPress.
Controles: En tercera instancia podemos añadir controles para configurar las opciones, es decir, son el elemento HTML que se usa para configurar las opciones y se hace incorporando la función $wp_customize->add_control($id, $args) y podéis ver toda la información aquí.
Así que resumiendo, tenemos secciones donde podemos meter diferentes opciones que son controladas por un control por cada elemento de los formularios.
En el ejemplo he añadido una sección de Identidad de la Empresa.
add_action('customize_register', 'jiac_mi_customizer');
function jiac_mi_customizer($wp_customize) {
$wp_customize->add_section('identidad-empresa', array(
'title' => __('Identidad de la empresa','jiac'),
'description' => __('Aqui configuramos los datos de nuestra empresa', 'jiac'),
'priority' => 30,
));
$wp_customize->add_setting('nombre-empresa', array(
'default' => 'Mi Empresa',
'type' => 'option'
));
$wp_customize->add_control(
new WP_Customize_Control(
$wp_customize,
'nombre-empresa',
array(
'label' => __( 'Nombre', 'jiac' ),
'section' => 'identidad-empresa',
'settings' => 'nombre-empresa',
'type' => 'text'
)
)
);
}
Y aquí tenemos el resultado.
Como se puede observar es una manera bastante visual de personalizar WordPress pero más allá de esto Genesis Framework nos ayuda a gestionar el WordPress Customizr de otra manera más limpia, aunque la base sea la misma podemos hacerlo de una manera más elegante y merece la pena.
WordPress Cutomizr con Genesis Framework
Genesis Framework viene con una clase abstracta que encapsula todo lo que hemos hecho anteriormente.
abstract class Genesis_Customizer_Base {
public function __construct() {
//* Register new customizer elements
if ( method_exists( $this, 'register' ) ) {
add_action( 'customize_register', array( $this, 'register' ), 15 );
} else {
_doing_it_wrong( 'Genesis_Customizer_Base', __( 'When extending Genesis_Customizer_Base, you must create a register method.', 'genesis' ) );
}
//* Customizer scripts
if ( method_exists( $this, 'scripts' ) ) {
add_action( 'customize_preview_init', 'scripts' );
}
}
protected function get_field_name( $name ) {
return sprintf( '%s[%s]', $this->settings_field, $name );
}
protected function get_field_id( $id ) {
return sprintf( '%s[%s]', $this->settings_field, $id );
}
protected function get_field_value( $key ) {
return genesis_get_option( $key, $this->settings_field );
}
}
Como las clases abstractas no se pueden instanciar debemos crear en nuestro theme para Genesis una clase que herede de la que he mostrado anteriormente.
class Jiac_Customizer extends Genesis_Customizer_Base {
....
}
Si miramos la clase abstracta en su constructor registra la función interna de la clase llamada register por lo que en nuestra clase debemos crear este método que haga llamadas a otros métodos dentro de la clase que se encargarán de incorporar el código del WordPress Customizr que hemos puesto antes u otro, en este ejemplo vamos a hacerlo de la latitud y longitud que nos puede servir para incorporarlo en, por ejemplo, el footer.
Si incorporamos esta clase e incluimos el fichero en el fichero functions.php y recargamos el WordPress Customizr tendremos los nuevos datos incorporados.
class Jiac_Customizer extends Genesis_Customizer_Base {
public function register($wp_customize) {
$this->registrar_coordenadas($wp_customize);
}
function registrar_coordenadas($wp_customize) {
$wp_customize->add_section('ubicacion-empresa', array(
'title' => __('Ubicacion de la empresa','jiac'),
'description' => __('Aqui configuramos los datos de ubicacion de nuestra empresa', 'jiac'),
'priority' => 30,
));
$wp_customize->add_setting('latitud-empresa', array(
'default' => '',
'type' => 'option'
));
$wp_customize->add_setting('longitud-empresa', array(
'default' => '',
'type' => 'option'
));
$wp_customize->add_control(
new WP_Customize_Control(
$wp_customize,
'latitud-empresa',
array(
'label' => __( 'Latitud', 'jiac' ),
'section' => 'ubicacion-empresa',
'settings' => 'latitud-empresa',
'type' => 'text'
)
)
);
$wp_customize->add_control(
new WP_Customize_Control(
$wp_customize,
'longitud-empresa',
array(
'label' => __( 'Longitud', 'jiac' ),
'section' => 'ubicacion-empresa',
'settings' => 'longitud-empresa',
'type' => 'text'
)
)
);
}
}
add_action( 'init', 'jiac_customizer_init' );
function jiac_customizer_init() {
global $jiac_customizer;
$flex_customizer = new Jiac_Customizer;
}
Y tal como he mostrado anteriormente aquí está el resultado.
Cambios en tiempo real
Una de las ventajas del WordPress Customizr es la vista en tiempo real de los cambios. En este caso para el ejemplo he llamado a la opción en el hook genesis_after_header y he mostrado la latitud y la longitud.
add_action('genesis_after_header', 'jiac_ubicacion');
function jiac_ubicacion() {
if (get_option('latitud-empresa') != '' && get_option('longitud-empresa') != '') {
echo 'Latitud ' . get_option('latitud-empresa');
echo ' y Lonfitud ' . get_option('longitud-empresa');
}
}
Y así concluyo esta entrada después de escribir un buen rato. Sin duda este tema da para mucho más y se puede profundizar muchísimo pues esto es la punta del iceberg pero al menos hemos aprendido un uso básico del personalizador de WordPress.
¿Te ha sido útil?
