{"id":2665,"date":"2021-05-31T10:32:00","date_gmt":"2021-05-31T10:32:00","guid":{"rendered":"https:\/\/www.templatemonster.com\/pl\/blog\/?p=2665"},"modified":"2024-03-14T16:00:18","modified_gmt":"2024-03-14T16:00:18","slug":"tworzenie-niestandardowego-szablonu-strony-w-wordpress-4-x","status":"publish","type":"post","link":"https:\/\/monsterspost.com\/pl\/tworzenie-niestandardowego-szablonu-strony-w-wordpress-4-x\/","title":{"rendered":"Tworzenie niestandardowego szablonu strony w WordPress 4.x"},"content":{"rendered":"

Dzi\u015b opowiem Ci jak stworzy\u0107 niestandardow\u0105 stron\u0119 dla witryny na WordPress do wy\u015bwietlania nowego rodzaju wpis\u00f3w czy jakichkolwiek innych tre\u015bci.<\/p>\n

Aby stworzy\u0107 prosty szablon strony nie jest wymagana wedza .php. Wszystkie kody trzeba po prostu skopiowa\u0107 i wklei\u0107. Nawet je\u015bli u\u017cywasz jednego z domy\u015blnych szablon\u00f3w WordPress, mo\u017cna wzi\u0105\u0107 cz\u0119\u015bci jego kodu i skompilowa\u0107 je aby stworzy\u0107 w\u0142asny szablon strony<\/strong>.<\/p>\n

\n

Czym s\u0105 szablony stron WordPress?<\/strong><\/h2>\n

Na pocz\u0105tku by\u0142o s\u0142owo, wi\u0119c najpierw okre\u015blmy terminologi\u0119. Wygl\u0105d witryny WordPress okre\u015blaj\u0105 motywy. Jakiego koloru u\u017cy\u0107 do przycisk\u00f3w, po kt\u00f3rej stronie umie\u015bci\u0107 pasek boczny, jakiego fontu u\u017cy\u0107 w tekstach, gdzie umie\u015bci\u0107 formularz wyszukiwania - wszystkie te instrukcje s\u0105 gromadzone w motywach.<\/p>\n

Szablon strony to php. plik opisuj\u0105cy, jak b\u0119dzie ona wygl\u0105da\u0142a Twoja strona. Wszystkie pliki php szablonu s\u0105 przechowywane w folderze \"themes\" katalogu \"wp-content\". Mo\u017cesz zastosowa\u0107 szablony stron do okre\u015blonych stron, sekcji strony lub klasy stron. Niekt\u00f3re strony zawsze powinny wygl\u0105da\u0107 inaczej ni\u017c inne, na przyk\u0142ad strona \"O nas\". Zwykle kompozycja ma zestaw gotowych stron, kt\u00f3re s\u0105 stosowane automatycznie.<\/p>\n

Ale jak WordPress rozumie z jakich php. szablon\u00f3w stron<\/a> nale\u017cy korzysta\u0107 w ka\u017cdej sytuacji? Wtedy pojawia si\u0119 hierarchia szablon\u00f3w.<\/p>\n

\n

Znaczenie hierarchii szablon\u00f3w<\/strong><\/h2>\n

Odwiedzaj\u0105cy chcia\u0142by przeczyta\u0107 jeden z Twoich blog\u00f3w i klika na http:\/\/iamawesome.com\/blog\/category-best\/coolpost<\/em> link. Pierwsz\u0105 rzecz\u0105, kt\u00f3r\u0105 sprawdzi WordPress, jest to, czy przypisa\u0142e\u015b konkretny niestandardowy szablon strony do tej konkretnej strony, czy nie. Mo\u017cesz utworzy\u0107 dowoln\u0105 liczb\u0119 niestandardowych szablon\u00f3w stron WordPress i sprawi\u0107, aby ka\u017cda cz\u0119\u015b\u0107 witryny by\u0142a unikatowa.<\/p>\n

Je\u015bli nie ma przypisanego pliku, WP szuka szablonu strony kategorii. B\u0119dzie wygl\u0105da\u0142 tak: category-best.php<\/em>. Ten .php szablon strony definiuje wygl\u0105d ca\u0142ej kategorii stron i mo\u017ce okre\u015bla\u0107 wygl\u0105d dla wielu post\u00f3w, kt\u00f3re opisuj\u0105 ten sam temat.<\/p>\n

Je\u015bli nie chcesz wybiera\u0107 innego wygl\u0105du dla ka\u017cdej kategorii i nie ma pliku category1.php<\/em>, WordPress sprawdzi, jaki jest identyfikator tej kategorii, za\u0142\u00f3\u017cmy, \u017ce to jest 15. WP b\u0119dzie szuka\u0142 pliku category-15.php<\/em>. A je\u015bli takiego pliku niema, WordPress b\u0119dzie szuka\u0142 podstawowego pliku page.php<\/em>., kt\u00f3ry okre\u015bla og\u00f3lny wygl\u0105d wszystkich stron, kt\u00f3re nie by\u0142y dodatkowo dostosowane.<\/p>\n

Ale pliku page.php <\/em>te\u017c mo\u017ce nie by\u0107. Jest to bardzo rzadka sytuacja i prawdopodobnie nie spotkasz jej, je\u015bli b\u0119dziesz pracowa\u0142 z gotowym motywem, ale je\u015bli wyst\u0105pi taki problem, WordPress znajdzie plik index.php<\/em> i wy\u015bwietli u\u017cytkownikowi, c\u00f3\u017c, przynajmniej co\u015b. Ten plik jest domy\u015blnym szablonem strony, kt\u00f3ry definiuje jej podstawowy wygl\u0105d.<\/p>\n

\n

Tworzenie niestandardowego szablonu strony<\/strong><\/h3>\n

Stw\u00f3rz plik<\/h3>\n

Przede wszystkim, trzeba stworzy\u0107 plik .php<\/strong> w dowolnym edytorze kodu. Ja preferuj\u0119 korzysta\u0107 z Notepad ++, ale mo\u017cesz wykorzysta\u0107 dowolny inny edytor.<\/p>\n

\n

Dodaj nag\u0142\u00f3wek i stopk\u0119<\/h3>\n

Ka\u017cda strona powinna mie\u0107 nag\u0142\u00f3wek i stopk\u0119. Aby wy\u015bwietli\u0107 je w szablonie strony dodaj nast\u0119puj\u0105cy kod do stworzonego pliku .php<\/strong>.<\/p>\n

\n\n\n\n
\n
<!--<\/span>?php \/** * Template Name: Custom Page Template *\/<\/span> get_header(<\/span>)<\/span>;<\/span> ?--><\/span>\n \n<!--<\/span>?php get_footer(<\/span>)<\/span>;<\/span> ?--><\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
B\u0119dzie to wygl\u0105da\u0142o tak:<\/p>\n
\n
\"How<\/figure>\n<\/div>\n
Mo\u017cesz zast\u0105pi\u0107 nazw\u0119 \"Custom Page Template<\/strong>\" przez w\u0142asn\u0105, aby na pewno wiedzia\u0142e\u015b jaki szablon to jest.<\/p>\n
\n
Zapisz zmiany i otw\u00f3rz FTP<\/strong> \u0142ub cPanel file manager<\/strong> strony.<\/p>\n
Prze\u015blij stworzony plik do wp-content-> themes-> current theme folder.<\/strong><\/p>\n
\"How<\/figure>\n
Teraz mo\u017cna otworzy\u0107 kokpit WordPressa i obejrze\u0107 wyniki swojej pracy.<\/p>\n
\n
Przejd\u017a do Pages -> Add new<\/strong>. W panelu po prawej stronie, znajdziesz nowy szablon strony.<\/p>\n
\"How<\/figure>\n
Co do wygl\u0105du tej strony, jak mog\u0142e\u015b ju\u017c zauwa\u017cy\u0107, \u017ce jest zupe\u0142nie pusta. Jest to dlatego, \u017ce dodali\u015bmy tylko nag\u0142\u00f3wek i stopk\u0119 do pliku szablonu strony. Dodajmy wi\u0105c troch\u0119 tre\u015bci.<\/p>\n
\n
Dodwanie dynamicznych tre\u015bci<\/h3>\n
Chcia\u0142abym aby ta strona wygl\u0105da\u0142a jak i inne strony witryny, ale r\u00f3wnie\u017c mia\u0142a pasek boczny.<\/p>\n
Przejd\u017a do Appearance -> Editor -> Single Post.php<\/strong> i skopiuj kod wy\u015bwietlania zawarto\u015bci do pliku szablonu strony.<\/p>\n
<div id=\"primary\" class=\"content-area\"><!--?php \/\/ Start the loop. while ( have_posts() ) : the_post(); \/\/ Include the single post content template. get_template_part( 'template-parts\/content', 'single' ); \/\/ If comments are open or we have at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) { comments_template(); } if ( is_singular( 'attachment' ) ) { \/\/ Parent post navigation. the_post_navigation( array( 'prev_text' => _x( '<span class=\"meta-nav\">Published in<\/span><span class=\"post-title\">%title<\/span>', 'Parent post link', 'twentysixteen' ), ) ); } elseif ( is_singular( 'post' ) ) { \/\/ Previous\/next post navigation. the_post_navigation( array( 'next_text' => '<span class=\"meta-nav\" aria-hidden=\"true\">' . __( 'Next', 'twentysixteen' ) . '<\/span> ' . '<span class=\"screen-reader-text\">' . __( 'Next post:', 'twentysixteen' ) . '<\/span> ' . '<span class=\"post-title\">%title<\/span>', 'prev_text' => '<span class=\"meta-nav\" aria-hidden=\"true\">' . __( 'Previous', 'twentysixteen' ) . '<\/span> ' . '<span class=\"screen-reader-text\">' . __( 'Previous post:', 'twentysixteen' ) . '<\/span> ' . '<span class=\"post-title\">%title<\/span>', ) ); } \/\/ End of the loop. endwhile; ?--> <!-- .site-main --> <!--?php get_sidebar( 'content-bottom' ); ?--><\/div> <!-- .content-area --><\/strong><\/p>\n
Aby wy\u015bwietli\u0107 pasek boczny musz\u0119 doda\u0107 nast\u0119puj\u0105cy kod przed fragmentem stopki.<\/p>\n
\n\n\n\n
\n
<!--<\/span>?php get_sidebar(<\/span>)<\/span>;<\/span> ?--><\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Wygl\u0105da to tak:<\/p>\n
\n
\"How<\/figure>\n<\/div>\n
Obejrzyjmy jak b\u0119dzie wygl\u0105da\u0142 szablon po zapisaniu zmian.<\/p>\n
\n
\"How<\/figure>\n<\/div>\n
 <\/h4>\n
\n
Niestandardowe szablony stron WordPress do r\u00f3\u017cnych cel\u00f3w<\/h2>\n
Jak zapewne zrozumia\u0142e\u015b z hierarchii szablon\u00f3w WordPress, mo\u017cesz stworzy\u0107 szablon strony .php nie tylko dla pojedynczej strony, ale tak\u017ce dla grupy stron. Grupy te mog\u0105 by\u0107 po\u0142\u0105czone z kategori\u0105 lub typem i mo\u017cna tworzy\u0107 szablony stron WP, kt\u00f3re b\u0119d\u0105 stosowane automatycznie lub wybrane przez ciebie w procesie tworzenia nowej strony. Podejd\u017a bli\u017cej, przyjacielu, opowiem troch\u0119 wi\u0119cej o tym, jak dzia\u0142a ta magia.<\/p>\n
Niestandardowy typ strony dla dowolnej strony<\/strong><\/h3>\n
Za\u0142\u00f3\u017cmy, \u017ce potrzebujesz pliku .php szablonu WordPress, kt\u00f3ry b\u0119dzie dost\u0119pny dla ka\u017cdej strony, kt\u00f3r\u0105 utworzysz. Przede wszystkim zwr\u00f3\u0107 uwag\u0119 na nazw\u0119. Je\u015bli tytu\u0142 szablonu .php zaczyna si\u0119 od \"page-\"<\/em>, WordPress zinterpretuje go jako wyspecjalizowany szablon, kt\u00f3ry powinien zosta\u0107 u\u017cyty dla okre\u015blonej strony. Spr\u00f3buj te\u017c wybra\u0107 zrozumia\u0142\u0105 nazw\u0119, aby po pewnym czasie m\u00f3c przypomnie\u0107 sobie, co jest w \u015brodku.<\/p>\n
Po utworzeniu niestandardowego szablonu strony nale\u017cy go pobra\u0107 do folderu wp-content\/themes\/your_theme<\/em> za pomoc\u0105 FileZilla lub cPanel. Ta opcja jest dost\u0119pna w menu rozwijanym \"Atrybuty strony\" w panelu admina za ka\u017cdym razem, gdy chcesz utworzy\u0107 lub edytowa\u0107 now\u0105 stron\u0119 witryny.<\/p>\n
Niestandardowy typ stron dla pojedynczej strony<\/strong><\/h3>\n
Chcia\u0142by\u015b, aby jedna ze stron statycznych wygl\u0105da\u0142a inaczej ni\u017c inne. Sytuacja, w kt\u00f3rej wszystkie statyczne strony wygl\u0105daj\u0105 inaczej, jest r\u00f3wnie\u017c mo\u017cliwa.<\/p>\n
Utw\u00f3rz szablon strony .php, nazwij page-{slug}.php<\/em> or page-{page\u2019s ID number}.php<\/em> i prze\u015blij go do bie\u017c\u0105cego folderu ze zdj\u0119ciami. W takim przypadku WordPress automatycznie u\u017cyje tego szablonu tylko dla jednej konkretnej strony, kt\u00f3ra b\u0119dzie pasow\u0142a do identyfikatora lub slug. Na przyk\u0142ad, chcesz stworzy\u0107 stron\u0119 Kontakty i za\u0142\u00f3\u017cmy, \u017ce ma ona numer ID 9. Utw\u00f3rz niestandardowy szablon strony WordPress o nazwie page-contacts.php<\/em> czy page-9.php<\/em>, kt\u00f3ry zostanie zastosowany tylko na stronie Kontakty.<\/p>\n
Niestandardowy typ stron dla wpis\u00f3w<\/strong><\/h3>\n
Teraz utworzy\u0142e\u015b niestandardowy szablon strony, ale chcesz, aby Twoje wpisy wygl\u0105da\u0142li dok\u0142adnie tak samo. W takim przypadku zmiana nazwy nie pomo\u017ce, musisz doda\u0107 dodatkowy wiersz kodu do tego szablonu. Wpisz \u201cTemplate Post Type: post, page\u201c<\/em> tu\u017c pod wierszem Nazwa szablonu. B\u0119dzie wygl\u0105da\u0142o to tak:<\/p>\n
\"szablny<\/figure>\n
W ten spos\u00f3b mo\u017cesz dodawa\u0107 wydarzenia i inne rodzaje tre\u015bci,. Musz\u0119 jednak przyzna\u0107, \u017ce ta metoda zadzia\u0142a tylko wtedy, gdy tw\u00f3j WordPress ma wersj\u0119 4.7 i nowsz\u0105. Starsze wersje b\u0119d\u0105 ignorowa\u0142y wiersz Template Post Type.<\/p>\n
\n
Dlaczego znaczniki warunkowe s\u0105 wspaniale?<\/strong><\/h2>\n
Wcze\u015bniej opisa\u0142em, jak utworzy\u0107 zupe\u0142nie nowe szablony stron .php, ale co zrobi\u0107, je\u015bli chcesz wprowadzi\u0107 zmiany do ju\u017c istniej\u0105cego? Zdarzaj\u0105 si\u0119 sytuacje, w kt\u00f3rych potrzebujesz czego\u015b, aby pokaza\u0107 je tylko wtedy, gdy spe\u0142niony jest warunek, wi\u0119c nie chcesz tworzy\u0107 strony, kt\u00f3ra r\u00f3\u017cni si\u0119 od innych tylko w jednym ma\u0142ym szczeg\u00f3le lub tylko w jednej konkretnej sytuacji.<\/p>\n
Dlatego tagi warunkowe s\u0105 takie fajne. U\u017cywasz ich w linii kodu, kt\u00f3ry sprawdza, czy spe\u0142niony jest jaki\u015b warunek, czy nie. Je\u015bli jest spe\u0142niony, pierwsza cz\u0119\u015b\u0107 kodu nadal dzia\u0142a, a je\u015bli nie, cz\u0119\u015b\u0107 po \"else\" jest wykonywana. Na przyk\u0142ad chcia\u0142by\u015b, aby okre\u015blony typ paska bocznego by\u0142 pokazywany u\u017cytkownikom, kt\u00f3rzy przeszli do strony do Archiwum. Tw\u00f3j kod b\u0119dzie wygl\u0105da\u0142 tak:<\/p>\n
\"szablny<\/figure>\n
Oto lista najcz\u0119\u015bciej u\u017cywanych tag\u00f3w warunkowych:<\/p>\n