{"id":233929,"date":"2023-02-25T12:07:00","date_gmt":"2023-02-25T09:07:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233929"},"modified":"2022-11-11T13:14:31","modified_gmt":"2022-11-11T10:14:31","slug":"samouczek-motywu-wordpress-dla-poczatkujacych-czesc-1-wprowadzenie","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/samouczek-motywu-wordpress-dla-poczatkujacych-czesc-1-wprowadzenie\/","title":{"rendered":"Samouczek motywu WordPress dla pocz\u0105tkuj\u0105cych \u2014 cz\u0119\u015b\u0107 1: Wprowadzenie"},"content":{"rendered":"\n

W tej lekcji zaczniesz uczy\u0107 si\u0119, jak WordPress \u0142aduje zawarto\u015b\u0107 w zale\u017cno\u015bci od strony, na kt\u00f3rej jeste\u015b, oraz hierarchii plik\u00f3w szablon\u00f3w motyw\u00f3w. Dowiesz si\u0119 r\u00f3wnie\u017c, co jest potrzebne do prawid\u0142owego motywu. A na koniec w ko\u0144cu stworzymy nasz motyw i go aktywujemy.<\/p>\n

Pliki szablon\u00f3w motyw\u00f3w<\/h2>\n

Za mask\u0105 WordPress ustala, kt\u00f3ry szablon za\u0142adowa\u0107 na podstawie adresu URL, pod kt\u00f3rym si\u0119 znajdujesz. Je\u015bli Tw\u00f3j WordPress jest zainstalowany w domenie \u201eexample.com\/wordpress\/", powiniene\u015b zobaczy\u0107 szablon strony g\u0142\u00f3wnej. Przej\u015bcie do \u201eexample.com\/wordpress\/category\/news\/” domy\u015blnie wy\u015bwietli list\u0119 post\u00f3w przypisanych do kategorii Wiadomo\u015bci za pomoc\u0105 szablonu kategorii.<\/p>\n

WordPress pod\u0105\u017ca za hierarchi\u0105 tego, kt\u00f3ry szablon ma zosta\u0107 za\u0142adowany, a wyb\u00f3r zale\u017cy od tego, jakie szablony s\u0105 dost\u0119pne w Twoim motywie. Na przyk\u0142ad \u201eexample.com\/wordpress\/category\/news” WordPress najpierw wyszuka szablon specyficzny dla kategorii \u201enews”. Je\u015bli nie zostanie znaleziony, WordPress poszuka szablonu specyficznego dla identyfikatora kategorii. Ponownie, je\u015bli nie zosta\u0142 znaleziony, WordPress szuka szablonu kategorii og\u00f3lnej. Je\u015bli nie zostanie znaleziony, WordPress poszuka jeszcze bardziej og\u00f3lnego szablonu dla archiw\u00f3w. I tak dalej i tak dalej.<\/p>\n

WordPress Codex, kt\u00f3ry jest witryn\u0105 z dokumentacj\u0105 WordPressa, zawiera u\u017cyteczny i zaktualizowany obraz ilustruj\u0105cy hierarchi\u0119 plik\u00f3w szablon\u00f3w motyw\u00f3w; https:\/\/codex.wordpress.org\/File:Template_Hierarchy.png#file<\/a><\/p>\n

Nie martw si\u0119, je\u015bli obraz na pocz\u0105tku wygl\u0105da zbyt zagmatwany! W miar\u0119 post\u0119p\u00f3w w samouczku b\u0119dziesz odwo\u0142ywa\u0107 si\u0119 do tego obrazu, aby znale\u017a\u0107 szablony, kt\u00f3re chcesz zaimplementowa\u0107 w swoim motywie.<\/p>\n

Spos\u00f3b, w jaki czytasz obraz, to chodzenie od lewej do prawej. W zale\u017cno\u015bci od tego, na jakiej stronie jeste\u015b, szablony s\u0105 bardzo specyficzne, a im bardziej post\u0119pujesz w prawo, tym bardziej og\u00f3lne staj\u0105 si\u0119 szablony. Ostatnia rezerwa jest najbardziej praw\u0105; index.php<\/code>, kt\u00f3ry zostanie za\u0142adowany, je\u015bli nie zostan\u0105 znalezione \u017cadne inne szablony dopasowania.<\/p>\n

Wszystkie pliki szablon\u00f3w wymienione na powy\u017cszym obrazku musz\u0105 znajdowa\u0107 si\u0119 w folderze g\u0142\u00f3wnym motywu i by\u0107 nazwane dok\u0142adnie tak, jak podano. Nie mo\u017cesz umieszcza\u0107 swoich szablon\u00f3w w podfolderach dla cel\u00f3w organizacyjnych, poniewa\u017c wtedy WordPress nie b\u0119dzie m\u00f3g\u0142 ich znale\u017a\u0107!<\/p>\n

Zaczniemy prosto! Dzisiaj utworzymy tylko kilka plik\u00f3w potrzebnych WordPressowi do rozpoznania go jako motywu, a nast\u0119pnie rozwiniemy stamt\u0105d.<\/p>\n

Anatomia motywu WordPress<\/h2>\n

Potrzebujesz tylko dw\u00f3ch plik\u00f3w, aby stworzy\u0107 prawid\u0142owy motyw WordPress.<\/p>\n

Czy na ilustracji hierarchii szablon\u00f3w zauwa\u017cy\u0142e\u015b t\u0119 bardzo s\u0142uszn\u0105; o nazwie index.php<\/code>? To jest ostateczny szablon awaryjny, je\u015bli WordPress nie znajdzie \u017cadnego szablonu. To jeden z wymaganych plik\u00f3w. Drugi plik to plik arkusza styl\u00f3w (.css<\/code>). Nie musi zawiera\u0107 \u017cadnego kodu CSS, ale musi zawiera\u0107 blok komentarzy, kt\u00f3ry dostarcza informacje WordPress na temat twojego motywu. Te dwie rzeczy to wszystko, czego potrzebujesz do prawid\u0142owego motywu WordPress.<\/p>\n

Stw\u00f3rzmy nasz motyw, tworz\u0105c te dwa pliki!<\/p>\n

Tworz\u0119 sw\u00f3j pierwszy motyw<\/h2>\n

Wszystkie motywy musz\u0105 znajdowa\u0107 si\u0119 w osobnych folderach w podfolderze \/wp-content\/themes\/<\/code>. Je\u015bli przejdziesz do tego folderu w nawigatorze plik\u00f3w, prawdopodobnie zobaczysz tutaj kilka folder\u00f3w tematycznych; dwadzie\u015bcia dziewi\u0119tna\u015bcie, dwadzie\u015bcia siedemna\u015bcie itd. S\u0105 to motywy, kt\u00f3re s\u0105 domy\u015blnie do\u0142\u0105czone do WordPressa.<\/p>\n

W \/wp-content\/themes\/<\/code>programie utw\u00f3rz nowy folder. Nazwij go odpowiednio (ma\u0142e litery, bez spacji, nie tak samo jak ka\u017cdy inny folder). Zwykle nazwa folderu jest wersj\u0105 slugow\u0105 nazwy motywu. W tym samouczku nazw\u0119 mojego folderu motywu \u201e wptutorial<\/code>„.<\/p>\n

\"Samouczek<\/a><\/p>\n

Wprowad\u017a folder motywu i utw\u00f3rz nowy, pusty plik o nazwie index.php<\/code>. Edytowa\u0142em plik i po prostu doda\u0142em losowy tekst, aby\u015bmy mogli \u0142atwiej zobaczy\u0107, kiedy jest w u\u017cyciu:<\/p>\n

\"Samouczek<\/a><\/p>\n

Jeste\u015bmy ju\u017c w po\u0142owie drogi! Utw\u00f3rzmy drugi wymagany plik. Wewn\u0105trz folderu motywu utw\u00f3rz nowy, pusty plik o nazwie style.css<\/code>.<\/p>\n

Otw\u00f3rz style.css<\/code>plik i natychmiast uruchom blok komentarza (\/*<\/code>i zamknij go za pomoc\u0105 *\/<\/code>). Wewn\u0105trz tego bloku komentarzy musimy przestrzega\u0107 pewnych zasad WordPressa dotycz\u0105cych definiowania naszego motywu. Jako minimum musimy zdefiniowa\u0107 nazw\u0119 naszego motywu. Ale mo\u017cemy r\u00f3wnie\u017c doda\u0107 informacje o autorze, stron\u0119 g\u0142\u00f3wn\u0105, numer wersji, informacje o licencji i wiele wi\u0119cej. Zobacz dokumentacj\u0119 WordPress, aby dowiedzie\u0107 si\u0119, co mo\u017cesz doda\u0107<\/a>.<\/p>\n

W tym samouczku zachowamy prostot\u0119; dodamy nazw\u0119 motywu i napiszesz swoje imi\u0119 jako autor. Mo\u017cesz \u015bmia\u0142o u\u017cywa\u0107 dowolnych nazw, kt\u00f3re chcesz, oto co wpisa\u0142em w moim style.css<\/code>:<\/p>\n

\/* \nTheme Name: A White Pixel Theme \nAuthor: Alex White \n*\/<\/code><\/pre>\n
Zapisz i zamknij plik (ten samouczek nie dotknie go ponownie), chyba \u017ce chcesz pisa\u0107 CSS dla swojego motywu w miar\u0119 post\u0119p\u00f3w.<\/p>\n
Gratulacje! Utworzy\u0142e\u015b prawid\u0142owy motyw WordPress!<\/p>\n
Aktywacja motywu<\/h2>\n
Przejd\u017amy do panelu administracyjnego WordPressa i przejd\u017a do \u201eWygl\u0105d > Motywy” i zobaczmy, czy mo\u017cemy tam znale\u017a\u0107 nasz motyw.<\/p>\n
\"Samouczek<\/a><\/p>\n
Kliknij przycisk Aktywuj i odwied\u017a swoj\u0105 witryn\u0119. Powiniene\u015b zobaczy\u0107 to, co napisa\u0142e\u015b index.php<\/code>!<\/p>\n
Ten index.php<\/code>szablon b\u0119dzie u\u017cywany niezale\u017cnie od tego, na kt\u00f3rej stronie jeste\u015b. Spr\u00f3buj wy\u015bwietli\u0107 jeden post, a zobaczysz to samo. Motyw powinien mie\u0107 co najmniej 5-10 szablon\u00f3w do obs\u0142ugi r\u00f3\u017cnych tre\u015bci. Nie martw si\u0119, dotrzemy tam.<\/p>\n
\u015awietnie, mamy motyw! W nast\u0119pnej lekcji zaczniemy w nim kodowa\u0107 i sprawi\u0107, by robi\u0142 r\u00f3\u017cne rzeczy.<\/p>\n
\u0179r\u00f3d\u0142o nagrywania:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
W tej lekcji nauczymy si\u0119 podstaw, w jaki spos\u00f3b motyw WordPress \u0142aduje zawarto\u015b\u0107, co jest potrzebne do prawid\u0142owego motywu – i stworzymy nasz pierwszy motyw!<\/p>\n","protected":false},"author":1,"featured_media":223984,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[897,721,721,919,897,919,1110,836,836,845,929,929,845,866,866],"tags":[1169],"class_list":["post-233929","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-kod","category-deweloper","category-inny","category-n-a","category-przewodnik-dla-poczatkujacych","category-samouczki","category-tematy","category-wordpress-7","tag-affiai-pl"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/233929","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/comments?post=233929"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/233929\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media\/223984"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media?parent=233929"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/categories?post=233929"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/tags?post=233929"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}