{"id":233566,"date":"2023-02-17T20:31:00","date_gmt":"2023-02-17T17:31:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233566"},"modified":"2022-11-11T00:23:12","modified_gmt":"2022-11-10T21:23:12","slug":"samouczek-motywu-wordpress-dla-poczatkujacych-czesc-2-szablony","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/samouczek-motywu-wordpress-dla-poczatkujacych-czesc-2-szablony\/","title":{"rendered":"Samouczek motywu WordPress dla pocz\u0105tkuj\u0105cych \u2013 cz\u0119\u015b\u0107 2: Szablony"},"content":{"rendered":"\n

Ta lekcja samouczka motywu WordPress dla pocz\u0105tkuj\u0105cych nauczy Ci\u0119, jak ustrukturyzowa\u0107 g\u0142\u00f3wne bloki konstrukcyjne motywu i rozpocz\u0105\u0107 tworzenie szablon\u00f3w. Zaczniemy tworzy\u0107 dane wyj\u015bciowe HTML i jak do\u0142\u0105czy\u0107 bloki konstrukcyjne do szablon\u00f3w naszego motywu. W poprzednim kroku<\/a> ustawili\u015bmy minimum motywu WordPress i aktywowali\u015bmy go. Ale w tej chwili nie robi zbyt wiele i nawet nie zawiera poprawnego kodu HTML dla strony internetowej. Naprawmy to.<\/p>\n

Bloki konstrukcyjne nag\u0142\u00f3wka i stopki (i paska bocznego)<\/h2>\n

W naszych plikach szablon\u00f3w potrzebujemy poprawnego kodu HTML. Mogliby\u015bmy napisa\u0107 ca\u0142\u0105 struktur\u0119 HTML (zaczynaj\u0105c\u0105 si\u0119 od <html><\/code>i <head><\/code>full <body><\/code>) w index.php<\/code>, ale staje si\u0119 to niepraktyczne w przypadku utrzymywania wielu plik\u00f3w szablon\u00f3w w motywie. Wyobra\u017a sobie, \u017ce stworzy\u0142e\u015b kilka szablon\u00f3w, a nast\u0119pnie zdaj sobie spraw\u0119, \u017ce potrzebujesz niewielkiej zmiany w cz\u0119\u015bci nag\u0142\u00f3wka; b\u0119dziesz musia\u0142 edytowa\u0107 wszystkie szablony, aby pozosta\u0142y sp\u00f3jne. To nie jest m\u0105dre.<\/p>\n

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

Rozwi\u0105zaniem jest podzielenie pe\u0142nej struktury HTML na sensowne cz\u0119\u015bci; cegie\u0142ki. Ka\u017cdy blok znajduje si\u0119 w swoim w\u0142asnym pliku i zawsze, gdy potrzebujemy go w szablonie, do\u0142\u0105czamy go. Najpopularniejszymi i najrozs\u0105dniejszymi blokami s\u0105 jeden dla nag\u0142\u00f3wka, jeden dla stopki i jeden dla tre\u015bci, ale je\u015bli tw\u00f3j motyw zawiera pasek boczny, pasek boczny powinien by\u0107 r\u00f3wnie\u017c osobnym budynkiem.<\/p>\n

Ci z Was, kt\u00f3rzy s\u0105 bardziej zaznajomieni z PHP, prawdopodobnie znaj\u0105 metody include()<\/code>lub require()<\/code>. W\u0142a\u015bnie to zrobimy, jednak u\u017cyjemy funkcji WordPressa do do\u0142\u0105czania innych plik\u00f3w, poniewa\u017c maj\u0105 one dodatkowe korzy\u015bci.<\/p>\n

W tej lekcji utworzymy nag\u0142\u00f3wek, stopk\u0119 i pasek boczny jako bloki konstrukcyjne. Jednak paski boczne staj\u0105 si\u0119 coraz mniej powszechne na stronach internetowych, ale nadal b\u0119dziemy zaimplementowa\u0107 prawy pasek boczny w naszym motywie. Te trzy bloki konstrukcyjne s\u0105 powszechn\u0105 praktyk\u0105 we wszystkich motywach WordPress \u2013 i tak naprawd\u0119 jest tak powszechne, \u017ce WordPress oferuje automatyzacj\u0119 tych trzech rzeczy.<\/p>\n

Tworzenie szablon\u00f3w nag\u0142\u00f3wka, stopki i paska bocznego<\/h2>\n

Stw\u00f3rzmy nowy pusty plik o nazwie header.php<\/code>w naszym folderze motywu. Na razie dodamy bardzo podstawowy kod HTML (nie martw si\u0119, p\u00f3\u017aniej dodamy bardziej poprawny kod HTML).<\/p>\n

<!DOCTYPE html>\n<html>\n    <head>\n        <meta charset=\"utf-8\">\n        <title>A White Pixel Theme<\/title>\n    <\/head>\n<body><\/code><\/pre>\n
Utw\u00f3rz nowy plik o nazwie footer.php<\/code>w katalogu motywu. Wszystko czego potrzebujemy (na razie) w tym pliku to zamkni\u0119cie naszej struktury HTML.<\/p>\n
    <\/body>\n<\/html><\/code><\/pre>\n
Na koniec utw\u00f3rz nowy pusty plik o nazwie sidebar.php<\/code>. <aside><\/code>W \u015brodku dodajemy tylko tag HTML .<\/p>\n
<aside class=\"sidebar\">\n<\/aside><\/code><\/pre>\n
W tym klocki<\/h2>\n
Wr\u00f3\u0107my do naszych index.php<\/code>akt. Wszystko, co musimy teraz zrobi\u0107, to powiedzie\u0107 WordPressowi, gdzie chcemy umie\u015bci\u0107 plik nag\u0142\u00f3wka i stopki. Oczywi\u015bcie chcemy za\u0142adowa\u0107 nag\u0142\u00f3wek na samym pocz\u0105tku i stopk\u0119 na samym ko\u0144cu tego pliku.<\/p>\n
WordPress oferuje proste funkcje w\u0142\u0105czania tych blok\u00f3w konstrukcyjnych; get_header()<\/code>oraz get_footer()<\/code>odpowiednio dla pliku nag\u0142\u00f3wka i stopki. Do\u015b\u0107 intuicyjne, prawda? Dodajmy je do naszego index.php i zobaczmy, co si\u0119 stanie.<\/p>\n
<?php get_header(); ?>\nHello :)\n<?php get_footer(); ?><\/code><\/pre>\n
Od\u015bwie\u017c sw\u00f3j frontend i sprawd\u017a lub wy\u015bwietl \u017ar\u00f3d\u0142o HTML, aby zobaczy\u0107, \u017ce po\u0142\u0105czyli\u015bmy wiele blok\u00f3w konstrukcyjnych w kompletn\u0105 struktur\u0119 HTML.<\/p>\n
\"Samouczek<\/a><\/p>\n
Teraz mo\u017cesz swobodnie edytowa\u0107 zawarto\u015b\u0107 index.php<\/code>niezale\u017cnie od nag\u0142\u00f3wka i stopki!<\/p>\n
Do\u0142\u0105czmy r\u00f3wnie\u017c pasek boczny. Pami\u0119taj, \u017ce w swoim motywie mo\u017cesz wzi\u0105\u0107 pod uwag\u0119 przypadki i szablony, w kt\u00f3rych pasek boczny nie jest potrzebny, na przyk\u0142ad strona g\u0142\u00f3wna.<\/p>\n
Do\u0142\u0105czenie paska bocznego jest tak samo proste jak nag\u0142\u00f3wek i stopka; do tego u\u017cywamy get_sidebar()<\/code>. Dodajmy to do index.php, tu\u017c przed pobraniem stopki.<\/p>\n
<?php get_header(); ?>\nHello :)\n<?php get_sidebar(); ?>\n<?php get_footer(); ?><\/code><\/pre>\n
Od\u015bwie\u017c i powiniene\u015b zobaczy\u0107 \u017ar\u00f3d\u0142o HTML, w tym nasz <aside><\/code>. Nie martw si\u0119, w p\u00f3\u017aniejszym kroku dowiemy si\u0119, jak przekonwertowa\u0107 go na rzeczywisty obszar paska bocznego, w kt\u00f3rym mo\u017cna umieszcza\u0107 wid\u017cety.<\/p>\n
Nasz motyw jest teraz do\u015b\u0107 statyczny. W nast\u0119pnej lekcji<\/a> z tej serii samouczk\u00f3w dotycz\u0105cych motyw\u00f3w WordPress w ko\u0144cu zaczniemy prawid\u0142owo zag\u0142\u0119bia\u0107 si\u0119 w funkcje WordPressa, aby dynamicznie \u0142adowa\u0107 tre\u015bci i informacje z WordPressa do naszych szablon\u00f3w.<\/p>\n
Dokumentacja dotycz\u0105ca zastosowanych metod<\/h2>\n