Interactuando con WordPress Theme Customizer

  1. 1. Introducción al personalizador de temas de WordPress
  2. 2. Actualmente leyendo: Interactuando con WordPress Theme Customizer
  3. 3. Plantilla del personalizador de temas de WordPress
  4. 4 4. Ampliación de la plantilla del personalizador de temas de WordPress
  5. 5 5. Plantilla del personalizador de temas: opciones condicionales, temas secundarios y complementos

En la parte 1 de la serie WordPress Theme Customizer, mencioné que para interactuar con Theme Customizer debes 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 ('personalizar_registro', 'my_theme_customize_register');
function my_theme_customize_register ($ wp_customize) {

// Interactuando con el objeto $ wp_customize

}

Puede colocar este código en las funciones.php de su tema o en un archivo que se incluye desde é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 … obtienes el punto).

Entonces, si quieres obtener o eliminar 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 ('colores');

Agregar una sección, control o configuración es ligeramente diferente porque requiere algunos parámetros más. No los revisaré aquí por dos razones:

  1. Ese no es realmente el propósito de esta serie, crearemos una plantilla estándar del Personalizador de temas que puede colocar en su tema.
  2. Alex Mansfield ya lo cubrió en su monstruo de 6000 palabras de un Tutorial de personalización de temas que todo desarrollador de temas de WordPress debe leer y luego tuitear (en serio, si aún no lo ha hecho, léalo 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 control de radio 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 (
// CARNÉ DE IDENTIDAD
'layout_section',
// Matriz de argumentos
formación(
'title' => __ ('Diseño', 'my_theme'),
'capacidad' => 'edit_theme_options',
'description' => __ ('Le permite editar el diseño de su tema', 'my_theme')
)
);

No intente verlo aún en el personalizador, no se mostrará una sección a menos que tenga una configuración y un control agregados. Entonces agreguemos ambos:

$ wp_customize-> add_setting (
// CARNÉ DE IDENTIDAD
'my_theme_settings [layout_setting]',
// Matriz de argumentos
formación(
'default' => 'barra lateral derecha',
'type' => 'opción'
)
);
$ wp_customize-> add_control (
// CARNÉ DE IDENTIDAD
'layout_control',
// Matriz de argumentos
formación(
'type' => 'radio',
'label' => __ ('Diseño del tema', 'my_theme'),
'section' => 'layout_section',
'elecciones' => matriz (
'left-sidebar' => __ ('Barra lateral izquierda', 'my_theme'),
'right-sidebar' => __ ('barra lateral derecha', 'my_theme')
),
// Este último debe coincidir con la ID de configuración de arriba
'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. Aquí tiene dos posibilidades, ‘opción’ y ‘theme_mod’ y puede recuperarlas usando get_option y get_theme_mod, respectivamente. Siempre uso la “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] 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ó personalizar_registro gancho de acción (primer fragmento de código en esta publicación), el Personalizador de temas se ha personalizado:

Nueva sección agregada al Personalizador de temas

Nueva sección agregada al Personalizador de temas

Usar 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 y conectarlo clase_cuerpo filtrar gancho y agregarlo a la matriz de clases de cuerpo existentes:

add_filter ('body_class', 'my_theme_body_classes');
function my_theme_body_classes ($ classes) {

/ *
* Dado que usamos 'opción' en la matriz de argumentos add_setting
* recuperamos el valor utilizando la función get_option
* /
$ my_theme_settings = get_option ('my_theme_settings');

$ classes [] = $ my_theme_settings ['layout_setting'];

devolver $ clases;

}

Esto agregará .left-sidebar o .right-sidebar a la matriz de clases de cuerpo en su tema. Al utilizar estas dos clases en el archivo style.css de su tema, podrá crear dos diseños diferentes. Por ejemplo:

/ * La barra lateral a la derecha es el diseño predeterminado * /
#contenido {
flotador izquierdo;
ancho: 60%;
}
#sidebar {
flotar derecho;
ancho: 30%;
}

/ * Uso de la clase .left-sidebar para anular el diseño predeterminado * /
.barra lateral izquierda #contenido {
flotar derecho;
}
.barra lateral izquierda # barra lateral {
flotador izquierdo;
}

Lo mejor de todo, 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 lecturas adicionales

TL; DR versión 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 parámetros de configuración.

La tercera parte es donde esta serie se pone 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!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me