Jeżeli zaglądasz czasem na support Elegant Themes, to zapewne nie raz spotkałeś się z informacją, że aby wstawić jakiś dodatkowy kod, plik, czy wykonać jakąś modyfikację, to należy umieścić konkretny plik w folderze Child Theme, albo stworzyć w folderze Child Theme inny folder, który będzie posiadał pliki odpowiedzialne za dane polecenia na stronie. Ale co to właściwie jest ten Child Theme, nie? Bo przecież wcale nie chodzi tu konkretnie o szablon, którego używasz.

Co to jest Child Theme i kiedy go używać?

Najprościej tłumacząc, Child Theme, czyli motyw potomny to kopia szablonu, z którego korzystasz. Służy do tego, aby zachować niestandardowe zmiany w plikach szablonu, np.: css czy php. Jeżeli śledzisz mój blog, albo korzystasz jakiś czas z szablonów Elegant Themes to za pewne zauważyłeś, że wszystkie zmiany wprowadzane ręcznie przez serwer albo przez Edytor w panelu WordPressa znikają, po każdej aktualizacji szablonu. Dzięki Child Theme żadne zmiany nie zostaną utracone czy przywrócone do ustawień domyślnych pomimo aktualizacji. Co ważne korzystając z Child Theme nie wprowadzasz żadnych modyfikacji w oryginalnych plikach szablonu.

Zobrazuję Ci to na przykładzie. Szablon Extra nie jest tłumaczony na język polski. Żeby polecenia na stronie wyświetlały się po polsku, należy stworzyć pliki .mo i .po i załadować je na serwer do lokalizacji: wp-content/themes/Extra/. Jednak kiedy przyjdzie czas na aktualizację szablonu, to pliki zostaną usunięte z serwera i będziesz musiał załadować je ponownie. Zapewniam Cię, że po utworzeniu Child Theme, nie będzie to konieczne, ponieważ pliki będą tam gdzie je wcześniej wrzuciłeś. Przy okazji, przygotowane tłumaczenie szablonu Extra możesz pobrać tutaj, a dodatkowo dowiesz się z wpisu jak je przygotować, jeżeli oczywiście będziesz chciał przetłumaczyć niektóre frazy inaczej niż ja to zrobiłam.

Kto w takim razie powinien korzystać i utworzyć Child Theme dla swojego szablonu? Każdy, kto chce wprowadzić jakąkolwiek zmianę na stałe do swojego szablonu. To może być kolor, czcionka, tłumaczenie, wielkość nagłówków, treści oraz dodatkowe zmiany w wyglądzie elementów strony. Wszystkie te zmiany w dużej części dotyczą modyfikacji plików źródłowych szablonu.

Jeżeli nie zmieniasz w szablonie nic, nie ma potrzeby tworzenia Child Theme. Nie ma również potrzeby jego tworzenia w sytuacji kiedy np. niestandardowy CSS wykorzystujesz poprzez panel (Extra/Theme Options) albo kiedy dodajesz go do jakiegokolwiek modułu, czy sekcji w szablonie, wykorzystując plugin The Divi Builder.

Wady i zalety korzystania z motywów potomnych (Child Theme)

Zaletą utworzenia i modyfikowania plików korzystając z Child Theme, jest zdecydowanie brak utraty wprowadzonych zmian podczas aktualizacji szablonu. Warto mieć jednak na uwadze, że jeżeli po jakimś czasie zapragniesz zmienić szablon na inny to pliki z motywu potomnego na nic już się nie zdadzą. Każdy szablon wykorzystuje nieco inne style (między innymi css) i w większości szablonów za tą samą funkcję odpowiada inny kod. Jeżeli więc stworzysz swój motyw potomny do konkretnego szablonu, a później postanowisz motyw zmienić, albo utracisz wszystkie wprowadzone modyfikacje, albo będziesz musiał je mocno zmodyfikować.

Jakie jest rozwiązanie? Jeżeli w plikach źródłowych szablonu wprowadzasz niewiele zmian, to warto zastanowić się, czy faktycznie Child Theme jest Ci potrzebny. Ja w szablonie Extra modyfikuję trzy rzeczy: stopkę, tłumaczenie, oraz czcionki wyłącznie w niektórych wpisach dla nagłówków. W wersji elektronicznej przechowuję plik, w którym zamieściłam informacje, jakie dane i w jakim pliku muszę zmienić po każdej aktualizacji szablonu. Zabiera mi to dodatkowo 5 minut, ale mam pewność, że korzystam z najaktualniejszych rozwiązań. Nieco inaczej działam na Divi. W związku z tym, że jest to szablon o wiele bardziej responsywny i daje wiele możliwości, więcej w nim też zmieniam. W tym przypadku wprowadzanie zmian w motywie pierwotnym zajęłoby mi już o wiele więcej czasu, więc Child Theme jest nieunikniony. Jeżeli modyfikujesz głównie CSS czy php tak jak ja, to nie masz powodu do zmartwień, ponieważ Twoje pliki po każdej aktualizacji będą aktualne.

