Jak wyrejestrować plik CSS w motywie potomnym WordPressa

Wyrejestruj plik CSS WordPress

Wyrejestrowanie pliku w CSS w motywie WordPressa może być i dziecinnie proste, i niezmiernie trudne zarazem. Łatwe, bo służy do tego prosta funkcja przyjmująca tylko jeden parametr. Trudne, gdyż użyta w motywie potomnym, nie zadziała tak, jak byśmy tego chcieli, dopóki nie zrozumiemy kontekstu jej użycia.

Dziś przykłady pokazujące kiedy wyrejestrowywanie plików CSS może się przydać i kilka wskazówek, jak zrobić to poprawnie.

Kiedy wyrejestrowanie pliku CSS może się przydać – przykłady

  1. Motyw ładuje dużą bibliotekę, np. Font Awesome, a my z ikonek nie będziemy na stronie korzystać. Chcemy uniknąć niepotrzebnego obciążania strony.
  2. Motyw ładuje całą bibliotekę Google Fonts, a my potrzebujemy tylko dwóch fontów. Pozobywamy się ciężkiego ładunku i zastępujemy go lekkim.
  3. Motyw używa wersji Bootstrapa, która nam nie odpowiada. Bootstrapowy plik CSS chcemy wyrejestrować i zastąpić inną wersją.
  4. Motyw zbiera reguły CSS dotyczące wyświetlania strony na urządzenia mobilne w osobnym pliku, a my chcemy część z nich pozmieniać.

Jak widać, w niektórych przykładach chcemy całkiem pozbyć się pliku CSS ze strony, a w niektórych usunąć go po to, aby zastąpić własną wersją.

W naszym dalszym przykładzie odwołamy się do sytuacji z punktu nr 4, którą szczegółowo omówiono na filmie niżej.

Przykład jak wyrejestrować plik CSS w WordPressie – nagranie

Jeśli wolisz oglądać niż czytać, kliknij w filmik poniżej. A jeśli lubisz czytać, czytaj dalej.

Zmień breakpoint media queries motywu rodzica, żeby przejąć kontrolę nad menu responsywnym

Problem jest dość typowy. Kupiłeś motyw na ThemeForest albo używasz darmowego, tak jak ja w tym przykładzie – GeneratePress. I twój motyw posiada tzw. menu responsywne. Czyli w pewnym momencie, nazywamy go breakpointem, twoje płaskie menu zamienia się w tzw. hamburger menu. Porównaj ilustarcje niżej.

Zamiana menu płaskiego (lewa część) w menu typu hamburger (prawa część)
Zamiana menu płaskiego (lewa część) w menu typu hamburger (prawa część)

O tym, to kiedy ta zmiana nastąpi decydują zwykle twz. media queries w pliku CSS. np:

Zwykle media queries decydują o tym, kiedy menu płaskie zmieni się w menu hamburger
Zwykle media queries decydują o tym, kiedy menu płaskie zmieni się w menu hamburger

Czasami jednak chcemy, żeby to przejście następowało w innym punkcie. Przykładowo, w oryginale zamiana menu może dziać się za szybko, a my mamy króciutkie menu, więc wszystkie opcje jeszcze się mieszczą i wolelibyśmy nadal wyświetlać płaskie menu. Tak jest w przypadku menu motywu Blade.

Albo na odwrót: w motywie zamiana na menu-hamburger następuje zbyt późno, a my mamy strony o długich nazwach i nieelegancko nam się one rozwijają w drugą linię. Tak jest w przypadku motywu GeneratePress, wspomnianym wyżej.

Rozwiązanie – pomysł #1

Aby zmienić punkt przekształcania menu, można spróbować nadpisywać reguły CSS. Jednak nadpisywanie reguł w ramach media queries po to, aby przesunąć breakpoint tylko dla niektórych elementów (tu dla menu) może być nie lada wyzwaniem.

Rozwiązanie – pomysł #2

