Interactuar con temas personalizados de WordPress

La primera parte de la serie Personalizador de temas de WordPress menciona la interacción con el Personalizador de temas, que es necesario para un automóvil. $ wp_personalizar objeto que es una instancia de WP_Customize_Manager Para hacer eso, debes usar personalizar_registro tanque de acción:

add_action( 'customize_register', 'my_theme_customize_register' );
function my_theme_customize_register( $wp_customize ) {

	// Interacting with $wp_customize object

}

Puede descargar este código en functions.php desde el tema o en el archivo incluido

📑 Aquí podrás encontrar 👇

Agregar o eliminar elementos del Personalizador (secciones, configuraciones y controles)

Una vez que haya cargado $ wp_personalizar Obeto, puede utilizar cualquiera de los métodos para agregar, optar por eliminar configuraciones, controles y secciones en el mismo (add_setting, get_setting, remove_setting, add_controlâ € ¦ entiendes el punto).

Entonces, si quieres recepción Padre retirarse un apartado, control de configuración, todo lo que necesitas es tu DNI. Esta línea elimina la sección Colores (la columna dentro de la función my_theme_customize_register del primer fragmento de código):

$wp_customize->remove_section( 'colors' );

Agregue una sección, controle o configure diferentes configuraciones al requerir algún metro subterráneo. No hay revisores aquí por las razones:

  1. Esto no es realmente propiedad de esta serie, creamos un modelo repetitivo del Personalizador de temas que se puede escribir en su tema.
  2. Alex Mansfield tiene 6000 monstruos de 6000 guías de usuario para personalizar temas, desarmar temas de WordPress, puedes aprender y ver twittear (en serio, pero no bueno, lhora).

Sin embargo, tenemos una vista que podemos agregar a la configuración con un control en una nueva sección del Personalizador de temas, así como algunos argumentos. Dado que es mucho m. S fá cil trabajar con ejemplos reales, esto es lo que buscamos:

  • Una nueva sección, nombre "Diseño"
  • Una nueva configuración que almacena y diseña su tema.
  • Un nuevo radiomando con las opciones: barra lateral a la izquierda y barra lateral a la derecha

Lo primero que agrega el personalizador de temas es en 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 pretendo ver el personalizador todavía, una sección no me muestra que tengo una agregación de configuración y control. A medida que agregamos a nuestros amigos:

$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 centralarme. Aquí tenemos dos opciones, 'option' y 'theme_mod' y se pueden recuperar usando get_option y get_theme_mod y get_theme_mod y get_theme_mod. 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 esta forma, todos los valores se almacenan como entrada de base de datos en su tabla wp_options.

Y finalmente, después de la agregación de estos fragmentos de código para que funcionen, personalizar_registro el cuadro de acción (ejemplo de un fragmento de un código en esta publicación), se ha personalizado el Personalizador de los temas:

Nueva sección agregada por personalizador de temas

Nueva sección agregada por personalizador de temas

Utilice los valores del Personalizador de configuración en su tema

Una vez que haya dado a sus usuarios la capacidad de almacenar esta configuración, puede tomar su valor, konectarse a cuerpo_clase filtro de pórtico y agregado en 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;

}

Se agrega .left-sidebar o .right-sidebar a la variedad de clases de cuerpo en el 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;
}

¡Eso es todo, puedes configurar los temas!

Resumen adicional y conferencia

TL; La versión DR de esta publicación también contiene: Puede obtener un objeto de $ wp_customize y elegir un algoritmo para agregarlo (sección, configuración o control) o eliminarlo. Todos ellos se reducen a un par de configuraciones de Metro.

¡Sigan con el buen trabajo!

Deja una respuesta

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

Subir