Jak bezpiecznie i prawidłowo modyfikować motywy?

Jesteś tutaj:Strona główna>Bezpieczeństwo, Motywy>Jak bezpiecznie i prawidłowo modyfikować motywy?

Gdy wybieramy motyw na naszą stronę najczęściej zamierzamy go zmodyfikować i dostosować do własnych potrzeb. Dopóki nasze zmiany dotyczą kwestii, które można ustawić w opcjach motywu nie stanowi to większego problemu. Komplikacje mogą pojawić się wtedy, gdy musimy np. dodać własny kod CSS – nasz problem pojawi się gdy zostanie wydana aktualizacja dla naszego motywu.

Po instalacji aktualizacji motywu stracimy wszystkie wprowadzone zmiany. Oczywiście można trzymać sobie zapisaną listę wprowadzonych modyfikacji, ale jest to delikatnie mówiąc mało wygodne, bo wymaga od nas wprowadzania zmian przy każdej aktualizacji motywu.

Child Theme (motyw potomny)

Na szczęście WordPress zawiera wsparcie dla tzw. motywów potomnych (z ang. Child Themes). Jest to niezwykle przydatny mechanizm, który umożliwia stworzenie motywu zawierającego cały motyw bazowy oraz nasze modyfikacje. Największą zaletą tego mechanizmu jest to, że możemy bez przeszkód aktualizować motyw bazowy – nie zawiera on naszych modyfikacji.

Obrazowo mówiąc – motyw potomny to nakładka wizualno-funkcyjna na motyw bazowy.

Dodatkowym atutem tego mechanizmu jest fakt, że wymaga on w najprostszym wypadku utworzenia jednego dodatkowego katalogu z jednym plikiem.

Jak stworzyć motyw potomny?

Tworzymy w katalogu wp-content/themes/ katalog o nazwie NAZWA_MOTYWU_BAZOWEGO-child i dodajemy w nim plik style.css. Oczywiście nazwa katalogu z sufiksem -child nie jest wymagana, ale to dość rozpowszechniona praktyka, która od razu sugeruje, że mamy do czynienia z motywem potomnym dla określonego motywu.

W pliku style.css umieszczamy następujący kod:

/*
Theme Name: Parent Theme Child
Template: parent-theme
Version: 1.0.0
Text Domain: parent-theme-child
*/

/* Wczytujemy kod CSS z motywu bazowego */
@import url('../base-theme/style.css');

/* Nasz kod CSS umieszczamy poniżej */

W tak przygotowanym pliku możemy rozpocząć dodawanie własnego kodu CSS. Jak widać wczytuje on też kod CSS z bazowego motywu.

W linii:

Template: parent-theme

Określamy nazwę motywu bazowego. W pozostałych linijkach wypełniamy dane zgodnie z informacjami dotyczącymi tworzonego motywu potomnego. Przykładowo aby stworzyć motyw potomny dla standardowego motywu Twenty Fourteen należy stworzyć następujący plik style.css w katalogu twentyfourteen-child:

/*
Theme Name: Twenty Fourteen Child
Template: twentyfourteen
Version: 1.0.0
Text Domain: twentyfourteen-child
*/

/* Wczytujemy kod CSS z motywu bazowego */
@import url('../twentyfourteen/style.css');

/* Nasz kod CSS umieszczamy poniżej */

Oczywiście powyższy kod zawiera uproszczoną wersję pliku style.css. Możemy w nim też zawrzeć inne parametry nagłówka takie jak: autor motywu potomnego czy link do strony motywu potomnego itd. W większości wypadków jednak nie ma takiej potrzeby, dlatego sugeruję taką uproszczoną wersję tego pliku.

Jeżeli nie chcemy korzystać z @import do wczytywania kodu CSS z bazowego motywu, możemy skorzystać z innej metody. W tym celu tworzymy pliku functions.php a następnie dodajemy w nim następujący kod:

