Una guía para principiantes de Titan Framework Creación de una sección de personalizador de temas

La API de personalización de temas, agregada en WordPress 3.4, permite a los desarrolladores personalizar y agregar controles a la Apariencia> Personalizar pantalla de admin Titan Framework le permite ampliar y usar una buena cantidad de campos / configuraciones para crear un tema basado en el Personalizador de temas en vivo. 

Al ser Titan Framework, un marco de opciones ayuda a crear múltiples tipos de opciones escribiendo solo unas pocas líneas de código. Veamos cómo podemos aprovechar las opciones del personalizador de temas a través de Titan Framework.

Configuración básica

  • Un sitio web de demostración con WordPress instalado
  • Cualquier tema instalado y activado. 
  • Titan Framework plugin instalado y activado
  • titan-framework-checker.php archivo incluido en tu proyecto 

El código que voy a usar pertenece a mi tema personalizado Neat. Neat contiene un archivo llamado personalizador-opciones-init.php que está presente en activos / admin /trabajo de titanio/customizer-options-init.php. Aquí es donde he implementado Titan Framework para registrar todas las configuraciones, paneles y secciones de este tutorial..

Creación de una sección de personalizador de tema

Aquí está el código para agregar una sección de personalizador en su tema WP.

createThemeCustomizerSection (array (// Nombre del menú de opciones 'nombre' => 'Mi Sección', // Nombre del panel donde todas las secciones estarán presentes 'panel' => 'Mi Panel')); 

He colocado algunos enlaces útiles a la documentación de Titan Framework en la parte superior de este archivo. Te recomiendo que vayas a través de estos enlaces.. 

Siguiente (línea # 14) es una add_action () función que lleva un tf_create_options gancho y un aa_customizer_options Funciona como sus parámetros. Este gancho ayuda a crear opciones dentro de la sección del personalizador..

aa_customizer_options Es una función personalizada para registrar ajustes, secciones o paneles. Si ha leído mis artículos anteriores, he discutido una regla para trabajar con Titan Framework:

Llama a obtener Instancia() Funciona siempre que necesites interactuar con Titan Framework.

Al igual que en la línea # 19 del código anterior. Esto significa que se llama a una instancia que está asociada con la variable $ titany toma un parámetro único, preferiblemente el nombre de tu tema. Estoy usandoordenado, cual es el nombre de mi tema.

Después de llamar a una instancia, agregue una sección dentro del personalizador usando el createThemeCustomizerSection () función. Las líneas del 26 al 34 crean una sección en $ titan llamado $ aa_section1. los createThemeCustomizerSection () ocupa una serie de parámetros como nombre, panel, desc, etc. 

Estoy usando dos de estos parámetros (es decir, el nombre y el panel) para crear el panel de personalización del tema y luego una sección dentro de él. Un panel es un grupo de secciones, mientras que una sección contiene configuraciones dentro de él..

Creé un panel llamado 'Mi panel'y una sección llamada'Mi seccion menú dentro del panel.

La captura de pantalla de arriba muestra el personalizador de tema recién modificado. Aquí puede encontrar el nuevo panel, es decir,. Mi panel

Dentro Mi panel hay una seccion llamada Mi seccion

En el artículo anterior, traté cómo crear una sección personalizada dentro de un panel personalizado del personalizador de temas con Titan Framework. Vamos a crear algunas opciones / configuraciones dentro de la sección que creamos e implementamos nuestro tema en la parte frontal.

Creación de opciones dentro de una sección del personalizador de temas

Pegue las siguientes líneas justo debajo del código escrito en el artículo anterior dentro de personalizador-opciones-init.php expediente. Este archivo está incluido en el funciones.php de nuestro tema a través de la admin-init.php expediente.

createOption (array ('id' => 'aa_sec_body_bg_clr', // El ID que se usará para obtener el valor de esta opción 'type' => 'color', // Tipo de opción que estamos creando 'name' => 'Color de fondo del sitio', // Nombre de la opción que se mostrará en el panel de administración 'predeterminado' => '#fff' // valor predeterminado de nuestra opción)); // Color del texto del cuerpo $ aa_section1-> createOption (array ('id' => 'aa_sec_body_txt_clr', // El ID que se usará para obtener el valor de esta opción 'type' => 'color', // Type of opción que estamos creando 'name' => 'Site Text Color', // Nombre de la opción que se mostrará en el panel de administración 'default' => '# 000' // Valor predeterminado de nuestra opción)); 

Estoy usando el createOption () Función de Titan Framework para crear opciones. Ya que necesito crear esta opción dentro de la sección personalizada llamada $ aa_section1, He llamado a la función crear opciones a través de la variable de sección en la línea # 8.

He registrado dos configuraciones. Ambas son opciones de tipo de color donde la primera opción ayuda a configurar el color de fondo del cuerpo (línea # 10 a # 13). 

He establecido varios parámetros para esta configuración de color, CARNÉ DE IDENTIDAD y nombre siendo los más importantes. los CARNÉ DE IDENTIDAD, que debería ser único, se utiliza para obtener el valor de esta opción, mientras que el nombre Es lo que aparece dentro del personalizador..

A continuación, creé otra opción para el color del texto del cuerpo (líneas # 18 a # 25). Dado que es el mismo tipo de opción, es similar al anterior con diferentes valores en los parámetros. A ver que pasa en el personalizador..

La configuración del color de fondo del cuerpo y del color del texto del cuerpo se muestran con los nombres Color de fondo del sitio y Color del texto del sitio dentro de nuestra sección llamada Mi seccion

Hasta ahora, he añadido opciones en el personalizador de temas. Permítame mostrarle cómo recuperar valores de estos.

Obteniendo los valores

En primer lugar, recuperaré los valores guardados de ambas opciones y los guardaré en dos variables diferentes. Luego usaré esas dos variables dentro de un CSS en el archivo para cambiar los valores de los colores en nuestro tema. Para hacerlo, pegue las siguientes líneas de código en la parte superior de la header.php expediente. 

getOption ('aa_sec_body_bg_clr'); // Body txt color $ aa_sec_body_txt_clr_val = $ titan-> getOption ('aa_sec_body_txt_clr'); ?>

Usando este código, obtendré los valores de las opciones que se crearon en el personalizador-opciones-init.php expediente. Se necesitan dos pasos para lograr esto:

  1. Obtén la instancia de titan framework y guárdala en una variable.
  2. Obtenga el valor a través de ID usando el getOption () función.

La línea # 17 es donde registré la instancia. Las líneas 20 y 23 son donde recuperé los valores de estas opciones, que fue el segundo paso. los getOption () Función en estas dos líneas obtiene los valores de aa_sec_body_bg_clr y aa_sec_body_txt_clr, cuáles son las ID únicas para las opciones de Color de fondo del sitio y Color de texto del sitio.

Los valores de color recuperados se guardan en las variables. $ aa_sec_body_bg_clr_val y $ aa_sec_body_txt_clr_val

Usemos estas dos variables, que contienen los valores de color seleccionados por el usuario, en la parte frontal:

 

Pega este código debajo de wp-head () Funciona para que nuestros estilos se incluyan después de la hoja de estilo original de nuestro tema. Mire a través de la línea 7 y 20 para cada una de estas etiquetas: la eco El comando se utiliza para imprimir la salida para el color de fondo y el color del texto.. 

Tenga en cuenta que las propiedades CSS se han marcado como !importante, lo que asegura la prioridad CSS.

Viendo la salida

Siga estos pasos para ver en vivo los cambios.

  • Ve a tu panel de WordPress.
  • Luego sigue este camino: Apariencia> Personalizador> Mi panel> Mi sección.
  • Hacer clic Seleccionar el colortanto para el color de fondo del sitio como para el color del texto del sitio.
  • Se abrirá una paleta de colores..
  • Elige cualquier color de tu elección.

Una vez que haya establecido los colores, puede ver una vista previa en vivo de estos cambios en su sitio. 

elegí # 000000 como mi color de fondo del sitio y #bfbfbfcomo color del texto del sitio, puede ver la captura de pantalla de vista previa arriba. 

Una vez que haya terminado, haga clic en el Guardar y publicar botón. 

Conclusión

Entonces, eso es todo. Ahora puede crear fácilmente opciones dentro del Personalizador de temas con Titan Framework. ¿Era facil? No dude en ponerse en contacto con Twitter o comentar a continuación si tiene alguna pregunta.

Por ahora ya sabes cómo crear cualquier tipo de contenedor con Titan Framework. No puedo enfatizar lo suficiente la importancia de los últimos artículos. Si no sabe cómo crear estos contenedores, será difícil para usted comprender alguno de los siguientes artículos. Entonces, vuelva atrás y revise sus conceptos de cómo crear diferentes tipos de contenedores con Titan Framework. Debes saber cómo crear:

  • un panel de administración personalizado con pestañas dentro de él
  • un meta box para cualquier tipo de publicación
  • una sección y un panel del personalizador del tema

A partir del próximo artículo, analizaré todos los tipos posibles de opciones que se pueden agregar con Titan Framework. Así que estad atentos!