Extensión de placa caliente del personalizador de temas de WordPress

Extensión de placa caliente del personalizador de temas de WordPress

La parte 3 de la serie Theme Customizer le presentó el Boilerplate del personalizador de temas, que le permite simplificar el código que administra las opciones de su tema. Todo lo que necesita hacer es pasar una serie de campos de opciones y la clave maestra se encargará de guardar las secciones, la configuración y los comandos del personalizador del tema detrás de escena.

Hasta ahora, la clave maestra le permitía usar campos de texto, casillas de verificación, botones de opción y campos de selección en el personalizador de temas, este artículo le muestra cómo puede extenderlo.

Nota: Antes de continuar, descargue la última versión de WordPress Theme Customizer Boilerplate desde su repositorio de Github. Hice algunas mejoras en esto desde el último tutorial y es importante que su código esté actualizado. Eche un vistazo al artículo anterior para obtener más notas sobre las ediciones, pero en pocas palabras, una vez que haya copiado la clave maestra en la carpeta de su tema, no necesita editar sus archivos en absoluto: toda la edición se realiza mediante filtros y ganchos de acción.

Cuelga la placa calefactora del personalizador de temas

Hay varios ganchos de acción y filtro en el Boilerplate del Personalizador de temas de WordPress. Puede conectarse a cualquiera de ellos desde el archivo functions.php de su tema usando add_action y Añadir filtro las funciones:

  • ‘thsp_cbp_directory_uri’ – El gancho de filtro definido en helpers.php, le permite cambiar la ubicación de Customizer Boilerplate en su carpeta de temas. De forma predeterminada, la ruta maestra se ve así: get_template_directory_uri (). ‘/ personalizador-passe-partout’ – pero si prefiere moverlo a una ubicación personalizada, el gancho puede ayudar.
  • “thsp_cbp_menu_link_text” – El gancho de filtro definido en helpers.php, le permite modificar el enlace de texto del menú. Boilerplate agrega un enlace en Apariencia en el panel de WordPress, lo que permite a los usuarios acceder fácilmente al Personalizador de temas. De forma predeterminada, este enlace dirá “Personalizador de temas” y puede editar el texto usando el gancho de filtro “thsp_cbp_menu_link_text”.
  • “thsp_cbp_capability” – Filtro de gancho definido en helpers.php. Le permite cambiar la capacidad requerida predeterminada utilizada en el método $ wp_customize-> add_setting.
  • ‘thsp_cbp_option’ – Filtro de gancho definido en helpers.php. Si usa ‘opción’ en los argumentos de sus parámetros, use este gancho para cambiar el nombre de la entrada donde se almacenarán los valores de los parámetros de su tema en la tabla wp_options. El valor predeterminado es ‘thsp_cbp_theme_options’, asegúrese de iniciar sesión y cambiarlo a algo que tenga el nombre de su tema.
  • ‘thsp_cbp_options_array’ – Filtre el gancho definido en options.php, DEBE engancharlo y reemplazar la matriz de opciones predeterminada (que contiene opciones de muestra) con las opciones utilizadas en su tema. Lo diré de nuevo, en negrita y lo subrayaré: Debe permanecer allí y reemplazar la matriz de opciones predeterminada con las opciones utilizadas en su tema.
  • ‘thsp_cbp_custom_controls’ – Action hook definido en custom-controls.php, al engancharlo puedes crear tus propios controles personalizados, sigue leyendo para ver un ejemplo de cómo hacer esto.
  • ‘tshp_cbp_remove_sections’, ‘tshp_cbp_remove_controls’ y ‘tshp_cbp_remove_settings’ – Filtra los ganchos definidos en customizer.php. Puede pasarles tablas de ID de sección incorporadas (o ID de control o ID de parámetro) para eliminar algunas de las secciones, controles o parámetros incorporados.

Nota: Si bien estamos en la extensibilidad y creando sus propios ganchos para que otros desarrolladores puedan usarlos para extender su código, es imposible exagerar lo importante que es esto. Después de todo, así es como funciona WordPress (núcleo). Y no pude agradecer Manzana reinette y su artículos suficiente para tener esta idea en mi cabeza.

Controles personalizados

La versión actualizada de Theme Customizer (que acaba de ver, ¿no?) Tiene algunos controles más que puede usar: campo de área de texto, campo de número HTML5 y campo de imágenes, que es básicamente una versión elegante de la radio de botones.

