Download - Sacale partido al personalizador
![Page 1: Sacale partido al personalizador](https://reader038.vdokumen.com/reader038/viewer/2022102917/587b76f61a28abc62f8b699b/html5/thumbnails/1.jpg)
SÁCALE PARTIDOAL PERSONALIZADOR
Pablo López@desarrollowp
![Page 2: Sacale partido al personalizador](https://reader038.vdokumen.com/reader038/viewer/2022102917/587b76f61a28abc62f8b699b/html5/thumbnails/2.jpg)
¿QUÉ ES?Es un framework para previsualizar configuraciones en nuestro sitio (v 3.4)
![Page 3: Sacale partido al personalizador](https://reader038.vdokumen.com/reader038/viewer/2022102917/587b76f61a28abc62f8b699b/html5/thumbnails/3.jpg)
¿PARA QUÉ SE UTILIZA?En el personalizador encontramos por defecto opciones de configuración como:- Identidad del sitio (título, descripción, logo…)- Gestión de Menús- Gestión de Widgets- Portada
Muchos temas y plugins utilizan el personalizador para ofrecer al usuario opciones de configuración propias:- Colores y estilos- API keys- Layouts- Claims
![Page 4: Sacale partido al personalizador](https://reader038.vdokumen.com/reader038/viewer/2022102917/587b76f61a28abc62f8b699b/html5/thumbnails/4.jpg)
¿DE QUÉ CONSTA?4 Objetos: Panels, Sections, Controls y Settings
![Page 5: Sacale partido al personalizador](https://reader038.vdokumen.com/reader038/viewer/2022102917/587b76f61a28abc62f8b699b/html5/thumbnails/5.jpg)
PANELSLos Panels son elementos contenedores de Sections. Un nivel adicional de jerarquía
![Page 6: Sacale partido al personalizador](https://reader038.vdokumen.com/reader038/viewer/2022102917/587b76f61a28abc62f8b699b/html5/thumbnails/6.jpg)
SECTIONSLas Sections son contenedores (UI) para Controls
![Page 7: Sacale partido al personalizador](https://reader038.vdokumen.com/reader038/viewer/2022102917/587b76f61a28abc62f8b699b/html5/thumbnails/7.jpg)
CONTROLSSon elementos (UI) para establecer datos. Inputs de diferentes tipos
![Page 8: Sacale partido al personalizador](https://reader038.vdokumen.com/reader038/viewer/2022102917/587b76f61a28abc62f8b699b/html5/thumbnails/8.jpg)
SETTINGSEs la asociación del Control con el dato que se almacena en BBDD.
![Page 9: Sacale partido al personalizador](https://reader038.vdokumen.com/reader038/viewer/2022102917/587b76f61a28abc62f8b699b/html5/thumbnails/9.jpg)
UN POCO DE CÓDIGO…Necesitamos crear una función en el archivo functions.php de nuestro tema o en nuestro plugin, y añadirla al hook ‘customize_register’
function themeslug_customize_register( $wp_customize ) {
// Do stuff with $wp_customize, the WP_Customize_Manager object.
}add_action( 'customize_register', 'themeslug_customize_register' );
Importante: Es recomendable el uso de prefijos para cualquier ID de los objetos que vamos a crear a continuación para evitar conflictos
![Page 10: Sacale partido al personalizador](https://reader038.vdokumen.com/reader038/viewer/2022102917/587b76f61a28abc62f8b699b/html5/thumbnails/10.jpg)
MÉTODOSPara cada objeto: add_, get_ y remove_
$wp_customize->add_panel();$wp_customize->get_panel();$wp_customize->remove_panel(); $wp_customize->add_section();$wp_customize->get_section();$wp_customize->remove_section(); $wp_customize->add_setting();$wp_customize->get_setting();$wp_customize->remove_setting(); $wp_customize->add_control();$wp_customize->get_control();$wp_customize->remove_control();
![Page 11: Sacale partido al personalizador](https://reader038.vdokumen.com/reader038/viewer/2022102917/587b76f61a28abc62f8b699b/html5/thumbnails/11.jpg)
PRIORIDADPodremos establecer el orden de nuestros elementos teniendo en cuenta que por defecto:
![Page 12: Sacale partido al personalizador](https://reader038.vdokumen.com/reader038/viewer/2022102917/587b76f61a28abc62f8b699b/html5/thumbnails/12.jpg)
THEME_MODS VS OPTIONS¿Opciones del tema u Opciones generales?
![Page 13: Sacale partido al personalizador](https://reader038.vdokumen.com/reader038/viewer/2022102917/587b76f61a28abc62f8b699b/html5/thumbnails/13.jpg)
AÑADIENDO UN PANELUsando el método add_panel
$wp_customize->add_panel( 'panel_id', array( 'priority' => 160, 'capability' => 'edit_theme_options', 'theme_supports' => '', // Rarely needed 'title' => __( 'Título Panel', 'your_textdomain' ), 'description' => __( 'Descripción Panel', 'your_textdomain' ),) );
![Page 14: Sacale partido al personalizador](https://reader038.vdokumen.com/reader038/viewer/2022102917/587b76f61a28abc62f8b699b/html5/thumbnails/14.jpg)
AÑADIENDO UN SECTIONUsando el método add_section
$wp_customize->add_section( 'section_id', array( 'panel' => 'panel_id', // Not typically needed. 'priority' => 160, 'capability' => 'edit_theme_options', 'theme_supports' => '', // Rarely needed. 'title' => __( 'Título Section', 'your_textdomain' ), 'description' => __( 'Descripción Section', 'your_textdomain' ),) );
![Page 15: Sacale partido al personalizador](https://reader038.vdokumen.com/reader038/viewer/2022102917/587b76f61a28abc62f8b699b/html5/thumbnails/15.jpg)
AÑADIENDO UN SETTINGUsando el método add_setting. Estableceremos el nombre y el tipo de dato que guardaremos en BBDD. Podremos establecer un valor por defecto y además validar y sanitizar el dato antes de guardarlo
$wp_customize->add_setting( 'setting_id', array( 'type' => 'theme_mod', // or 'option' 'capability' => 'edit_theme_options', 'theme_supports' => '', // Rarely needed. 'default' => '', // Ej: #000000 'transport' => 'refresh', // or postMessage 'sanitize_callback' => '', // Ej: ‘sanitize_hex_color’ 'sanitize_js_callback' => '', // Basically to_json.) );
![Page 16: Sacale partido al personalizador](https://reader038.vdokumen.com/reader038/viewer/2022102917/587b76f61a28abc62f8b699b/html5/thumbnails/16.jpg)
AÑADIENDO UN CONTROLUsando el método add_control. Al añadir el control lo asociamos al Setting. También indicamos a que Section pertenece, así como el tipo, título, descripción, etc…
$wp_customize->add_control( 'setting_id', array( 'type' => 'date', 'priority' => 10, // Within the section. 'section' => 'section_id', // Required, core or custom. 'label' => __( 'Fecha', 'your_textdomain' ), 'description' => __( 'Descripción', 'your_textdomain' ), 'input_attrs' => array( 'class' => 'my-custom-class-for-js', 'style' => 'border: 1px solid #900', 'placeholder' => __( 'dd/mm/yyyy', 'your_textdomain' ), ), 'active_callback' => 'is_front_page',) );
![Page 17: Sacale partido al personalizador](https://reader038.vdokumen.com/reader038/viewer/2022102917/587b76f61a28abc62f8b699b/html5/thumbnails/17.jpg)
TIPOS DE CONTROLSPodemos usar los siguientes tipos de controles:
• HTML inputs: text, hidden, number, range, url, tel, email, search, time, date, datetime, y week (Dependiendo de la compatibilidad del navegador)
• checkbox• textarea• radio (las opciones las pasaremos por el parámetro
choices)• select (las opciones las pasaremos por el parámetro
choices)• dropdown-pages• controles personalizados
![Page 18: Sacale partido al personalizador](https://reader038.vdokumen.com/reader038/viewer/2022102917/587b76f61a28abc62f8b699b/html5/thumbnails/18.jpg)
TIPOS DE CONTROLS: EJEMPLOS$wp_customize->add_control( 'setting_id', array( 'type' => 'range', 'section' => 'section_id', 'label' => __( 'Etiqueta', 'your_textdomain' ), 'input_attrs' => array( 'min' => 0, 'max' => 10, 'step' => 2, ),) );
$wp_customize->add_control( 'setting_id', array( 'type' => 'radio', 'section' => 'section_id', 'label' => __( 'Etiqueta', 'your_textdomain' ), 'choices' => array( 'on' => __( 'On', 'your_textdomain' ), 'off' => __( 'Off', 'your_textdomain' ), ),) );
$categories = get_categories();$cats = array();foreach($categories as $category) { $cats[$category->slug] = $category->name;}
$wp_customize->add_control( 'setting_id', array( 'type' => 'select', 'section' => 'section_id', 'label' => __( 'Etiqueta', 'your_textdomain' ), 'choices' => $cats) );
$wp_customize->add_control( 'setting_id', array( 'type' => ‘dropdown-pages', 'section' => 'section_id', 'label' => __( 'Etiqueta', 'your_textdomain' ),) );
![Page 19: Sacale partido al personalizador](https://reader038.vdokumen.com/reader038/viewer/2022102917/587b76f61a28abc62f8b699b/html5/thumbnails/19.jpg)
WP_CUSTOMIZE_COLOR_CONTROL
$wp_customize->add_control( new WP_Customize_Color_Control ( $wp_customize, 'setting_id', array( 'label' => __( 'Etiqueta', 'your_textdomain' ), 'section' => 'section_id', // Required, core or custom.) );
![Page 20: Sacale partido al personalizador](https://reader038.vdokumen.com/reader038/viewer/2022102917/587b76f61a28abc62f8b699b/html5/thumbnails/20.jpg)
WP_CUSTOMIZE_MEDIA_CONTROL
$wp_customize->add_control( new WP_Customize_Media_Control ( $wp_customize, 'setting_id', array( 'mime_type' => 'image', // image, audio, video, application 'label' => __( 'Etiqueta', 'your_textdomain' ), 'section' => 'section_id', // Required, core or custom.) );
![Page 21: Sacale partido al personalizador](https://reader038.vdokumen.com/reader038/viewer/2022102917/587b76f61a28abc62f8b699b/html5/thumbnails/21.jpg)
EXTENDIENDO OBJETOSPodemos crear Panels, Sections, Controls y Settings personalizados extendiendo las clases asociadas con cada objeto: WP_Customize_Panel, WP_Customize_Section, WP_Customize_Control y WP_Customize_Setting:
class WP_New_Menu_Customize_Control extends WP_Customize_Control { public $type = 'new_menu';
public function render_content() {?> <button class="button button-primary" id="create-new-menu-submit" tabindex="0"><?php _e( 'Create Menu', 'your_textdomain' ); ?></button>; <?php }}
![Page 22: Sacale partido al personalizador](https://reader038.vdokumen.com/reader038/viewer/2022102917/587b76f61a28abc62f8b699b/html5/thumbnails/22.jpg)
VALIDACIONESEl personalizador nos permite validar y sanitizar nuestras opciones antes de guardar en base de datos$wp_customize->add_setting( 'setting_id', array(
'sanitize_callback' => 'absint', 'validate_callback' => 'validate_established_year') );function validate_established_year( $validity, $value ) { $value = intval( $value ); if ( empty( $value ) || ! is_numeric( $value ) ) { $validity->add( 'required', __( 'Año no válido', 'your_textdomain' ) ); } elseif ( $value < 1900 ) { $validity->add( 'year_too_small', __( 'Menor de 1900', 'your_textdomain' ) ); } elseif ( $value > gmdate( 'Y' ) ) { $validity->add( 'year_too_big', __( 'Mayor que actual', 'your_textdomain' ) ); } return $validity;}
![Page 23: Sacale partido al personalizador](https://reader038.vdokumen.com/reader038/viewer/2022102917/587b76f61a28abc62f8b699b/html5/thumbnails/23.jpg)
MULTI-IDIOMATanto WPML como Polylang disponen de la función icl_get_languages para obtener los idiomas activos de un sitioArray (
[es] => Array ( [id] => 2 [active] => 1 [native_name] => Español [missing] => 1 [translated_name] => [language_code] => es [country_flag_url] => http://wcs16.com/wp-content/plugins/polylang/flags/es.png [url] => http://wcsantander16.com/es/ ))
![Page 24: Sacale partido al personalizador](https://reader038.vdokumen.com/reader038/viewer/2022102917/587b76f61a28abc62f8b699b/html5/thumbnails/24.jpg)
MULTI-IDIOMAfunction themeslug_customize_register( $wp_customize ) { $langs = (function_exists('icl_get_languages')) ? icl_get_languages('skip_missing=N') : array( 'es' => array( 'language_code' => ‘es’));
$wp_customize->add_section( 'section_id', array( 'title' => __( 'Título Section', 'your_textdomain' ), 'description' => __( 'Descripción Section', 'your_textdomain' ), ) );
foreach($langs as $lang) { $wp_customize->add_setting( 'setting_id_' . $lang['language_code'], array(
'type' => 'theme_mod', 'capability' => 'edit_theme_options',) );
$wp_customize->add_control( 'setting_id_' . $lang['language_code'], array( 'type' => 'text', 'section' => 'section_id', 'label' => __( 'Título', 'your_textdomain' ) . " " . $lang['native_name'],) );
}}add_action( 'customize_register', 'themeslug_customize_register' );
![Page 25: Sacale partido al personalizador](https://reader038.vdokumen.com/reader038/viewer/2022102917/587b76f61a28abc62f8b699b/html5/thumbnails/25.jpg)
MULTI-IDIOMA
![Page 26: Sacale partido al personalizador](https://reader038.vdokumen.com/reader038/viewer/2022102917/587b76f61a28abc62f8b699b/html5/thumbnails/26.jpg)
¡ESTO ES TODO AMIG@S!
Pablo López [email protected] Manager en VASS digital
¡Gracias por vuestra asistencia!