{"id":233329,"date":"2023-02-11T18:22:00","date_gmt":"2023-02-11T15:22:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233329"},"modified":"2022-11-10T20:30:47","modified_gmt":"2022-11-10T17:30:47","slug":"samouczek-motywu-wordpress-dla-poczatkujacych-czesc-11-niestandardowe-szablony-stron","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/samouczek-motywu-wordpress-dla-poczatkujacych-czesc-11-niestandardowe-szablony-stron\/","title":{"rendered":"Samouczek motywu WordPress dla pocz\u0105tkuj\u0105cych \u2013 Cz\u0119\u015b\u0107 11: Niestandardowe szablony stron"},"content":{"rendered":"\n

W tej lekcji samouczka motywu WordPress dla pocz\u0105tkuj\u0105cych dowiemy si\u0119 o szablonach stron, czym one s\u0105, jak je tworzy\u0107 i najlepszych praktykach. Jako przyk\u0142ad stworzymy szablon o pe\u0142nej szeroko\u015bci. Po drodze dodajemy r\u00f3wnie\u017c klas\u0119 do tre\u015bci, pytaj\u0105c, czy strona u\u017cywa okre\u015blonego szablonu strony.<\/p>\n

Czym s\u0105 szablony stron<\/h2>\n

Szablony stron s\u0105 przydatne w przypadkach, gdy chcesz mie\u0107 inny uk\u0142ad lub konfiguracj\u0119 dla okre\u015blonej strony. Typowymi przyk\u0142adami u\u017cycia szablon\u00f3w stron s\u0105 listy post\u00f3w w niestandardowym typie post\u00f3w (np. portfolio, ksi\u0105\u017cki lub us\u0142ugi), maj\u0105ce zupe\u0142nie inn\u0105 tre\u015b\u0107 lub uk\u0142ad (np. wewn\u0105trz kolumn), a nawet po prostu tworzenie strony o pe\u0142nej szeroko\u015bci (bez paska bocznego).<\/p>\n

U\u017cyteczno\u015b\u0107 szablon\u00f3w stron spad\u0142a po WordPressie w wersji 5.x (Gutenberg). Nowy edytor Gutenberga pozwala na du\u017c\u0105 elastyczno\u015b\u0107 w budowaniu takich stron bez potrzeby stosowania szablon\u00f3w stron. Niezale\u017cnie od tego dowiemy si\u0119, jak doda\u0107 niestandardowy szablon strony do naszego motywu.<\/p>\n

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

W metapolu \u201eAtrybuty strony" dla stron pojawia si\u0119 wyb\u00f3r szablonu strony. Ale opcja szablonu pojawi si\u0119 tylko wtedy, gdy aktywny motyw ma co najmniej jeden szablon strony.<\/p>\n

Szablony stron mog\u0105 by\u0107 r\u00f3wnie\u017c u\u017cywane do post\u00f3w i niestandardowych typ\u00f3w post\u00f3w. Po WordPress 4.7 i nowszych mo\u017cesz zdefiniowa\u0107 typy post\u00f3w, dla kt\u00f3rych szablon ma by\u0107 dost\u0119pny. WordPress automatycznie doda wymagane metabox \u201eAtrybuty strony” do tych typ\u00f3w post\u00f3w.<\/p>\n

Nazewnictwo i umieszczenie szablonu strony<\/h2>\n

Na pocz\u0105tek zwykle tworzysz kopi\u0119 dowolnego pliku szablonu, kt\u00f3ry jest najbli\u017cszy temu, co chcesz osi\u0105gn\u0105\u0107 za pomoc\u0105 szablonu strony. W wi\u0119kszo\u015bci przypadk\u00f3w jest to page.php<\/code>. Je\u015bli chodzi o nazewnictwo szablonu strony, to zale\u017cy od Ciebie. Ale s\u0105 pewne zasady i zdrowy rozs\u0105dek.<\/p>\n

Kusz\u0105ce jest po prostu nazwanie szablonu strony, np page-books.php<\/code>. dla szablonu z list\u0105 niestandardowych ksi\u0105\u017cek typu post. Nigdy nie poprzed\u017a szablonu strony przedrostkiem \u201e page-<\/code>„! Je\u015bli pami\u0119tasz z hierarchii szablon\u00f3w<\/a> WordPressa, WordPress b\u0119dzie szuka\u0142, page-<slug>.php<\/code>zanim spr\u00f3buje page.php<\/code>, a u\u017cytkownicy Twojego motywu mog\u0105 napotka\u0107 nieoczekiwane zachowanie.<\/p>\n

Dobr\u0105 praktyk\u0105 jest poprzedzenie szablonu strony czym\u015b, co nie jest cz\u0119\u015bci\u0105 nazw szablon\u00f3w stron WordPress. Na przyk\u0142ad ’ pagetemplate-'<\/code>, ’ pt-<\/code>’ lub po prostu pe\u0142na nazwa ’ fullwidth-template.php<\/code>’. Dobr\u0105 praktyk\u0105 jest r\u00f3wnie\u017c trzymanie ich w podfolderze; \/page-templates\/<\/code>jednak nie jest to dobre, je\u015bli chcesz, aby Tw\u00f3j motyw by\u0142 dost\u0119pny do rozszerzenia o motyw potomny. Motyw potomny nie mo\u017ce zast\u0119powa\u0107 szablon\u00f3w stron umieszczonych w podfolderze motywu nadrz\u0119dnego.<\/p>\n

Gdy ju\u017c zdecydujesz si\u0119 na wz\u00f3r nazewnictwa, stw\u00f3rzmy szablon strony.<\/p>\n

Tworzenie szablonu strony<\/h2>\n

Utw\u00f3rz kopi\u0119 page.php<\/code>i zmie\u0144 jej nazw\u0119 na pagetemplate-fullwidth.php<\/code>. Aby zrobi\u0107 z niego szablon strony, wystarczy doda\u0107 komentarz na samym pocz\u0105tku, kt\u00f3ry powie WordPressowi, \u017ce to jest szablon strony:<\/p>\n

<?php \n\/*\nTemplate Name: Fullwidth \n*\/\nget_header(); ?>\n<?php \nif (have_posts()) {\n...<\/code><\/pre>\n
Wszystko, czego potrzebujesz, to komentarz na samym pocz\u0105tku pliku, z \u201eNazwa szablonu:” i nazw\u0105 szablonu po nim. Ot\u00f3\u017c \u200b\u200bto! Przejd\u017a do administratora, edytuj stron\u0119 i powiniene\u015b zobaczy\u0107 opcj\u0119 wyboru \u201ePe\u0142nej szeroko\u015bci” jako szablonu.<\/p>\n
Wspomnia\u0142em, \u017ce w WordPress 4.7 mo\u017cesz okre\u015bli\u0107, dla jakich typ\u00f3w post\u00f3w chcesz, aby szablon strony by\u0142 dost\u0119pny. Obecnie jest dost\u0119pny tylko dla stron, ale czy chcesz mie\u0107 r\u00f3wnie\u017c opcj\u0119 tworzenia post\u00f3w o pe\u0142nej szeroko\u015bci? W takim przypadku dodaj \u201eTyp postu szablonu:” w tym samym bloku komentarzy i zdefiniuj typy post\u00f3w oddzielone przecinkami. Na przyk\u0142ad, aby udost\u0119pni\u0107 go zar\u00f3wno dla post\u00f3w, jak i stron;<\/p>\n
<?php \n\/*\nTemplate Name: Fullwidth \nTemplate Post Type: post, page\n*\/\nget_header(); ?>\n<?php \nif (have_posts()) {\n...<\/code><\/pre>\n
Edytuj post i powiniene\u015b zobaczy\u0107 nowe metabox \u201eAtrybuty postu”, w kt\u00f3rym mo\u017cesz wybra\u0107 szablon o pe\u0142nej szeroko\u015bci. Mi\u0142y!<\/p>\n
Zmiana kodu w naszym szablonie strony<\/h2>\n
Teraz edytujmy szablon strony, aby faktycznie robi\u0142 co\u015b innego ni\u017c widok pojedynczej strony. Usu\u0144my pro\u015bb\u0119 o szablon paska bocznego: (skomentowa\u0142em to, aby by\u0142o bardziej widoczne, ale mo\u017cesz po prostu usun\u0105\u0107 lini\u0119).<\/p>\n
...\n    ?><p><?php _e('No posts, sorry.', 'wptutorial'); ?><\/p><?php\n}\n\/\/get_sidebar(); \nget_footer(); ?><\/code><\/pre>\n
Zr\u00f3bmy jeszcze jedn\u0105 rzecz, aby nasz szablon strony by\u0142 \u0142atwiejszy w stylizacji. Kiedy dodajesz CSS, cz\u0119sto musisz wiedzie\u0107, czy strona ma pasek boczny, czy nie, aby dostosowa\u0107 kolumny\/uk\u0142ad. Pami\u0119tasz body_class<\/code>, kt\u00f3ry element cia\u0142a dostarcza ca\u0142\u0105 mas\u0119 przydatnych klas? Co si\u0119 stanie, je\u015bli dodamy do tre\u015bci niestandardow\u0105 klas\u0119, kt\u00f3ra powie nam, czy bie\u017c\u0105ca strona ma pasek boczny, czy nie?<\/p>\n
Filtruj nabody_class<\/code><\/h2>\n
Uwaga: by\u0107 mo\u017ce zauwa\u017cy\u0142e\u015b, \u017ce ka\u017cda strona lub post korzystaj\u0105cy z szablonu strony otrzymuje ju\u017c okre\u015blon\u0105 klas\u0119 tre\u015bci; \u201epage-template-” \u2013 w naszym przyk\u0142adzie \"page-template-pagetemplate-fullwidth\"<\/code>. To do\u015b\u0107 d\u0142uga klasa, a poza tym chcemy uczyni\u0107 nasz motyw bardziej elastycznym \u2013 i zezwoli\u0107 na pe\u0142n\u0105 szeroko\u015b\u0107 w innych szablonach poza tymi, kt\u00f3re u\u017cywaj\u0105 szablonu strony. Na przyk\u0142ad zazwyczaj nie chcesz mie\u0107 paska bocznego na pierwszej stronie, prawda?<\/p>\n
Uwaga: to tylko dodaje klas\u0119 do cia\u0142a, dzi\u0119ki czemu stylizacja staje si\u0119 \u0142atwiejsza, ale w rzeczywisto\u015bci nie wy\u0142\u0105cza wyj\u015bcia paska bocznego. Musisz pami\u0119ta\u0107, aby usun\u0105\u0107 to get_sidebar()<\/code>, gdzie nie chcesz.<\/p>\n
Dodajmy filtr do body_class<\/code>dodawania niestandardowej klasy paska bocznego w naszym functions.php<\/code>, aby p\u00f3\u017aniej m\u00f3c doda\u0107 do niej wi\u0119cej w innych przypadkach, gdy nie chcesz tego paska bocznego. WordPress ma \u0142adny tag warunkowy do sprawdzania, czy szablon strony jest w u\u017cyciu; is_page_template()<\/code>gdzie umieszczasz nazw\u0119 szablonu strony jako parametr. Chcemy doda\u0107 klas\u0119, je\u015bli to nieprawda, wi\u0119c dodajemy odwrotno\u015b\u0107 z \u201e!”:<\/p>\n
add_filter('body_class', 'wptutorial_body_class_filter');\nfunction wptutorial_body_class_filter($classes) {\n    if (!is_page_template('pagetemplate-fullwidth.php')) {\n        $classes[] = 'has-sidebar';\n    }\n    return $classes;\n}<\/code><\/pre>\n
Najprawdopodobniej podczas tworzenia szablon\u00f3w od czasu do czasu natkniesz si\u0119 na szablony, do kt\u00f3rych nie chcesz dodawa\u0107 klasy paska bocznego, a w miar\u0119 post\u0119pu dodaj te przypadki wewn\u0105trz tego if<\/code>. Na przyk\u0142ad, je\u015bli nie chcesz, aby klasa paska bocznego znajdowa\u0142a si\u0119 na stronie g\u0142\u00f3wnej, mo\u017cesz doda\u0107 !is_front_page()<\/code>. Spowoduje to dodanie klasy \u201ehas-sidebar” do wszystkich stron z wyj\u0105tkiem strony g\u0142\u00f3wnej i szablonu strony:<\/p>\n
if (!is_front_page() && !is_page_template('pagetemplate-fullwidth.php'))<\/code><\/pre>\n
Od Ciebie zale\u017cy, ile szablon\u00f3w stron chcesz i co powinny zawiera\u0107. To by\u0142 tylko prosty wst\u0119p. Je\u015bli interesuje Ci\u0119, jak wysy\u0142a\u0107 zapytania do innych post\u00f3w w szablonach stron, sp\u00f3jrz na nast\u0119pny krok<\/a>.<\/p>\n
\u0179r\u00f3d\u0142o nagrywania:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
W tej lekcji tematycznej dla pocz\u0105tkuj\u0105cych poznajemy niestandardowe szablony stron w WordPress; czym s\u0105, jak je tworzy\u0107 i najlepsze praktyki.<\/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,897,1110,805,805,836,836,845,929,929,845,866,866],"tags":[1169],"class_list":{"0":"post-233329","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-kod","8":"category-deweloper","11":"category-n-a","12":"category-php-7","14":"category-przewodnik-dla-poczatkujacych","16":"category-samouczki","17":"category-tematy","20":"category-wordpress-7","22":"tag-affiai-pl"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/233329","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=233329"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/233329\/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=233329"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/categories?post=233329"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/tags?post=233329"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}