Czasami prościej byłoby podmienić jedną liczbę w media queries, np. z 1000px na 800px i po kłopocie – moment przemiany menu jest jednym ruchem dopasowany do naszych potrzeb. Taką zmianę łatwo zrobić, gdybyś zmieniali bezpośrednio plik CSS oryginalnego motywu.

Zanim jednak rozgrzebiemy pliki motywu-oryginału, utwórzmy motyw potomny. Oto co zyskamy:

  • Gdy zaktualizujemy motyw do nowej wersji, zmian nie stracimy.
  • Jesteśmy w stanie szybko naszą stronę przełączyć z powrotem na nietknięty oryginał (motyw rodzica), kiedy zajdzie taka potrzeba.

Ale wróćmy do naszego pomysłu na rozwiązanie problemu z menu.

Jeśli reguły CSS, które chcemy zmienić, są zebrane w osobnym pliku CSS, możemy wykonać następujący scenariusz:

  1. W motywie potomnym wyrejestruj oryginalny plik CSS.
  2. Wykonaj jego kopię do pliku potomnego.
  3. Zarejestruj tę kopię w motywie potomnym.
  4. Wykonaj zmiany, których potrzebujesz na kopii w motywie potomnym.

A teraz przyjrzyjmy się na czym dokładnie polega wyrejestrowywanie pliku CSS w WordPressie.

Wyrejestrowanie pliku CSS w WordPressie

Do wyrejestrowania pliku CSS używamy funkcji wp_deregister_style.

wp_deregister_style( string $handle )

Co robi ta funkcja: usuwa z naszej strony link do pliku CSS (a dokładnie tag <link… > – zobacz na obrazek niżej), który został wcześniej zarejestrowany za pomocą funkcji wp_register_style lub wp_enqueue_style.

Jaki parametr przyjmuje ta funkcja: dokumentacja WordPressa informuje, że w parametrze podajemy nazwę zarejestrowanego pliku. Nie jest to jednak fizyczna nazwa zbioru, lecz nazwa użyta podczas rejestracji (tzw. uchwyt – ang. handle). Więcej na temat znajdziesz w poprzednim wpisie o rejestracji plików CSS.

Jak odszukać nazwę zarejestrowaneg pliku:

  • Sposób 1: wejść w HTML-owy podgląd źródła strony, znaleźć link do pliku i sprawdzić jego identyfikator (patrz rysunek niżej). Identyfikator ten został utworzony na podstawie nazwy, której użyto podczas rejestracji i do której WordPress dokleił postfiks „-css”. Innymi słowy, identyfikator bez „-css”, to ta nazwa, którą musimy przekazać jako parametr do funkcji wp_deregister_style.
  • Sposób 2: Przeszukać pliki źródłowe motywu w poszukiwaniu funkcji wp_register_style lub wp_enqueue_style. Na filmiku pokazano, jak to zrobić (minuta 10:19)
Ten link zostanie usunięty za pomocą funkcji wp_deregister_style
Ten link zostanie usunięty za pomocą funkcji wp_deregister_style

Gdzie wywołać funkcję wp_deregister_style

Funkcję wp_deregister_style można dodać do miejsca, gdzie rejestrujemy pliki CSS w motywie potomnym.

Poniższy fragment kodu wyrejestruje plik CSS zarejestrowany w motywie GeneratePress pod nazwą generate-mobile-style (linia 4), po czym zarejestruje jego kopię w motywie potomnym (linie 5-7):

function generatepress_child_enqueue_scripts() {
  wp_enqueue_style('generatepress-google-font-lato', "https://fonts.googleapis.com/css?family=Lato&amp;subset=latin-ext");
  
  wp_deregister_style( 'generate-mobile-style' );
  wp_enqueue_style( 
    'generate-mobile-style-child',
    get_stylesheet_directory_uri() . '/mobile.css');

 }

add_action( 'wp_enqueue_scripts', 'generatepress_child_enqueue_scripts', 20 );

