Creación de opciones de temas de WordPress con la API del tema

Crear opciones de temas de WordPress con la API de personalización del tema es fácil de hacer. Este artículo te muestra cómo hacerlo. La personalización del tema de la API de WordPress se lanzó con WordPress 3.4, en 2012. Prometió a los desarrolladores una forma estandarizada de agregar temas con opciones ricas y los usuarios una forma de cambiar su sitio de una manera fácil de usar. Para los usuarios, personalizar el tema front-end le permite cambiar rápidamente el aspecto de su sitio e incluso obtener una vista previa en vivo. El éxito de este proyecto es cuestionable, pero se mejora y gana tierras. Fue construido sobre una base sólida y no hay razón para no comenzar con ella.
Entonces, echemos un vistazo a cómo podemos agregar fácilmente la configuración usando la API. Esto es lo que cubriremos hoy:
Construyendo nuestra base
Los componentes de una configuración temática
Uso de valores de configuración
Vistas previas en vivo
Encapsulación en una clase
Opciones adicionales

Personalice el artículo para personalizar el tema. Construyendo nuestra base La clave para la personalización es la clase WP_Customize_Manager, a la que se puede acceder por el objeto $ WP_Customize. Utilizaremos diferentes métodos definidos en esta clase para agregar secciones de configuraciones y controles dentro de ellos.
La forma recomendada de crear la configuración del tema es encapsularlos en una clase. En nuestros ejemplos iniciales, no me adheriré a esta recomendación para asegurarme de que esté claro qué es parte de la API de personalización y qué no. Completaré el elemento con una implementación basada en clase. Comencemos creando una función en el archivo Functions.php de nuestro tema, que nos permitirá incluir nuestras adiciones en la personalización. Esta función debe estar conectada a Customize_register. Los componentes de una configuración temática como se mencionan en el ejemplo, cada artículo que agrega a la personalización consta de tres partes: se debe crear una sección para colocarlo. Esta sección puede ser una de las preexistentes, por supuesto
Se debe registrar una configuración en la base de datos y
Se debe crear un control que se utilice para manipular la configuración definida
Si la separación entre un control y una configuración parece confundida, piense así: cuando cree una configuración, dígale a WordPress que realmente hay una configuración de color de fuente y el valor predeterminado para esto es #44444. En sí mismo, esto ya significa que esta configuración se puede usar. Sin embargo, personalizar el tema debe saber cómo manipular esta configuración. Puede crear un campo de texto para el que el usuario presenta manualmente nuevos colores como “#FF9900”, pero también puede especificar un control de color, que eliminaría un selector de color. En el nivel de datos básicos, todo continuará reduciéndose a un color hexagonal, pero la parte orientada al usuario es diferente.
La creación de una sección add_section () se usa para crear secciones. Se necesitan dos parámetros, un slog de sección y una serie de argumentos. Aquí hay un ejemplo de cómo configuramos una sección para opciones de sótano en un tema. La mayoría de ellos se explican por sí mismo. ¡Observe la prioridad! Esto determina el orden de la sección en la pantalla. Me gusta hacer crecer mis opciones en decenas. Si tengo que insertar una sección entre dos secciones existentes, no tendré que reintegrar todo, puedo asegurar la nueva 95. cuántas secciones personalizadas para personalizar el tema Tenga en cuenta que las secciones no aparecerán cuando estén vacías. Debe agregar una configuración y control antes de que se muestren.
Agregar configuración de configuración se crea con el método add_setting (). También toman un trabajo como primer parámetro y una serie de argumentos como el segundo. Eche un vistazo a continuación para obtener un ejemplo de agregar un color de fondo a nuestra sección anterior. Hay muchas opciones que podríamos agregar aquí, pero por ahora funcionará bien. Tenga en cuenta que la configuración no está relacionada con la sección. Como mencioné, la configuración simplemente se registra con WordPress. Depende de los controles, que están relacionados con secciones para manipularlos.

Creación de un control Los controles se implementan con el método add_control (). Este método toma un slog y una matriz de argumento o también puede recibir un objeto de control dedicado. Se utiliza un objeto de control para verificaciones más complejas, como selectores de color o cargadores de archivos.
Así es como creamos el control que cambia el color del sótano del sótano:

El esencial BAE424ED134EAE6CBF25 está cargado
Pasé un objeto de control del método add_control (). Este objeto debe construirse pasando el objeto $ wp_customize como primer parámetro, un control único como segundo y una matriz de argumentos como el tercero. Tenga en cuenta que el control es el lugar donde todo se encuentra. La sección se establece en la ID de la sección que creé y la configuración se establece en la ID de configuración. Una vez que los tres se hayan configurado, debería poder recargar la personalización y ver su trabajo. Algunas opciones personalizadas agregadas a una sección personalizada de personalizada el uso de los valores de configuración de forma predeterminada, la configuración se guarda en un tema_mod. Theme_mods es una alternativa a la API de configuración, que ofrece una manera fácil de administrar la configuración específica. Todo lo que tiene que hacer para hacerse cargo del valor de una configuración es usar get_theme_mod () con la identificación establecida. Agreguemos algo CSS dinámico a nuestro sitio, conectándonos a WP_head y utilizando nuestra configuración guardada: Vistas previas en vivo Las vistas previas en vivo no se activan de forma predeterminada. Para usarlos tienes que hacer tres cosas:
Pon un archivo JavaScript en la cola que se ocupa de las vistas previas
Agregar soporte para la vista previa en vivo para la configuración y

Cree el código JavaScript para cuidar cada configuración
Pone en la cola el script de vista previa en vivo, lo único irregular de este paso es que tenemos que usar Customize_precity_init y debemos asegurarnos de que “jQuery” y “personalización previa” se carguen antes de nuestro script. Además, es una cola estándar que indica un archivo JavaScript de nuestro tema: Agregar soporte de vista previa en vivo Es bastante fácil. En los argumentos para nuestra configuración, debemos definir una clave de transporte y establecer su valor en el postmessage. Revisemos el código anterior: cree el código JavaScript para cuidar cada configuración, necesitaremos usar el wp.customize () en JavaScript. Esta función debe recibir la ID de configuración como primer parámetro, el segundo es una función de llamada inversa. En el interior, conectamos una función al cambiar la configuración y escribimos nuestro código que cuidará. De todo lo que necesitamos para escribir una línea, use esta plantilla de Lipstick Copy para la velocidad de escribir Vista previa en vivo: la encapsulación en una clase La encapsulación es una buena idea, porque le permite escribir nombres de mejores funciones y hacer que el código sea más compatible Con más temas, si tienes más tarea. Así es como lo hicimos para nuestro ejemplo anterior.
Tenga en cuenta que todo es exactamente igual, todo lo que ha cambiado son los nombres de algunas funciones y nos referimos a métodos dentro de la clase en lugar de funciones dispersas en nuestras funciones de archivo.php. Opciones adicionales recomiendan calurosamente leer la documentación sobre la API para personalizar el tema en el códice de WordPress. Contiene muchas configuraciones adicionales y formas de trabajar con API.
Díganos si ha utilizado el elemento de personalización del tema en uno de sus proyectos y lo que le gusta y lo que odia en general, en los comentarios a continuación.
Etiquetas:
Temas gratis
Temas premium