Share
Permitir que un usuario final cambie la fuente de su tema puede ser una tarea intimidante, especialmente cuando desea proporcionar esta opción dentro de un panel de administración personalizado, un metabox o incluso el personalizador del tema. Hoy, discutiré cómo agregar una costumbre. fuente opción de tipo a través de Titan Framework.
los fuente La opción de tipo es una de las opciones más versátiles en términos de funcionalidad en Titan Framework. No solo te permite cambiar la fuente, sino que también es un completo selector de estilo de fuente. Con una gama completa de opciones ricas en funcionalidad, puede elegir tanto fuentes seguras para la web como Google WebFonts dentro de ella. Aplica tantos estilos como desees, por ejemplo, colores, espaciado entre letras, sombras, altura de línea, etc. Un usuario final también puede ver la vista previa de cómo se ven la fuente y sus estilos. Así es como se ve esta opción:
Puede ver en la imagen anterior qué tan detallados son los ajustes de fuente. Esto es posible a través de un montón de parámetros de configuración que admite esta opción. Hay algunos parámetros obligatorios y opcionales. Primero, echemos un vistazo a los obligatorios:
Accentsconagua
fuente opción de tipo.Ahora algunos de los parámetros opcionales que debes usar son:
fuente tipo de opción, este parámetro se comporta de manera algo diferente. Toma una matriz que contiene algunas fuentes y estilos predeterminados que desea usar (más sobre esto más adelante).Finalmente, hay una larga lista de ciertos parámetros basados en verificación, cuyos valores predeterminados están configurados para cierto. Vamos a nombrarlos y descubrir cómo se comportarán si se establece en falso.
falso.falso.falso.falso.falso.falso.falso.falso.falso.falso.falso.falso.falso entonces la fuente de Google (si se usa) no se pondrá en cola automáticamente.Puedes agregar el fuente escriba la opción dentro de
El alcance de este artículo no es sobre la creación de estos contenedores. Puedes consultar mis artículos anteriores si quieres aprender sobre eso.
El proceso general de agregar este tipo de opción sigue siendo el mismo:
obtener Instancia() función.createOption () función.getOption () función. Vamos a crear esta opción dentro de un panel de administración..
Aquí está el código:
createOption (array ('id' => 'aa_font', // El ID que se usará para obtener el valor de esta opción 'type' => 'font', // Tipo de opción que estamos creando 'name' => 'Mi opción de fuente', // Nombre de la opción que se mostrará en el panel de administración 'desc' => 'Elija su configuración de fuente' // Descripción de la opción que se mostrará en el panel de administración)); He usado el createOption () función (línea # 7) para agregar una fuente opción de tipo en un panel de administración $ aa_panel. Esta función ocupa una serie de parámetros. Es por eso que parámetros como nombre, id, tipo y desc se utilizan aquí. El valor de ID (es decir,. aa_font) debe ser único porque obtiene los valores de las opciones guardadas.
En la captura de pantalla anterior, hay un fuente tipo de opción llamada Mi opción de fuente dentro de un panel de administración Opciones aseadas. Existen varias opciones de configuración que se pueden configurar para configurar la configuración de fuente de su proyecto de desarrollo web.
Ahora recuperaré los valores de las opciones guardadas..
getOption ('aa_font'); / ** * * Impresión de valores de matriz de fuentes * * / var_dump ($ aa_font_array); ?>El proceso de obtención de los valores guardados es más o menos el mismo que se ha analizado en artículos anteriores. En la línea # 3, la obtener Instancia() se utiliza una función que ocupa un parámetro único, preferiblemente el nombre de su tema (es decir,. ordenadoen este caso). A continuación, utilicé el getOption () función (línea # 6), que obtiene el valor a través del ID aa_font, Y luego lo guardé en una nueva variable. $ aa_font_array.
Anteriormente, establecimos que el fuente La opción de tipo ocupa una serie de ajustes de parámetros incluso si no los definimos en realidad porque su valor predeterminado está establecido en cierto. Entonces, antes de mostrar los valores recuperados en el front-end, permítame imprimir este conjunto completo de parámetros.
Para ello he usado el var_dump () función (en la línea # 16) para la variable $ aa_font_array. Veamos cómo se imprime esta matriz:
En la captura de pantalla anterior, se muestra una descripción detallada de cada elemento de una matriz. Explica claramente cómo fuente Se establece la opción de tipo en Titan Framework.
Ahora, esta parte era solo una cosa adicional: nuestro objetivo principal es cambiar la configuración de fuente predeterminada e imprimirla en la parte delantera.
Reemplace la línea # 16 con las siguientes líneas de código:
Morell tristique habitante pellentesca.
En la línea 7, he usado el estilo CSS en línea dentro de una etiqueta H3 (encabezado 3). El valor correspondiente a la estilo atributo,es decir. tamaño de fuente, se imprime en la parte delantera.
Para este propósito, incrusté el eco comando, que imprime solo una parte específica de la matriz, es decir,. echo $ aa_font_array ['font_size'], en el CSS en línea. En esta etapa, el front-end aparece así:
El texto impreso es actualmente 14px en tamaño. Cambiemos este valor desde nuestro panel de control y previsualicemos el resultado.
Supongamos que establezco el valor de demostración en 30px.
Guarde esta configuración y descubra los cambios. Aquí está la captura de pantalla:
Un incremento tamaño de fuente del texto se ve claramente. De esta manera, puede ingresar cualquier elemento de matriz en la línea # 16 de código y obtener una vista previa de los resultados.
Vamos a crear un fuente opción de tipo en un metabox que tiene todos los campos de estilo en eso.
createOption (array ('id' => 'aa_mb_font', // El ID que se usará para obtener el valor de esta opción 'type' => 'font', // Tipo de opción que estamos creando 'name' => 'Mi opción de fuente', // Nombre de la opción que se mostrará 'desc' => 'Elija su configuración de fuente' // Descripción de la opción que se mostrará));He añadido un fuente opción de tipo con ID aa_mb_font en un metabox $ aa_metbox mediante el createOption () función (línea # 8). Aparece en contra del nombre 'Mi opción de fuente'.
Aquí está la captura de pantalla, donde puedes encontrar Mi opción de fuente dentro de un metabox mostrado al final de una pantalla de edición de página.
Este es un metabox personalizado que he creado con Titan Framework. Consulta mis artículos anteriores para saber cómo..
Ahora recuperaré los valores de las opciones guardadas..
getOption ('aa_mb_font', get_the_ID ()); // Compruebe si se estableció el valor / Validación $ aa_mb_font1_val = (is_array ($ aa_mb_font1_array) &&! Empty ($ aa_mb_font1_array)? TRUE: FALSE); ////////////////////////////////////////////////// /////////// // Obtenga todos los valores que necesita Abstracción de PHP y HTML // //////////////////////// ///////////////////////////////////// // Obtener el valor de color $ aa_mb_font1_clr_val = ($ aa_mb_font1_val == TRUE? $ Aa_mb_font1_array ['color']: 'red'); // Obtener el valor de la familia de fuentes $ aa_mb_font1_ffm_val = ($ aa_mb_font1_val == TRUE? $ Aa_mb_font1_array ['font-family']: 'Arial'); // Obtener el valor de tamaño de fuente $ aa_mb_font1_fsz_val = ($ aa_mb_font1_val == TRUE? $ Aa_mb_font1_array ['font-size']: '14px'); / ** * * Imprimir valores al inicio * * /?> Valor impreso de opción de tipo de fuente en metabox. El proceso de obtención de los valores que estoy usando aquí es algo complejo. En primer lugar obtener una instancia única a través de la obtener Instancia() Funciona en la línea # 3. A continuación, recupere el valor guardado mediante el registro de la ID aa_mb_font dentro de getOption () funciona como un parámetro (línea # 11).
Ahora, aa_mb_font no es un ID ordinario, sino que contiene una matriz asociativa completa de nuestras opciones de fuente. Guardé esta matriz asociativa en una nueva variable $ aa_mb_font1_array.
La línea # 14 valida la presencia de una matriz dentro de la variable $ aa_mb_font1_array y comprueba que no esté vacío. Este paso es importante porque no queremos terminar con errores fatales de PHP al generar un elemento de una variable que no es una matriz en primer lugar.
A veces, cuando el usuario no ha guardado ningún valor del panel de control y no ha configurado ningún valor predeterminado, esto getOption la función obtiene NULO. Para este propósito, se utiliza una declaración basada en la verificación. Si es una matriz y no está vacía, entonces pone un CIERTO valor, o si no es una matriz y está vacía, entonces establece FALSO como el valor de $ aa_mb_font1_val.
Si CIERTO, entonces significa:
$ aa_mb_font1_array es una matriz.$ aa_mb_font1_array no es una matriz vacía, sino que tiene elementos en ella. Si FALSO, entonces significa:
$ aa_mb_font1_array no es matriz, o $ aa_mb_font1_array es una matriz vacía y no tiene elementos en ella. Esta fue una validación general de la matriz de fuentes. Ahora extenderé este proceso a elementos de matriz individuales. Las líneas 21 a 27 obtienen los valores de las claves individuales en la matriz asociativa y definen un valor predeterminado si no existe ningún valor.
Por ejemplo, la línea # 21 explica que si la condición definida se mantiene CIERTO, lo que significa que existe un valor, a continuación, busque el color de una matriz y guardarlo en una variable $ aa_mb_font1_clr_val. Si no existe tal valor, entonces establezca el valor en rojo, que es por defecto en este caso. Hay varias formas de solucionar esto, por lo que es solo una de las formas que me gustan.
En resumen, si un usuario ha guardado un nuevo color de fuente en su tablero, aparecerá el color de fuente seleccionado; de otra manera rojose muestra. Recomiendo configurar las opciones predeterminadas al configurar la fuente para evitar tales problemas.
La misma explicación se aplica a las líneas # 24 y # 27, excepto por el hecho de que estas líneas validan los valores para Familia tipográfica y tamaño de fuente.
Al final, acabo de escribir el código que imprime el resultado en el front-end. En las líneas # 38 a # 48, se crea un div en HTML. Luego me hice eco de los valores de todas las variables deseadas a través del estilo CSS en línea.
Supongamos que configuro las siguientes configuraciones de fuente de demostración:
Así es como aparece en el front-end:
Ahora puedes probar algunas configuraciones nuevas tú mismo.
Vamos a crear esta opción dentro de una pestaña de administración, pero con un enfoque diferente.
createOption (array ('id' => 'aa_font_in_tab1_panel2', // El ID que se usará para obtener el valor de esta opción 'type' => 'font', // Tipo de opción que estamos creando 'name' => 'Mi opción de fuente', // Nombre de la opción que se mostrará en el panel de administración 'desc' => 'Elegir configuración de fuente', // Descripción de la opción que se mostrará en el panel de administración 'show_font_weight' => falso, // no se muestra el campo de fuente-peso 'show_font_style' => falso, // no se muestra el campo de estilo de fuente 'show_line_height' => falso, // no se muestra el campo de altura de línea 'show_letter_spacing' => falso, // El campo de espacio entre letras no se muestra 'show_text_transform' => false, // El campo de transformación de texto no se muestra 'show_font_variant' => false, // El campo de variante de fuente no se muestra 'show_text_shadow' => false, // El campo de sombra de texto no se muestra 'default' => array ('font-family' => 'Arial', // Valor predeterminado de font-family 'color' => 'red', // Valor predeterminado de color de fuente ' line-height '=>' 2em ', // Valor por defecto de line-height' font-w eight '=>' 500 '// Valor predeterminado de font-weight))); Esta vez estoy agregando un fuente opción de tipo pero permitiendo solo unos pocos campos de estilo a aparecer. El ID único de esta opción es aa_font_in_tab1_panel2. Mire la lista de parámetros y encontrará qué hace que este código sea diferente del anterior..
He cambiado el defecto valores de varios parámetros basados en verificación para falso. Esto significa que no aparecerán todos los campos de estilo de las líneas # 13 a # 19. También tenga en cuenta la presencia de defecto valores para las opciones de estilo como Familia tipográfica, color, línea-altura y peso de fuente.
UNA fuente tipo de opción llamada Mi opción de fuente existe en Pestaña 1 del panel de administración Opciones aseadas 2. Si desea conocer cómo se creó esta pestaña de administración a través de Titan Framework, hojee los artículos anteriores de esta serie..
En la captura de pantalla anterior, el menú de fuentes aparece menos detallado en términos de campos de estilo. La razón es bastante obvia, es decir, la falso Estado de una serie de parámetros en mi código. Observe otra cosa: los valores predeterminados de las opciones se establecen automáticamente, es decir,. 'font-family' => 'Arial' y color => 'rojo'.
¿Me salté algún detalle? ¡Sí! Estoy seguro de que debe preguntarse dónde están los valores predeterminados de altura de la línea y peso de fuente fuimos. Mira de nuevo la lista de parámetros y encontrarás los valores de show_line_height y show_font_weight están configurados para falso.
Esto significa que no importa en qué capacidad defina un parámetro, solo funcionará una vez establecido en cierto. El único propósito de agregar estos dos parámetros fue explicar este concepto. Por ahora, puedes omitir estos también.
Vamos a obtener los valores de las opciones guardadas:
getOption ('aa_font_in_tab1_panel2'); // Compruebe si se estableció el valor / Validación $ aa_font2_val = (is_array ($ aa_font2_array) ||! Empty ($ aa_font2_array)? TRUE: FALSE); ////////////////////////////////////////////////// /////////// // Obtenga todos los valores que necesita Abstracción de PHP y HTML // //////////////////////// ///////////////////////////////////// // Obtener valor de color $ aa_font2_clr_val = ($ aa_font2_val == TRUE? $ Aa_font2_array ['color']: 'red'); // Obtener el valor de la familia de fuentes $ aa_font2_ffm_val = ($ aa_font2_val == TRUE? $ Aa_font2_array ['font-family']: 'Arial'); // Obtener el valor de tamaño de fuente $ aa_font2_fsz_val = ($ aa_font2_val == TRUE? $ Aa_font2_array ['font-size']: '14px'); / ** * * Imprimir valores al inicio * * /?> Valor impreso de la opción de tipo de fuente en la pestaña. Las líneas escritas para recuperar los valores de las opciones guardadas son prácticamente las mismas que escribí anteriormente para un metabox. Sólo los nombres de las variables y los ID son diferentes. Entonces, solo estoy resumiendo los pasos escritos arriba:
En esta etapa, si obtengo una vista previa del front-end, solo se mostrarán las configuraciones predeterminadas de esta manera:
Supongamos que estas son nuestras nuevas configuraciones de fuente:
Aquí está la captura de pantalla de esta nueva configuración:
La diferencia entre los dos ajustes es bastante obvia..
Al final, vamos a crear esta opción dentro del personalizador..
createOption (array ('id' => 'aa_sec_font', // El ID que se usará para obtener el valor de esta opción 'type' => 'font', // Tipo de opción que estamos creando 'name' => 'Mi opción de fuente', // Nombre de la opción que se mostrará 'desc' => 'Elija su configuración de fuente' // Descripción de la opción que se mostrará));UNA fuente opción de tipo con ID aa_sec_font existe dentro de una sección de personalizador de tema $ aa_section1. Aparece con el nombre 'Mi opción de fuente'. El resto de los parámetros son los mismos..
Puede encontrar esta opción en la sección del personalizador de temas llamada Mi seccion.
Consigamos sus valores guardados..
getOption ('aa_sec_font'); // Compruebe si se estableció el valor / Validación $ aa_sec_font3_val = (is_array ($ aa_sec_font3_array) ||! Empty ($ aa_sec_font3_array)? TRUE: FALSE); ////////////////////////////////////////////////// /////////// // Obtenga todos los valores que necesita Abstracción de PHP y HTML // //////////////////////// ///////////////////////////////////// // Obtener valor de color $ aa_sec_font3_clr_val = ($ aa_sec_font3_val == TRUE? $ Aa_sec_font3_array ['color']: 'red'); // Obtener el valor de la familia de fuentes $ aa_sec_font3_ffm_val = ($ aa_sec_font3_val == TRUE? $ Aa_sec_font3_array ['font-family']: 'Arial'); // Obtener el valor de tamaño de fuente $ aa_sec_font3_fsz_val = ($ aa_sec_font3_val == TRUE? $ Aa_sec_font3_array ['font-size']: '14px'); / ** * * Imprimir valores al inicio * * /?> Valor impreso de la opción de tipo de fuente en el personalizador. Una vez más, este código es exactamente el mismo que escribí en el caso de una pestaña de administración y un metabox. Sólo los nombres de las variables y los ID son diferentes. Por lo tanto, refiérase a los detalles escritos arriba.
Echemos un vistazo a la vista previa en vivo de los cambios que hice.
En nuestra discusión sobre el fuente tipo de opción en Titan Framework, aprendimos que su parámetro CSS se comporta de manera algo diferente en comparación con otras opciones. Hoy, en este artículo, le mostraré cómo puede generar automáticamente CSS de su opción de tipo de fuente en un panel de administración personalizado o incluso en una sección de personalizador de temas..
Generalmente hablando, css es un cuerda escriba el parámetro, así que si lo configura, puede generar CSS automáticamente cada vez que se crea una opción de Titan Framework dentro de un panel de administración y / o una sección de personalizador de temas.
Sabemos que un fuente La opción de tipo en Titan Framework es básicamente una matriz asociativa que lleva una gama de campos de estilo, por ejemplo,.color, Familia tipográfica, tamaño de fuente, Del mismo modo, puede suceder que uses las mismas propiedades de estilo en algún otro lugar de tu tema o complemento. Escribiendo tantas opciones en el css El parámetro puede ser una tarea repetitiva y una pérdida de tiempo. Cuando no estás usando algunas de las propiedades, entonces qué?
Para simplificar las cosas, Titan Framework le permite asignar todos los estilos a sus selectores de CSS a través de las fuentes css parámetro. Simplemente usa el término valor Dentro de este parámetro ya está hecho tu trabajo. Déjame enseñarte como:
'h1.site-header value'
Como sabemos que el css El parámetro genera todas las reglas CSS necesarias, discutamos cuándo está dentro de los siguientes contenedores:
Nota: El alcance de este artículo se refiere únicamente al uso y comportamiento de css parámetro con el fuente Opción de tipo en Titan Framework. Si desea saber cómo se hacen estos contenedores o cómo agregar un fuente Escriba la opción en Titan Framework y luego consulte mis artículos anteriores..
Vamos a escribir su codigo.
createOption (array ('id' => 'aa_font', // El ID que se usará para obtener el valor de esta opción 'type' => 'font', // Tipo de opción que estamos creando 'name' => 'Mi opción de fuente', // Nombre de la opción que se mostrará 'desc' => 'Elija su configuración de fuente', // Descripción de la opción que se mostrará 'show_font_style' => false, 'show_letter_spacing' => false, 'show_text_transform' => false, 'show_font_variant' => false, 'show_text_shadow' => false, 'default' => array ('font-family' => 'Exo 2', 'color' => '# 888888 ',' line-height '=>' 2em ',' font-weight '=>' 500 ',),' css '=>' .aa_site_font1 value '));Este código crea un fuente opción de tipo en un panel de administración $ aa_panel con campos de estilo limitados. El ID de esta opción es aa_font. Todos los parámetros (líneas # 13 a # 17) donde los valores se establecen en falso no aparecerá También he añadido valores por defecto para el Familia tipográfica, color, altura de la línea y peso de fuente ajustes.
La línea # 24 define una css parámetro para una clase llamada .aa_site_font1. Tenga en cuenta que dentro de esta definición de clase, sólo he escrito valor. Esto significa que todos los CSS que generará este campo se colocarán donde valor está escrito. Entonces, dondequiera que se use esta clase, carga las propiedades CSS automáticamente.
La captura de pantalla anterior muestra la configuración de fuente actual y deja claro que esta opción se crea dentro de mi primer panel de administración, es decir,. Opciones aseadas.
Vamos a crear una etiqueta div con aa_site_font1 clase y ver el resultado en la parte delantera.
Valor de 'css' en la pestaña 2 de amdin panel2
Si nos fijamos en el código anterior, proporcionamos la css parámetro de la fuente campo una clase donde debería generar los resultados CSS, y esa clase fue aa_site_font1. Así que seguí adelante y creé un div con clase. aa_site_font1, para mostrar los resultados en la parte delantera.
En esta etapa, si nos fijamos en el front-end, se verá así:
Ahora cambiemos nuestra configuración predeterminada y hagamos que esta fuente sea más grande y de color rojo.
Los nuevos cambios aparecen en el front-end de esta manera. Recuerda que es solo un div en el front-end con la clase CSS aa_site_font1 en ella, que usamos dentro del css parámetro.
Así es como puedes agregar un css parámetro dentro de un fuente opcion de tipo Titan Framework generará automáticamente el CSS para él en tu tema.
Mira su codigo.
createOption (array ('id' => 'aa_sec_font', // El ID que se usará para obtener el valor de esta opción 'type' => 'font', // Tipo de opción que estamos creando 'name' => 'Mi opción de fuente', // Nombre de la opción que se mostrará 'desc' => 'Elija su configuración de fuente', // Descripción de la opción que se mostrará 'css' => '.aa_site_font2 valor' ));Esta vez, agregué el css parámetro con clase .aa_site_font2. Se define dentro de una fuente Opción de tipo que tiene todos los campos de estilo dentro de ella..
La captura de pantalla anterior muestra esta opción en una sección de personalizador de tema $ aa_section1. Además, mire las configuracione
