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.
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..
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 $ titan
y 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.
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.
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:
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.
Siga estos pasos para ver en vivo los cambios.
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 #bfbfbf
como 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.
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:
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!