Ten samouczek nie jest dla wszystkich.<\/p>\n
Nie musisz by\u0107 do\u015bwiadczonym programist\u0105, aby pod\u0105\u017ca\u0107 za nim, ale potrzebujesz prawdziwego zainteresowania, aby dowiedzie\u0107 si\u0119 wi\u0119cej o WordPressie i dzia\u0142aniu motyw\u00f3w.<\/p>\n
Je\u015bli nie boisz si\u0119 pracowa\u0107 z odrobin\u0105 kodu i ubrudzi\u0107 sobie r\u0119ce plikami motyw\u00f3w, witaj na pok\u0142adzie!<\/p>\n
W tym przewodniku dowiesz si\u0119, jak dostosowa\u0107 witryn\u0119 WordPress do zawarto\u015bci Twojego serca za pomoc\u0105 motywu potomnego, ale najpierw\u2026<\/p>\n
Om\u00f3wmy dok\u0142adnie, dlaczego powiniene\u015b w og\u00f3le u\u017cywa\u0107 tej dziwnej rzeczy zwanej \u201emotywem potomnym".<\/p>\n
Powtarzaj za mn\u0105:<\/p>\n
Uroczy\u015bcie przysi\u0119gam, \u017ce nigdy nie b\u0119d\u0119 edytowa\u0107 pliku motywu.<\/p>\n
Nowi u\u017cytkownicy WordPressa, kt\u00f3rzy s\u0105 zainteresowani wprowadzaniem dostosowa\u0144 za pomoc\u0105 kodu, cz\u0119sto bezpo\u015brednio edytuj\u0105 pliki w swoim motywie. To jest wielkie nie.<\/p>\n
Czemu?<\/p>\n
Jeden pow\u00f3d: po zaktualizowaniu motywu WordPress zast\u0105pi istniej\u0105cy motyw now\u0105 wersj\u0105 motywu.<\/p>\n
Wi\u0119c dlaczego to ma znaczenie?<\/p>\n
Wyobra\u017a sobie, \u017ce u\u017cywasz wersji 1.04 motywu Challenger<\/a>. Przenios\u0142e\u015b menu w pliku header.php i doda\u0142e\u015b nowy CSS do style.css. Nast\u0119pnie pojawia si\u0119 wersja 1.05 i widzisz powiadomienie na pulpicie nawigacyjnym.<\/p>\n Po aktualizacji do wersji 1.05 oba pliki header.php i style.css zostan\u0105 zast\u0105pione plikami w wersji 1.05 Challengera. Nie b\u0119d\u0105 zawiera\u0107 tych samych zmian, kt\u00f3re wprowadzi\u0142e\u015b, wi\u0119c Twoja praca zostanie utracona i nie b\u0119dzie mo\u017cliwo\u015bci jej odzyskania. Mo\u017ce to by\u0107 do\u015b\u0107 przygn\u0119biaj\u0105ce, je\u015bli pogr\u0105\u017cysz si\u0119 godzinami w swoich dostosowaniach.<\/p>\n Je\u015bli jednak umie\u015bcisz dostosowania w motywie potomnym Challenger, mo\u017cesz bezpiecznie zaktualizowa\u0107 do wersji 1.05 bez utraty dostosowa\u0144, poniewa\u017c s\u0105 one bezpiecznie przechowywane w motywie potomnym.<\/p>\n Stanie si\u0119 to nieco ja\u015bniejsze, gdy przejdziemy do prawdziwego przyk\u0142adu, wi\u0119c przejd\u017amy teraz do tematu potomnego.<\/p>\n Chocia\u017c nie zamierzam szczeg\u00f3\u0142owo wyja\u015bnia\u0107, jak dzia\u0142a ca\u0142y kod, s\u0105 to podstawowe pomys\u0142y i fragmenty, kt\u00f3rych potrzebujesz, aby zacz\u0105\u0107.<\/p>\n Zacznij od utworzenia pustego folderu na pulpicie. Mo\u017cesz nazwa\u0107 go, jak chcesz, ale standardow\u0105 konwencj\u0105 nazewnictwa jest u\u017cywanie nazwy motywu ma\u0142ymi literami, a nast\u0119pnie \u201edziecko” i zast\u0119powanie spacji my\u015blnikami.<\/p>\n Na przyk\u0142ad motyw potomny dla motywu Challenger mia\u0142by nazw\u0119 folderu \u201echallenger-child”. Ten folder b\u0119dzie zawiera\u0142 wszystkie pliki motywu podrz\u0119dnego.<\/p>\n Potrzebujesz tylko jednego pliku, aby utworzy\u0107 technicznie poprawny motyw potomny, style.css.<\/p>\n Korzystaj\u0105c z wybranego edytora kodu, utw\u00f3rz nowy plik w folderze motywu podrz\u0119dnego i nazwij go style.css.<\/p>\n Plik style.css to oczywi\u015bcie miejsce, w kt\u00f3rym dodasz wszystkie swoje CSS, aby dostosowa\u0107 swoj\u0105 witryn\u0119. Aby WordPress rozpozna\u0142 Tw\u00f3j motyw podrz\u0119dny jako prawid\u0142owy, musisz doda\u0107 taki nag\u0142\u00f3wek arkusza styl\u00f3w na samej g\u00f3rze style.css:<\/p>\n Mo\u017cesz skopiowa\u0107 ten dok\u0142adny nag\u0142\u00f3wek i u\u017cy\u0107 go do w\u0142asnych motyw\u00f3w podrz\u0119dnych. Po prostu zamie\u0144 nazw\u0119 motywu na dowolny dostosowywany motyw.<\/p>\n Najwa\u017cniejsz\u0105 cz\u0119\u015bci\u0105 jest warto\u015b\u0107 \u201eSzablon”, kt\u00f3r\u0105 nale\u017cy ustawi\u0107 na nazw\u0119 motywu nadrz\u0119dnego. W szczeg\u00f3lno\u015bci nazwa u\u017cywana dla folderu zawieraj\u0105cego motyw nadrz\u0119dny.<\/p>\n Maj\u0105c to na miejscu, mo\u017cesz ju\u017c aktywowa\u0107 motyw potomny za pomoc\u0105 menu Wygl\u0105d i u\u017cywa\u0107 go. Jednak Twoja strona b\u0119dzie ca\u0142kowicie pozbawiona stylu!<\/p>\n Gdy motyw potomny jest aktywowany, WordPress nie b\u0119dzie ju\u017c \u0142adowa\u0107 pliku style.css motywu nadrz\u0119dnego, a zamiast tego b\u0119dzie polega\u0107 na motywie potomnym.<\/p>\n Oto jak za\u0142adowa\u0107 oba arkusze styl\u00f3w\u2026<\/p>\n W edytorze kodu utw\u00f3rz drugi plik w motywie potomnym i nazwij go functions.php.<\/p>\n Nast\u0119pnie dodaj do pliku nast\u0119puj\u0105cy kod:<\/p>\n Ta funkcja nakazuje WordPressowi za\u0142adowa\u0107 plik style.css motywu nadrz\u0119dnego, a nast\u0119pnie za\u0142adowa\u0107 plik style.css motywu potomnego. Wczytanie arkusza styl\u00f3w motywu potomnego po u\u0142atwieniu zast\u0105pienia selektor\u00f3w CSS motywu nadrz\u0119dnego.<\/p>\n Jak wspomnia\u0142em wcze\u015bniej, nie zamierzam omawia\u0107 tego kodu linia po linii, ale bardziej szczeg\u00f3\u0142owe wyja\u015bnienie tego fragmentu mo\u017cna znale\u017a\u0107 w Kodeksie WordPress<\/a>.<\/p>\n To wszystko, co musisz zrobi\u0107, aby stworzy\u0107 dzia\u0142aj\u0105cy motyw potomny!<\/p>\n Dzi\u0119ki konfiguracji motywu potomnego istniej\u0105 trzy sposoby dostosowywania witryny za jego pomoc\u0105.<\/p>\n Do pliku style.css motywu potomnego mo\u017cna doda\u0107 dowoln\u0105 liczb\u0119 nowych kod\u00f3w CSS.<\/p>\n Wyszukuj\u0105c selektory do u\u017cycia w CSS, nie sprawdzaj pliku style.css motywu nadrz\u0119dnego. Wszystkie nasze motywy u\u017cywaj\u0105 \u201epreprocesora CSS”, wi\u0119c nawet nie patrzymy na ten plik! Zamiast tego skorzystaj z tego inteligentniejszego procesu, aby znale\u017a\u0107 selektory CSS<\/a>, a my\u015bl\u0119, \u017ce odniesiesz znacznie wi\u0119kszy sukces w dostosowywaniu swojej witryny.<\/p>\n Dzi\u0119ki dobrze zakodowanemu motywowi nadrz\u0119dnemu mo\u017cesz nadpisa\u0107 dowolne funkcje znajduj\u0105ce si\u0119 w jego pliku functions.php.<\/p>\n Na przyk\u0142ad ka\u017cda funkcja w Wiadomo\u015bciach o misji<\/a> jest owini\u0119ta Typowym dostosowaniem wymagaj\u0105cym motywu podrz\u0119dnego jest zmiana kolejno\u015bci element\u00f3w. Na przyk\u0142ad mo\u017cesz chcie\u0107 przenie\u015b\u0107 tytu\u0142 posta po wyr\u00f3\u017cnionym obrazie zamiast przed nim.<\/p>\n Mo\u017cesz wzi\u0105\u0107 dowolny z plik\u00f3w szablon\u00f3w znalezionych w motywie nadrz\u0119dnym i umie\u015bci\u0107 kopi\u0119 w motywie potomnym. Zamiast tego zostanie za\u0142adowana wersja z motywu potomnego. Dzi\u0119ki temu mo\u017cesz dodawa\u0107, zmienia\u0107 kolejno\u015b\u0107 i usuwa\u0107 dowolne elementy z dowolnej cz\u0119\u015bci witryny.<\/p>\n Gdy b\u0119dziesz zadowolony z wprowadzonych zmian, mo\u017cesz zainstalowa\u0107 motyw podrz\u0119dny w swojej witrynie.<\/p>\n Motywy potomne mo\u017cna przesy\u0142a\u0107 tak samo, jak zwyk\u0142e motywy WordPress, wi\u0119c aktywacja ich w witrynie zajmuje tylko minut\u0119 lub dwie. Post\u0119puj zgodnie z tym samouczkiem, aby zainstalowa\u0107 motyw potomny:<\/p>\n Jak zainstalowa\u0107 motyw potomny WordPress?<\/a><\/p>\n Je\u015bli jeste\u015b ca\u0142kowicie nowy w tym wszystkim, oto kilka bezp\u0142atnych narz\u0119dzi, kt\u00f3re ci pomog\u0105.<\/p>\n Po pierwsze, je\u015bli nie masz edytora kodu, zapoznaj si\u0119 z Visual Studio Code<\/a>. To proste, ale elastyczne. Jest r\u00f3wnie\u017c ca\u0142kowicie darmowy i zawiera wiele profesjonalnego oprogramowania. To jest to, czego u\u017cywam do tworzenia motyw\u00f3w tutaj w Compete Themes.<\/p>\n Po drugie, stworzenie lokalnej witryny WordPress (offline) to \u015bwietny spos\u00f3b na wypr\u00f3bowanie kodu bez wp\u0142ywu na twoj\u0105 prawdziw\u0105 witryn\u0119. Podczas gdy w przesz\u0142o\u015bci u\u017cywa\u0142em i poleca\u0142em MAMP<\/a>, Local by Flywheel<\/a> jest tak cholernie \u0142atwy i prosty w u\u017cyciu, \u017ce go uwielbiam. To jest to, czego u\u017cywam do tworzenia motyw\u00f3w, a tak\u017ce jest bezp\u0142atne.<\/p>\n Wracaj\u0105c do wcze\u015bniejszego przyk\u0142adu\u2026<\/p>\n Podczas aktualizowania motywu Challenger (lub dowolnego motywu) ca\u0142y katalog \u201echallenger” zostaje zast\u0105piony, co nie ma wp\u0142ywu na motyw potomny, poniewa\u017c ma teraz sw\u00f3j w\u0142asny katalog w folderze \u201echallenger-child”.<\/p>\n Maj\u0105c motyw podrz\u0119dny, mo\u017cesz bezpiecznie wprowadza\u0107 dowolne dostosowania i aktualizowa\u0107 motyw nadrz\u0119dny.<\/p>\n Je\u015bli jeste\u015b nowy w CSS i PHP, mo\u017ce zaj\u0105\u0107 Ci troch\u0119 czasu, aby dostosowa\u0107 ustawienia tak, jak chcesz, ale dzi\u0119ki motywowi potomnemu masz \u015bwietn\u0105 podstaw\u0119 do pracy. Pami\u0119taj, aby wykona\u0107 te kroki,<\/a> aby znale\u017a\u0107 selektory CSS do u\u017cycia, a wszelkie dostosowania stylu, kt\u00f3re wprowadzisz, b\u0119d\u0105 do\u015b\u0107 proste.<\/p>\nJak stworzy\u0107 motyw potomny<\/h2>\n
Podstawowe ustawienia<\/h3>\n
Utw\u00f3rz plik style.css<\/h3>\n
\/*\n Theme Name: Challenger Child\n Template: challenger\n Author: Compete Themes\n Version: 1.0\n Author URI: https:\/\/www.competethemes.com\n Description: This is a child theme used to customize the Challenger WordPress theme.\n License: GNU General Public License v2 or later\n License URI: http:\/\/www.gnu.org\/licenses\/gpl-2.0.html\n*\/<\/code><\/pre>\nUtw\u00f3rz plik functions.php<\/h3>\n
<?php \nfunction my_theme_enqueue_styles() { \n $parent_style = 'parent-style'; \n wp_enqueue_style( $parent_style, get_template_directory_uri(). '\/style.css' ); \n wp_enqueue_style( 'child-style', get_stylesheet_directory_uri(). '\/style.css', array( $parent_style ), wp_get_theme()->get('Version')\n );\n}\nadd_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );<\/code><\/pre>\nDostosowywanie za pomoc\u0105 nowego motywu potomnego<\/h2>\n
Dodaj i zast\u0105p style<\/h3>\n
Nadrz\u0119dne funkcje<\/h3>\n
[function_exists()](https:\/\/php.net\/manual\/en\/function.function-exists.php)<\/code>czekiem. Oznacza to, \u017ce mo\u017cesz skopiowa\u0107 funkcj\u0119 do pliku functions.php motywu potomnego. Nast\u0119pnie mo\u017cesz tam wprowadzi\u0107 dowolne zmiany w funkcji.<\/p>\nZast\u0105p szablony<\/h3>\n
Instalowanie motywu potomnego<\/h3>\n
Twoje aktualizacje s\u0105 bezpieczne<\/h2>\n