Jak stworzyć motyw potomny w Wordpress - Edyta Subik

Jak stworzyć motyw potomny w WordPress

Używając WordPressa mamy możliwość wielu zmian w wyglądzie naszej strony – dopasowujemy kolory, zmieniamy układ , dodajemy nowe elementy. Możemy również dokonywać zmian w samych plikach motywu co daje nam wiele możliwości, dzięki którym możemy dopasować stronę do swoich potrzeb. Jednak trzeba pamiętać o tym, by tych zmian nie dokonywać w motywie głównym, a jedynie za pomocą tzw. motywu potomnego. Dlaczego? Już tłumaczę 🙂

Co to jest motyw potomny?

Motyw potomny (child theme) dziedziczy wszystkie style i funkcje motywu głównego i pozwala na wprowadzenie zmian. Można edytować w nim nie tylko same ustawienia w Worpdressie, ale również dodawać pliki motywu z własnymi zmianami.

Po co mi motyw potomny?

Dzięki niemu nie musisz obawiać się, że wprowadzone zmiany znikną np. podczas aktualizacji głównego motywu. Motyw potomny zostaje nietknięty, dlatego to na nim zawsze powinniśmy wprowadzać zmiany.

Przykład: chcesz dokonać zmian w nagłówku motywu, musisz zrobić to w pliku header.php znajdującym się w głównym katalogu motywu. Jeśli wyedytujesz ten plik w głównym motywie, po aktualizacji plik nadpisze się i zmiany znikną. Jeśli jednak skopiujesz ten plik do katalogu głównego motywu potomnego i tam wprowadzisz zmiany, to podczas aktualizacji głównego motywu ten plik zostanie nietknięty i Twoje zmiany będą cały czas widoczne.

Skąd wziąć motyw potomny?

Jeśli kupiłeś_aś motyw np. poprzez stronę ThemeForest zapewnie dostałeś spakowany plik .zip z wszystkimi plikami motywu. W zipie znajdziesz kolejny zip z plikami motywu głównego (np. nazwa-motywu.zip) i bardzo prawdopodobne, że znajdziesz tam również plik .zip motywu potomnego (przeważnie będzie to nazwa motywu ze słowem child lub child-theme, np. nazwa-motywu-child.zip). Po zainstalowaniu głównego motywu (wgrywając plik nazwa-motywu.zip) zainstaluj również motyw potomny (wgrywając plik nazwa-motywu-child.zip). Jako że motyw potomny dziedziczy wszystko z motywu głównego, po jego zainstalowaniu będziesz mógł_ogła zainstalować demo, zmieniać ustawienia motywu no i oczywiście wprowadzać zmiany w plikach bez obawy o ich zniknięcie.

W niektórych płatnych motywach nie znajdziesz pliku z motywem potomnym. Czasami motyw ma w swoich ustawieniach opcję jego instalacji – po zainstalowaniu motywu głównego wejdź do ustawień głównych motywu i gdzieś pomiędzy instalacją wymaganych wtyczek a demo motywu może znajdować się opcja instalacji motywu potomnego. Jeśli taką znajdziesz to zainstaluj motyw potomny.

Motyw Potomny WordPress
Motyw Potomny WordPress

Czasami jednak nie ma w ogóle dostępnego pliku z motywem potomnym, jest tak np. podczas instalacji darmowych motywów. Jak sobie z tym poradzić?

Jak stworzyć motyw potomny?

Możemy to zrobić na dwa sposoby – ręcznie (poprzez wgranie na serwer odpowiednich plików) lub za pomocą wtyczki (czyli ten szybszy i prostszy sposób :)).

Ręczne dodanie motywu potomnego

Do ręcznego stworzenia motywu potomnego będziesz potrzebować dostępu do serwera FTP. W katalogu naszej strony znajdujemy ścieżkę wp-content/themes i tutaj powinien znajdować się katalog naszego głównego motywu rodzica (np. nazwa-motywu-glownego). Tworzymy tutaj (w katalogu themes) nowy katalog np. o nazwie nazwa-motywu-glownego-child. W tym katalogu musimy stworzyć dwa pliki – style.css (arkusz ze stylami) i functions.php (funkcje motywu). Pliki możesz stworzyć za pomocą edytora tekstowego.

Plik style.css powinien zawierać:

/* 
Theme Name:   Nazwa motywu – motyw potomny
Template:     nazwa-motywu-glownego
*/

Gdzie Theme Name to po prostu nazwa nowego motywu potomnego, a Template to nazwa motywu głównego. Pole Template jest bardzo ważne, bo to po nim WordPress będzie szukał plików motywu – wpisujemy tutaj nazwę katalogu, w którym znajduje się motyw główny (na przykładzie: nazwa-motywu-glownego).

Tyle wystarczy aby połączyć motyw potomny z motywem głównym. Oczywiście w tym pliku możemy potem dodawać swoje style.

Plik functions.php powinien zwierać:

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
   wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

Dzięki tej funkcji motyw potomny odziedziczy wszystkie style z motywu głównego.

Oba pliki wgrywamy do naszego folderu motywu potomnego (nazwa-motywu-glownego-child).

W WordPressie w menu Wygląd > Motywy powinien znaleźć się Twój nowy motyw potomny. Aktywuj go i sprawdź czy strona prawidłowo się wyświetla. Jeśli oba pliki są dobrze stworzone i wrzucone to motyw potomny powinien wyglądać jak motyw główny. Teraz możemy bez przeszkód dodawać inne zmiany. 🙂

Dodawanie motywu potomnego za pomocą wtyczki