add_action('wp_enqueue_scripts', 'child_theme_css’);
function child_theme_css() {
wp_enqueue_style('parent-theme-css', get_template_directory_uri() . '/style.css');
}

Jest to bardziej elegancka metoda i osobiście zalecałbym właśnie ją zastosować. W tym miejscu warto wspomnieć ważną kwestię – sposób nadpisywania innych plików w motywie potomnym – poza kodem CSS możemy też modyfikować inne pliki – wystarczy skopiować plik do motywu potomnego z uwzględnieniem struktury katalogów, a następnie go zmodyfikować.

Przykładowo plik functions.php nadpiszemy tworząc w naszym katalogu plik o tej samej nazwie. Ale żeby nadpisać plik inc/config.php musimy najpierw w naszym motywie potomnym utworzyć katalog inc i w nim umieścić plik config.php.

Plik functions.php jest pod tym względem wyjątkowy – ponieważ z reguły zawiera on większość dodatkowych funkcji motywu to aby uniknąć problemów z nadpisywaniem tego pliku przy aktualizacjach, wdrożono ciekawy mechanizm – plik functions.php jest wczytywany zarówno z motywu bazowego jak i z motywu potomnego, przy czym plik z motywu potomnego jest wczytywany bezpośrednio przed plikiem z motywu bazowego. Dzięki temu można nadpisać wybrane funkcje z motywu bazowego.

Czy to rozwiązanie ma jakieś wady?

Oczywiście nie ma róży bez kolców – może się okazać, że nasze nadpisane pliki nie działają – wtedy prawdopodobnie oznacza to brak pełnego wsparcia dla motywów potomnych w motywie bazowym – warto taki problem zgłosić autorowi motywu, gdyż często problem dotyczy tylko niektórych plików lub wybranych funkcji w pliku functions.php. Wsparcie dla motywów potomnych na szczęście jest dość powszechne, więc takie problemy zdarzają się względnie rzadko.

Drugą wadą jest fakt, że przy naprawdę dużych modyfikacjach i tak sami będziemy musieli nanosić poprawki w nadpisanych plikach (żeby ewentualnie dodać nowe funkcje) – niestety tego problemu nie da się obejść, ale ogranicza to naszą pracę do porównania konkretnych plików zamiast całego motywu, bo lista nadpisanych plików jest widoczna od razu w katalogu motywu potomnego.

Alternatywne rozwiązania

Jeżeli zamierzamy modyfikować wyłącznie kod CSS motywu i mamy awersję do edycji plików z użyciem protokołu FTP, możemy skorzystać z rozwiązań, które umożliwiają nam nadpisanie kodu CSS motywu w taki sposób, że nie utracimy wprowadzonych zmian po aktualizacji motywu.

Jedno z takich rozwiązań oferuje wtyczka JetPack w postaci modułu o nazwie Custom CSS.

Ciekawostka

W repozytorium motywów WordPressa można umieszczać motywy potomne bazujące na istniejących w repozytorium motywach. Takie motywy poza linkiem do pobrania i podglądu, zawierają też link do motywu bazowego:

wp-repo-child-theme

Podsumowanie

Motywy potomne umożliwiają łatwą i bezpieczną modyfikację wykorzystywanych motywów. Tak stworzonych modyfikacji nie stracimy po aktualizacji motywu bazowego.

Motyw potomny zawiera zawsze plik style.css w którym atrybut Template określa nazwę motywu bazowego. Plik functions.php jest wczytywany z obu motywów aby zapewnić większą efektywność nadpisywania kodu.

W wypadku modyfikacji motywu związanych jedynie ze zmianami kodu CSS, warto rozważyć wtyczki, które umożliwiają nadpisywanie kodu CSS.

Zapisz

O autorze:

Lead Developer w GavickPro. Odpowiada za planowanie i rozwój rozwiązań opartych na WordPressie. Ceni ten CMS za skalowalność i elastykę z której często korzysta by implementować nowe, ciekawe rozwiązania. Lubi zgłębiać tajniki WordPressa oraz odkrywać jego często pomijane funkcjonalności i możliwości. Prowadzi bloga dla WordPressowych developerów.
  • Kasia Świderska

    No to ja mam pytanie – jak nadpisać pliki JS motywu bazowego? Co musi mieć bazowy, żeby to było możliwe.

    • Dziudek

      Żeby móc nadpisywać pliki JS sugeruję nadpisać w functions.php funkcję, która dodaje kod JS. Teoretycznie istnieje funkcja get_stylesheet_directory_uri, która w odróżnieniu od get_template_directory_uri zwraca ścieżkę do katalogu motywu potomnego, ale gdy nie nadpiszemy wszystkich plików to to rozwiązanie się nie sprawdzić – stąd ryzykowne jest dodawanie tego w motywie bazowym. Dlatego najlepiej zmodyfikować funkcję dodającą kod JS i tam zmienić get_template_directory_uri na get_stylesheet_directory_uri i umieścić w motywie potomnym odpowiedni plik.

      • Kasia Świderska

        „Dlatego najlepiej zmodyfikować funkcję dodającą kod JS i tam zmienić
        get_template_directory_uri na get_stylesheet_directory_uri i umieścić w
        motywie potomnym odpowiedni plik.” – i tego mi brakowało :D

      • Ewelina z GirlsWhoWP

        O, to się bardzo przyda.

  • Kasia Pióro

    Pytanie z serii podstawowych – czy żeby edytować plik style.css (jeśli otworzę go na ftpie) trzeba mieć jakiś program? Jeśli tak, to jaki? Nie wiedziałam, jak utworzyć plik, więc go skopiowałam, tylko nie potrafię go teraz edytować :)

    • Ewelina z GirlsWhoWP

      Cześć Kasia. Tak potrzebujesz edytora kodu, np. NotePad++ (Windows), Wrangler (Mac), Brackets (Windows i Mac), SublimeText2 (Windows, Mac). Jest tego sporo na rynku ;) Znajdziesz w końcu swój ulubiony. Te są darmowe. Pobieraj je z oficjalnych stron producentów.

      • Kasia Pióro

        Bardzo dziękuję.

    • Z płatnych edytorów polecam Adobe Dreamweaver.

      Na linuksa z tego co wiem gedit się dobrze sprawdzał ;)

    • Ewelina Muc

      Wystarczy najprostszy edytor kodu np. Brackets, TexTWrangler, NotePad++. Jest ich wiele, z czasem będziesz miała swój ulubiony.

      • Justin

        jak moge edytowac wordpressa w brackecie jesli pliki sa w php a nie html, jak to zrobic?

  • Marcel Paprocki

    A ja mam taki problem, ze kiedy badam element np górną tabele i chciałbym zmienić jej szerokość to owszem pokazuje mi się pozycja oraz szerokość, mogę ja zmianic w edytorze przeglądarki, natomiast jako źródło pokazuje mi adres strony a nie np style.css Tak wiec nie mogę zapisac zmiany :( Gdzie wtedy szukac tej pozycji ?

  • Witam. W podziękowaniu za super artykuł wskażę błąd w kodzie ;] Chodzi o linię: add_action(‚wp_enqueue_scripts’, ‚child_theme_css’);
    Na końcu wkradł się niechciany apostrof (różni się od tego „‚”). Pozdrawiam ;]