Interactuar con el personalizador de temas de WordPress

Interactuar con el personalizador de temas de WordPress

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 clasificar. Para hacer esto, 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 functions.php de su tema o en un archivo incluido con él.

Agregar o eliminar elementos de personalización del tema (secciones, configuraciones y comandos)

Una vez que haya cargado $ wp_customize object, puede usar cualquiera de sus métodos para agregar, obtener o eliminar configuraciones, controles y secciones (add_setting, get_setting, remove_setting, add_control … ya entiendes).

Así que si quieres haber o retirar una sección, un control o una configuración, todo lo que necesita es su id. Esta línea eliminará la sección Colores (colóquela en la función my_theme_customize_register del primer fragmento):

$wp_customize->remove_section( 'colors' );

Agregar una sección, control o parámetro es ligeramente diferente porque requiere más parámetros. No voy a repasarlos todos aquí por dos razones:

  1. Ese no es realmente el objetivo de esta serie, vamos a crear una plantilla de personalizador de tema estándar que puede insertar en su tema.
  2. Alex Mansfield ya lo ha cubierto en su monstruo de 6.000 palabras Tutorial de personalización de temas que todos los desarrolladores de temas de WordPress deberían leer y luego tuitear (en serio, si aún no lo has hecho, lee ahora).

Pero aún así, veamos cómo puede agregar su propio parámetro con un control en una nueva sección del Personalizador de temas, junto con algunos de los argumentos. Dado que es mucho más fácil trabajar con ejemplos reales, esto es lo que estamos buscando:

  • Una nueva sección, titulada “Diseño”
  • Una nueva configuración que almacena el diseño de su tema.
  • Un nuevo control remoto 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 un parámetro y control agregado. Entonces agreguemos los dos:

$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 está leyendo el tutorial de Alex y / o las páginas del Codex, solo hay un parámetro en la matriz de argumentos add_setting – ‘type’ – 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’ solo porque te permite serializar los valores de los parámetros de tu tema dándoles identificadores 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 base de datos en su tabla wp_options.

Y finalmente, después de agregar estos dos fragmentos de código para que funcionen, inició sesión personalizar_registro gancho de acción (primer fragmento de código en este artículo), el personalizador de temas se ha personalizado:

Nueva sección agregada al personalizador de temas

Nueva sección agregada al personalizador de temas

Uso de los valores de los parámetros del personalizador de temas en su tema

Una vez que haya dado a sus usuarios la opción de almacenar este parámetro, puede ingresar su valor, iniciar sesión en body_class hook filter y agregarlo 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 matriz 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

La versión TL; El DR de este artículo se vería así: Puede obtener un objeto $ wp_customize y luego agregar o eliminar algo (sección, parámetro o control). Todo lo demás se reduce a los parámetros de ajuste.

La tercera parte es donde esta serie se vuelve interesante, ya que comenzaremos a automatizar todo el proceso y trabajaremos en el tema del Customizer Boilerplate que puede insertar en su tema y comenzar a usar de inmediato. ¡Manténganse al tanto!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ir arriba