Share
Una de las características más interesantes de Titan Framework es que puede generar CSS automáticamente para todos los tipos de opciones. También existe un compilador Sass que no solo compila sino que también minimiza el CSS. Se definen dos formas diferentes para generar CSS. Generemos CSS automáticamente para tus opciones..
Básicamente, hay dos formas a través de las cuales puedes generar CSS automáticamente con TF (Titan Framework):
Accentsconagua
css parámetrocrearCSS funciónA lo largo de la serie, has encontrado el css Parámetro para definir reglas CSS en la mayoría de las opciones. En la documentación se indica que siempre que cree una opción en una página de administración y / o en la sección del personalizador de temas, css el parámetro genera CSS automáticamente (solo si está usando ese parámetro). Vamos a enumerar todas las opciones que soportan este parámetro:
Vamos a aprender cómo css parámetro genera propiedades CSS a través de un ejemplo.
Aquí, voy a crear una color Escriba la opción en un panel de administración. Usa el siguiente código:
createAdminPanel (array (// Nombre el menú de opciones 'nombre' => 'Opciones ordenadas')); / ** * * Cree las opciones de tipo de color en un Panel de administración * * / $ aa_panel-> createOption (array ('id' => 'aa_bg_color', // El ID que se usará para obtener el valor de esta opción ' escriba '=>' color ', // Tipo de opción que estamos creando' nombre '=>' Establecer color de fondo ', // Nombre de la opción que se mostrará en el panel de administración' desc '=>' Este es nuestro opción ', // Descripción de la opción que se mostrará en el panel de administración' css '=>' .aa_bg_class background-color: value; ')); Creé un color Opción de tipo en la línea # 19 que establece el valor del color. Yo defini el css parámetro en la línea # 25. He definido una clase y luego, dentro de ella, he definido la propiedad CSS donde quiero que se imprima el valor del color. Así que agregué una clase aa_bg_class, y dentro de ella agregué una propiedad CSS color de fondo: valor;. Aquí la palabra clave valor se intercambiará con la salida de esta opción, es decir, el color que el usuario seleccione la intercambiará.
Titan genera automáticamente un archivo CSS que contiene todas sus reglas CSS para usted. Crea el archivo dentro de WordPress. subidas carpeta en el formato: marco de titanio-. En mi caso es titan-framework-neat-css.css.
Usemos esta opción para generar CSS automáticamente.
He añadido una etiqueta div con clase aa_bg_class y algún texto ficticio en mi página.
Pellentesque morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas sempre. Avenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim en turpis pulvinar facilisis. Ut felis. Dapibus Praesent, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, portavoz del equipo, facilisis luctus, metus
Seleccionemos un color de demostración del administrador..
Mira, el color de fondo se ha aplicado automágicamente..
Hay otra forma de generar CSS con TF. Esto es a través de la crearCSS Función, que declara todos tus estilos CSS..
Vamos a explicar cómo funciona con un ejemplo..
Estoy usando el mismo color Escriba la opción que se explicó anteriormente.
createAdminPanel (array (// Nombre el menú de opciones 'nombre' => 'Opciones ordenadas')); / ** * * Cree la opción de tipo de color en $ aa_panel * * / $ aa_panel-> createOption (array ('id' => 'aa_color_opt', // El ID que se usará para obtener el valor de esta opción 'tipo '=>' color ', // Tipo de opción que estamos creando' nombre '=>' Elegir configuración de color ', // Nombre de la opción que se mostrará en el panel de administración' desc '=>' Esta es nuestra opción '// Descripción de la opción que se mostrará en el panel de administración)); / ** * * Use la función createCSS para generar CSS * * / $ titan-> createCSS ('h1 color: $ aa_color_opt;'); Aquí, he creado un panel de administración llamado Opciones aseadas en la línea # 7. Luego agregué un color Escriba la opción en la línea # 18. A continuación definí el crearCSS función en la línea # 33 que toma la variable $ aa_color_opt. Esta es básicamente la identificación del mismo. color Escriba la opción que acabo de definir, y esta variable tiene el valor del color que seleccionó el usuario final en el panel de administración..
Una vez más, tenga en cuenta que esta es una variable Sass (Syntactically Awesome Style Sheets) que corresponde al ID de la opción de la que desea obtener el valor. Así que no lo mezcle con una variable PHP normal.
He agregado comillas simples para evitar que se escape el signo $ de la variable. Dentro de CSS estoy apuntando a los encabezados h1. Configuré el valor de la opción de color contra la propiedad de color de CSS en la línea # 34.
En esta etapa, si obtiene una vista previa del extremo frontal, muestra el encabezado 1 en su color predeterminado.
Vamos a elegir cualquier color de demostración y guardarlo. Supongamos que selecciono # ed3325.
El color del encabezado ahora cambia a este nuevo valor. Aquí está la captura de pantalla:
Puedes leer más sobre la función createCSS.
Diviértete generando CSS con Titan Framework. Asegúrese de que está utilizando la última versión de Titan Framework.
En mi opinión, la crearCSS La función funciona realmente bien cuando necesita agregar múltiples valores CSS dinámicamente, de una manera más controlada y modular.
Si tiene alguna pregunta, comente aquí o comuníquese conmigo en Twitter.