W powyższym przykładzie wykorzystano hook WordPressowy wp_enqueue_scripts.

Uwaga na kolejność!

Należy pamiętać, że plik functions.php motywu potomnego wykonywany jest przed plikiem functions.php motywu rodzica. Musimy więc zadbać o to, aby wyrejestrowanie pliku CSS w motywie potomnym nastąpiło dopiero po tym, jak już ten plik zostanie zarejestrowany w motywie rodzica.

Dodatkowo musimy pamiętać, aby plik CSS który będziemy za chwilę rejestrować, pojawił się ostatecznie w źródle strony za plikami CSS pochodzącymi z motywu rodzica.

Aby sterować kolejnością rejestracji plików CSS w motywie rodzica i motywu potomnego, możemy wykorzystać trzeci parametr funkcji add_action – priority.

Dokumentacja WordPressa informuje nas, że w przypadku, gdy pod dany hook (u nas jest to hook wp_enqueue_scripts) podczepiamy się z kilkoma funkcjami, to najpierw wykona się ta, której nadano niższy priorytet.

W naszym przykładzie pod hook wp_enqueue_scripts podczepiana jest funkcja generatepress_child_enqueue_scripts w motywie potomnym, ale również funkcja generate_scripts rejestrująca pliku CSS w motywie rodzica (zerknij do filmiku – minuta 13:25)

Dlatego w naszym przykładzie wywołamy funkcję add_action z parametrem priority ustawionym na 20. W ten sposób udzielimy pierwszeństwa wykonania funkcji rejestrującej plik mobile CSS w motywie rodzica, która przyjmuje domyślny parametr: 10, a funkcjageneratepress_child_enqueue_scripts z motywu potomnego wykonana się po niej, zgodnie z naszymi czekiwaniami.

Wyrejestrowywanie pliku CSS w WordPressie
Wyrejestrowywanie pliku CSS w WordPressie

Poniżej porównano kolejność wykonania funkcji doczepianych pod hook wp_enqueue_scripts w sytuacji, gdybyśmy nie ustawili parametru na 20, a zatem zostawili wartość domyślną, która wynosi 10 (rys 1) oraz przy ustawionym parametrze priorytetu na wartość 20 (rys 2).

Rys. 1 - Kolejność wywołania funkcji podczepionych pod hook wp_enqueue_scripts przy parametrze domyślnym funkcji add_action
Rys. 1
Rys. 2 - Kolejność wywołania funkcji podczepionych pod hook wp_enqueue_scripts przy zmodyfikowanym parametrze priority funkcji add_action
Rys. 2

Oto kod, za pomocą którego możemy sprawdzić kolejność wykonania wszystkich funkcji podczepionych pod dany hook. W tym przykładzie używamy hooku wp_enqueue_scripts.

function my_enqueued_scripts() {
  global $wp_filter;
  var_dump( $wp_filter['wp_enqueue_scripts'] );
}
add_action( 'admin_init', 'my_enqueued_scripts' );

Wynik tego kodu zobaczmy w backendzie naszego WordPressa:

Pogląd wartości zmiennej $wp_filter dla wp_enqueue_scripts
Pogląd wartości zmiennej $wp_filter dla wp_enqueue_scripts

Po kliknięciu w HTML-owy podgląd źródła strony wynik ten zobaczymy ładniej sformatowany, tak jak na obrazkach 1 i 2 wyżej.

Zwróćmy uwagę, że wykorzystanie parametru priority i ustawienie go na wartość 20, pozwoli nam również zarejestrować wszystkie pozostałe pliki CSS z motywu rodzica we właściwej kolejności. Zależy nam, aby wszystkie pliki motywu rodzica podpięły się do strony najpierw, przed plikami, które dodamy w ramach motywu potomnego. Nasz plik mobile.css z motywu potomnego ma być dodany na samym końcu.

Po wyrejestrowaniu pliku CSS możemy spokojnie zarejestrować jego kopię z motywu potomnego. A następnie wykonywać na niej wszystkie potrzebne zmiany.