Jak stworzyć Child Theme?

Poniżej przedstawię Ci trzy rozwiązania, dzięki którym utworzysz swój motyw potomny, czyli Child Theme. Jeżeli panicznie boisz się tworzenia plików od podstaw – co jest bardzo proste, a z manualem umieszczonym poniżej na pewno sobie poradzisz, to możesz wykorzystać wtyczkę One Click Child Theme, stworzoną przez Tychay. Po instalacji należy przejść do Wtyczki w bocznym panelu WordPressa i nacisnąć przycisk „Włącz”, umieszczony zaraz pod wtyczką. Następnie, po najechaniu kursorem na Wygląd (również w bocznym panelu WordPressa) należy wybrać Child Theme.

W polach jakie zobaczysz podczas  personalizacji należy wpisać:

Theme Name: [nazwa twojego szablonu] Child  Theme
Description: [nazwa twojego szablonu] Child  Theme
Author: Twoje dane

Następnie klikasz „Create Child” i gotowe. Samo utworzenie Child Theme nie zmieni niczego na Twojej stronie. Zmiany zobaczysz dopiero w momencie, kiedy coś zmodyfikujesz.

No właśnie, tylko gdzie modyfikować i wprowadzać zmiany? Możesz to zrobić na dwa sposoby.

 

Zacznijmy jednak od tego, gdzie możesz swój motyw potomny zobaczyć. Po pierwsze będzie on widoczny w sekcji motywów (boczny panel WP/Motywy). Zobaczysz tam wszystkie swoje motywy, z których korzystałeś czy które wcześniej dodałeś i jeszcze ich nie usunąłeś oraz motyw szablonu, z którego korzystasz obecnie – będzie on zduplikowany. W moim przypadku występuje szablon Extra i Extra Child Theme. Wprowadzając teraz zmiany, wprowadzam je wyłącznie w motywie potomnym – nie w motywie oryginalnym.

Kolejnym narzędziem, które pokaże Ci, że Child theme został utworzony jest FTP Core, bądź jakiekolwiek inne narzędzie, którego używasz do wrzucania plików na serwer. Folder Child Theme znajdziesz w katalogu /wp-content/themes/.

ftp core child themeW zależności od potrzeby, do tego folderu (w moim przypadku jest to extra-child-theme) możesz wrzucać pliki z modyfikacjami, które chcesz zrobić. Możesz w nim tworzyć dodatkowe foldery, np.: lang i wrzucić do niego tłumaczenie szablonu, o którym pisałam w innym poście. Dzięki temu podczas kolejnych aktualizacji szablonów tłumaczenie nie zostanie zastąpione oryginalnym tłumaczeniem Elegant Themes. Możesz zmodyfikować obecnie znajdujące się tam pliki style.css czy function.php. Możesz też kopiować niektóre pliki z szablonu oryginalnego i swobodnie umieszczać je w folderze z szablonem potomnym.

Szablon potomny i pliki, które znajdziesz w FTP Core, zostały stworzone dzięki wtyczce One Click Child Theme. Po utworzeniu szablonu potomnego wtyczkę możesz odinstalować, ponieważ nie będzie Ci ona potrzebna (zrobisz to w panelu bocznym WP, wybierając Wtyczki). Usunięcie samej wtyczki za pomocą której stworzyliśmy Child Theme nie wpływa na jego funkcjonowanie i nie sprawi, że on też się odinstaluje.

Manualne tworzenie Child Theme

Jeżeli nie chcesz tworzyć motywu potomnego przy użyciu wtyczki, to możesz stworzyć go manualnie na dwa sposoby. Właściwie sposób tworzenia plików do motywu jest jeden, ale istnieją dwie możliwości na wrzucenie plików na serwer, aby motyw potomny działał poprawnie.

W pierwszej kolejności będziemy potrzebowali stworzyć plik odpowiedzialny za style CSS. Otwórz zwykły notatnik i wklej do niego poniższe informacje:

/*
Theme Name: Extra Child Theme
Theme URI: https://www.canaq.net/gallery/extra/
Description: Extra Child Theme
Author: Paulina Kanak
Author URI: https://www.canaq.net
Template: Extra
Version: 2.0.90
*/

@import url(„../Extra/style.css„);

/* =Theme customization starts here
——————————————————- */

