style.css<\/code>. U\u017cywaj\u0105c SCSS, najprawdopodobniej definiujesz powtarzaj\u0105ce si\u0119 rzeczy, takie jak kolory, rozmiary lub punkty przerwania, jako zmienne SCSS i u\u017cywasz tych zmiennych w swojej stylizacji.<\/p>\nDla zmiennych w pliku SCSS mo\u017cna utworzy\u0107 dowolne i dowoln\u0105 liczb\u0119 ustawie\u0144 Customizer. Idealnie do tego nadaj\u0105 si\u0119 selektory kolor\u00f3w, wprowadzanie liczb i tekstu. Gdy u\u017cytkownik zmieni ustawienia w WordPress Customizer, zobaczy podgl\u0105d motywu ze zmienionymi zmiennymi. A kiedy klikn\u0105 \u201eZapisz", ostateczny CSS zostanie skompilowany do g\u0142\u00f3wnego pliku CSS arkusza styl\u00f3w przy u\u017cyciu wybranych warto\u015bci.<\/p>\n
Jako przyk\u0142ad dla tego samouczka przyjm\u0119, \u017ce g\u0142\u00f3wny plik SCSS arkusza styl\u00f3w motywu robi @import<\/code>plik variables.scss<\/code>. Tam zdefiniowali\u015bmy trzy zmienne, kt\u00f3re chcemy dostosowa\u0107 w Customizer: Dwa kolory i jeden rozmiar tekstu w px<\/code>.<\/p>\n$main: #594c74 !default;\n$secondary: #555 !default;\n$text-size: 12px !default;<\/code><\/pre>\nNale\u017cy pami\u0119ta\u0107, \u017ce aby umo\u017cliwi\u0107 SCSS ponowne zdefiniowanie zmiennych, nale\u017cy je zdefiniowa\u0107<\/strong> za pomoc\u0105 !default<\/code>. To jest zasada w SCSS<\/a>. Aby ten samouczek dzia\u0142a\u0142; wszelkie zmienne, kt\u00f3re chcesz dostosowa\u0107, musz\u0105 by\u0107 zdefiniowane jako domy\u015blne w plikach SCSS.<\/p>\nOd Ciebie zale\u017cy, kiedy (lub czy) chcesz nadpisa\u0107 plik CSS. W tym samouczku za\u0142o\u017cono, \u017ce gdy u\u017cytkownik kliknie \u201eZapisz” w programie Customizer, nast\u0105pi ponowna kompilacja i zapis do CSS motywu. Jednak gdy podgl\u0105d Customizera jest aktywny, a u\u017cytkownik zmienia ustawienia (przed klikni\u0119ciem Zapisz), po prostu wypisujemy skompilowany CSS w nag\u0142\u00f3wku do podgl\u0105du witryny. Nie chcemy od razu nadpisywa\u0107 pliku CSS na wypadek, gdyby u\u017cytkownik chcia\u0142 anulowa\u0107 wprowadzone przez siebie zmiany.<\/p>\n
\u00a0 Pami\u0119ta\u0107\u2026<\/h3>\n
Ten samouczek nadpisze plik motywu za style.css<\/code>ka\u017cdym razem, gdy ustawienia Customizer zostan\u0105 zapisane.<\/p>\nZak\u0142adam, \u017ce ju\u017c skompilowa\u0142e\u015b swoje pliki SCSS programem kompiluj\u0105cym (np. Koala<\/a> lub wiersz polece\u0144). Posiadanie tego kodu w motywie spowoduje nadpisanie pliku CSS, ale nie zmieni \u017ar\u00f3d\u0142owych plik\u00f3w SCSS. Oznacza to, \u017ce za ka\u017cdym razem, gdy dokonasz zmian w programie Customizer, a nast\u0119pnie wr\u00f3cisz do oryginalnych plik\u00f3w SCSS i ponownie je skompilujesz, ustawienia dostosowania zostan\u0105 utracone!<\/p>\nIstnieje kilka sposob\u00f3w na obej\u015bcie tego i zale\u017cy to od twojego projektu i sposobu pracy. W wi\u0119kszo\u015bci przypadk\u00f3w nie stanowi\u0142oby to problemu. Zwykle nale\u017cy o tym pami\u0119ta\u0107 podczas opracowywania motywu. Je\u015bli przekazujesz sw\u00f3j sfinalizowany motyw komu\u015b innemu, zwykle i tak nie dotyka on twoich plik\u00f3w SCSS.<\/p>\n
Pomijaj\u0105c to, zacznijmy przyjrze\u0107 si\u0119, jak to robimy:<\/p>\n
\n- Zapoznanie si\u0119 z bibliotek\u0105 SCSSPHP i w\u0142\u0105czenie jej do naszego motywu<\/li>\n
- Utw\u00f3rz ustawienia Customizer dla ka\u017cdej zmiennej SCSS, kt\u00f3r\u0105 chcemy dostosowa\u0107<\/li>\n
- Upewnienie si\u0119, \u017ce Customizer wy\u015bwietla podgl\u0105d zmian w podr\u00f3\u017cy<\/li>\n
- Podczas zapisywania ustawie\u0144 Customizer ponownie kompilujemy i nadpisujemy plik CSS motywu.<\/li>\n<\/ol>\n
1 Biblioteka SCSSPHP<\/h2>\n
![\"Jak](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152472-61e4dfd0532a5.png\")
<\/a><\/p>\nDo kompilacji plik\u00f3w SCSS u\u017cyjemy biblioteki SCSSPHP firmy leafo<\/a> (licencja MIT). Pami\u0119taj, \u017ce ten samouczek dotyczy biblioteki SCSS. Autor biblioteki ma podobn\u0105 bibliotek\u0119 LESS PHP,<\/a> je\u015bli wolisz u\u017cywa\u0107 LESS, ale pami\u0119taj, \u017ce poni\u017cszy samouczek dotyczy biblioteki SCSS.<\/p>\nBiblioteka SCSSPHP jest naprawd\u0119 prosta w u\u017cyciu! Oto uproszczony przegl\u0105d tego, jak b\u0119dziemy u\u017cywa\u0107 biblioteki w PHP naszego motywu:<\/p>\n
\n- Zawieramy bibliotek\u0119<\/li>\n
- Utw\u00f3rz now\u0105 instancj\u0119 klasy kompilatora z biblioteki<\/li>\n
- Za\u0142aduj zawarto\u015b\u0107 \u017ar\u00f3d\u0142owego pliku SCSS i przeka\u017c go do obiektu kompilatora<\/li>\n
- Zdefiniuj tablic\u0119 asocjacyjn\u0105; Nazwy zmiennych SCSS (w tym
$<\/code>) jako klucze i ich warto\u015bci. Ka\u017cdy element w tej tablicy zast\u0105pi zmienne o tej samej nazwie w dostarczonym pliku SCSS.<\/li>\n- Prosimy obiekt kompilatora, aby skompilowa\u0142 i odebra\u0142 skompilowany CSS w postaci ci\u0105gu znak\u00f3w. Nast\u0119pnie mo\u017cemy albo wyprowadzi\u0107 ten CSS w \u015brodku
head<\/code>, albo zapisa\u0107 to w style.css<\/code>pliku motywu<\/li>\n<\/ul>\n\u00a0 Jakie zmienne SCSS mo\u017cemy skompilowa\u0107?<\/h3>\n
Prosta odpowied\u017a brzmi: Dowolny rodzaj prawid\u0142owej zmiennej SCSS!<\/p>\n
Biblioteka SCSSPHP mo\u017ce skompilowa\u0107 dowolny rodzaj prawid\u0142owych zmiennych SCSS, ale pami\u0119taj, \u017ce musisz si\u0119 upewni\u0107, \u017ce zosta\u0142y poprawnie sformatowane w programie Customizer. Na przyk\u0142ad kolory musz\u0105 by\u0107 poprzedzone prefiksem #<\/code>dla kolor\u00f3w szesnastkowych lub by\u0107 sformatowane jako rgb()<\/code>lub rgba()<\/code>definicje. Do zmiennej rozmiaru zwykle trzeba doda\u0107 \u201e px<\/code>„, \u201e em<\/code>„, \u201e %<\/code>” i tak dalej.<\/p>\nJe\u015bli planujesz stworzy\u0107 zaawansowany system do kompilacji zmiennych SCSS za pomoc\u0105 motywu Customizer, upewnij si\u0119, \u017ce masz dobry system do prawid\u0142owego formatowania ka\u017cdego typu zmiennej!<\/p>\n
Zr\u00f3bmy pierwszy krok z drogi; pobranie i w\u0142\u0105czenie biblioteki do naszego motywu:<\/p>\n
Pobieranie i do\u0142\u0105czanie biblioteki SCSSPHP do motywu<\/h3>\n
Pierwszym krokiem jest pobranie biblioteki SCSSPHP<\/a>. Na po\u0142\u0105czonej stronie kliknij przycisk \u201ePobierz” na samej g\u00f3rze. Je\u015bli wolisz korzysta\u0107 z Composera, na stronie znajdziesz poradnik na ten temat.<\/p>\nWypakuj zip do podfolderu gdzie\u015b w swoim motywie. Jako przyk\u0142ad umieszczam go w theme\/inc\/scssphp\/<\/code>folderze.<\/p>\nOtw\u00f3rz plik PHP, do kt\u00f3rego chcesz doda\u0107 kod do kompilacji. Mo\u017ce znajdowa\u0107 si\u0119 bezpo\u015brednio w motywie functions.php<\/code>lub w pliku PHP do\u0142\u0105czonym przez functions.php<\/code>. Dla uproszczenia pisz\u0119 wszystko w \u015brodku functions.php<\/code>.<\/p>\nZanim b\u0119dziemy mogli korzysta\u0107 z biblioteki, musimy j\u0105 do\u0142\u0105czy\u0107; jak tak:<\/p>\n
require_once(get_stylesheet_directory(). '\/inc\/scssphp\/scss.inc.php');<\/code><\/pre>\nDostosuj odpowiednio \u015bcie\u017ck\u0119 do swoich plik\u00f3w. Musimy do\u0142\u0105czy\u0107 scss.inc.php<\/code>plik znaleziony w folderze g\u0142\u00f3wnym biblioteki. Teraz po tej linii mo\u017cemy skorzysta\u0107 z klas biblioteki!<\/p>\n2 Tworzenie ustawie\u0144 Customizer dla zmiennych SCSS<\/h2>\n
Utw\u00f3rzmy ustawienia WordPress Customizer dla naszych zmiennych. Na potrzeby samouczka dodamy ustawienia dla wspomnianych powy\u017cej zmiennych SCSS: dwa selektory kolor\u00f3w i wej\u015bcie liczbowe.<\/p>\n
Nie b\u0119d\u0119 wdawa\u0142 si\u0119 w szczeg\u00f3\u0142y wyja\u015bniaj\u0105ce, jak doda\u0107 ustawienia Customizer \u2013 jest na to mn\u00f3stwo samouczk\u00f3w. W poni\u017cszym przyk\u0142adzie kodu tworz\u0119 now\u0105 sekcj\u0119 i umieszczam w niej trzy ustawienia:<\/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>\nTen kod \u0142\u0105czy si\u0119 customize_register<\/code>i dodaje sekcj\u0119 o nazwie \u201eZmienne tematyczne”. Nast\u0119pnie dodaje selektor kolor\u00f3w ’ theme-main<\/code>’, kolejny selektor kolor\u00f3w ’ theme-secondary<\/code>’ i wprowadza liczb\u0119 ’ theme-text-size<\/code>’. To jest ca\u0142a domy\u015blna funkcjonalno\u015b\u0107 WordPressa. Dodaj\u0119 r\u00f3wnie\u017c ustaw domy\u015blne ustawienie ka\u017cdego ustawienia na te same warto\u015bci, kt\u00f3re zosta\u0142y zdefiniowane w variables.scss<\/code>pliku. Ma to na celu zapewnienie, \u017ce ustawienia Customizer zostan\u0105 zainicjowane z poprawnymi kolorami.<\/p>\n![\"Jak](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152472-61e4dfd112a70.png\")
<\/a><\/p>\nWygl\u0105da \u015bwietnie! Ale w tej chwili nic si\u0119 nie dzieje, gdy dostosowujesz te zmienne. Przejd\u017amy do kroku 3; obs\u0142uga podgl\u0105du w Customizerze.<\/p>\n
3 Kompiluj CSS w podr\u00f3\u017cy w podgl\u0105dzie Customizer<\/h2>\n
Ten krok obs\u0142uguje aktualizacj\u0119 podgl\u0105du Customizer, gdy u\u017cytkownik zmienia ustawienia i nie zapisuje do \u017cadnego z naszych plik\u00f3w. Zamiast tego wypiszemy skompilowany CSS w <head><\/code>podgl\u0105dzie wewn\u0105trz <style><\/code>tagu. W ten spos\u00f3b zapewniamy, \u017ce wbudowany CSS nadpisuje wszystkie style z oryginalnego pliku CSS.<\/p>\nAby sprawdzi\u0107, czy aktualnie korzystamy z podgl\u0105du Customizer, u\u017cywamy funkcji [is_customize_preview](https:\/\/developer.wordpress.org\/reference\/functions\/is_customize_preview\/)()<\/code>. Kiedy to powr\u00f3ci true<\/code>, tworzymy funkcj\u0119 podpi\u0119t\u0105 do wp_head<\/code>. Wewn\u0105trz funkcji inicjujemy i konfigurujemy bibliotek\u0119 SCSSPHP, pobieramy aktualne warto\u015bci ustawie\u0144, kompilujemy CSS i wypisujemy go w <style><\/code>tagu.<\/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>\nW linii #7<\/code>definiujemy \u015bcie\u017ck\u0119 do \u017ar\u00f3d\u0142owego pliku SCSS i \u0142adujemy jego zawarto\u015b\u0107 do zmiennej at #8<\/code>. A w linii #9<\/code>i #10<\/code>ustawili\u015bmy \u015bcie\u017ck\u0119 importu dla biblioteki, aby zapewni\u0107 @import<\/code>prawid\u0142owe dzia\u0142anie wszystkich plik\u00f3w w naszych plikach SCSS. Wi\u0119cej informacji na ten temat mo\u017cna znale\u017a\u0107 w witrynie dokumentacji biblioteki<\/a> pod nag\u0142\u00f3wkiem \u201e\u015acie\u017cki importu”. Zasadniczo biblioteka SCSSPHP musi zna\u0107 wzgl\u0119dn\u0105 \u015bcie\u017ck\u0119 folderu SCSS, aby wszystkie @import<\/code>\u015bcie\u017cki by\u0142y poprawne.<\/p>\nW linii #12-16<\/code>tworzymy tablic\u0119 dla kompilatora; tablica asocjacyjna z nazwami zmiennych jako kluczami. Dla warto\u015bci, kt\u00f3rych u\u017cywamy, [get_theme_mod](https:\/\/developer.wordpress.org\/reference\/functions\/get_theme_mod\/)()<\/code>aby uzyska\u0107 warto\u015bci z Customizer. Funkcja get_theme_mod()<\/code>pozwala zdefiniowa\u0107 jako drugi parametr domy\u015blny, je\u015bli warto\u015b\u0107 nie zosta\u0142a zapisana. To oszcz\u0119dza nam awarii kompilatora z warto\u015bciami takimi jak null<\/code>. Zapewniamy wi\u0119c te same warto\u015bci domy\u015blne, co w naszym pliku zmiennych SCSS i kiedy zarejestrowali\u015bmy ustawienia Customizer.<\/p>\nZwr\u00f3\u0107 tak\u017ce uwag\u0119, \u017ce kod w wierszu #15<\/code>do\u0142\u0105cza \u201e px<\/code>„, zapewniaj\u0105c, \u017ce rzeczywista warto\u015b\u0107 zmiennej jest prawid\u0142owa. W przeciwnym razie skompilowa\u0142by si\u0119 jako \u201e $text-size: 12;<\/code>„, gdy potrzebujemy \u201e $text-size: 12px;<\/code>„. Dostarczamy tablic\u0119 zmiennych do kompilatora w wierszu #17<\/code>, m\u00f3wi\u0105c mu, aby skompilowa\u0142 si\u0119 przy u\u017cyciu tych zmiennych.<\/p>\nNast\u0119pnie w wierszu #19-22<\/code>wywo\u0142ujemy compile()<\/code>funkcj\u0119, kt\u00f3ra powinna zwr\u00f3ci\u0107 skompilowany CSS jako ci\u0105g znak\u00f3w. Wyprowadzamy <style><\/code>tag z ci\u0105giem CSS w \u015brodku. Poniewa\u017c jeste\u015bmy uzale\u017cnieni wp_head<\/code>od, Customizer wyrenderuje podgl\u0105d ze zmienionym kodem CSS za ka\u017cdym razem, gdy wprowadzana jest zmiana.<\/p>\n4 Zapisywanie skompilowanego CSS w arkuszu styl\u00f3w motywu<\/h2>\n
Kod do kompilacji CSS jest bardzo podobny do poprzedniego kroku. Jedyna r\u00f3\u017cnica polega na tym, \u017ce teraz zapisujemy CSS do pliku zamiast go wyprowadza\u0107. Powiniene\u015b naprawd\u0119<\/strong> rozwa\u017cy\u0107 umieszczenie tego w funkcji, aby nie powtarza\u0107 kodu, ale dla jasno\u015bci postanowi\u0142em je rozdzieli\u0107.<\/p>\nZaczepiamy si\u0119 [customize_save_after](https:\/\/developer.wordpress.org\/reference\/hooks\/customize_save_after\/)<\/code>, kt\u00f3re wyzwalacze, gdy kto\u015b kliknie Zapisz w WordPress Customizer. W tym momencie pobieramy \u017ar\u00f3d\u0142owy SCSS, definiujemy warto\u015bci zmiennych i kompilujemy go do CSS. Z ci\u0105giem CSS u\u017cywamy prostej funkcji PHP, aby zapisa\u0107 go w pliku CSS motywu.<\/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>\nJedyn\u0105 r\u00f3\u017cnic\u0105 w stosunku do poprzedniej jest linia, w #8<\/code>kt\u00f3rej definiujemy plik docelowy do zapisu, oraz linia #19<\/code>, w kt\u00f3rej zapisujemy do pliku.<\/p>\n\u00a0 Wniosek<\/h2>\n
Mamy teraz ustawienia Customizer, kt\u00f3re kontroluj\u0105 zmienne w pliku SCSS motywu i nadpisuj\u0105 g\u0142\u00f3wny arkusz styl\u00f3w motywu przy u\u017cyciu tych zmiennych. Nie ma ogranicze\u0144 co do liczby lub rodzaju ustawie\u0144, kt\u00f3re u\u017cytkownicy motywu maj\u0105 dostosowywa\u0107! Zainwestuj troch\u0119 czasu w skonfigurowanie odpowiedniego systemu do obs\u0142ugi formatowania r\u00f3\u017cnych typ\u00f3w zmiennych (np. przedrostk\u00f3w lub przyrostk\u00f3w) i odpowiedni\u0105 struktur\u0119 ustawie\u0144 Customizer. U\u017cytkownicy motywu doceni\u0105 elastyczno\u015b\u0107 i \u0142atwo\u015b\u0107 dostosowania motywu!<\/p>\n
Mo\u017cesz tak\u017ce wymy\u015bli\u0107 r\u00f3\u017cne sposoby obs\u0142ugi zapisu pliku ko\u0144cowego CSS. Je\u015bli nie chcesz nadpisywa\u0107 g\u0142\u00f3wnego arkusza styl\u00f3w, by\u0107 mo\u017ce chcesz zapisa\u0107 go w innym pliku. Mo\u017cesz r\u00f3wnie\u017c przyjrze\u0107 si\u0119 u\u017cywaniu warunkowych if-else w SCSS<\/a>.<\/p>\nTen samouczek zosta\u0142 napisany, aby da\u0107 ci odskoczni\u0119 do tego, jak mo\u017cesz dostosowa\u0107 sw\u00f3j motyw WordPress z Customizer. Daj mi zna\u0107, czy by\u0142o to dla Ciebie przydatne \u2013 lub je\u015bli potrzebujesz bardziej zaawansowanego samouczka, kt\u00f3ry zapewni, \u017ce arkusz styl\u00f3w motywu nie zostanie nadpisany!<\/p>\n