En la parte 1 de la serie WordPress Theme Customizer mencioné que para interactuar con Theme Customizer necesitas cargar $ wp_customize objeto, que es una instancia de WP_Customize_Manager clase. Para hacer eso, debes usar personalizar_registro gancho de acción:
add_action( 'customize_register', 'my_theme_customize_register' );
function my_theme_customize_register( $wp_customize ) {
// Interacting with $wp_customize object
}
Puede colocar este código en el functions.php de su tema o en un archivo incluido en él.
Agregar o eliminar elementos del Personalizador de temas (secciones, configuraciones y controles)
Una vez que haya cargado $ wp_customize objeto, puede usar cualquiera de sus métodos para agregar, obtener o eliminar configuraciones, controles y secciones en él (add_setting, get_setting, remove_setting, add_control… entiendes el punto).
Entonces, si quieres obtener o retirar una sección, control o configuración, todo lo que necesita es su ID. Esta línea eliminará la sección Colores (colóquela dentro de la función my_theme_customize_register del primer fragmento de código):
$wp_customize->remove_section( 'colors' );
Agregar una sección, control o configuración es ligeramente diferente porque requiere algunos parámetros más. No los revisaré todos aquí por dos razones:
- Ese no es realmente el propósito de esta serie, crearemos un modelo repetitivo del Personalizador de temas que puede colocar en su tema en su lugar
- Alex Mansfield ya lo cubrió en su monstruo de 6000 palabras de un Tutorial del personalizador de temas que todo desarrollador de temas de WordPress debe leer y luego twittear (en serio, si aún no lo ha hecho, lea ahora).
Pero aún así, echemos un vistazo a cómo puede agregar su propia configuración con un control en una nueva sección del Personalizador de temas, así como algunos de los argumentos. Dado que es mucho más fácil trabajar con ejemplos reales, esto es lo que buscamos:
- Una nueva sección, denominada «Diseño»
- Una nueva configuración que almacena el diseño de su tema.
- Un nuevo radiocontrol con dos opciones: barra lateral a la izquierda y barra lateral a la derecha
Lo primero que debe agregar al personalizador de temas es la sección «Diseño»:
$wp_customize->add_section(
// ID
'layout_section',
// Arguments array
array(
'title' => __( 'Layout', 'my_theme' ),
'capability' => 'edit_theme_options',
'description' => __( 'Allows you to edit your theme's layout.', 'my_theme' )
)
);
No intente verlo en el personalizador todavía, una sección no se mostrará a menos que tenga una configuración y un control agregado. Así que agreguemos ambos:
$wp_customize->add_setting(
// ID
'my_theme_settings[layout_setting]',
// Arguments array
array(
'default' => 'right-sidebar',
'type' => 'option'
)
);
$wp_customize->add_control(
// ID
'layout_control',
// Arguments array
array(
'type' => 'radio',
'label' => __( 'Theme layout', 'my_theme' ),
'section' => 'layout_section',
'choices' => array(
'left-sidebar' => __( 'Left sidebar', 'my_theme' ),
'right-sidebar' => __( 'Right sidebar', 'my_theme' )
),
// This last one must match setting ID from above
'settings' => 'my_theme_settings[layout_setting]'
)
);
Suponiendo que lea el tutorial de Alex y / o las páginas del Codex, solo hay un parámetro en la matriz de argumentos add_setting, ‘tipo’, en el que me gustaría centrarme. Tiene dos posibilidades aquí, ‘opción’ y ‘theme_mod’ y puede recuperarlas usando get_option y get_theme_mod, respectivamente. Siempre uso ‘opción’ simplemente porque te permite serializar los valores de configuración de tu tema dándoles ID como my_theme_settings[setting_1], my_theme_settings[setting_2] etc. De esa manera, todos los valores se almacenarán como una entrada de base de datos en su tabla wp_options.
Y finalmente, después de agregar esos dos fragmentos de código para funcionar, se enganchó a personalizar_registro gancho de acción (primer fragmento de código en esta publicación), el Personalizador de temas se ha personalizado:
Uso de los valores de configuración del Personalizador de temas en su tema
Una vez que haya dado a sus usuarios la capacidad de almacenar esta configuración, puede tomar su valor, conectarse a body_class filtro de gancho y agréguelo a la matriz de clases de cuerpo existentes:
add_filter( 'body_class', 'my_theme_body_classes' );
function my_theme_body_classes( $classes ) {
/*
* Since we used 'option' in add_setting arguments array
* we retrieve the value by using get_option function
*/
$my_theme_settings = get_option( 'my_theme_settings' );
$classes[] = $my_theme_settings['layout_setting'];
return $classes;
}
Esto agregará .left-sidebar o .right-sidebar a la variedad de clases de cuerpo en su tema. Al usar estas dos clases en el archivo style.css de su tema, podrá crear dos diseños diferentes. Por ejemplo:
/* Sidebar on the right is default layout */
#content {
float: left;
width: 60%;
}
#sidebar {
float: right;
width: 30%;
}
/* Using .left-sidebar class to override default layout */
.left-sidebar #content {
float: right;
}
.left-sidebar #sidebar {
float: left;
}
Lo mejor de todo es que, gracias al Personalizador de temas de WordPress, los usuarios pueden obtener una vista previa de ambos diseños antes de guardar cualquier cosa. ¡Toma eso, páginas de configuración de temas!
Resumen y lectura adicional
TL; La versión DR de esta publicación sería algo como esto: Puede obtener el objeto $ wp_customize y luego agregar algo (sección, configuración o control) o eliminarlo. Todo lo demás se reduce a los parámetros de configuración.
La tercera parte es donde esta serie se vuelve interesante, ya que comenzaremos a automatizar todo el proceso y a trabajar en Theme Customizer Boilerplate que puede colocar en su tema y comenzar a usar de inmediato. ¡Manténganse al tanto!