{"id":9816,"date":"2013-05-02T10:27:26","date_gmt":"2013-05-02T10:27:26","guid":{"rendered":"http:\/\/musilda.cz\/?p=289"},"modified":"2013-05-02T10:27:26","modified_gmt":"2013-05-02T10:27:26","slug":"jak-vytvorit-vlastni-sablonu-pro-wordpress-1-dil","status":"publish","type":"post","link":"https:\/\/affinite.io\/cs\/jak-vytvorit-vlastni-sablonu-pro-wordpress-1-dil\/","title":{"rendered":"Jak vytvo\u0159it vlastn\u00ed \u0161ablonu pro WordPress &#8211; 1 d\u00edl"},"content":{"rendered":"\n<p>V tomto \u010dl\u00e1nku bych cht\u011bl za\u010d\u00edt se seri\u00e1lem, v kter\u00e9m si projdeme cel\u00fdm procesem tvorby \u0161ablony pro redak\u010dn\u00ed syst\u00e9m WordPress. Na \u010desk\u00e9m internetu lze nal\u00e9zt n\u011bkolik \u010dl\u00e1nk\u016f, nebo seri\u00e1l\u016f, kter\u00e9 tvorbu \u0161ablony popisuj\u00ed. V\u011bt\u0161inou v\u0161ak nejdou do v\u011bt\u0161\u00ed hloubky, omezuj\u00ed se na stru\u010dn\u00fd popis a slo\u017eit\u011bj\u0161\u00ed probl\u00e9my je nutno \u0159e\u0161it na anglicky psan\u00fdch webech, nebo v Codexu WordPressu. <\/p>\n\n\n\n<p>Budu se sna\u017eit napsat v\u0161e co si mysl\u00edm, \u017ee je pro vytvo\u0159en\u00ed \u0161ablony d\u016fle\u017eit\u00e9 a podstatn\u00e9. Dal\u0161\u00ed v\u011bc\u00ed, d\u00edky kter\u00e9 by m\u011bl b\u00fdt tento seri\u00e1l odli\u0161n\u00fd od jin\u00fdch, je, \u017ee pro vytvo\u0159en\u00ed theme vyu\u017eijeme bootstrap a \u0161ablona tak bude responsivn\u00ed. Tak\u017ee vzh\u016fru do nitra WordPressu.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Soubory d\u016fle\u017eit\u00e9 pro vytvo\u0159en\u00ed \u0161ablony<\/h2>\n\n\n\n<p>P\u0159esto\u017ee se m\u016f\u017ee zd\u00e1t, \u017ee pro vytvo\u0159en\u00ed \u0161ablony bude sta\u010dit n\u011bkolik soubor\u016f, v\u011bt\u0161inou se do\u010dtete, \u017ee sta\u010d\u00ed header.php, index.php, footer.php a style.css, tak pro vytvo\u0159en\u00ed plnohodnotn\u00e9 a funk\u010dn\u00ed \u0161ablony to sta\u010dit nebude.<\/p>\n\n\n\n<p><strong>Budeme pot\u0159ebovat n\u00e1sleduj\u00edc\u00ed soubory:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>404.php<\/strong> &#8211; str\u00e1nka, kter\u00e1 se zobraz\u00ed, pokud str\u00e1nka neexistuje<\/li>\n\n\n\n<li><strong>archive.php<\/strong> &#8211; str\u00e1nka zobraz\u00ed v\u00fdpis archivn\u00edch p\u0159\u00edsp\u011bvk\u016f, v\u011bt\u0161inou dle data<\/li>\n\n\n\n<li><strong>author.php<\/strong> &#8211; str\u00e1nka zobraz\u00ed v\u00fdpis archivn\u00edch p\u0159\u00edsp\u011bvk\u016f vybran\u00e9ho autora<\/li>\n\n\n\n<li><strong>category.php<\/strong> &#8211;\u00a0str\u00e1nka zobraz\u00ed v\u00fdpis archivn\u00edch p\u0159\u00edsp\u011bvk\u016f vybran\u00e9 kategorie<\/li>\n\n\n\n<li>f<strong>ooter.php <\/strong>&#8211; pati\u010dka str\u00e1nky<\/li>\n\n\n\n<li><strong>functions.php<\/strong> &#8211; soubor s funkcemi \u0161ablony<\/li>\n\n\n\n<li><strong>header.php<\/strong> &#8211; hlavi\u010dka str\u00e1nky<\/li>\n\n\n\n<li><strong>index.php<\/strong><\/li>\n\n\n\n<li><strong>page.php<\/strong> &#8211; detail str\u00e1nky (page)<\/li>\n\n\n\n<li><strong>search.php<\/strong> &#8211;\u00a0str\u00e1nka zobraz\u00ed v\u00fdpis p\u0159\u00edsp\u011bvk\u016f odpov\u00eddaj\u00edc\u00edch vyhled\u00e1v\u00e1n\u00ed<\/li>\n\n\n\n<li><strong>searchform.php<\/strong> &#8211; vyhled\u00e1vac\u00ed formul\u00e1\u0159 &#8211; umo\u017e\u0148uje p\u0159eps\u00e1n\u00ed defaultn\u00edho<\/li>\n\n\n\n<li><strong>sidebar.php<\/strong> &#8211; postrann\u00ed pannel \u0161ablony<\/li>\n\n\n\n<li><strong>single.php<\/strong> &#8211; detail p\u0159\u00edsp\u011bvku (post)<\/li>\n\n\n\n<li><strong>style.css<\/strong> &#8211; soubor se styly \u0161ablony<\/li>\n\n\n\n<li><strong>tag.php<\/strong> &#8211;\u00a0str\u00e1nka zobraz\u00ed v\u00fdpis archivn\u00edch p\u0159\u00edsp\u011bvk\u016f vybran\u00e9ho tagu<\/li>\n<\/ul>\n\n\n\n<p>Jak vid\u00edte, celkem m\u00e1me 15 soubor\u016f, aby jste pochopili, kdy a v jak\u00e9m po\u0159ad\u00ed je WordPress zobrazuje, pop\u00ed\u0161eme si hierarchii \u0161ablony.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Template hierarchy &#8211; neboli hierarchie soubor\u016f v \u0161ablon\u011b<\/h2>\n\n\n\n<p>Pokud na\u010dtete jakoukoliv webovou str\u00e1nku, kter\u00e1 funguje na WordPressu, syst\u00e9m postupuje n\u00e1sledovn\u011b:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Na\u010dte se soubor <strong>functions.php<\/strong> a provedou se, nebo zaregistruj\u00ed funkce, pokud v souboru n\u011bjak\u00e9 jsou.<\/li>\n\n\n\n<li>Zavol\u00e1 se <strong>header.php<\/strong>, kter\u00fd obsahuje hlavi\u010dku str\u00e1nky, tedy v\u0161e mezi tagy HEAD a horn\u00ed \u010d\u00e1st \u0161ablony, kter\u00e1 se na na jednotliv\u00fdch podstr\u00e1nk\u00e1ch opakuje, tedy logo, menu, mo\u017en\u00e1 n\u011bjak\u00fd slider<\/li>\n\n\n\n<li>Zavol\u00e1 se soubor, v kter\u00e9m je v\u00fdpis obsahu str\u00e1nky, m\u016f\u017ee to b\u00fdt <strong>index.php<\/strong>, <strong>single.php<\/strong>, <strong>category.php<\/strong>, nebo <strong>page.php<\/strong>, zkr\u00e1tka soubor obsahuj\u00edc\u00ed obsah. Podle hierarchie \u0161ablony, ur\u010d\u00ed WordPress, kter\u00fd soubor se zobraz\u00ed.<\/li>\n\n\n\n<li>Na\u010dte se <strong>footer.php<\/strong>, v kter\u00e9m je pati\u010dka webu.<\/li>\n<\/ol>\n\n\n\n<p>Samotn\u00e1 hierarchie \u0161ablony ur\u010duje, kdy a za jak\u00fdch podm\u00ednek se zobraz\u00ed kter\u00fd soubor. Pokud se jedn\u00e1 o v\u00fdpis \u010dl\u00e1nk\u016f z kategorie, n\u00e1sleduje po sob\u011b <strong>header.php<\/strong>, <strong>category.php<\/strong> a <strong>footer.php<\/strong>. Proto\u017ee <strong>header.php<\/strong> a <strong>footer.php<\/strong> se st\u00e1le opakuj\u00ed, budeme se zab\u00fdvat jen soubory zobrazuj\u00edc\u00ed obsah str\u00e1nky.<\/p>\n\n\n\n<p>WordPress v\u017edy hled\u00e1 soubor, kter\u00fd pat\u0159\u00ed k dan\u00e9mu stavu a teprve pot\u00e9, pokud jej nenajde, hled\u00e1 dal\u0161\u00ed v po\u0159ad\u00ed a nakonec zobraz\u00ed <strong>index.php<\/strong>. V po\u0159ad\u00ed d\u016fle\u017eitosti jsou soubory \u0159azeny podle relevance n\u00e1zvu.<\/p>\n\n\n\n<p><strong>P\u0159\u00edklad:<\/strong><\/p>\n\n\n\n<p>Klikli jsme na odkaz na str\u00e1nku kontakt. WordPress nejprve zjist\u00ed, \u017ee se jedn\u00e1 o str\u00e1nku, tedy page a prohled\u00e1 adres\u00e1\u0159, zda obsahuje soubor <strong>page-kontakt.php<\/strong>, pokud jej nenajde, hled\u00e1 soubor <strong>page-idstranky.php<\/strong> (<strong>page-4.php<\/strong> nap\u0159\u00edklad), pokud jej nenajde, vyhled\u00e1 <strong>page.php<\/strong> a vyp\u00ed\u0161e obsah dle t\u00e9to \u0161ablony. V p\u0159\u00edpad\u011b, \u017ee nenajde ani <strong>page.php<\/strong>, zobraz\u00ed <strong>index.php<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Kdy se kter\u00e1 \u0161ablona zobraz\u00ed<\/h3>\n\n\n\n<p>Mohou existovat n\u00e1sleduj\u00edc\u00ed mo\u017enosti:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Error 404 page<\/strong><\/h3>\n\n\n\n<p>Str\u00e1nka, na kterou chcete j\u00edt, neexistuje. Je tedy zobrazen soubor <strong>404.php<\/strong>, kde by m\u011blo b\u00fdt naps\u00e1no n\u011bjak\u00e9 upozorn\u011bn\u00ed a u\u017eivateli nab\u00eddnuta dal\u0161\u00ed mo\u017enost. O tom, jak je d\u016fle\u017eit\u00e1 str\u00e1nka 404 pro u\u017eivatelskou p\u0159\u00edv\u011btivost webu, je naps\u00e1no mnoho \u010dl\u00e1nk\u016f. Pokud <strong>404.php<\/strong> neexistuje, zobraz\u00ed se index a info o tom, \u017ee nebyl nalezen \u017e\u00e1dn\u00fd post.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Search result page<\/strong><\/h3>\n\n\n\n<p>Pokud zad\u00e1te do vyhled\u00e1vac\u00edho formul\u00e1\u0159e n\u011bjak\u00fd dotaz, hled\u00e1 WordPress soubor <strong>search.php<\/strong>, kde vyp\u00ed\u0161e obsah, kter\u00fd odpov\u00edd\u00e1 dotazu. Pokud jej nenajde, zobraz\u00ed index.php.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>&nbsp;Archive page<\/strong><\/h3>\n\n\n\n<p>Arch\u00edvn\u00ed str\u00e1nka, je jak\u00e1koliv str\u00e1nka s v\u00fdpisem \u010dl\u00e1nk\u016f, krom\u011b <strong>index.php<\/strong>. Po zji\u0161t\u011bn\u00ed, \u017ee se jedn\u00e1 o arch\u00edv, ur\u010duje WordPress o jak\u00fd jde.<\/p>\n\n\n\n<p>M\u016f\u017ee j\u00edt o n\u00e1sleduj\u00edc\u00ed arch\u00edvy a proto\u017ee postup, jak\u00fdm \u0159ad\u00ed syst\u00e9m soubory jasn\u00fd, budu jej uv\u00e1d\u011bt v \u010d\u00edslovan\u00e9m seznamu bez dal\u0161\u00edho vysv\u011btlov\u00e1n\u00ed. M\u00edsto prom\u011bnn\u00fdch si dosa\u010fte odpov\u00eddaj\u00edc\u00ed n\u00e1zvy, nap\u0159\u00edklad $taxonomy je n\u00e1zev taxonomie, $slug je \u010d\u00e1st url odpov\u00eddaj\u00edc\u00ed postu.<\/p>\n\n\n\n<p><strong>Custom Taxonomy Archive<\/strong><\/p>\n\n\n\n<p><strong><\/strong>Arch\u00edv vlastn\u00ed taxonomie, nyn\u00ed nepot\u0159ebujeme, uv\u00e1d\u00edm pro \u00faplnost.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>taxonomy-$taxonomy-$term.php<\/li>\n\n\n\n<li>taxonomy-$taxonomy.php<\/li>\n\n\n\n<li>taxonomy.php<\/li>\n\n\n\n<li>archive.php<\/li>\n\n\n\n<li>index.php<\/li>\n<\/ol>\n\n\n\n<p><strong>Category Archive<\/strong><\/p>\n\n\n\n<p>V\u00fdpis p\u0159\u00edsp\u011bvk\u016f v kategorii.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>category-$slug.php<\/li>\n\n\n\n<li>category-$id.php<\/li>\n\n\n\n<li>category.php<\/li>\n\n\n\n<li>archive.php<\/li>\n\n\n\n<li>index.php<\/li>\n<\/ol>\n\n\n\n<p><strong>Tag Archive<\/strong><\/p>\n\n\n\n<p>V\u00fdpis p\u0159\u00edsp\u011bvk\u016f obsahuj\u00edc\u00ed vybran\u00fd tag.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>tag-$slug.php<\/li>\n\n\n\n<li>tag-$id.php<\/li>\n\n\n\n<li>tag.php<\/li>\n\n\n\n<li>archive.php<\/li>\n\n\n\n<li>index.php<\/li>\n<\/ol>\n\n\n\n<p><strong>Author Archive<\/strong><\/p>\n\n\n\n<p>V\u00fdpis p\u0159\u00edsp\u011bvk\u016f vybran\u00e9ho autora.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>author-$slug.php<\/li>\n\n\n\n<li>author-$id.php<\/li>\n\n\n\n<li>author.php<\/li>\n\n\n\n<li>archive.php<\/li>\n\n\n\n<li>index.php<\/li>\n<\/ol>\n\n\n\n<p><strong>Date Archive<\/strong><\/p>\n\n\n\n<p>V\u00fdpis p\u0159\u00edsp\u011bvk\u016f vybran\u00e9ho data.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>date-$slug.php<\/li>\n\n\n\n<li>date-$id.php<\/li>\n\n\n\n<li>date.php<\/li>\n\n\n\n<li>archive.php<\/li>\n\n\n\n<li>index.php<\/li>\n<\/ol>\n\n\n\n<p><strong>Custom Post Type Archive<\/strong><\/p>\n\n\n\n<p>V\u00fdpis p\u0159\u00edsp\u011bvk\u016f dle vybran\u00e9ho custom post type. Zat\u00edm nepot\u0159ebujeme, uv\u00e1d\u00edm pro \u00faplnost.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>archive-$posttype.php<\/li>\n\n\n\n<li>archive.php<\/li>\n\n\n\n<li>index.php<\/li>\n<\/ol>\n\n\n\n<p><strong>&nbsp;Singular page<\/strong><\/p>\n\n\n\n<p>Samostatn\u00e1 str\u00e1nka. Zde se to li\u0161\u00ed dle toho, zda jde o post, nebo page.<\/p>\n\n\n\n<p>Post:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>single-post.php<\/li>\n\n\n\n<li>single.php<\/li>\n\n\n\n<li>index.php<\/li>\n<\/ol>\n\n\n\n<p>Page:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>page-$slug.php<\/li>\n\n\n\n<li>page-$id.php<\/li>\n\n\n\n<li>page.php<\/li>\n\n\n\n<li>index.php<\/li>\n<\/ol>\n\n\n\n<p>Celou hierarchii, jsem trochu zjednodu\u0161il, pro na\u0161e pot\u0159eby to zat\u00edm sta\u010d\u00ed, pokud si chcete prohl\u00e9dnout kompletn\u00ed graficky zn\u00e1zorn\u011bnou posloupnost \u0161ablony, m\u016f\u017eete na Codexu WordPressu <a href=\"http:\/\/codex.wordpress.org\/images\/1\/18\/Template_Hierarchy.png\" target=\"_blank\" rel=\"noopener\">zde<\/a>, v\u011b\u0159\u00edm, \u017ee pokud jste si prvn\u00ed d\u00edl p\u0159e\u010detli, snadno graf pochop\u00edte.<\/p>\n\n\n\n<p>Budu se t\u011b\u0161it u druh\u00e9ho d\u00edlu, kdy za\u010dneme vytv\u00e1\u0159et <strong>prvn\u00ed soubory \u0161ablony<\/strong>.<\/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>V tomto \u010dl\u00e1nku bych cht\u011bl za\u010d\u00edt se seri\u00e1lem, v kter\u00e9m si projdeme cel\u00fdm procesem tvorby \u0161ablony pro redak\u010dn\u00ed syst\u00e9m WordPress. Na \u010desk\u00e9m internetu lze nal\u00e9zt n\u011bkolik \u010dl\u00e1nk\u016f, nebo seri\u00e1l\u016f, kter\u00e9 tvorbu \u0161ablony popisuj\u00ed. V\u011bt\u0161inou v\u0161ak nejdou do v\u011bt\u0161\u00ed hloubky, omezuj\u00ed se na stru\u010dn\u00fd popis a slo\u017eit\u011bj\u0161\u00ed probl\u00e9my je nutno \u0159e\u0161it na anglicky psan\u00fdch webech, nebo<\/p>\n","protected":false},"author":1,"featured_media":8394,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_lock_modified_date":false,"footnotes":""},"categories":[8],"tags":[],"class_list":["post-9816","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jak-vytvorit-vlastni-sablonu-pro-wordpress"],"_links":{"self":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/9816"}],"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=9816"}],"version-history":[{"count":0,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/9816\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media\/8394"}],"wp:attachment":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media?parent=9816"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/categories?post=9816"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/tags?post=9816"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}