Agregar estilo personalizando sin agregar CSS a la página

El personalizador de WordPress es una herramienta increíblemente potente y útil. Al incorporarlo en su tarea y complementos, brinde a los usuarios más flexibilidad y simplifican el diseño, la apariencia y la personalización del contenido. Sin embargo, tiene sus desventajas. Uno de estos es el hecho de que cualquier estilo que agregue directamente a través de la personalización se mostrará en la sección principal de la página, y no a través de la hoja de estilo. Este es especialmente el caso cuando agrega estilo a través del selector de color. Agregar CSS de esta manera no es una muy buena práctica: es mucho mejor tener todo el estilo en la hoja de estilo, por lo que debe intentar hacerlo siempre que sea posible.
En esta publicación, le mostraré cómo puede usar PHP combinado con la hoja de estilo para evitar este problema y asegurar que el estilo de color agregado a través del cliente se almacene en la hoja de estilo y no en la sección principal de la página. Lo que necesitará para seguir esta publicación, necesitará lo siguiente:
Una instalación de instalación de desarrollo de WordPress
Su propio tema puede editar y agregar la funcionalidad del personalizador. Alternativamente, puede crear un tema secundario de un tercer tema, pero no edite una tercera parte directamente.
Un editor de código.
Nota: Este método funciona con una paleta de colores limitada, ya que debe configurar el CSS en la hoja de estilo para cada uno de ellos. Si desea dar a los usuarios la opción de elegir entre cualquier color que deseen, deberá usar el selector de color y soportar ese estilo en la sección de la cabeza. ¡Lo siento!
Configuración del tema Lo primero que debe hacer es configurar su tema para agregar la funcionalidad del personalizador. Agregue una carpeta llamada incluye en su tema y dentro de él, cree un archivo vacío llamado Customizer.php. Agregue esto al archivo con las funciones de su tema: la idea 2D32BB4FFF967C97F016EFE2A603FBA4 está cargada
Ahora está listo para agregar la funcionalidad de personalización de su tema. Configuración de la personalización Abra el nuevo cliente.php. Primero deberá crear una función que mantenga la configuración del personalizador. Agregue eso:
The Essentials B2AAE06D58CF20F1ADC2ED6418F170D0
Esta función contendrá todo el código para crear secciones y controles en el cliente.
Agregar una sección de personalización Puede agregar sus comandos de personalización a una sección de personalización existente, pero prefiero crear el mío. Deja las cosas más claras y evita el riesgo de que la sección que usa se elimina en una futura actualización de WordPress. En la función que ya ha agregado al archivo Customer.php, agregue esto:
La idea se carga 2FA361747CA35262141E495B54307DDB
Si abre el personalizador, aún no mostrará nada, porque se muestra una sección solo si tiene configuración. Así que agreguemos eso. Agregar la configuración a la aduana Para agregar la configuración para el esquema de color, debe crear una configuración y control. La configuración es la que almacena la opción seleccionada o la introducción del texto, mientras que el control es la interfaz utilizada por el personalizador para permitir a los usuarios hacer cambios.
Todavía dentro de su función y en el código de sección, agregue eso:
Se carga la idea de 8DBACBCCI201C7B3036408092CB3534DD.
Echemos un vistazo a lo que esto hace en detalle:
En primer lugar, cree la configuración wpmu_nav_color para almacenar cualquier entrada o selección.
Luego agregue un control llamado wpmu_nav_color, que crea usando varios parámetros.
Agrega una etiqueta, que es lo que verá el usuario.
Identifica la sección en la que aparecerá el control.
WordPress le dice qué configuración se utilizará para almacenar lo que se agrega a través del control; en otras palabras, la configuración que acaba de crear.
Lo define con el tipo de ‘radio’, es decir, se mostrarán los botones de radio. Otras opciones incluyen cuadros de texto, cuadros de selección, cuadros de selección, direcciones de URL y más. Consulte el Codex para obtener una lista completa.
Identifique las opciones para los botones de radio: en mi caso, azul, rojo o verde.
Esto es wpmu_customize_register () ta wpmu_customize_register (). Guarde el archivo y abra el personalizador. Verá ahora la nueva sección y control que se muestra:
Pero si selecciona alguno de esos botones de radio, no cambiará nada. Esto se debe a que tiene que agregar un código a su tema. Específicamente, debe agregar un gancho de filtro al menú de navegación de encabezado, así como algunos CSS en la hoja de estilo. Llamando a la configuración a través de un gancho de filtro en lugar de agregar estilo a la sección de cabezal de la página, la transmitiremos al elemento relevante de nuestro tema utilizando un gancho de filtro. Agregue el gancho de filtro a su tema Abra el archivo encabezado.php del suelo y busque la línea para el menú de navegación. En mi tema se ve así:


Cargue la idea 02077D97defaba79C06B8C2BBA57CEE6
Debe agregar un filtro dentro de la etiqueta de apertura para el elemento del barco, de la siguiente manera:
Cargue la idea 962C52769CF91C6A8FE5CAE6828F4FA4
El tuyo se verá diferente al mío, pero aún tiene que agregar ese gancho de filtro donde normalmente escribe una clase CSS. Esto crea un gancho de filtro con el contenido ‘azul’ predeterminado. Usaremos esto para agregar estilo a este elemento. Enviar la configuración al gancho del filtro, pero aún tiene que pasar esta configuración del filtro y hacerlo en el archivo Customer.php. Volver al archivo Customizer.php, agregue una nueva función que se conectará a su nuevo gancho de filtro:
La idea 98252A9DB701EF2D4023815F7A41016C está cargada.
Esto toma la configuración de personalizador usando get_theme_mod () y luego la devuelve, lo que significa que será get_theme_mod () en el archivo de encabezado donde se encuentra el gancho del filtro.
Guarde y cierre el archivo Customizer.php. Agregar el estilo de estilo La etapa final es agregar un estilo que se haga cargo de la clase CSS que agregó a través del gancho del filtro. Se almacenará en la hoja de estilo de su base, lo que significa que no hay estilo en la sección principal. Abra la hoja de estilo del tema y agregue algo como esto (tenga en cuenta que su estilo puede ser diferente según la marca):
La idea está cargada A235DEEEF0BFF091207CE049B2F2759B
Cambie los colores de acuerdo con la paleta de colores y las preferencias. Puede agregar más si lo desea, pero recuerde que cada uno que agregue deberá configurarse como una opción para la radio en el personalizador.
Finalmente, guarde la hoja de estilo, abra el sitio y pruebe. Por defecto, mi menú de navegación es azul:
Pero ahora, si quiero, puedo elegir otro color:

El uso del personalizador para la estilización no tiene que significar adoptar prácticas malas que trabajen con WordPress Customizer puede significar agregar estilo a la sección de páginas. Si tiene que acceder al selector de color, no hay forma de evitarlo. Pero si brinda a los usuarios un rango de color limitado para trabajar (tal vez los colores que funcionan con su tema o están de acuerdo con su marca), puede usar un gancho de filtro para enviar lo que se elige a su tema como clase CSS que se aplica En la hoja de estilo. Incluso puede adaptar esta técnica y usarla para otros fines, tal y enviar la configuración a una clase CSS de la misma manera. Hay cientos de formas de simplificar el estilo con la ayuda del personalizador. Con poca creatividad, puede mejorar la experiencia para usuarios y clientes.

¿Utiliza el personalizador en su tarea? ¿Cómo puedes usar esta técnica? ¡Dinos en los comentarios!
Etiquetas:
personalizar
tutorial