Teraz czas na szybszą i prostszą metodę stworzenia motywu potomnego – z pomocą przyjdzie nam wtyczka do WordPressa. Po wpisaniu w wyszukiwarkę pluginów hasła „child theme” pojawi nam się sporo równego rodzaju wtyczek do tworzenia i edycji motywów potomnych. Ja wybrałam wtyczkę Child Theme Generator. Po jej zainstalowaniu i włączeniu przechodzimy do menu Ustawienia > Child Theme Gen i tutaj w bardzo prosty sposób możemy stworzyć motyw potomny. Nie musisz nawet nic tutaj uzupełniać (chociaż możesz 🙂 – do wpisania jest np. tytuł, opis, autor motywu) wystarczy kliknąć przycisk „Create new child theme„, w następnym kroku zaznaczyć pole „Activate child-theme?” (aby od razu aktywować motyw), kliknąć „Finished” i tadam! motyw potomny gotowy 🙂 Sprawdź czy strona prawidłowo się wyświetla i śmiało wprowadzaj zmiany w swoim motywie. 🙂

Motyw Potomny WordPress za pomocą wtyczki
Tworzenie motywu potomnego WordPress za pomocą wtyczki

Motyw potomny może wydawać się zbędną rzeczą, jeśli nie chcesz wprowadzać większych zmian w motywie głównym. Jednak z doświadczenia powiem, że przydaje się on całkiem często. W każdej chwili można wpaść na świetny pomysł, który okaże się trudny do zrealizowania w głównym motywie i będzie wymagał edycji plików, a wtedy motyw potomny to mus. Zresztą nawet jeśli chcesz wprowadzać drobne zmiany lepiej wykonywać je na motywie potomnym i mieć pewność, że aktualizacja motywu głównego ich nie nadpisze.

Ten post ma 6 komentarzy

  1. ToTemat

    A przykładowo, które pliki dodatkowo tam dać. Jak jakiś powiedzmy header plik chcemy aby się nie zmieniał wyglądem, a mamy w tym pliku tylko wyciętą 1 linijkę kodu. Bo nie chcemy widoku kategorii na górze. To zostawić taki plik w potomnym z wyciętym też źle – bo mogą być aktualizowane pozostałe treści kodu. Jak takie cos można by rozwiązać?

    1. Edyta Subik

      Przy aktualizacji motywu bardzo rzadko zmieniane są pliki z wyglądem strony (czyli np. pliki headera), więc raczej bym się o to nie martwiła 🙂 Jeśli chodzi tylko o ukrycie jakiegoś elementu, to można to też zrobić CSS-em, ale to też nie jest idealne rozwiązanie.
      Zostawiłabym ten zmieniony plik w motywie potomnym i ewentualnie jeśli coś by się popsuło to sprawdziła czy w nowej wersji motywu nie zmieniono czegoś w tym własnie pliku.

  2. waldek

    a jak dodac zdjecie do motywu potomnego bo po utworzeniu recznym jest przeztoczyste tło

    1. Edyta Subik

      Chodzi o zdjęcie samego motywu, które wyświetla się w zakładce Wygląd > Motywy (https://edytasubik.pl/wp-content/uploads/2021/07/motyw-potomny-1.jpg)? Jeśli tak, to do głównego katalogu motywu potomnego trzeba wrzucić obrazek o nazwie „screenshot.png” – on automatycznie będzie okładką motywu 🙂
      Jeśli chodzi o coś innego to proszę o sprecyzowanie 🙂

  3. MD

    Czy motyw potomny należy też w jakiś sposób aktualizować? Czy z automatu zasysa wszystkie poprawki motywu głównego podczas aktualizacji i nie trzeba nic robić?

    1. Edyta Subik

      Motyw potomny z zasady „zasysa” wszystko z motywu głównego, więc jeśli ten zostanie zaktulizowany, to również zaktualizują się wszystkie pliki, które nie są nadpisane przez motyw potomny. Jeśli w motywie potomnym nie tworzyło się jakiś wielkich zmian w kodzie, to to powinno wystarczyć 🙂

Dodaj komentarz

Skontaktuj się ze mną korzystając z poniższego formularza.
Odpowiem najszybciej jak potrafię. 🙂

Jeśli preferujesz kontakt telefoniczny, wpisz proszę swój numer
w poniższym formularzu kontaktowym – oddzwonię. 🙂




    Wybierz pakiet:

    Odpowiedz na pytanie:

    Skontaktuj się ze mną korzystając z poniższego formularza.
    Odpowiem najszybciej jak potrafię. 🙂

    Jeśli preferujesz kontakt telefoniczny, wpisz proszę swój numer
    w poniższym formularzu kontaktowym – oddzwonię. 🙂




      Wybierz pakiet:

      Odpowiedz na pytanie:

      Skontaktuj się ze mną korzystając z poniższego formularza.
      Odpowiem najszybciej jak potrafię. 🙂

      Jeśli preferujesz kontakt telefoniczny, wpisz proszę swój numer
      w poniższym formularzu kontaktowym – oddzwonię. 🙂




        Odpowiedz na pytanie:

        Skontaktuj się ze mną korzystając z poniższego formularza.
        Odpowiem najszybciej jak potrafię. 🙂

        Możesz też skorzystać z formularza szybkiej wyceny,
        aby dowiedzieć się ile będzie kosztować Twoja strona.

        Jeśli preferujesz kontakt telefoniczny, wpisz proszę swój numer
        w poniższym formularzu kontaktowym – oddzwonię. 🙂



          Odpowiedz na pytanie: