{"id":8301,"date":"2017-03-06T16:10:09","date_gmt":"2017-03-06T15:10:09","guid":{"rendered":"https:\/\/www.lh.pl\/pomoc\/czym-jest-motyw-potomny-w-wordpressie-i-jak-go-stworzyc\/"},"modified":"2022-03-07T11:49:27","modified_gmt":"2022-03-07T10:49:27","slug":"czym-jest-motyw-potomny-w-wordpressie-jak-go-stworzyc","status":"publish","type":"post","link":"https:\/\/www.lh.pl\/pomoc\/czym-jest-motyw-potomny-w-wordpressie-jak-go-stworzyc\/","title":{"rendered":"Czym jest motyw potomny w WordPressie i jak go stworzy\u0107"},"content":{"rendered":"\n

Motyw potomny, czyli tzw. Child Theme to szablon, kt\u00f3ry dzia\u0142a w oparciu o inny motyw. Umo\u017cliwia wprowadzanie zmian do oryginalnego motywu bez konieczno\u015bci jego bezpo\u015bredniej edycji. Jak stworzy\u0107 motyw potomny i jakie ma zalety?<\/strong><\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Kiedy chcesz (lub musisz) wprowadzi\u0107 zmiany do szablonu, kt\u00f3rego u\u017cywasz, to masz dwie mo\u017cliwo\u015bci. Pierwszym sposobem jest bezpo\u015brednia edycji plik\u00f3w danego szablonu i wprowadzenie swoich modyfikacji. To rozwi\u0105zanie ma jednak powa\u017cn\u0105 wad\u0119 \u2013 w przypadku aktualizacji motywu utracisz wszystkie swoje zmiany, gdy\u017c zostan\u0105 one nadpisane zaktualizowanymi plikami.<\/p>\n\n\n\n

Drugim rozwi\u0105zaniem jest stworzenie motywu potomnego (z ang. child theme). Jest to zalecane rozwi\u0105zanie, gdy chcemy zmodyfikowa\u0107 istniej\u0105cy szablon lub stworzy\u0107 w\u0142asny motyw na podstawie innego. Dzi\u0119ki niemu wszystkie nasze zmiany zostan\u0105 zachowane w trakcie aktualizacji motywu. Zobaczmy, jak dok\u0142adnie wygl\u0105da dzia\u0142anie motyw\u00f3w potomnych i jakie maj\u0105 zalety.<\/p>\n\n\n\n

Czym jest motyw potomny w WordPressie i jak dzia\u0142a?<\/h2>\n\n\n\n

Motyw potomny to taki motyw, kt\u00f3ry dziedziczy wygl\u0105d swojego motywu rodzica i zawiera jedynie nasze w\u0142asne modyfikacje. Innymi s\u0142owy, motyw potomny dzia\u0142a w oparciu o inny motyw (tzw. motyw rodzic), dziedzicz\u0105c jego wygl\u0105d i r\u00f3\u017cni\u0105c si\u0119 tylko tymi plikami, kt\u00f3re s\u0105 w nim umieszczone. Wykorzystuje oryginalny wygl\u0105d g\u0142\u00f3wnego motywu i nak\u0142ada na niego nasze w\u0142asne zmiany bez bezpo\u015bredniej modyfikacji g\u0142\u00f3wnego szablonu.<\/p>\n\n\n\n

W folderze z motywem potomnym s\u0105 umieszczone tylko te pliki, w kt\u00f3rych wprowadzili\u015bmy jakiekolwiek zmiany i stanowi\u0105 one pierwsze\u0144stwo, nadpisuj\u0105c oryginalne pliki motywu rodzica podczas \u0142adowania strony. Dzi\u0119ki temu wszystkie nasze modyfikacje s\u0105 ca\u0142kowicie odseparowane w osobnym folderze.<\/p>\n\n\n\n

WordPress podczas otwierania strony najpierw \u0142aduje nasze zmodyfikowane pliki z folderu z motywem potomnym, gdy\u017c maj\u0105 one pierwsze\u0144stwo. Reszta plik\u00f3w jest natomiast \u0142adowana z oryginalnego motywu, na kt\u00f3rym bazujemy.<\/p>\n\n\n\n

Mo\u017cna to przedstawi\u0107 na prostym przyk\u0142adzie. Za\u0142\u00f3\u017cmy, \u017ce chcieliby\u015bmy zmodyfikowa\u0107 nag\u0142\u00f3wek i stopk\u0119 w motywie TwentySixteen. Za nag\u0142\u00f3wek odpowiada plik header.php<\/em>, za stopk\u0119 odpowiada plik footer.php<\/em>. Zamiast edytowa\u0107 te pliki bezpo\u015brednio w oryginalnym motywie, wystarczy stworzy\u0107 motyw potomny dla szablonu TwentySixteen i umie\u015bci\u0107 w nim kopi\u0119 plik\u00f3w header.php i footer.php<\/em> , a nast\u0119pnie wprowadzi\u0107 do nich swoje zmiany.<\/p>\n\n\n\n

WordPress podczas otwierania strony u\u017cyje wszystkich plik\u00f3w z motywu rodzica za wyj\u0105tkiem tych plik\u00f3w, kt\u00f3re znajduj\u0105 si\u0119 w motywie potomnym, czyli header.php <\/em>oraz footer.php<\/em>. Te dwa pliki zostan\u0105 odczytane z motywu potomnego. M\u00f3wi\u0105c kr\u00f3tko, motyw potomny nadpisuje pliki motywu rodzica podczas otwierania strony.<\/p>\n\n\n\n

Jak s\u0105 nadpisywane pliki przez motyw potomny?<\/h2>\n\n\n\n

Generalnie zasada jest do\u015b\u0107 prosta. Gdy zar\u00f3wno w folderze z motywem rodzicem jak i motywem potomnym znajduj\u0105 si\u0119 dwa pliki o tej samej nazwie, to wygrywa zawsze ten z motywu potomnego. Podczas \u0142adowania strony pliki z motywu rodzica s\u0105 ignorowane, gdy w folderze z motywem potomnym istniej\u0105 ich odpowiedniki. Wida\u0107 to na poni\u017cszym przyk\u0142adzie, gdzie motyw potomny nadpisuje pliki header.php<\/em> i footer.php<\/em>.<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Od tej regu\u0142y jest jeden wyj\u0105tek \u2013 plik functions.php<\/strong>. Plik ten z regu\u0142y zawiera niestandardowe funkcje PHP, kt\u00f3re s\u0105 potrzebne do dzia\u0142ania poszczeg\u00f3lnych element\u00f3w na stronie, wprowadzonych przez dany motyw. W tym wypadku zawarto\u015b\u0107 pliku functions.php<\/strong> nie jest nadpisywana, a uzupe\u0142niana. Oznacza to, \u017ce zar\u00f3wno zawarto\u015b\u0107 oryginalnego pliku z motywu rodzica jak i zawarto\u015b\u0107 tego samego pliku z motywu potomnego jest wczytywana jednocze\u015bnie.<\/p>\n\n\n\n

Zalety u\u017cywania motywu potomnego w WordPressie<\/h2>\n\n\n\n

Motywy potomne s\u0105 najw\u0142a\u015bciwszym sposobem na edytowanie istniej\u0105cego szablonu lub budowanie w\u0142asnego motywu w oparciu o inny, gdy\u017c pozwalaj\u0105 pozostawi\u0107 oryginalny szablon bez zmian i odseparowa\u0107 swoje zmiany do osobnego folderu.<\/p>\n\n\n\n

Jedn\u0105 z najwa\u017cniejszych zalet motyw\u00f3w potomnych jest rozwi\u0105zanie problemu z aktualizacjami szablon\u00f3w. Motywy pobrane z sieci cz\u0119sto otrzymuj\u0105 aktualizacje, kt\u00f3re po zainstalowaniu resetuj\u0105 ustawienia oraz nadpisuj\u0105 obecne pliki motywu. U\u017cycie motywu potomnego sprawia jednak, \u017ce nasze zmodyfikowane pliki s\u0105 w osobnym folderze, a wi\u0119c przetrwaj\u0105 ka\u017cd\u0105 aktualizacj\u0119, gdy\u017c ta ich po prostu nie dotyka. Je\u015bli teraz po ka\u017cdorazowej aktualizacji motywu musia\u0142e\u015b ponownie wprowadza\u0107 swoje zmiany do szablonu, to u\u017cycie motywu potomnego rozwi\u0105\u017ce ten problem raz na zawsze.<\/p>\n\n\n\n

Kolejn\u0105 zalet\u0105 jest zachowanie oryginalnych plik\u00f3w motywu rodzica. Je\u015bli kiedy\u015b zechcemy usun\u0105\u0107 swoje modyfikacje i powr\u00f3ci\u0107 do oryginalnego motywu, to nie ma z tym \u017cadnego problemu. Wystarczy prze\u0142\u0105czy\u0107 si\u0119 z powrotem na motyw rodzica lub usun\u0105\u0107 sw\u00f3j motyw potomny, a ca\u0142a strona momentalnie zmieni sw\u00f3j wygl\u0105d na taki, jaki zaplanowa\u0142 autor motywu.<\/p>\n\n\n\n

Motywy potomne przyspieszaj\u0105 r\u00f3wnie\u017c proces tworzenia strony. Zamiast tworzy\u0107 w\u0142asny szablon zupe\u0142nie od zera, mo\u017cemy wykorzysta\u0107 motyw, kt\u00f3ry jest podobny do tego, co chcemy osi\u0105gn\u0105\u0107, a nast\u0119pnie za pomoc\u0105 motywu potomnego dostosowa\u0107 go do w\u0142asnych potrzeb. To te\u017c \u015bwietny spos\u00f3b na to, aby po prostu nauczy\u0107 si\u0119 w bezpieczny spos\u00f3b modyfikowa\u0107 szablony i pozna\u0107 struktur\u0119 motyw\u00f3w w WordPressie \u2013 jak co\u015b p\u00f3jdzie nie tak, to zawsze mo\u017cesz powr\u00f3ci\u0107 do oryginalnego motywu.<\/p>\n\n\n\n

Kiedy warto u\u017cywa\u0107 motyw\u00f3w potomnych?<\/h2>\n\n\n\n

Wiemy ju\u017c, jak dzia\u0142a motyw potomny i jakie ma zalety. Warto jednak jeszcze dowiedzie\u0107 si\u0119, kiedy w og\u00f3le warto u\u017cywa\u0107 takiego rozwi\u0105zania. Czy powinni\u015bmy tworzy\u0107 motyw potomny za ka\u017cdym razem, gdy chcemy zmieni\u0107 np. kolorystyk\u0119 strony? Dlaczego w takim wypadku nie skorzysta\u0107 z opcji personalizacji motywu, kt\u00f3re nawet tw\u00f3rcy szablon\u00f3w dodaj\u0105 do swoich projekt\u00f3w?<\/p>\n\n\n\n

Odpowied\u017a jest zale\u017cna od tego, co chcemy zmodyfikowa\u0107. Je\u015bli nasze zmiany ograniczaj\u0105 si\u0119 do zmiany kolorystyki kilku element\u00f3w, do rozmiaru i kroju czcionki, a tak\u017ce do prostych rzeczy, kt\u00f3re mo\u017cna zmieni\u0107 z poziomu ustawie\u0144 motywu, to u\u017cycie motywu potomnego nie jest potrzebne.<\/p>\n\n\n\n

Je\u015bli jednak planujesz modyfikowa\u0107 kod w plikach oryginalnego motywu, dodawa\u0107 lub usuwa\u0107 swoje w\u0142asne funkcje i wprowadza\u0107 du\u017ce zmiany w strukturze strony, to u\u017cycie motywu potomnego jest jak najbardziej wskazane. Z regu\u0142y motywu potomnego powiniene\u015b u\u017cy\u0107 zawsze wtedy, gdy pojawia si\u0119 potrzeba bezpo\u015bredniego edytowania plik\u00f3w PHP lub dopisywania du\u017cej ilo\u015bci w\u0142asnych regu\u0142 CSS (oraz modyfikowania istniej\u0105cych).<\/p>\n\n\n\n

Tworzenie motywu potomnego w WordPressie – metoda r\u0119czna<\/h2>\n\n\n\n

Zaloguj si\u0119 do swojego hostingu <\/a>poprzez po\u0142\u0105czenie FTP ze swoim WordPressem, a nast\u0119pnie udaj si\u0119 do katalogu z motywami. S\u0105 one w poni\u017cszej \u015bcie\u017cce:<\/p>\n\n\n\n

\/wp-content\/themes\/<\/strong><\/p>\n\n\n\n

W tym katalogu znajduj\u0105 si\u0119 podfoldery, z kt\u00f3rych ka\u017cdy reprezentuje motyw zainstalowany na twojej stronie. Za\u0142\u00f3\u017cmy, \u017ce chcemy stworzy\u0107 motyw dzieci\u0119cy dla motywu Twenty Sixteen, kt\u00f3ry znajduje si\u0119 w folderze \u201etwentysixteen\u201d.<\/p>\n\n\n\n

Utw\u00f3rz nowy katalog w folderze z szablonami i nadaj mu tak\u0105 sam\u0105 nazw\u0119, jak oryginalny folder motywu, ale z dopiskiem „-child” na ko\u0144cu. Przyk\u0142adowo, w przypadku motywu Twenty Sixteen, kt\u00f3ry jest w folderze „twentysixteen” nasz folder z motywem potomnym b\u0119dzie nosi\u0107 nazw\u0119 „twentysixteen-child”. Je\u015bli tworzymy motyw potomny dla motywu StoreFront, kt\u00f3ry jest w folderze „storefront”, to dla zachowania tej samej zasady nale\u017cy nazwa\u0107 folder „storefront-child”.<\/p>\n\n\n\n

Nazwij sw\u00f3j folder analogicznie do powy\u017cszych przyk\u0142ad\u00f3w. Nast\u0119pnie wejd\u017a do utworzonego przez siebie folderu. Musisz utworzy\u0107 tu na start dwa pliki:<\/p>\n\n\n\n