style.css<\/code>. E usando SCSS voc\u00ea provavelmente define coisas recorrentes como cores, tamanhos ou pontos de interrup\u00e7\u00e3o como vari\u00e1veis \u200b\u200bSCSS e usa essas vari\u00e1veis \u200b\u200bem todo o seu estilo.<\/p>\nVoc\u00ea pode criar qualquer e quantas configura\u00e7\u00f5es do Customizer desejar para as vari\u00e1veis \u200b\u200bem seu arquivo SCSS. Colorpickers, n\u00fameros e entradas de texto s\u00e3o perfeitos para isso. Enquanto o usu\u00e1rio altera as configura\u00e7\u00f5es no WordPress Customizer, ele ver\u00e1 uma pr\u00e9via do tema com as vari\u00e1veis \u200b\u200balteradas. E quando eles clicarem em “Salvar", o CSS final ser\u00e1 compilado no arquivo CSS da folha de estilo principal usando os valores escolhidos.<\/p>\n
Como exemplo para este tutorial, assumirei que o arquivo SCSS da folha de estilo principal do tema faz @import<\/code>um variables.scss<\/code>arquivo. Nele definimos tr\u00eas vari\u00e1veis \u200b\u200bque queremos que sejam personaliz\u00e1veis \u200b\u200bno Customizer: Duas cores e um tamanho de texto em px<\/code>.<\/p>\n$main: #594c74 !default;\n$secondary: #555 !default;\n$text-size: 12px !default;<\/code><\/pre>\nObserve que, para permitir que o SCSS redefina vari\u00e1veis, elas devem ser definidas<\/strong> com !default<\/code>. Esta \u00e9 uma regra em SCSS<\/a>. Para que este tutorial funcione; quaisquer vari\u00e1veis \u200b\u200bque voc\u00ea deseja que sejam personaliz\u00e1veis \u200b\u200bdevem ser definidas como padr\u00e3o em seus arquivos SCSS.<\/p>\nCabe a voc\u00ea quando (ou se) deseja substituir o arquivo CSS. Este tutorial assume que quando o usu\u00e1rio clicar em “Salvar” no Customizer, ele ir\u00e1 recompilar e gravar no CSS do tema. No entanto, enquanto a visualiza\u00e7\u00e3o do Customizer estiver ativa e o usu\u00e1rio estiver alterando as configura\u00e7\u00f5es (antes de clicar em Salvar), simplesmente enviamos o CSS compilado no cabe\u00e7alho para a visualiza\u00e7\u00e3o do site. N\u00e3o queremos substituir o arquivo CSS imediatamente caso o usu\u00e1rio queira cancelar as altera\u00e7\u00f5es feitas.<\/p>\n
\u00a0 Tenha em mente\u2026<\/h3>\n
Este tutorial substituir\u00e1 o arquivo do tema style.css<\/code>sempre que as configura\u00e7\u00f5es do Personalizador forem salvas.<\/p>\nSuponho que voc\u00ea j\u00e1 compile seus arquivos SCSS com um programa compilador (por exemplo, Koala<\/a> ou linha de comando). Ter esse c\u00f3digo em seu tema substituir\u00e1 o arquivo CSS, mas n\u00e3o alterar\u00e1 seus arquivos SCSS de origem. Isso significa que sempre que voc\u00ea fizer altera\u00e7\u00f5es no Customizer e depois voltar para seus arquivos SCSS originais e recompilar, suas configura\u00e7\u00f5es de Customize ser\u00e3o perdidas!<\/p>\nExistem v\u00e1rios m\u00e9todos para contornar isso e depende do seu projeto e de como voc\u00ea trabalha. Na maioria dos casos n\u00e3o seria um problema. Geralmente \u00e9 apenas uma coisa a ter em mente enquanto voc\u00ea est\u00e1 desenvolvendo seu tema. Se voc\u00ea est\u00e1 dando seu tema finalizado para outra pessoa usar, eles normalmente n\u00e3o tocariam em seus arquivos SCSS de qualquer maneira.<\/p>\n
Com isso fora do caminho, vamos come\u00e7ar a analisar como fazemos isso:<\/p>\n
\n- Familiarizando-se com a biblioteca SCSSPHP e incluindo-a em nosso tema<\/li>\n
- Crie configura\u00e7\u00f5es do Customizer para cada vari\u00e1vel SCSS que queremos que seja personaliz\u00e1vel<\/li>\n
- Certificando-se de que o Personalizador visualiza as altera\u00e7\u00f5es em movimento<\/li>\n
- Ao salvar as configura\u00e7\u00f5es do Customizer, recompilamos e sobrescrevemos o arquivo CSS do tema.<\/li>\n<\/ol>\n
1 A biblioteca SCSSPHP<\/h2>\n
![\"Como](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152472-61e4dfd0532a5.png\")
<\/a><\/p>\nPara compilar os arquivos SCSS, usaremos uma biblioteca SCSSPHP da leafo<\/a> (licen\u00e7a MIT). Observe que este tutorial \u00e9 para a biblioteca SCSS. O autor da biblioteca tem uma biblioteca LESS PHP<\/a> semelhante se voc\u00ea preferir usar LESS, mas lembre-se de que o tutorial a seguir \u00e9 para a biblioteca SCSS.<\/p>\nA biblioteca SCSSPHP \u00e9 realmente simples de usar! Aqui est\u00e1 uma vis\u00e3o geral simplificada de como usaremos a biblioteca no PHP do nosso tema:<\/p>\n
\n- Inclu\u00edmos a biblioteca<\/li>\n
- Crie uma nova inst\u00e2ncia da classe do compilador da biblioteca<\/li>\n
- Carregar o conte\u00fado do arquivo SCSS de origem e pass\u00e1-lo para o objeto do compilador<\/li>\n
- Defina um array associativo; Nomes de vari\u00e1veis \u200b\u200bSCSS (incluindo o
$<\/code>) como chaves e seus valores. Qualquer elemento nesta matriz substituir\u00e1 as vari\u00e1veis \u200b\u200bde mesmo nome no arquivo SCSS fornecido.<\/li>\n- Pedimos ao objeto compilador para compilar e receber o CSS compilado como uma string em troca. Podemos ent\u00e3o produzir este CSS dentro
head<\/code>ou podemos escrev\u00ea-lo no style.css<\/code>arquivo do tema<\/li>\n<\/ul>\n\u00a0 Que tipo de vari\u00e1veis \u200b\u200bSCSS podemos compilar?<\/h3>\n
A resposta simples \u00e9: Qualquer tipo de vari\u00e1vel SCSS v\u00e1lida!<\/p>\n
A biblioteca SCSSPHP pode compilar qualquer tipo de vari\u00e1vel SCSS v\u00e1lida, mas lembre-se de que voc\u00ea deve certificar-se de que elas sejam formatadas corretamente no Customizer. Por exemplo, as cores precisam ser prefixadas com um #<\/code>para cores hexadecimais ou ser formatadas como rgb()<\/code>ou rgba()<\/code>defini\u00e7\u00f5es. Uma vari\u00e1vel de tamanho normalmente precisaria ser anexada com ‘ px<\/code>‘, ‘ em<\/code>‘, ‘ %<\/code>‘ e assim por diante.<\/p>\nSe voc\u00ea planeja fazer um sistema avan\u00e7ado para compilar vari\u00e1veis \u200b\u200bSCSS atrav\u00e9s do tema Customizer, certifique-se de ter um bom sistema para formatar corretamente cada tipo de vari\u00e1vel!<\/p>\n
Vamos dar o primeiro passo; baixando e incluindo a biblioteca em nosso tema:<\/p>\n
Baixando e incluindo a biblioteca SCSSPHP em seu tema<\/h3>\n
O primeiro passo \u00e9 baixar a biblioteca SCSSPHP<\/a>. Na p\u00e1gina vinculada, clique no bot\u00e3o "Download" no topo. Se voc\u00ea preferir usar o Composer, o site fornece um guia sobre isso.<\/p>\nExtraia o zip em uma subpasta em algum lugar dentro do seu tema. Como exemplo, estou colocando-o dentro da theme\/inc\/scssphp\/<\/code>pasta.<\/p>\nAbra o arquivo PHP onde voc\u00ea deseja adicionar seu c\u00f3digo para compilar. Pode estar diretamente dentro do seu tema functions.php<\/code>ou em um arquivo PHP inclu\u00eddo por functions.php<\/code>. Para simplificar, estou escrevendo tudo dentro do functions.php<\/code>.<\/p>\nAntes de podermos usar a biblioteca, precisamos inclu\u00ed-la; igual a:<\/p>\n
require_once(get_stylesheet_directory(). '\/inc\/scssphp\/scss.inc.php');<\/code><\/pre>\nAjuste o caminho para seus arquivos de acordo. Precisamos incluir o scss.inc.php<\/code>arquivo encontrado dentro da pasta raiz da biblioteca. Agora, ap\u00f3s esta linha podemos usar as classes da biblioteca!<\/p>\n2 Criando as configura\u00e7\u00f5es do Customizer para as vari\u00e1veis \u200b\u200bSCSS<\/h2>\n
Vamos criar as configura\u00e7\u00f5es do WordPress Customizer para nossas vari\u00e1veis. Para fins do tutorial, adicionaremos configura\u00e7\u00f5es para as vari\u00e1veis \u200b\u200bSCSS mencionadas acima: dois colorpickers e uma entrada num\u00e9rica.<\/p>\n
N\u00e3o entrarei em detalhes explicando como adicionar configura\u00e7\u00f5es do Customizer \u2013 existem muitos tutoriais para isso. No exemplo de c\u00f3digo abaixo eu crio uma nova se\u00e7\u00e3o e coloco as tr\u00eas configura\u00e7\u00f5es 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 conecta customize_register<\/code>e adiciona uma se\u00e7\u00e3o chamada “Vari\u00e1veis \u200b\u200bde Tema”. Em seguida, ele adiciona um seletor de cores ‘ theme-main<\/code>‘, outro seletor de cores ‘ theme-secondary<\/code>‘ e uma entrada num\u00e9rica ‘ theme-text-size<\/code>‘. Esta \u00e9 toda a funcionalidade padr\u00e3o do WordPress. Eu tamb\u00e9m adiciono definir o padr\u00e3o de cada configura\u00e7\u00e3o para os mesmos valores definidos no variables.scss<\/code>arquivo. Isso \u00e9 apenas para garantir que as configura\u00e7\u00f5es do Personalizador sejam iniciadas com as cores corretas.<\/p>\n![\"Como](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152472-61e4dfd112a70.png\")
<\/a><\/p>\nEst\u00e1 \u00f3timo! Mas a partir de agora nada acontece quando voc\u00ea ajusta essas vari\u00e1veis. Vamos continuar com o passo 3; manipula\u00e7\u00e3o de visualiza\u00e7\u00e3o no Customizer.<\/p>\n
3 Compile CSS em movimento na visualiza\u00e7\u00e3o do Customizer<\/h2>\n
Esta etapa trata da atualiza\u00e7\u00e3o da visualiza\u00e7\u00e3o do Personalizador enquanto o usu\u00e1rio altera as configura\u00e7\u00f5es e n\u00e3o grava em nenhum de nossos arquivos. Em vez disso, enviaremos o CSS compilado na <head><\/code>visualiza\u00e7\u00e3o dentro de uma <style><\/code>tag. Dessa forma, garantimos que o CSS inline substitua todo o estilo do arquivo CSS original.<\/p>\nPara verificar se estamos ou n\u00e3o usando a visualiza\u00e7\u00e3o do Customizer, usamos a fun\u00e7\u00e3o [is_customize_preview](https:\/\/developer.wordpress.org\/reference\/functions\/is_customize_preview\/)()<\/code>. Quando isso retorna true<\/code>, criamos uma fun\u00e7\u00e3o vinculada ao wp_head<\/code>. Dentro da fun\u00e7\u00e3o, iniciamos e configuramos a biblioteca SCSSPHP, buscamos os valores de configura\u00e7\u00e3o atuais, compilamos o CSS e o enviamos em uma <style><\/code>tag.<\/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>\nNa linha #7<\/code>definimos o caminho para o arquivo SCSS de origem e carregamos seu conte\u00fado em uma vari\u00e1vel em #8<\/code>. E na linha #9<\/code>e #10<\/code>configuramos o caminho de importa\u00e7\u00e3o para a biblioteca para garantir que qualquer @import<\/code>s funcione corretamente em nossos arquivos SCSS. Voc\u00ea pode ler mais sobre isso no site de documenta\u00e7\u00e3o da biblioteca<\/a>, sob o t\u00edtulo “Import Paths”. Basicamente, a biblioteca SCSSPHP precisa saber o caminho relativo da sua pasta SCSS para que todos os @import<\/code>caminhos estejam corretos.<\/p>\nNa linha #12-16<\/code>criamos o array para o compilador; uma matriz associativa com os nomes das vari\u00e1veis \u200b\u200bcomo chaves. Para os valores que usamos [get_theme_mod](https:\/\/developer.wordpress.org\/reference\/functions\/get_theme_mod\/)()<\/code>para obter os valores do Customizer. A fun\u00e7\u00e3o get_theme_mod()<\/code>permite definir um padr\u00e3o como segundo par\u00e2metro se o valor n\u00e3o foi salvo. Isso nos poupa de travar o compilador com valores como null<\/code>. Portanto, fornecemos o mesmo padr\u00e3o de nosso arquivo de vari\u00e1veis \u200b\u200bSCSS e quando registramos as configura\u00e7\u00f5es do Personalizador.<\/p>\nObserve tamb\u00e9m que o c\u00f3digo na linha #15<\/code>anexa um ‘ px<\/code>‘, garantindo que o valor real da vari\u00e1vel seja v\u00e1lido. Caso contr\u00e1rio, compilaria como ” $text-size: 12;<\/code>” quando precisarmos de ” $text-size: 12px;<\/code>“. Fornecemos o array de vari\u00e1veis \u200b\u200bpara o compilador em line #17<\/code>, dizendo para compilar usando essas vari\u00e1veis.<\/p>\nEnt\u00e3o na linha #19-22<\/code>chamamos a compile()<\/code>fun\u00e7\u00e3o que deve retornar o CSS compilado como uma string. N\u00f3s produzimos uma <style><\/code>tag com a string CSS dentro. Como estamos viciados em wp_head<\/code>, o Personalizador renderizar\u00e1 a visualiza\u00e7\u00e3o com o CSS alterado toda vez que uma altera\u00e7\u00e3o for feita.<\/p>\n4 Salvando o CSS compilado na folha de estilo do tema<\/h2>\n
O c\u00f3digo para compilar o CSS \u00e9 muito semelhante ao da etapa anterior. A \u00fanica diferen\u00e7a \u00e9 que agora estamos escrevendo o CSS em um arquivo em vez de emiti-lo. Voc\u00ea realmente deveria<\/strong> considerar colocar isso em uma fun\u00e7\u00e3o para que voc\u00ea n\u00e3o repita o c\u00f3digo, mas por uma quest\u00e3o de clareza eu escolhi separar os dois.<\/p>\nN\u00f3s nos conectamos a [customize_save_after](https:\/\/developer.wordpress.org\/reference\/hooks\/customize_save_after\/)<\/code>quais gatilhos sempre que algu\u00e9m clica em Salvar no WordPress Customizer. Neste ponto, buscamos o SCSS de origem, definimos os valores das vari\u00e1veis \u200b\u200be compilamos em CSS. Com a string CSS, usamos uma fun\u00e7\u00e3o PHP simples para grav\u00e1-la no arquivo CSS do 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>\nA \u00fanica diferen\u00e7a de antes est\u00e1 na linha #8<\/code>onde definimos o arquivo de destino para gravar e na linha #19<\/code>onde gravamos no arquivo.<\/p>\n\u00a0 Conclus\u00e3o<\/h2>\n
Agora temos configura\u00e7\u00f5es do Customizer que controlam as vari\u00e1veis \u200b\u200bno arquivo SCSS do tema e sobrescrevem a folha de estilo principal do tema usando essas vari\u00e1veis. N\u00e3o h\u00e1 limite para quantas ou que tipo de configura\u00e7\u00f5es voc\u00ea deseja permitir que os usu\u00e1rios do tema personalizem! Invista algum tempo na configura\u00e7\u00e3o de um sistema adequado para lidar com a formata\u00e7\u00e3o de diferentes tipos de vari\u00e1veis \u200b\u200b(por exemplo, prefixos ou p\u00f3s-fixos) e estruturar adequadamente as configura\u00e7\u00f5es do Customizer. Os usu\u00e1rios do tema apreciar\u00e3o a flexibilidade e a facilidade de personalizar seu tema!<\/p>\n
Voc\u00ea tamb\u00e9m pode descobrir diferentes maneiras de lidar com a grava\u00e7\u00e3o do arquivo do CSS final. Se voc\u00ea n\u00e3o quiser sobrescrever a folha de estilo principal, talvez queira envi\u00e1-la para um arquivo diferente. Voc\u00ea tamb\u00e9m pode usar condicionais if-else no SCSS<\/a>.<\/p>\nEste tutorial foi escrito para fornecer um trampolim sobre como voc\u00ea pode personalizar seu tema do WordPress no Customizer. Deixe-me saber se foi \u00fatil para voc\u00ea \u2013 ou se voc\u00ea quer um tutorial mais avan\u00e7ado que garanta que a folha de estilo do tema n\u00e3o seja substitu\u00edda!<\/p>\n