style.css<\/code>. Y al usar SCSS, lo m\u00e1s probable es que defina cosas recurrentes, como colores, tama\u00f1os o puntos de interrupci\u00f3n, como variables SCSS, y use esas variables en su dise\u00f1o.<\/p>\nPuede crear cualquier configuraci\u00f3n del Personalizador que desee para las variables en su archivo SCSS. Los selectores de colores, las entradas de n\u00fameros y de texto son perfectos para esto. Mientras el usuario cambia la configuraci\u00f3n en el Personalizador de WordPress, ver\u00e1 una vista previa del tema con las variables modificadas. Y cuando hagan clic en "Guardar", el CSS final se compilar\u00e1 en el archivo CSS de la hoja de estilo principal utilizando los valores elegidos.<\/p>\n
Como ejemplo para este tutorial, supondr\u00e9 que el archivo SCSS de la hoja de estilo principal del tema hace lo mismo que @import<\/code>un variables.scss<\/code>archivo. All\u00ed hemos definido tres variables que queremos que sean personalizables en el Personalizador: dos colores y un tama\u00f1o de texto en formato px<\/code>.<\/p>\n$main: #594c74 !default;\n$secondary: #555 !default;\n$text-size: 12px !default;<\/code><\/pre>\nTenga en cuenta que para permitir que SCSS redefina variables, deben definirse<\/strong> con !default<\/code>. Esta es una regla en SCSS<\/a>. Para que este tutorial funcione; cualquier variable que desee personalizar debe definirse como predeterminada en sus archivos SCSS.<\/p>\nDepende de usted cu\u00e1ndo (o si) desea sobrescribir el archivo CSS. Este tutorial asume que cuando el usuario hace clic en "Guardar" en el Personalizador, se volver\u00e1 a compilar y escribir en el CSS del tema. Sin embargo, mientras la vista previa del Personalizador est\u00e1 activa y el usuario est\u00e1 cambiando la configuraci\u00f3n (antes de hacer clic en Guardar), simplemente mostramos el CSS compilado en el encabezado de la vista previa del sitio web. No queremos sobrescribir el archivo CSS de inmediato en caso de que el usuario desee cancelar cualquier cambio que haya realizado.<\/p>\n
\u00a0 Tenga en cuenta\u2026<\/h3>\n
Este tutorial sobrescribir\u00e1 el style.css<\/code>archivo del tema cada vez que se guarde la configuraci\u00f3n del personalizador.<\/p>\nSupongo que ya compila sus archivos SCSS con un programa compilador (por ejemplo, Koala<\/a> o l\u00ednea de comandos). Tener este c\u00f3digo en su tema sobrescribir\u00e1 el archivo CSS, pero no cambiar\u00e1 sus archivos SCSS de origen. Esto significa que cada vez que realice cambios en el Personalizador y luego vuelva a sus archivos SCSS originales y los vuelva a compilar, \u00a1se perder\u00e1n los ajustes de Personalizaci\u00f3n!<\/p>\nHay varios m\u00e9todos para evitar esto y depende de su proyecto y de c\u00f3mo trabaje. En la mayor\u00eda de los casos no ser\u00eda un problema. Por lo general, es solo algo a tener en cuenta mientras desarrolla su tema. Si le est\u00e1 dando su tema finalizado a otra persona para que lo use, normalmente no tocar\u00eda sus archivos SCSS de todos modos.<\/p>\n
Con eso fuera del camino, comencemos a ver c\u00f3mo hacemos esto:<\/p>\n
\n- Familiarizarse con la biblioteca SCSSPHP e incluirla en nuestro tema<\/li>\n
- Crear configuraciones personalizadas para cada variable SCSS que queremos que sea personalizable<\/li>\n
- Asegurarse de que el Personalizador obtenga una vista previa de los cambios sobre la marcha<\/li>\n
- Al guardar la configuraci\u00f3n del Personalizador, volvemos a compilar y sobrescribimos el archivo CSS del tema.<\/li>\n<\/ol>\n
1 La biblioteca SCSSPHP<\/h2>\n
![\"C\u00f3mo](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152472-61e4dfd0532a5.png\")
<\/a><\/p>\nPara compilar los archivos SCSS usaremos una biblioteca SCSSPHP de leafo<\/a> (licencia MIT). Tenga en cuenta que este tutorial es para la biblioteca SCSS. El autor de la biblioteca tiene una biblioteca LESS PHP<\/a> similar si prefiere usar LESS, pero recuerde que el siguiente tutorial es para la biblioteca SCSS.<\/p>\n\u00a1La biblioteca SCSSPHP es realmente f\u00e1cil de usar! Aqu\u00ed hay una descripci\u00f3n general simplificada de c\u00f3mo usaremos la biblioteca en el PHP de nuestro tema:<\/p>\n
\n- Incluimos la biblioteca<\/li>\n
- Cree una nueva instancia de la clase de compilador de la biblioteca<\/li>\n
- Cargue el contenido del archivo SCSS de origen y p\u00e1selo al objeto compilador<\/li>\n
- Defina una matriz asociativa; Nombres de variables SCSS (incluido el
$<\/code>) como claves y sus valores. Cualquier elemento de esta matriz anular\u00e1 las variables del mismo nombre en el archivo SCSS proporcionado.<\/li>\n- Le pedimos al objeto compilador que compile y reciba el CSS compilado como una cadena a cambio. Luego podemos generar este CSS dentro
head<\/code>o podemos escribirlo en el style.css<\/code>archivo del tema.<\/li>\n<\/ul>\n\u00a0 \u00bfQu\u00e9 tipo de variables SCSS podemos compilar?<\/h3>\n
La respuesta simple es: \u00a1cualquier tipo de variable SCSS v\u00e1lida!<\/p>\n
La biblioteca SCSSPHP puede compilar cualquier tipo de variable SCSS v\u00e1lida, pero tenga en cuenta que debe asegurarse de que tengan el formato correcto desde el Personalizador. Por ejemplo, los colores deben tener el prefijo a #<\/code>para los colores hexadecimales o tener el formato de definiciones rgb()<\/code>o. rgba()<\/code>Una variable de tama\u00f1o generalmente necesitar\u00eda agregarse con ‘ px<\/code>‘, ‘ em<\/code>‘, ‘ %<\/code>‘, y as\u00ed sucesivamente.<\/p>\nSi planea crear un sistema avanzado para compilar variables SCSS a trav\u00e9s del tema del personalizador, \u00a1aseg\u00farese de tener un buen sistema para formatear correctamente cada tipo de variable!<\/p>\n
Dejemos el primer paso fuera del camino; descargando e incluyendo la biblioteca en nuestro tema:<\/p>\n
Descargar e incluir la biblioteca SCSSPHP en su tema<\/h3>\n
El primer paso es descargar la biblioteca SCSSPHP<\/a>. En la p\u00e1gina vinculada, haga clic en el bot\u00f3n "Descargar" en la parte superior. Si prefiere usar Composer, el sitio proporciona una gu\u00eda al respecto.<\/p>\nExtraiga el zip en una subcarpeta en alg\u00fan lugar dentro de su tema. Como ejemplo lo estoy colocando dentro de la theme\/inc\/scssphp\/<\/code>carpeta.<\/p>\nAbra el archivo PHP donde desea agregar su c\u00f3digo para compilar. Puede estar directamente dentro de su tema functions.php<\/code>o un archivo PHP incluido por functions.php<\/code>. En aras de la simplicidad, estoy escribiendo todo dentro functions.php<\/code>.<\/p>\nAntes de que podamos usar la biblioteca, debemos incluirla; al igual que:<\/p>\n
require_once(get_stylesheet_directory(). '\/inc\/scssphp\/scss.inc.php');<\/code><\/pre>\nAjuste la ruta a sus archivos en consecuencia. Necesitamos incluir el scss.inc.php<\/code>archivo que se encuentra dentro de la carpeta ra\u00edz de la biblioteca. \u00a1Ahora, despu\u00e9s de esta l\u00ednea podemos usar las clases de la biblioteca!<\/p>\n2 Creaci\u00f3n de la configuraci\u00f3n del Personalizador para las variables SCSS<\/h2>\n
Vamos a crear la configuraci\u00f3n del personalizador de WordPress para nuestras variables. Por el bien del tutorial, agregaremos configuraciones para las variables SCSS mencionadas anteriormente: dos selectores de color y una entrada de n\u00famero.<\/p>\n
No entrar\u00e9 en detalles para explicar c\u00f3mo agregar la configuraci\u00f3n del Personalizador; hay muchos tutoriales para esto. En el ejemplo de c\u00f3digo a continuaci\u00f3n, creo una nueva secci\u00f3n y coloco las tres configuraciones dentro:<\/p>\n
add_action('customize_register', function($wp_customize) {\n $wp_customize->add_section('theme-variables', [\n 'title' => __('Theme Variables', 'txtdomain'),\n 'priority' => 25\n ]);\n\u00a0\n $wp_customize->add_setting('theme-main', ['default' => '#594c74']);\n $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'theme-main', [\n 'section' => 'theme-variables',\n 'label' => __('Main theme color', 'txtdomain'),\n 'priority' => 10\n ]));\n\u00a0\n $wp_customize->add_setting('theme-secondary', ['default' => '#555']);\n $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'theme-secondary', [\n 'section' => 'theme-variables',\n 'label' => __('Secondary theme color', 'txtdomain'),\n 'priority' => 20\n ]));\n\u00a0\n $wp_customize->add_setting('theme-text-size', ['default' => '12']);\n $wp_customize->add_control('theme-text-size', [\n 'section' => 'theme-variables',\n 'label' => __('Text size', 'txtdomain'),\n 'type' => 'number',\n 'priority' => 30,\n 'input_attrs' => ['min' => 8, 'max' => 20, 'step' => 1]\n ]);\n});<\/code><\/pre>\nEste c\u00f3digo se engancha customize_register<\/code>y agrega una secci\u00f3n llamada "Variables de tema". Luego procede a agregar un selector de color ‘ theme-main<\/code>‘, otro selector de color ‘ theme-secondary<\/code>‘ y una entrada de n\u00famero ‘ theme-text-size<\/code>‘. Esta es toda la funcionalidad predeterminada de WordPress. Tambi\u00e9n agrego establecer el valor predeterminado de cada configuraci\u00f3n en los mismos valores definidos en el variables.scss<\/code>archivo. Esto es solo para garantizar que la configuraci\u00f3n del Personalizador se inicie con los colores correctos.<\/p>\n![\"C\u00f3mo](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152472-61e4dfd112a70.png\")
<\/a><\/p>\n\u00a1Se ve genial! Pero a partir de ahora no pasa nada cuando ajustas estas variables. Continuemos con el paso 3; manejo de la vista previa en el Personalizador.<\/p>\n
3 Compile CSS sobre la marcha en la vista previa del Personalizador<\/h2>\n
Este paso maneja la actualizaci\u00f3n de la vista previa del Personalizador mientras el usuario cambia la configuraci\u00f3n y no escribir\u00e1 en ninguno de nuestros archivos. En su lugar, mostraremos el CSS compilado en <head><\/code>la vista previa dentro de una <style><\/code>etiqueta. De esta manera, nos aseguramos de que el CSS en l\u00ednea anule todos los estilos del archivo CSS original.<\/p>\nPara verificar si actualmente estamos usando la vista previa del Personalizador, usamos la funci\u00f3n [is_customize_preview](https:\/\/developer.wordpress.org\/reference\/functions\/is_customize_preview\/)()<\/code>. Cuando esto regresa true<\/code>, creamos una funci\u00f3n enganchada a wp_head<\/code>. Dentro de la funci\u00f3n, iniciamos y configuramos la biblioteca SCSSPHP, buscamos los valores de configuraci\u00f3n actuales, compilamos el CSS y lo generamos en una <style><\/code>etiqueta.<\/p>\nrequire_once(get_stylesheet_directory(). '\/inc\/scssphp\/scss.inc.php');\n\u00a0\nif (is_customize_preview()) {\n add_action('wp_head', function() {\n $compiler = new ScssPhpScssPhpCompiler();\n\u00a0\n $source_scss = get_stylesheet_directory(). '\/assets\/scss\/style.scss';\n $scssContents = file_get_contents($source_scss);\n $import_path = get_stylesheet_directory(). '\/assets\/scss';\n $compiler->addImportPath($import_path);\n\u00a0\n $variables = [\n '$main' => get_theme_mod('theme-main', '#594c74'),\n '$secondary' => get_theme_mod('theme-secondary', '#555'),\n '$text-size' => get_theme_mod('theme-text-size', '12'). 'px',\n ];\n $compiler->setVariables($variables);\n\u00a0\n $css = $compiler->compile($scssContents);\n if (!empty($css) && is_string($css)) {\n echo '<style type=\"text\/css\">'. $css. '<\/style>';\n }\n });\n}<\/code><\/pre>\nEn l\u00ednea #7<\/code>, definimos la ruta al archivo SCSS de origen y cargamos su contenido en una variable en #8<\/code>. Y en l\u00ednea configuramos la ruta de importaci\u00f3n para la biblioteca para garantizar que cualquier #9<\/code>correo electr\u00f3nico funcione correctamente en nuestros archivos SCSS. Puede leer m\u00e1s sobre esto en el sitio de documentaci\u00f3n de la biblioteca<\/a>, bajo el t\u00edtulo "Rutas de importaci\u00f3n". B\u00e1sicamente, la biblioteca SCSSPHP necesita conocer la ruta relativa de su carpeta SCSS para que todas las rutas sean correctas.#10``@import<\/code><\/a>@import<\/code><\/p>\nEn l\u00ednea #12-16<\/code>creamos la matriz para el compilador; una matriz asociativa con los nombres de las variables como claves. Para los valores que usamos [get_theme_mod](https:\/\/developer.wordpress.org\/reference\/functions\/get_theme_mod\/)()<\/code>para obtener los valores del Personalizador. La funci\u00f3n get_theme_mod()<\/code>le permite definir un valor predeterminado como segundo par\u00e1metro si el valor no se guard\u00f3. Esto nos evita bloquear el compilador con valores como null<\/code>. Por lo tanto, proporcionamos el mismo valor predeterminado que en nuestro archivo de variables SCSS y cuando registramos la configuraci\u00f3n del Personalizador.<\/p>\nTambi\u00e9n tenga en cuenta que el c\u00f3digo en la l\u00ednea #15<\/code>agrega un ‘ px<\/code>‘, lo que garantiza que el valor de la variable real sea v\u00e1lido. De lo contrario, se compilar\u00eda como " $text-size: 12;<\/code>" cuando necesitemos " $text-size: 12px;<\/code>". Proporcionamos la matriz de variables al compilador en la l\u00ednea #17<\/code>, dici\u00e9ndole que compile usando estas variables.<\/p>\nLuego, en l\u00ednea #19-22<\/code>, llamamos a la compile()<\/code>funci\u00f3n que deber\u00eda devolver el CSS compilado como una cadena. Damos salida a una <style><\/code>etiqueta con la cadena CSS dentro. Debido a que estamos enganchados a wp_head<\/code>, el Personalizador mostrar\u00e1 la vista previa con el CSS modificado cada vez que se realice un cambio.<\/p>\n4 Guardar el CSS compilado en la hoja de estilo del tema<\/h2>\n
El c\u00f3digo para compilar el CSS es muy similar al paso anterior. La \u00fanica diferencia es que ahora estamos escribiendo el CSS en un archivo en lugar de generarlo. Realmente deber\u00eda<\/strong> considerar poner esto en una funci\u00f3n para que no repita el c\u00f3digo, pero en aras de la claridad, he elegido separar los dos.<\/p>\nNos conectamos a [customize_save_after](https:\/\/developer.wordpress.org\/reference\/hooks\/customize_save_after\/)<\/code>qu\u00e9 disparadores cada vez que alguien hace clic en Guardar en el Personalizador de WordPress. En este punto, buscamos el SCSS de origen, definimos los valores de las variables y lo compilamos en CSS. Con la cadena CSS, usamos una funci\u00f3n PHP simple para escribirla en el archivo CSS del tema.<\/p>\nadd_action('customize_save_after', function() {\n $compiler = new ScssPhpScssPhpCompiler();\n\u00a0\n $source_scss = get_stylesheet_directory(). '\/assets\/scss\/style.scss';\n $scssContents = file_get_contents($source_scss);\n $import_path = get_stylesheet_directory(). '\/assets\/scss';\n $compiler->addImportPath($import_path);\n $target_css = get_stylesheet_directory(). '\/style.css';\n\u00a0\n $variables = [\n '$main' => get_theme_mod('theme-main', '#594c74'),\n '$secondary' => get_theme_mod('theme-secondary', '#555'),\n '$text-size' => get_theme_mod('theme-text-size', '12'). 'px',\n ]; \n $compiler->setVariables($variables);\n\u00a0\n $css = $compiler->compile($scssContents);\n if (!empty($css) && is_string($css)) {\n file_put_contents($target_css, $css);\n }\n});<\/code><\/pre>\nLa \u00fanica diferencia con respecto a antes est\u00e1 en la l\u00ednea #8<\/code>donde definimos el archivo de destino para escribir y la l\u00ednea #19<\/code>donde escribimos en el archivo.<\/p>\n\u00a0 Conclusi\u00f3n<\/h2>\n
Ahora tenemos la configuraci\u00f3n del Personalizador que controla las variables en el archivo SCSS del tema y sobrescribe la hoja de estilo principal del tema usando esas variables. \u00a1No hay l\u00edmite para la cantidad o el tipo de configuraciones que desea permitir que los usuarios del tema personalicen! Invierta algo de tiempo en configurar un sistema adecuado para manejar el formato de diferentes tipos de variables (p. ej., prefijos o postfijos) y estructurar correctamente la configuraci\u00f3n del Personalizador. \u00a1Los usuarios del tema apreciar\u00e1n la flexibilidad y lo f\u00e1cil que es personalizar su tema!<\/p>\n
Tambi\u00e9n puede descubrir diferentes formas de manejar la escritura de archivos del CSS final. Si no desea sobrescribir la hoja de estilo principal, tal vez desee enviarla a un archivo diferente. Tambi\u00e9n puede considerar el uso de condicionales if-else en SCSS<\/a>.<\/p>\nEste tutorial fue escrito para brindarle un trampol\u00edn sobre c\u00f3mo puede personalizar su tema de WordPress desde el Personalizador. \u00a1Av\u00edseme si le sirvi\u00f3 de algo, o si desea un tutorial m\u00e1s avanzado que asegure que la hoja de estilo del tema no se sobrescriba!<\/p>\n