Podsumowanie

Na koniec podsumujmy sobie kilka istotnych faktów:

  • Do usunięcia niepotrzebnych plików CSS ze strony WordPressowej używaj funkcji wp_deregister_style.
  • Jako parametr podaj nazwę, którą możesz odczytać z id pliku CSS w podglądzie źródła strony, po pominięciu postfiksu -css.
  • Pamiętaj, że plik functions.php motywu potomnego wykonuje się przed plikiem functions.php motywu rodzica. Nie wyrejestrowuj pliku, który jeszcze nie został zarejestrowany.
  • Do wyrejestrowywania pliku CSS możesz użyć hooku wp_enqueue_scripts, ale upewnij się, że podpinasz się pod ten hook z priorytetem gwarantującym ci wykonanie twoich funkcji we właściwej kolejności. Zwykle zależy nam, aby najpierw zarejestrowały się pliki CSS motywu rodzica.

Twoje doświadczenia z usuwaniem plików CSS z motywu

A czy ty miałeś kiedykolwiek potrzebę usunięcia pliku CSS z motywu? Co to był za przypadek? Użyłeś do usunięcia pliku CSS funkcji wp_deregister_style? Podziel się swoimi doświadczeniami.

7 myśli do „Jak wyrejestrować plik CSS w motywie potomnym WordPressa”

    1. Janusz, cieszę się, że oglądasz wideo. Ja dodaję filmiki od niedawna i takie komentarze jak Twój mnie motywują, żeby tą formę kontynuować (choć wymaga więcej pracy niż pisanie tekstu). Dziękuję.

  1. Problemem jest tu chyba fakt, iż CSS w odróżnieniu od innych LESSów nie jest „programowany”. Drobne zmiany jak kolor, szerokości, punkty łamania trzeba edytować x definicjach styli, a nie jednej zmiennej globalnej :/

    1. Zgadza się. Wprowadzenie ekranu personalizacji dla motywów nieco ułatwiło sprawę ostatnimi czasy, choćby w kwestii kolorów – jeśli w motywie jest to dobrze ogarnięte, to mamy takie jedno miejsce globalne. Punkty łamania (ciekawe określenie, dzięki, bo brakowało mi polskiego odpowiednika na breakpoints) – jeśli te są ustalone w media queries, to właśnie media queries są takim mechanizmem „grupującym”.

      Wiesz, tak się zastanawiam, czy ja nie przesadziłam z tym przykładem tutaj. O co mi chodzi. Historia tego wpisu zaczęła się w poprzednim. Tam Paweł dodał w komentarzu, żeby jeszcze wspomnieć o wp_deregister_style, żeby był komplet tych funkcji związanych z dołączaniem i odłączaniem plików CSS, a ja szukałam jakiegoś ciekawego przykładu, który zahaczy też o inne rzeczy, czyli że usuwamy plik CSS po to, żeby za chwilę dodać jego własną wersję. No i musiałbyś widzieć mojej zdziwienie, kiedy w pierwszym strzale to nie zadziałało. Ładną chwilę mi zajęło dojście dlaczego. Kontrola zależności między plikami CSS w motywie potomnym i rodzica może przyprawić o ból głowy, szczególnie, gdy tych plików jest kilka.

  2. To i tak nie do końca dobre rozwiązanie jeśli przyjdzie update do oryginalnego wyrejestrowanego pliku rodzica to tych zmian nie ujrzymy, więc znów trzeba by przenieś nowe rzeczy do kopi tego pliku w motywie potomnym.

Odpowiedz na „KrzysiekAnuluj pisanie odpowiedzi

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Wyrażam zgodę na przetwarzanie przez Webfaces Agnieszka Bury, ul. Rymarska 42/3, 53-206 Wrocław NIP: 9111769381, REGON: 021997379, moich danych osobowych w celu dodania komentarza na blogu webfaces.pl w zgodzie i według zasad określonych w Polityce prywatności.