{"id":595,"date":"2013-06-11T16:42:37","date_gmt":"2013-06-11T16:42:37","guid":{"rendered":"http:\/\/musilda.cz\/?p=595"},"modified":"2013-06-11T16:42:37","modified_gmt":"2013-06-11T16:42:37","slug":"jak-vytvorit-vlastni-sablonu-pro-wordpress-3-dil","status":"publish","type":"post","link":"https:\/\/affinite.io\/cs\/jak-vytvorit-vlastni-sablonu-pro-wordpress-3-dil\/","title":{"rendered":"Jak vytvo\u0159it vlastn\u00ed \u0161ablonu pro WordPress \u2013 3 d\u00edl"},"content":{"rendered":"\n<p>Po m\u011bs\u00ed\u010dn\u00ed pauze je zde dal\u0161\u00ed d\u00edl seri\u00e1lu, v kter\u00e9m se nau\u010d\u00edte vytvo\u0159it vlastn\u00ed \u0161ablonu pro WordPress. V minul\u00e9m d\u00edle jme si vytvo\u0159ili z\u00e1kladn\u00ed kostru na\u0161\u00ed theme a dnes si ji dopln\u00edme o dal\u0161\u00ed soubory, pro v\u00fdpis kategorie, arch\u00edvu, vyhled\u00e1v\u00e1n\u00ed, str\u00e1nky 400 a vyhled\u00e1vac\u00edho formul\u00e1\u0159e. Tak\u00e9 si vytvo\u0159\u00edme vyhled\u00e1vac\u00ed formul\u00e1\u0159. Tak\u017ee poj\u010fme na to.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Nejprve shrnut\u00ed toho, co jsme si ji\u017e vytvo\u0159ili. M\u00e1me slo\u017eku \u0161ablony, v kter\u00e9 jsou n\u00e1sleduj\u00edc\u00ed soubory:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>footer.php<\/strong><\/li>\n\n\n\n<li><strong>functions.php<\/strong><\/li>\n\n\n\n<li><strong>header.php<\/strong><\/li>\n\n\n\n<li><strong>index.php<\/strong><\/li>\n\n\n\n<li><strong>style.css<\/strong><\/li>\n\n\n\n<li><strong>sidebar.php<\/strong><\/li>\n<\/ul>\n\n\n\n<p>Dnes si do \u0161ablony dopln\u00edme dal\u0161\u00ed soubory. Proto\u017ee ve <strong>functions.php<\/strong> na\u010d\u00edt\u00e1me pomoc\u00ed enqueue soubory bootstrapu, vytvo\u0159ili jsme slo\u017eku assets, kam jsme po\u017eadovan\u00e9 soubory vlo\u017eili. V \u0161ablon\u011b m\u00e1me tedy zat\u00edm jednu slo\u017eku a v n\u00ed dv\u011b podslo\u017eky:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>assets\n<ul class=\"wp-block-list\">\n<li>js<\/li>\n\n\n\n<li>css<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Screenshot.png<\/h3>\n\n\n\n<p>Je\u0161t\u011b ne\u017e se pust\u00edme do vytv\u00e1\u0159en\u00ed nov\u00fdch soubor\u016f, p\u0159iprav\u00edme si screenshot.png, co\u017e je obr\u00e1zek, kter\u00fd reprezentuje \u0161ablonu v administraci. Doporu\u010den\u00fd rozm\u011br je 600 x 450 px, d\u0159\u00edve byl standart polovi\u010dn\u00ed, ale s n\u00e1stupem hd p\u0159\u00edstroj\u016f doporu\u010duje WordPress tuto velikost. J\u00e1 jsem vytvo\u0159il jednu n\u00e1dheru \ud83d\ude42 , kter\u00e1 n\u00e1m bude muset sta\u010dit.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"http:\/\/musilda.cz\/wp-content\/uploads\/2013\/06\/screenshot.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"225\" src=\"http:\/\/musilda.cz\/wp-content\/uploads\/2013\/06\/screenshot-300x225.png\" alt=\"\" class=\"wp-image-596\" title=\"screenshot\" srcset=\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2013\/06\/screenshot-300x225.png 300w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2013\/06\/screenshot.png 600w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Nov\u00e9 soubory<\/h3>\n\n\n\n<p>A u\u017e se m\u016f\u017eeme pustit do nov\u00fdch soubor\u016f, vytvo\u0159\u00edme si n\u00e1sleduj\u00edc\u00ed php soubory:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>404.php<\/strong><\/li>\n\n\n\n<li><strong>author.php<\/strong><\/li>\n\n\n\n<li><strong>archive.php<\/strong><\/li>\n\n\n\n<li><strong>category.php<\/strong><\/li>\n\n\n\n<li><strong>search.php<\/strong><\/li>\n\n\n\n<li><strong>searchform.php<\/strong><\/li>\n\n\n\n<li><strong>tag.php<\/strong><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Drobn\u00e1 \u00faprava souboru index.php<\/h3>\n\n\n\n<p>Ne\u017e za\u010dneme s vytv\u00e1\u0159en\u00edm dal\u0161\u00edch soubor\u016f, uprav\u00edme si lehce soubor index.php.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>p\u0159id\u00e1me divu obaluj\u00edc\u00ed obsah id primary a t\u0159\u00eddu content area<\/li>\n\n\n\n<li>prid\u00e1me nov\u00fd tag main, obaluj\u00edc\u00ed obsah str\u00e1nky<\/li>\n\n\n\n<li>napis str\u00e1nky obal\u00edme tagem header<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Str\u00e1nka 404<\/h3>\n\n\n\n<p>Prvn\u00ed z nich je str\u00e1nka 404, kter\u00e1 se zobraz\u00ed, pokud WordPress nenalezne obsah kter\u00fd hled\u00e1te. M\u016f\u017eete nam\u00edtnout, \u017ee na to sta\u010d\u00ed podm\u00ednka v \u0161ablon\u011b, kterou tam stejn\u011b m\u00e1me. To je sice pravda, ale str\u00e1nka 404 v\u00e1m d\u00e1v\u00e1 mo\u017enost vlo\u017eit nap\u0159\u00edklad vyhled\u00e1vac\u00ed formul\u00e1\u0159, nebo nasm\u011brovat \u010dten\u00e1\u0159e \u017e\u00e1douc\u00edm sm\u011brem, tedy mu nab\u00eddnout jin\u00fd obsah.<\/p>\n\n\n\n<p>Vytvo\u0159\u00edme tedy soubor 404.php a do n\u011bj vlo\u017e\u00edme n\u00e1sleduj\u00edc\u00ed k\u00f3d:<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Archiv.php, category.php a dal\u0161\u00ed<\/h3>\n\n\n\n<p>T\u011bmto str\u00e1nk\u00e1m j\u00e1 osobn\u011b \u0159\u00edk\u00e1m &#8222;v\u00fdpisov\u00e9&#8220;, proto\u017ee se staraj\u00ed s v\u00fdpis obsahu, kter\u00fd m\u00e1 n\u011bjakou spole\u010dnou vlastnost, nap\u0159\u00edklad se jedn\u00e1 o \u010dl\u00e1nky od jednoho autora, z jedn\u00e9 kategorie, \u010di dle vyhled\u00e1vac\u00edho dotazu. Ve valn\u00e9 v\u011bt\u0161in\u011b \u0161ablon se setk\u00e1te s t\u00edm, \u017ee existuje <strong>search.php<\/strong> pro v\u00fdpis hled\u00e1n\u00ed a pak <strong>archiv.php<\/strong>, kter\u00fd m\u00e1 na za\u010d\u00e1tku ukrutnou konstrukci, kter\u00e1 rozli\u0161uje, zda se jedn\u00e1 o v\u00fdpis dle m\u011bs\u00edce, autora, atd&#8230;<\/p>\n\n\n\n<p>M\u016f\u017ee se zd\u00e1t, \u017ee jsou tedy dal\u0161\u00ed soubory zbyte\u010dn\u00e9, ale d\u00edky nim m\u016f\u017eete \u0161ablonu daleko v\u00edce upravovat pro va\u0161e pot\u0159eby. Nap\u0159\u00edklad v <strong>author.php<\/strong> m\u016f\u017eete m\u00edt na za\u010d\u00e1tku v\u00fdpisu informace o konkr\u00e9tn\u00edm autorovi, dle jeho profilu. A to je ur\u010dit\u011b zaj\u00edmav\u00e9. Proto\u017ee jsou v\u0161ak v\u0161echny tyto soubory velmi podobn\u00e9, nebudu je bl\u00ed\u017ee rozeb\u00edrat, rozd\u00edly uvid\u00edte na prvn\u00ed pohled.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Archive.php<\/h3>\n\n\n\n<p><\/p>\n\n\n\n<p>Proto\u017ee jsou zbyl\u00e9 soubory podobn\u00e9, nebudu je nijak komentovat.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Author.php<\/h3>\n\n\n\n<p>V\u00fdpis \u010dl\u00e1nk\u016f od jednoho autora.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Search.php<\/h3>\n\n\n\n<p>V\u00fdpis vyhled\u00e1v\u00e1n\u00ed<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Jak je vid\u011bt soubory se v podstat\u011b li\u0161\u00ed pouze t\u00edm, co se vyp\u00ed\u0161e p\u0159ed samotn\u00fdm loopem, tedy titulkem arch\u00edvu. Na konci v\u00fdpisu \u010dl\u00e1nk\u016f je v\u017edy navigace, kter\u00e1 umo\u017e\u0148uje pohyb mezi str\u00e1nkami.<\/p>\n\n\n\n<p>Jako posledn\u00ed soubor dnes vytvo\u0159\u00edme <strong>searchform.php<\/strong>. Je to v podstat\u011b vyhled\u00e1vac\u00ed formul\u00e1\u0159, kter\u00fd se zobrazuje nap\u0159\u00edklad v sidebaru. Pro\u010d jej v\u0161ak budeme znovu ps\u00e1t, kdy\u017e jej WordPress vykresl\u00ed automaticky? Proto\u017ee se n\u00e1m m\u016f\u017eet hodit, m\u00edt jin\u00e9 html, n\u011b\u017e n\u00e1m WordPress nab\u00eddne a tento soubor n\u00e1m to umo\u017en\u00ed.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Searchform.php<\/h3>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Z\u00e1v\u011br<\/h3>\n\n\n\n<p>Dnes jsme si tedy roz\u0161\u00ed\u0159ili \u0161ablonu o dal\u0161\u00ed soubory a v \u0161ablon\u011b tedy m\u00e1me n\u00e1sleduj\u00edc\u00ed \u010d\u00e1sti:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>404.php<\/strong><\/li>\n\n\n\n<li><strong>archive.php<\/strong><\/li>\n\n\n\n<li><strong>author.php<\/strong><\/li>\n\n\n\n<li><strong>category.php<\/strong><\/li>\n\n\n\n<li><strong>footer.php<\/strong><\/li>\n\n\n\n<li><strong>functions.php<\/strong><\/li>\n\n\n\n<li><strong>header.php<\/strong><\/li>\n\n\n\n<li><strong>index.php<\/strong><\/li>\n\n\n\n<li><strong>screenshot.png<\/strong><\/li>\n\n\n\n<li><strong>search.php<\/strong><\/li>\n\n\n\n<li><strong>searchform.php<\/strong><\/li>\n\n\n\n<li><strong>sidebar.php<\/strong><\/li>\n\n\n\n<li><strong>style.css<\/strong><\/li>\n\n\n\n<li><strong>tag.php<\/strong><\/li>\n<\/ul>\n\n\n\n<p>a slo\u017eky<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>bootstrap<\/li>\n\n\n\n<li>images<\/li>\n\n\n\n<li>js<\/li>\n<\/ul>\n\n\n\n<p>V\u0161echny doposud vytvo\u0159en\u00e9 soubory jsou dostupn\u00e9 na <a href=\"https:\/\/gist.github.com\/Musilda\" target=\"_blank\" rel=\"noopener\">Gist<\/a> a jsou ozna\u010den\u00e9 \u010d\u00edslem kapitoly, tak\u017ee m\u016f\u017eete porovn\u00e1vat zm\u011bny.<\/p>\n\n\n\n<p>Reposit\u00e1\u0159 \u0161ablony najdete na GitHubu, ale stav k\u00f3du bude odpov\u00eddat posledn\u00ed kapitole n\u00e1vodu : <a href=\"https:\/\/github.com\/Musilda\/dummy-theme\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/Musilda\/dummy-theme<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Co bude p\u0159\u00ed\u0161t\u011b?<\/h3>\n\n\n\n<p>V p\u0159\u00ed\u0161t\u00edm d\u00edle vytvo\u0159\u00edme <strong>single.php<\/strong> a <strong>page.php<\/strong> pro v\u00fdpis detailu str\u00e1nky a \u010dl\u00e1nku, roz\u0161\u00ed\u0159\u00edme \u0161ablonu o podporu n\u00e1hledov\u00fdch obr\u00e1zk\u016f a p\u0159iprav\u00edme si statickou hlavn\u00ed stranu.<\/p>\n\n\n\n<p><strong>N\u00e1vod byl aktualizov\u00e1n k 5.1.2019<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Seri\u00e1l: Jak vytvo\u0159it vlastn\u00ed \u0161ablonu pro WordPress<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"http:\/\/musilda.cz\/jak-vytvorit-vlastni-sablonu-pro-wordpress-1-dil\/\" target=\"_blank\" rel=\"noopener\">Jak vytvo\u0159it vlastn\u00ed \u0161ablonu pro WordPress 1.d\u00edl<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/musilda.cz\/jak-vytvorit-vlastni-sablonu-pro-wordpress-2-dil\/\" target=\"_blank\" rel=\"noopener\">Jak vytvo\u0159it vlastn\u00ed \u0161ablonu pro WordPress 2.d\u00edl<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/musilda.cz\/jak-vytvorit-vlastni-sablonu-pro-wordpress-3-dil\/\" target=\"_blank\" rel=\"noopener\">Jak vytvo\u0159it vlastn\u00ed \u0161ablonu pro WordPress 3.d\u00edl<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/musilda.cz\/jak-vytvorit-vlastni-sablonu-pro-wordpress-4-dil\/\" target=\"_blank\" rel=\"noopener\">Jak vytvo\u0159it vlastn\u00ed \u0161ablonu pro WordPress 4.d\u00edl<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/musilda.cz\/jak-vytvorit-vlastni-sablonu-pro-wordpress-5-dil\/\" target=\"_blank\" rel=\"noopener\">Jak vytvo\u0159it vlastn\u00ed \u0161ablonu pro WordPress 5.d\u00edl<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/musilda.cz\/jak-vytvorit-vlastni-sablonu-pro-wordpress-6-dil\/\" target=\"_blank\" rel=\"noopener\">Jak vytvo\u0159it vlastn\u00ed \u0161ablonu pro WordPress 6.d\u00edl<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/musilda.cz\/jak-vytvorit-vlastni-sablonu-pro-wordpress-7-dil\/\" target=\"_blank\" rel=\"noopener\">Jak vytvo\u0159it vlastn\u00ed \u0161ablonu pro WordPress 7.d\u00edl<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/musilda.cz\/jak-vytvorit-vlastni-sablonu-pro-wordpress-8-dil\/\" target=\"_blank\" rel=\"noopener\">Jak vytvo\u0159it vlastn\u00ed \u0161ablonu pro WordPress 8.d\u00edl<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Po m\u011bs\u00ed\u010dn\u00ed pauze je zde dal\u0161\u00ed d\u00edl seri\u00e1lu, v kter\u00e9m se nau\u010d\u00edte vytvo\u0159it vlastn\u00ed \u0161ablonu pro WordPress. V minul\u00e9m d\u00edle jme si vytvo\u0159ili z\u00e1kladn\u00ed kostru na\u0161\u00ed theme a dnes si ji dopln\u00edme o dal\u0161\u00ed soubory, pro v\u00fdpis kategorie, arch\u00edvu, vyhled\u00e1v\u00e1n\u00ed, str\u00e1nky 400 a vyhled\u00e1vac\u00edho formul\u00e1\u0159e. Tak\u00e9 si vytvo\u0159\u00edme vyhled\u00e1vac\u00ed formul\u00e1\u0159. Tak\u017ee poj\u010fme na to.<\/p>\n","protected":false},"author":1,"featured_media":8397,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[502,509,528],"class_list":["post-595","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jak-vytvorit-vlastni-sablonu-pro-wordpress","tag-wordpress-navod","tag-wordpress-sablona","tag-wordpress-tutorial"],"_links":{"self":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/595"}],"collection":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/comments?post=595"}],"version-history":[{"count":0,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/595\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media\/8397"}],"wp:attachment":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media?parent=595"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/categories?post=595"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/tags?post=595"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}