![\"\"](\"https:\/\/musilda.cz\/wp-content\/uploads\/2024\/03\/vlastni-sablona-ve-wp-slozky.png\")
<\/a><\/figure>\n\n\n\nPou\u017eit\u00ed Bootstrap pro z\u00e1klad WordPress \u0161ablony<\/h2>\n\n\n\n
Budeme pou\u017e\u00edvat Bootstrap pro responsivn\u00ed design, proto\u017ee n\u00e1m umo\u017en\u00ed p\u0159esko\u010dit vytv\u00e1\u0159en\u00ed styl\u016f a responzivn\u00edho gridu. P\u0159esto\u017ee jeho pou\u017eit\u00ed m\u016f\u017ee b\u00fdt omezuj\u00edc\u00ed, n\u00e1m urychl\u00ed v\u00fdvoj. St\u00e1heneme si jeho kompilovanou verzi, kter\u00e1 je ke sta\u017een\u00ed zde\u00a0st\u00e1hnout Bootstrap<\/a>.<\/p>\n\n\n\n Soubory pot\u0159ebn\u00e9 pro Bootstrap ulo\u017e\u00edme do slo\u017eek assets\/css a assets\/js, tak jak jsou ulo\u017eeny ve sta\u017een\u00e9m zipu. V p\u0159\u00edpad\u011b, \u017ee se rozhodnete ve slo\u017ek\u00e1ch ud\u011blat nap\u0159\u00edklad assets\/css\/bootstrap a css soubory vlo\u017eit tam, mus\u00edte na to myslet p\u0159i linkov\u00e1n\u00ed ze souboru functions.php.<\/p>\n\n\n\n V editoru si n\u00e1sledn\u011b vytvo\u0159\u00edme prvn\u00ed soubory. Osobn\u011b pou\u017e\u00edv\u00e1m Sublime<\/a>(alternativou m\u016f\u017ee b\u00fdt nap\u0159\u00edklad Visual Studio Code), proto\u017ee jsem na n\u011bj zvykl\u00fd.<\/p>\n\n\n\n Vytvo\u0159\u00edme si n\u00e1sleduj\u00edc\u00ed pr\u00e1zdn\u00e9 soubory:<\/p>\n\n\n\n kter\u00e9 ulo\u017e\u00edme do slo\u017eky \u0161ablony. Nyn\u00ed si za\u010dneme vytv\u00e1\u0159et strukturu.<\/p>\n\n\n\n Do tohoto souboru vlo\u017e\u00edme n\u00e1sleduj\u00edc\u00ed k\u00f3d:<\/p>\n\n\n\n <\/p>\n\n\n\n V sekci head jsme vytvo\u0159ili hlavi\u010dku html dokumentu a pou\u017eili funkci wp_head<\/strong> pro vytvo\u0159en\u00ed hooku. D\u00e1le pokra\u010dujeme vytvo\u0159en\u00edm titulku str\u00e1nky a description, kter\u00e9 se budou zobrazovat v hlavi\u010dce str\u00e1nky. Vytvo\u0159\u00edme soubor footer.php<\/strong>, kter\u00fd je opak header.php<\/strong> a celou \u0161ablonu uzav\u00edr\u00e1. Do souboru vlo\u017e\u00edme n\u00e1sleduj\u00edc\u00ed k\u00f3d:<\/p>\n\n\n\n <\/p>\n\n\n\n Prvn\u00ed div uzav\u00edr\u00e1 ten, kter\u00fdm jsme otev\u0159eli na konci header.php<\/strong>, bez uzav\u0159en\u00ed by se n\u00e1m to cel\u00e9 rozsypalo. Pomoc\u00ed date(), home_url() a bloginfo() vytvo\u0159\u00edme pati\u010dku, kter\u00e1 se n\u00e1m bude aktualizovat podle toho, kam \u0161ablonu nasad\u00edme a nemus\u00edme nic upravovat. N\u00e1sledn\u011b zavol\u00e1me wp_footer()<\/a> a ukon\u010d\u00edme html dokument. Footer.php<\/strong> m\u00e1me nyn\u00ed p\u0159ipraven\u00fd.<\/p>\n\n\n\n V tuto chv\u00edli si p\u0159iprav\u00edme t\u011blo \u0161ablony, soubor index.php<\/strong>, kter\u00fd bude p\u0159ipraven pro v\u00fdpis p\u0159\u00edsp\u011bvk\u016f.<\/p>\n\n\n\n <\/p>\n\n\n\n Na za\u010d\u00e1tku souboru na\u010dteme header pomoc\u00ed get_header(), vytvo\u0159\u00edme divy col-8 a col-4, \u010d\u00edm\u017e rozd\u011bl\u00edme obsah na dv\u011b t\u0159etiny a t\u0159etinu, do t\u0159etinov\u00e9 \u010d\u00e1sti na\u010dteme sidebar pomoci get_sidebar(). Nakonec vlo\u017e\u00edme footer.php<\/strong> pomoc\u00ed get_footer().<\/p>\n\n\n\n Samotn\u00fd obsah vyp\u00ed\u0161eme pomoc\u00ed if have_post, co\u017e je \u010d\u00e1st ozna\u010dovan\u00e1 jako loop. WordPress zobrazuje \u010dl\u00e1nky, nebo str\u00e1nky, podle toho co se m\u00e1 v danou chv\u00edli zobrazovat, pokud se nic nenalezne, vyp\u00ed\u0161e se not found. Uvnit\u0159 loopu pou\u017eijeme t\u0159i funkce, a to the_title() pro n\u00e1zev postu, the_permalink() pro odkaz na post a the_excerpt(), kter\u00fd vyp\u00ed\u0161e zkr\u00e1cenou \u010d\u00e1st postu. Pokud bychom do \u0161ablony pozd\u011bji nep\u0159idali soubory single.php<\/strong> a page.php<\/strong>, museli bychom pou\u017e\u00edt the_content(), co\u017e vyp\u00ed\u0161e cel\u00fd obsah \u010dl\u00e1nku.<\/p>\n\n\n\n Nyn\u00ed vytvo\u0159\u00edme sidebar<\/p>\n\n\n\n <\/p>\n\n\n\n V tomto souboru nejprve zjist\u00edme, zda je aktivn\u00ed definovan\u00fd sidebar a pokud ne, zobraz\u00edme defaultn\u00ed k\u00f3d. Mnoho \u0161ablon m\u00e1 takto p\u0159ipraven t\u0159eba posledn\u00ed koment\u00e1\u0159e, posledn\u00ed p\u0159\u00edsp\u011bvky a vyhled\u00e1vac\u00ed formul\u00e1\u0159. Tento soubor se n\u011bkdy naz\u00fdv\u00e1 magick\u00fdm souborem. Pomoc\u00ed n\u011bj m\u016f\u017eete ovliv\u0148ovat v\u0161e co na obrazovce objev\u00ed a my si do n\u011bj vlo\u017e\u00edme t\u0159i funkce. <\/p>\n\n\n\n Funkce rozeb\u00edrat nebudu, je to mysl\u00edm jasn\u00e9, jen p\u0159ipomenu, \u017ee pomoc\u00ed enqueue na\u010d\u00edt\u00e1me soubory Bootstrapu a scritpy, kter\u00e9 vy\u017eaduje, bez toho by n\u00e1m responsivn\u00ed \u0161ablona nefungovala. Kdo nev\u00ed jak funguje enqueue doporu\u010duji p\u0159e\u010d\u00edst tento \u010dl\u00e1nek.<\/a><\/p>\n\n\n\n Posledn\u00ed soubor, kter\u00fd pot\u0159ebujeme, je style.css<\/strong>, do kter\u00e9ho budeme zapisovat styly \u0161ablony. Na po\u010d\u00e1tek souboru vlo\u017e\u00edme n\u00e1sleduj\u00edc\u00ed k\u00f3d:<\/p>\n\n\n\n <\/p>\n\n\n\n Tento k\u00f3d identifikuje \u0161ablonu a bez n\u011bj se v\u00e1m ji nepoda\u0159\u00ed nainstalovat. Nejd\u016fle\u017eit\u011bj\u0161\u00ed je Theme name, podle kter\u00e9ho si pak v administraci \u0161ablonu najdete. Zat\u00edm soubor nech\u00e1me krom\u011b tohoto k\u00f3du pr\u00e1zdn\u00fd, vzhledem k tomu, \u017ee jsme vlo\u017eili css soubor Bootstrapu, z\u00e1kladn\u00ed styly \u0161ablona p\u0159evezme.<\/p>\n\n\n\n \u00dapln\u011b nakonec mus\u00edme vytvo\u0159it png obr\u00e1zek, m\u016f\u017ee b\u00fdt i jen jedna barva, nazveme jej screenshot a vlo\u017e\u00edme do slo\u017eky. Velikost obr\u00e1zku by m\u011bla b\u00fdt 600px x 450px, co\u017e je doporu\u010den\u00e1 velikost pro kvalitn\u00ed zobrazen\u00ed i na HD p\u0159\u00edstroj\u00edch.<\/p>\n\n\n\n T\u00edm jsme dokon\u010dili z\u00e1kladn\u00ed kostru \u0161ablony a pokud ji nyn\u00ed aktivujeme, m\u011bla by ji\u017e fungovat. V p\u0159\u00ed\u0161t\u00edm d\u00edle za\u010dneme dopl\u0148ovat slo\u017eku o soubory single.php, page.php, archiv.php a dal\u0161\u00ed. P\u0159esto\u017ee jsme to dnes vzali letem sv\u011btem, bylo to nutn\u00e9 pro vytvo\u0159en\u00ed z\u00e1kladu, z kter\u00e9ho budeme d\u00e1le vych\u00e1zet.<\/p>\n\n\n\n Pokud jste minuli p\u0159edchoz\u00ed d\u00edl, doporu\u010duji tak\u00e9 p\u0159e\u010d\u00edst Prvn\u00ed d\u00edl seri\u00e1lu<\/a><\/p>\n\n\n\n N\u00e1vod byl aktualizov\u00e1n k 5.1.2019<\/strong><\/p>\n\n\n\n Po n\u011bkolika dnech jsme zp\u011bt u seri\u00e1lu, ve kter\u00e9m vytvo\u0159\u00edme vlastn\u00ed responsivn\u00ed WordPress \u0161ablonu. V minul\u00e9m d\u00edle jsme si vysv\u011btlili jak \u0161ablona postupuje p\u0159i \u0159azen\u00ed soubor\u016f a kter\u00e9 soubory pot\u0159ebujeme. Dnes si p\u0159iprav\u00edme v\u0161echny z\u00e1kladn\u00ed soubory, jen\u017e n\u00e1m umo\u017en\u00ed vytvo\u0159it ji\u017e funk\u010dn\u00ed z\u00e1klad \u0161ablony. Ve slo\u017ece themes vytvo\u0159\u00edme novou slo\u017eku, kterou nazveme dummy-theme (n\u00e1zev je<\/p>\n","protected":false},"author":1,"featured_media":8396,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_lock_modified_date":false,"footnotes":""},"categories":[8],"tags":[212],"class_list":["post-9818","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jak-vytvorit-vlastni-sablonu-pro-wordpress","tag-jak-vytvorit-sablonu-pro-wordpress"],"_links":{"self":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/9818"}],"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=9818"}],"version-history":[{"count":0,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/9818\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media\/8396"}],"wp:attachment":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media?parent=9818"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/categories?post=9818"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/tags?post=9818"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Vytvo\u0159en\u00ed prvn\u00edch souor\u016f \u0161ablony<\/h2>\n\n\n\n
\n
<\/a><\/figure>\n\n\n\nHeader.php<\/h3>\n\n\n\n
N\u00e1sleduj\u00ed divy, kter\u00e9 budou tvo\u0159it t\u011blo \u0161ablony. V t\u011bchto divech ji\u017e jsou t\u0159\u00eddy, kter\u00e9 Bootstrap vyu\u017e\u00edv\u00e1 pro responsivitu. Row je div, jen\u017e obaluje n\u011bjak\u00fd obsah. Container je t\u0159\u00edda s definovanou \u0161\u00ed\u0159kou a je zarovnan\u00e1 na st\u0159ed. Touto t\u0159\u00eddou jsme vlastn\u011b vymezili \u0161\u00ed\u0159ku obsahu a jeho um\u00edst\u011bn\u00ed doprost\u0159ed obrazovky.<\/p>\n\n\n\n
Posledn\u00ed je vlo\u017een\u00ed menu pomoc\u00ed wp_nav_menu, co\u017e je funkce, kter\u00e1 umo\u017e\u0148uje vytvo\u0159it m\u00edsto pro menu, konfigurovateln\u00e9 z administrace WordPressu. Samotn\u00e9 menu mus\u00edme je\u0161t\u011b aktivovat ve functions.php, jak si uk\u00e1\u017eeme n\u00ed\u017ee.
Posledn\u00ed \u0159\u00e1dek souboru obsahuje za\u010d\u00e1tek divu, kter\u00fd ukon\u010d\u00edme ve footer.php a op\u011bt obsahuje t\u0159\u00eddu Bootstrapu, proto\u017ee mus\u00edme odstranit lev\u00fd margin u prvn\u00edho divu v obsahu. Pokud se chcete dozv\u011bd\u011bt v\u00edce, p\u0159e\u010dt\u011bte si Bootstrap Grid System<\/a> – jak funguje Bootstrap nen\u00ed sou\u010d\u00e1st\u00ed tohoto n\u00e1vodu. D\u016fle\u017eit\u00e9 je, \u017ee to funguje.<\/p>\n\n\n\nFooter.php<\/h3>\n\n\n\n
Index.php<\/h3>\n\n\n\n
Sidebar.php<\/h3>\n\n\n\n
Pou\u017eil jsem pouze vyhled\u00e1v\u00e1c\u00ed formul\u00e1\u0159, aby se n\u00e1m sidebar zobrazil, i kdy\u017e nebude aktivn\u00ed.
Pozn.: p\u0159edchoz\u00ed verze skriptu obsahovala chybu, kterou jem 31.12.2018 opravil.<\/p>\n\n\n\nFunctions.php<\/h3>\n\n\n\n
V prvn\u00ed zaregistrujeme m\u00edsto pro Primary menu a p\u0159id\u00e1me \u0161ablon\u011b podporu pro n\u00e1hledov\u00e9 obr\u00e1zky a dal\u0161\u00ed.
Druhou definujeme sidebar a tvar pro widgety.
T\u0159et\u00ed na\u010dteme pomoc\u00ed wp_head hooku extern\u00ed scripty a styly. Jsou to styly Bootstrapu<\/p>\n\n\n\nStyle.css<\/h3>\n\n\n\n
Seri\u00e1l: Jak vytvo\u0159it vlastn\u00ed \u0161ablonu pro WordPress<\/h2>\n\n\n\n
\n