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
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
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
Budeme pot\u0159ebovat n\u00e1sleduj\u00edc\u00ed soubory:<\/strong><\/p>\n\n\n\n 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 Pokud na\u010dtete jakoukoliv webovou str\u00e1nku, kter\u00e1 funguje na WordPressu, syst\u00e9m postupuje n\u00e1sledovn\u011b:<\/p>\n\n\n\n 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 header.php<\/strong>, category.php<\/strong> a footer.php<\/strong>. Proto\u017ee header.php<\/strong> a 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 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 index.php<\/strong>. V po\u0159ad\u00ed d\u016fle\u017eitosti jsou soubory \u0159azeny podle relevance n\u00e1zvu.<\/p>\n\n\n\n P\u0159\u00edklad:<\/strong><\/p>\n\n\n\n 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 page-kontakt.php<\/strong>, pokud jej nenajde, hled\u00e1 soubor page-idstranky.php<\/strong> (page-4.php<\/strong> nap\u0159\u00edklad), pokud jej nenajde, vyhled\u00e1 page.php<\/strong> a vyp\u00ed\u0161e obsah dle t\u00e9to \u0161ablony. V p\u0159\u00edpad\u011b, \u017ee nenajde ani page.php<\/strong>, zobraz\u00ed index.php<\/strong>.<\/p>\n\n\n\n Mohou existovat n\u00e1sleduj\u00edc\u00ed mo\u017enosti:<\/p>\n\n\n\n Str\u00e1nka, na kterou chcete j\u00edt, neexistuje. Je tedy zobrazen soubor 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 404.php<\/strong> neexistuje, zobraz\u00ed se index a info o tom, \u017ee nebyl nalezen \u017e\u00e1dn\u00fd post.<\/p>\n\n\n\n Pokud zad\u00e1te do vyhled\u00e1vac\u00edho formul\u00e1\u0159e n\u011bjak\u00fd dotaz, hled\u00e1 WordPress soubor 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 Arch\u00edvn\u00ed str\u00e1nka, je jak\u00e1koliv str\u00e1nka s v\u00fdpisem \u010dl\u00e1nk\u016f, krom\u011b 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 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 Custom Taxonomy Archive<\/strong><\/p>\n\n\n\n <\/strong>Arch\u00edv vlastn\u00ed taxonomie, nyn\u00ed nepot\u0159ebujeme, uv\u00e1d\u00edm pro \u00faplnost.<\/p>\n\n\n\n Category Archive<\/strong><\/p>\n\n\n\n V\u00fdpis p\u0159\u00edsp\u011bvk\u016f v kategorii.<\/p>\n\n\n\n Tag Archive<\/strong><\/p>\n\n\n\n V\u00fdpis p\u0159\u00edsp\u011bvk\u016f obsahuj\u00edc\u00ed vybran\u00fd tag.<\/p>\n\n\n\n Author Archive<\/strong><\/p>\n\n\n\n V\u00fdpis p\u0159\u00edsp\u011bvk\u016f vybran\u00e9ho autora.<\/p>\n\n\n\n Date Archive<\/strong><\/p>\n\n\n\n V\u00fdpis p\u0159\u00edsp\u011bvk\u016f vybran\u00e9ho data.<\/p>\n\n\n\n Custom Post Type Archive<\/strong><\/p>\n\n\n\n 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 Singular page<\/strong><\/p>\n\n\n\n Samostatn\u00e1 str\u00e1nka. Zde se to li\u0161\u00ed dle toho, zda jde o post, nebo page.<\/p>\n\n\n\n Post:<\/p>\n\n\n\n Page:<\/p>\n\n\n\n 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 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 Budu se t\u011b\u0161it u druh\u00e9ho d\u00edlu, kdy za\u010dneme vytv\u00e1\u0159et prvn\u00ed soubory \u0161ablony<\/strong>.<\/p>\n\n\n\n N\u00e1vod byl aktualizov\u00e1n k 5.1.2019<\/strong><\/p>\n\n\n\n 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":{"_acf_changed":false,"_uag_custom_page_level_css":"","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"],"acf":[],"uagb_featured_image_src":{"full":["https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2013\/05\/vlastni-sablona-pro-wordpress-1-dil.jpg",1200,800,false],"thumbnail":["https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2013\/05\/vlastni-sablona-pro-wordpress-1-dil-150x150.jpg",150,150,true],"medium":["https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2013\/05\/vlastni-sablona-pro-wordpress-1-dil-300x200.jpg",300,200,true],"medium_large":["https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2013\/05\/vlastni-sablona-pro-wordpress-1-dil-768x512.jpg",640,427,true],"large":["https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2013\/05\/vlastni-sablona-pro-wordpress-1-dil-1024x683.jpg",640,427,true],"1536x1536":["https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2013\/05\/vlastni-sablona-pro-wordpress-1-dil.jpg",1200,800,false],"2048x2048":["https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2013\/05\/vlastni-sablona-pro-wordpress-1-dil.jpg",1200,800,false],"archive-list":["https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2013\/05\/vlastni-sablona-pro-wordpress-1-dil-400x265.jpg",400,265,true]},"uagb_author_info":{"display_name":"Affinite","author_link":"https:\/\/affinite.io\/cs\/author\/affinite\/"},"uagb_comment_info":18,"uagb_excerpt":"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","_links":{"self":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/9816","targetHints":{"allow":["GET"]}}],"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}]}}\n
Template hierarchy – neboli hierarchie soubor\u016f v \u0161ablon\u011b<\/h2>\n\n\n\n
\n
Kdy se kter\u00e1 \u0161ablona zobraz\u00ed<\/h3>\n\n\n\n
Error 404 page<\/strong><\/h3>\n\n\n\n
Search result page<\/strong><\/h3>\n\n\n\n
Archive page<\/strong><\/h3>\n\n\n\n
\n
\n
\n
\n
\n
\n
\n
\n
Seri\u00e1l: Jak vytvo\u0159it vlastn\u00ed \u0161ablonu pro WordPress<\/h2>\n\n\n\n
\n