Ampliación de la plantilla del personalizador de temas de WordPress

  1. 1. Introducción al personalizador de temas de WordPress
  2. 2. Interactuando con WordPress Theme Customizer
  3. 3. Plantilla del personalizador de temas de WordPress
  4. 4 4. Actualmente leyendo: 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

La Parte 3 de la serie Theme Customizer te presentó la plantilla de personalización de Theme que te permite simplificar el código que maneja las opciones de tu tema. Todo lo que necesita hacer es pasar una serie de campos de opciones y la placa de control se encargará de registrar las secciones, configuraciones y controles del Personalizador de temas para usted detrás de escena.


Hasta ahora, repetitivo le permitía usar campos de texto, casillas de verificación, botones de opción y seleccionar campos en el Personalizador de temas, este artículo le muestra cómo puede extenderlo.

Nota: Antes de continuar, descargue la última versión de la plantilla de personalización del tema de WordPress desde su repositorio de Github. Le hice algunas mejoras desde el último tutorial, y es importante que su código esté actualizado. Eche un vistazo a la publicación anterior para obtener más notas sobre los cambios, pero en pocas palabras, una vez que copie la plantilla en su carpeta de temas, no necesita editar sus archivos en absoluto: toda la edición se realiza utilizando filtros y ganchos de acción.

Conexión a la plantilla del personalizador de temas

Hay varios ganchos de acción y filtro en la plantilla de personalización del tema de WordPress. Puedes conectarte a cualquiera de ellos desde el archivo functions.php de tu tema usando add_action y Añadir filtro 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. Por defecto, la ruta repetitiva se ve así: get_template_directory_uri (). “/ Customizer-boilerplate” – pero si prefiere moverlo a una ubicación personalizada, este es el gancho que puede ayudarlo.
  • ‘Thsp_cbp_menu_link_text’ – El gancho de filtro definido en helpers.php, le permite cambiar el enlace de texto del menú. Boilerplate agrega un enlace debajo de Apariencia en el panel de WordPress, lo que permite a los usuarios un fácil acceso al Personalizador de temas. De forma predeterminada, ese enlace dirá “Personalizador de temas” y puede cambiar el texto usando el enlace de filtro “thsp_cbp_menu_link_text”.
  • “Thsp_cbp_capability” – Gancho de filtro definido en helpers.php. Le permite cambiar la capacidad requerida predeterminada utilizada en el método $ wp_customize-> add_setting.
  • “Thsp_cbp_option” – Gancho de filtro definido en helpers.php. Si está utilizando la “opción” en sus argumentos de configuración, use este enlace para cambiar el nombre de la entrada en la que se guardarán los valores de configuración de su tema en la tabla wp_options. El valor predeterminado es “thsp_cbp_theme_options”, asegúrese de conectarlo y cambiarlo por algo que tenga el nombre de su tema..
  • “Thsp_cbp_options_array” – Filtro de gancho definido en options.php, DEBE engancharlo y reemplazar la matriz de opciones predeterminada (que contiene opciones de muestra) con opciones que se utilizan en su tema. Voy a repetir eso, en negrita y subrayarlo: YDEBE conectarlo y reemplazar la matriz de opciones predeterminada con las opciones que se utilizan en su tema.
  • “Thsp_cbp_custom_controls” – Gancho de acción definido en custom-controls.php, al engancharlo puedes crear tus propios controles personalizados, sigue leyendo para ver un ejemplo de cómo hacerlo.
  • ‘Tshp_cbp_remove_sections’‘Tshp_cbp_remove_controls’ y “Tshp_cbp_remove_settings” – Ganchos de filtro definidos en customizer.php. Puede pasarles matrices de ID de sección incorporada (o ID de control o ID de configuración) para eliminar algunas de las secciones, controles o configuración 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 (core). Y no podría agradecer Reineta y su artículos suficiente para llevar esta idea a mi cabeza.

Controles personalizados

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

Estos controles personalizados se definen en custom-controls.php, no los revisaré aquí, pero veamos uno (campo de número HTML5) para ver cómo funciona:

/ **
* Crea control de personalizador para el campo de entrada [tipo = número]
* *
* @since Theme_Customizer_Boilerplate 1.0
* /
La clase CBP_Customizer_Number_Control extiende WP_Customize_Control {

public $ type = 'número';

función pública render_content () {
eco '';
}

}

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

Uso de los controles personalizados integrados de Customizer Boilerplate

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 de número – ‘número’
  • Campo Textarea – “Textarea”
  • Imágenes que actúan como botones de radio: ‘Images_radio’, Aquí hay un ejemplo de este control en una próxima versión gratuita Tema cazuela:

Plantilla de personalización de temas

Conocer los nombres de estos nuevos tipos de control, agregar uno es fácil. Aquí le mostramos cómo puede agregar un control de campo numérico a la matriz que contiene todas sus opciones:

/ *
* ============
* ============
* Campo de número
* ============
* ============
* /
'new_number_field' => array (
'setting_args' => array (
'default' => '',
'type' => 'opción',
'capacidad' => $ thsp_cbp_capability,
'transport' => 'actualizar',
),
'control_args' => array (
'label' => __ ('Number', 'my_theme_textdomain'),
'type' => 'number', // control de área de texto
'prioridad' => 8
)
)

Nota: Si no está seguro de dónde agregar esto, consulte la sección “Uso de la matriz de opciones para agregar secciones, configuraciones y controles del personalizador” de la Parte 3 de esta serie. Además, hay una muestra 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:

/ **
* Gancho de acción que te permite crear tus propios controles
* /
do_action ('thsp_cbp_custom_controls');

Es un simple gancho de acción de WordPress que le permite agregar sus propios controles personalizados sin modificar los archivos de plantilla del Personalizador del tema. ¿Por qué querrías evitar editarlos? Porque si te estás enganchando a la repetitiva, cada vez que alguien la actualice, puedes obtener la última versión, soltarla en tu tema y no perder los cambios que hiciste. Piense en editar archivos principales de WordPress en lugar de escribir un complemento, editar un tema en lugar de crear un tema secundario, etc..

Si alguna vez necesita agregar sus propios controles personalizados, así es como puede hacerlo:

function my_theme_add_customizer_boilerplate_control () {
/ **
* Crea un control personalizado para usar con Boilerplate del Personalizador de temas
* Use un prefijo de clase único!
* *
* @since Theme_Customizer_Boilerplate 1.0
* /
La clase CBP_Customizer_My_Control extiende WP_Customize_Control {

public $ type = 'my_type'; // Cambia esto

función pública render_content () {
// La salida de control va aquí
}

}
}
add_action ('thsp_cbp_custom_controls', 'my_theme_add_customizer_boilerplate_control');

Asegúrese de prefijar su clase de control personalizado con algo único, para que su nombre no entre en conflicto con otra clase. Utilicé “CBP_” (Personalizador Boilerplate) – como estás usando boilerplate en un tema, el nombre de tu tema tiene mucho sentido y debería funcionar bien para ti.

Personalizador de temas: qué sigue?

Ahora que el Boilerplate del Personalizador de temas de WordPress es extensible a través de ganchos, echaremos un vistazo para agregar “opciones de tema condicionales”, que solo aparecerán si cierto complemento está activo y lo ayudará a mantener la pantalla del Personalizador de temas ordenada.

¿Qué piensas sobre Customizer Boilerplate hasta ahora? ¿Planeas usarlo en tus temas? ¿Alguna idea sobre cómo podría mejorarse? Sus comentarios son bienvenidos, siempre.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map