Wszystkie informacje zaznaczone na czerwono uzupełniasz samodzielnie. W pozycji Theme Name, Theme URI, Description i Author wpisujesz co chcesz. Najważniejsze jest pole Template oraz @import url, ponieważ służy jako odwołanie do motywu oryginalnego, z którego tworzony motyw potomny. Mój plik CSS w motywie potomnym wygląda dokładnie tak jak na górze. Jeżeli już zmieniłeś wszystkie wymagane dane, to zapisz plik w wybranej przez siebie lokalizacji na komputerze, nazywając plik „style.css”. Oczywiście możesz od razu w tym pliku wprowadzić jakieś zmiany, które też od razu zapiszesz. Zmiany wprowadzasz zaraz pod tymi wierszami:

/* =Theme customization starts here
——————————————————- */

Stworzenie powyższego pliku wystarczy, aby Child Theme został utworzony. To co chcesz do niego dodać, co zmodyfikować i na stałe zmienić na stronie, zależy od Ciebie i od Twoich potrzeb. W zależności od tego co będziesz chciał zrobić możesz tworzyć dalsze pliki od nowa, np. Functions.php. Co istotne możesz je stworzyć od podstaw, albo skopiować jakiś plik z szablonu oryginalnego, dodać do szablonu potomnego i tam finalnie dokonać edycji poszczególnych kodów. Dla zobrazowania załóżmy, że chcesz dodać nową czcionkę, której szablon ET nie zawiera. Ścieżka w obu szablonach (oryginalnym i potomnym) powinna być identyczna – zmienia się tylko zawartość samego folderu:

motyw pierwotny vs child theme

Jeżeli więc dla szablonu pierwotnego (oryginalnego) ścieżka jest: public_html/wp-content/themes/Extra/fonts/ to dla motywu potomnego (Child Theme) powinna być identyczna: public_html/wp-content/themes/Extra-Child/fonts/. Jedyna zmiana to nazwa szablonu (raz występuje jako Extra, a raz jako Extra-Child) i zawartość, co z resztą widać na zrzucie powyżej.

Dodanie plików i utworzenie Child Theme przez FTP Core

Jeżeli już stworzyłeś wszystkie pliki niezbędne do stworzenia swojego motywu potomnego, to logujesz na serwer przez FTP Core i docierasz do tej lokalizacji: wp-content/themes/ Następnie tworzysz nowy folder o nazwie np. Extra-Child. Następnie otwierasz utworzony folder i wrzucasz do niego plik style.css, który przed chwilą utworzyłeś. Gotowe – właśnie utworzyłeś swój pierwszy Child Theme 🙂 Żeby motyw potomny został utworzony, wystarczy sam folder i plik style.css.

Żeby go włączyć przechodzisz do WordPressa. Z panelu bocznego WP wybierasz Wygląd/Motywy. Na pulpicie powinieneś zobaczyć dwa takie same szablony. Jeden oryginalny, a drugi potomny – w moim przypadku jest to Extra Child Theme. Włącz go i gotowe.

child theme i extra

Dodanie plików i utworzenie Child Theme przez panel WordPressa 

Drugim sposobem na dodanie plików i stworzenie Child Theme jest wykorzystanie WordPressa, chociaż naprawdę polecam Ci używanie FTP – jeżeli jeszcze tego nie robisz. Jest to o wiele szybsze i wygodniejsze. Żeby dodać wszystkie pliki przez panel WP, najpierw musisz odpowiednio utworzyć folder z nazwą i wrzucić do niego wszystkie pliki:

  1. Utwórz folder o nazwie Extra-Child-Theme (zamiast Extra wstaw nazwę swojego szablonu)
  2. Wrzuć do folderu wszystkie pliki, które stworzyłeś np.: style.css, Functions.php itp.
  3. Zamień cały folder na folder skompersowany (spakuj w zip lub innym programie)
  4. Przejdź do panelu WordPressa i przejdź do motywów (Wygląd/Motywy)
  5. U góry po lewej stronie wybierz polecenie „Dodaj nowy”, a następnie „wyślij motyw na serwer” i załaduj skompersowany folder, który przed chwilą utworzyłeś
  6. Wybierz polecenie „Zainstaluj teraz”,  a następnie „włącz”.
  7. Gotowe.

Jeżeli wybierzesz tę metodę i poza plikami podstawowymi dodajesz jeszcze inne pliki, które wymagają odrębnego folderu tak jak np. czcionki, o których pisałam powyżej, to foldery te tworzysz w folderze głównym i wrzucasz do niego odpowiednie pliki. Żeby np. załadować od razu czcionki, których nie ma w szablonie, to tworzysz w folderze potomnym folder o nazwie „fonts” i tam wrzucasz pliki z czcionkami. Przyjmujesz dokładnie taką samą zasadę, jakbyś wrzucał pliki przez narzędzie do obsługi serwera, tworząc dokładnie taką samą ściężkę jak dla szablonu oryginalnego.

by Paulina Kanak

właścicielka domen Canaq.net | Canaq.pl

© Copyright 2014 | Wszelkie prawa zastrzeżone
cq.canaq@gmail.com