Interacción con el personalizador de temas de WordPress

Category: Tutorial 3 0

En la parte 1 de la serie de WordPress Theme Customizer mencioné que para interactuar con el Theme Customizer es necesario cargar el objeto $wp_customize , que es una instancia de la clase WP_Customize_Manager . Para ello, debes usar el gancho de acción customize_register :

pre-línea-números-lenguaje php";añadir_acción( 'personalizar_registro', 'mi_tema_personalizar_registro' ); functionar my_theme_customize_register( $wp_customize ) { // Interactuando con $wp_customize object }

Puedes colocar este código en el functions.php de tu tema o en un archivo que se incluya de él.

Añadir o quitar elementos del Personalizador de temas (secciones, ajustes y controles)

Una vez cargado el objeto $wp_customize puedes usar cualquiera de sus métodos para añadir, obtener o eliminar configuraciones, controles y secciones en él (add_setting, get_setting, remove_setting, add_control… obtienes el punto).

Por lo tanto, si quieres obtener o eliminar una sección, control o ajuste, todo lo que necesitas es su ID. Esta línea eliminará la sección Colors (colócala dentro de la función my_theme_customize_register del primer fragmento de código):

pre line-numbers language-php";$wp_customize->remove_section( 'colors' );</pre ];

Añadir una sección, control o ajuste es ligeramente diferente porque requiere algunos parámetros más. No voy a repasar todos ellos aquí por dos razones:

  1. No es ese el propósito de esta serie, crearemos un plan de personalización de temas que puedes poner en tu tema
  2. Alex Mansfield ya lo cubrió en su tutorial de 6000 palabras del monstruo de un tema personalizado que todo desarrollador de temas de WordPress debe leer y luego tuitear (en serio, si aún no lo has hecho, ve a leerlo ahora).

Pero aún así, echemos un vistazo a cómo puedes añadir tu propio ajuste con un control en una nueva sección del Personalizador de temas, así como algunos de los argumentos. Ya que es mucho más fácil trabajar con ejemplos reales, esto es lo que vamos a buscar:

  • Una nueva sección, llamada "Layout"
  • Una nueva configuración que almacena el diseño de tu tema
  • Un nuevo radiocontrol con dos opciones – barra lateral a la izquierda y barra lateral a la derecha

Lo primero que hay que añadir al Personalizador de temas es "Layout" sección:

pre line-numbers language-php"$wp_customize->add_section( // ID 'sección_diseño', // Arreglo de argumentos array( 'título' => __( 'Disposición', 'mi_tema' ), 'capacidad' => 'editar_tema_opciones', 'descripcion' => __( 'Le permite editar su tema's layout.', 'mi_tema' ) ) );

No intente verlo en el customizer todavía, una sección no se mostrará a menos que tenga un ajuste y un control añadido. Así que vamos a añadir ambos:

pre line-numbers language-php"$wp_customize->add_setting( // ID 'my_theme_settings[layout_setting]', // Matriz de argumentos array( 'default' => 'barra lateral derecha', 'tipo' => 'opción' ) ); $wp_customize->add_control( // ID 'control_de_diseño', // Arreglo de argumentos array( 'tipo' => 'radio', 'label' => __( 'Theme layout', 'mi_tema' ), 'sección' => 'sección_diseño', 'elecciones' => array( 'barra lateral izquierda' => __( 'Barra lateral izquierda', 'mi_tema' ), 'barra lateral derecha' => __( 'Barra lateral derecha', 'mi_tema' ) ), // Este último debe coincidir con la identificación de la configuración desde arriba. 'settings' => 'my_theme_settings[layout_setting]' ) );

Suponiendo que leas el tutorial de Alex y/o las páginas del códice, sólo hay un parámetro en la matriz de argumentos add_setting – type – en el que me gustaría centrarme. Tienes dos posibilidades aquí, option y theme_mod y puedes recuperarlas usando get_option y get_theme_mod, respectivamente. Siempre uso option simplemente porque te permite serializar los valores de la configuración de tu tema dándoles IDs como my_theme_settings[setting_1] , my_theme_settings[setting_2] etc. De esta manera todos los valores se almacenarán como una entrada de la base de datos en su tabla wp_options.

Y por último, después de añadir esos dos fragmentos de código para la función que enganchaste en el gancho de acción customize_register (primer fragmento de código de este post), el Personalizador de Temas ha sido personalizado:

Nueva sección añadida al Personalizador de temas

Uso de los valores de configuración del Personalizador de temas en su tema

Después de dar a tus usuarios la posibilidad de almacenar esta configuración, puedes tomar su valor, engancharlo en body_class filter hook y añadirlo a la matriz de clases corporales existentes:

add_filter( body_class, my_theme_body_classes ); functionar mi_tema_clases_cuerpo( $clases ) { 	/* 	 * Ya que usamos option en la matriz de argumentos add_setting 	 * recuperamos el valor usando la función get_option 	 */ 	$my_theme_settings = get_option( my_theme_settings );	 	 	$classes[] = $my_theme_settings[establecimiento_de_diseño]; 	 	devolver $clases; } 

Esto agregará la barra lateral izquierda o derecha al conjunto de clases de cuerpo de tu tema. Al usar estas dos clases en el archivo style.css de tu tema podrás crear dos diseños diferentes. Por ejemplo:

/* La barra lateral de la derecha es el diseño por defecto */ #contento { 	flotar: izquierda; 	ancho: 60%; } #sidebar { 	Flotador: correcto; 	ancho: 30%; } /* Usando la clase de la barra lateral izquierda para anular el diseño por defecto */ .barra lateral izquierda #contento { 	Flotador: correcto; } .barra lateral izquierda #barra lateral { 	flotar: izquierda; } 

Lo mejor de todo es que gracias al Personalizador de Temas de WordPress, los usuarios pueden tener una vista previa de ambos diseños antes de guardar cualquier cosa. Toma esto, ¡páginas de configuración de temas!

Resumen y lecturas adicionales

La versión TL;DR de este post sería algo así: Puedes obtener $wp_customize object y luego agregar o quitar algo (sección, configuración o control). Todo lo demás se reduce a los parámetros de configuración.

En la tercera parte es donde esta serie se pone interesante, ya que comenzaremos a automatizar todo el proceso y a trabajar en la personalización del tema Boilerplate, que puedes soltar en tu tema y empezar a usar de inmediato. Estad atentos!

Related Articles