Estos controles personalizados están definidos en custom-controls.php, no los revisaré todos aquí, pero echemos un vistazo a uno de ellos (campo numérico HTML5) para ver cómo funciona todo:

/**
 * Creates Customizer control for input[type=number] field
 *
 * @since	Theme_Customizer_Boilerplate 1.0
 */
class CBP_Customizer_Number_Control extends WP_Customize_Control {

	public $type = 'number';
	
	public function render_content() {
		echo '<label>
			<span class="customize-control-title">'.  esc_html( $this->label ) .'</span>
			<input type="number" '. $this->link() .' value="'. intval( $this->value() ) .'" />
		</label>';
	}
	
}

Como puede ver, todo lo que necesita hacer es definir un nuevo control $ type y su función render_content que genera el control en la pantalla de personalización del tema.

Uso de los controles personalizados integrados de Customizer Boilerplate

Esto es lo mismo que los campos simples cubiertos en el tutorial anterior, lo único que debe tener en cuenta son los “ tipos ” que debe usar para cada uno:

  • Campo numérico – ‘número’
  • Campo de área de texto – ‘textarea’
  • Imágenes que actúan como botones de radio: ‘images_radio’, aquí hay un ejemplo de este control en una futura versión gratuita Tema Cazuela:

Tema estándar del personalizador

Conociendo los nombres de estos nuevos tipos de controles, es fácil agregar uno. Así es como puede agregar un control de campo numérico a la matriz que tiene todas sus opciones:

/*
 * ============
 * ============
 * Number Field
 * ============
 * ============
 */
'new_number_field' => array(
	'setting_args' => array(
		'default' => '',
		'type' => 'option',
		'capability' => $thsp_cbp_capability,
		'transport' => 'refresh',
	),					
	'control_args' => array(
		'label' => __( 'Number', 'my_theme_textdomain' ),
		'type' => 'number', // Textarea control
		'priority' => 8
	)
)

Nota: Si no está seguro de dónde agregar esto, consulte “Uso de la tabla de opciones para agregar secciones, configuraciones y controles de personalización” en la Parte 3 de esta serie. Además, hay un ejemplo para cada uno de los controles personalizados en el archivo options.php.

Agregar sus propios controles personalizados

Volvamos al gancho de acción ‘thsp_cbp_custom_controls’ que mencioné anteriormente:

/**
 * Action hook that allows you to create your own controls
 */
do_action( 'thsp_cbp_custom_controls' );

Este es un simple gancho de acción de WordPress que le permite agregar sus propios controles personalizados sin modificar los archivos del kit de herramientas del personalizador de temas. ¿Por qué querrías evitar modificarlos? Porque si inicia sesión en la clave maestra, cada vez que alguien la actualiza, puede simplemente tomar la última versión, colocarla en su tema y no perder los cambios que realizó. Considere editar los archivos centrales de WordPress en lugar de escribir un complemento, editar un tema o crear un tema secundario, etc.

Si alguna vez necesita agregar sus propios controles personalizados, aquí le mostramos cómo:

function my_theme_add_customizer_boilerplate_control() {
	/**
	 * Creates custom control to use with Theme Customizer Boilerplate
	 * Use a unique class prefix!
	 *
	 * @since	Theme_Customizer_Boilerplate 1.0
	 */
	class CBP_Customizer_My_Control extends WP_Customize_Control {
	
		public $type = 'my_type'; // Change this
		
		public function render_content() {
			// Control output goes here
		}
		
	}
}
add_action( 'thsp_cbp_custom_controls', 'my_theme_add_customizer_boilerplate_control' );

Asegúrese de prefijar su clase de control personalizada con algo único, para que su nombre no entre en conflicto con otra clase. Usé ‘CBP_’ (Customizer Boilerplate) – dado que está usando el boilerplate en un tema, el nombre de su tema tiene mucho sentido y debería funcionar bien para usted.

Personalizador de temas: ¿que sigue?

Ahora que WordPress Theme Customizer Boilerplate es extensible a través de ganchos, echaremos un vistazo para agregar “opciones de tema condicionales”, las que solo aparecerán si un determinado complemento está activo y lo ayudarán a seguir ordenando la pantalla del personalizador de temas.

¿Qué opinas de Customizer Boilerplate hasta ahora? ¿Planeas usarlo en tus temas? ¿Alguna idea sobre cómo mejorarlo? Sus comentarios siempre son bienvenidos.

Deja un comentario

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

Ir arriba