{"id":1426,"date":"2014-08-02T08:44:16","date_gmt":"2014-08-02T08:44:16","guid":{"rendered":"http:\/\/musilda.cz\/?p=1426"},"modified":"2014-08-02T08:44:16","modified_gmt":"2014-08-02T08:44:16","slug":"jak-vytvorit-vlastni-sablonu-pro-wordpress-5-dil","status":"publish","type":"post","link":"https:\/\/affinite.io\/cs\/jak-vytvorit-vlastni-sablonu-pro-wordpress-5-dil\/","title":{"rendered":"Jak vytvo\u0159it vlastn\u00ed \u0161ablonu pro WordPress &#8211; 5 d\u00edl"},"content":{"rendered":"\n<p>V dal\u0161\u00edm d\u00edle seri\u00e1lu o tvorb\u011b \u0161ablony se zam\u011b\u0159\u00edme na vytvo\u0159en\u00ed vlastn\u00edch \u0161ablon str\u00e1nek. P\u0159iprav\u00edme si str\u00e1nku se stoprocentn\u00ed \u0161\u00ed\u0159kou a str\u00e1nku se sidebarem vlevo. Z\u00e1rove\u0148 u\u017e d\u00e1me \u0161ablon\u011b trochu vzhledu.<\/p>\n\n\n\n<p>P\u0159i instalaci nov\u00fdch \u0161ablon je \u010dasto t\u011b\u017ek\u00e9 p\u0159edstavit si, jak bude \u0161ablona vypadat s obsahem, naimportujeme si na web testovac\u00ed data, kter\u00e1 si st\u00e1hnete <a href=\"https:\/\/wpcom-themes.svn.automattic.com\/demo\/theme-unit-test-data.xml\" target=\"_blank\" rel=\"noopener\">zde<\/a>. T\u00edm odpadne zdlouhav\u00e9 vytv\u00e1\u0159en\u00ed \u010dl\u00e1nk\u016f, kategori\u00ed a str\u00e1nek, jen pro testov\u00e1n\u00ed. N\u00e1stroj pro import najdete v N\u00e1stroj\u00edch -&gt; Import. D\u016fle\u017eit\u00e9 je za\u0161krtnout &#8211; St\u00e1hnut a importovat soubory, d\u00edky tomu se v\u00e1m v\u0161echny soubory ulo\u017e\u00ed do slo\u017eky uploads.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Zm\u011bny v souborech:<\/h3>\n\n\n\n<p>Proto\u017ee od posledn\u00edho d\u00edlu n\u00e1vodu ji\u017e uplynulo trochu \u010dasu, mus\u00edme aktualizovat soubory Bootstrapu a z\u00e1rove\u0148 i n\u011bkter\u00e9 n\u00e1zvy t\u0159\u00edd. Ve verzi 2.2.2, kter\u00e1 je v \u0161ablon\u011b, se pou\u017e\u00edvaly pro ozna\u010den\u00ed jednotliv\u00fdch sloupc\u016f t\u0159\u00eddy s n\u00e1zvy <strong>span4<\/strong> a podobn\u011b. Bootstrap jako takov\u00fd, d\u011bl\u00ed obsah na 12 sloupc\u016f a \u010dty\u0159ka v n\u00e1zvu t\u0159\u00eddy, ozna\u010duje 4xsloupec. Aby jsme dostali 100% \u0161\u00ed\u0159e obsahu, museli jsme m\u00edt dva divy span8 a span4.<\/p>\n\n\n\n<p>Proto\u017ee se v\u0161ak v\u0161e vyv\u00edj\u00ed, v nov\u011bj\u0161\u00edch verz\u00edch budeme pou\u017e\u00edvat t\u0159\u00eddy jako&nbsp;<strong>col-xs-12 col-sm-6 col-md-8<\/strong>, co\u017e je vlastn\u011b to sam\u00e9, ale rovnou t\u00edm ur\u010d\u00edte, \u0161\u00ed\u0159ky pro desktop, tablet a mobil. Zleva doprava to je 12 sloupc\u016f &#8211; mobil, 6 sloupc\u016f &#8211; tablet, 8 sloupc\u016f desktop. Tedy 100% \u0161\u00ed\u0159e, 50% \u0161\u00ed\u0159e a 75% \u0161\u00ed\u0159e. T\u00edm nahrad\u00edme v\u0161echny span8 v k\u00f3du \u0161ablony. Span4 nahrad\u00edme&nbsp;<strong>col-xs-12 col-sm-6 col-md-4<\/strong>.<\/p>\n\n\n\n<p>Po \u00faprav\u011b \u0161ablony a importu obsahu se n\u00e1m zobraz\u00ed hlavn\u00ed strana takto:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"http:\/\/musilda.cz\/wp-content\/uploads\/2014\/08\/Blank.png\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"http:\/\/musilda.cz\/wp-content\/uploads\/2014\/08\/Blank-1024x440.png\" alt=\"Blank\" class=\"wp-image-1867\" \/><\/a><\/figure><\/div>\n\n\n<p>Vid\u00edme n\u00e1zev webu, menu, v\u00fdpis \u010dl\u00e1nk\u016f a vpravo sidebar. Aby byly dal\u0161\u00ed p\u0159\u00edklady l\u00e9pe viditeln\u00e9, ud\u011bl\u00e1me n\u011bkolik drobn\u00fdch \u00faprav. P\u0159edev\u0161\u00edm v nastaven\u00ed Vzhled-&gt;menu, vytvo\u0159\u00edme menu, kter\u00e9 um\u00edst\u00edme do primary area. D\u00e1le d\u00e1me &nbsp;str\u00e1nce \u0161ediv\u00e9 pozad\u00ed a obsahu b\u00edl\u00e9. Tak\u00e9 lehce uprav\u00edme zobrazov\u00e1n\u00ed menu.<\/p>\n\n\n\n<p>V souboru <strong>header.php<\/strong> prid\u00e1me ke container t\u0159\u00eddu content-wrap a do style.css vlo\u017e\u00edme tyto \u0159\u00e1dky:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>body{\n  background-color:#dedede;\n}\n\n.content-wrap{\n  background-color:#ffffff;\n}\n\nimg{\n  max-width:100%;\n}\n\n\/*----------------------------------------------------------------------*\/\n\/* Main navigation menu *\/\n\/*----------------------------------------------------------------------*\/\n.header-menu {float:left;\n  width:100%;\n  margin-top:18px;\n  background-color:#dedede;\n}\n.header-menu ul {float:left;\n  margin:0;\n  padding:0;\n  list-style:none;\n\n}\n\n.header-menu ul li {float:left;\n  margin:0;\n  padding: 0;\n  position:relative;\n}\n.header-menu ul li a{\n  border-right:solid 1px #d3d3d3;\n}\n.header-menu ul li a,\n.header-menu ul li.pagenav {\n\tpadding: 0px 20px 0px 20px;\n  color: #333333;\n  float: left;\n  font-size: 14px;\n  line-height:58px;\n  font-weight:normal;\n  text-transform:uppercase;\n}\n.header-menu ul li:last-child a{border-right:none;}\n.header-menu ul li.current-menu-item a,\n.header-menu ul li a:hover,\n.header-menu ul li a.active,\n.header-menu ul li.pagenav:hover {\n  background-color:#ffffff;\n  text-decoration:none;\n}\n\n.header-menu ul li ul{\n  display:none;\n}<\/code><\/pre>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"http:\/\/musilda.cz\/wp-content\/uploads\/2014\/08\/Blank-2.png\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"http:\/\/musilda.cz\/wp-content\/uploads\/2014\/08\/Blank-2-1024x452.png\" alt=\"Blank (2)\" class=\"wp-image-1869\" \/><\/a><\/figure><\/div>\n\n\n<p>Tak\u017ee jsme p\u0159idali barvu pozad\u00ed, obsahu a lehce upravili menu. V\u00fdsledek vypad\u00e1 takto:<br \/><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u0160ablony str\u00e1nek<\/h3>\n\n\n\n<p>Pro vytvo\u0159en\u00ed \u0161ablon str\u00e1nek a uk\u00e1zce toho, jak funguj\u00ed, budeme pot\u0159ebovat dv\u011b nov\u00e9 str\u00e1nky. Nazveme je Full width a Left sidebar. Prav\u00fd d\u011blat nemus\u00edme, ten m\u00e1me od za\u010d\u00e1tku a ob\u011b str\u00e1nky p\u0159id\u00e1me do menu.<\/p>\n\n\n\n<p>Nyn\u00ed otev\u0159eme soubor page.php a ulo\u017e\u00edme jej jako template-fullwidth.php. Na pojmenov\u00e1n\u00ed nez\u00e1le\u017e\u00ed, ale pro lep\u0161\u00ed p\u0159ehlednost, budeme \u0161ablony str\u00e1nek ozna\u010dovat jako template. Z ulo\u017een\u00e9ho souboru sma\u017eeme:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"col-xs-12 col-sm-6 col-md-4\"&gt;\n    &lt;php?php get_sidebar(); ?&gt;\n  &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>a <strong>col-xs-12 col-sm-6 col-md-8<\/strong> zm\u011bn\u00edme na <strong>col-xs-12 col-sm-12 col-md-12<\/strong>.<br \/>Na za\u010d\u00e1tek souboru p\u0159id\u00e1me:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/*\nTemplate name: Full width\n *\/<\/code><\/pre>\n\n\n\n<p>a ulo\u017e\u00edme.<\/p>\n\n\n\n<p>Nyn\u00ed otev\u0159eme znovu soubor page.php a k\u00f3d:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"col-xs-12 col-sm-6 col-md-4\"&gt;\n    &lt;?php get_sidebar(); ?&gt;\n  &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>p\u0159esuneme p\u0159ed:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"col-xs-12 col-sm-6 col-md-8\"&gt;<\/code><\/pre>\n\n\n\n<p>Na za\u010d\u00e1tek souboru p\u0159id\u00e1me:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/*\nTemplate name: Left sidebar\n *\/<\/code><\/pre>\n\n\n\n<p>a ulo\u017e\u00edme jako <strong>template-leftsidebar.php<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Z\u00e1v\u011brem<\/h3>\n\n\n\n<p>V dne\u0161n\u00edm \u010dl\u00e1nku jsme si updatovali Bootstrap, kter\u00fd vyu\u017e\u00edv\u00e1me p\u0159edev\u0161\u00edm proto, aby jsme se nemuseli starat o zobrazov\u00e1n\u00ed na jin\u00fdch za\u0159\u00edzen\u00edch. D\u00e1le jsme upravili soubory, tak aby vyu\u017e\u00edvali nov\u00e9 t\u0159\u00eddy Bootstrapu. Lehce jsme upravili styly \u0161ablony, aby bylo l\u00e9pe vid\u011bt, co d\u011bl\u00e1me a pro\u010d. Nakonec jsme vytvo\u0159ili dv\u011b \u0161ablony str\u00e1nek, pro str\u00e1nku bez sidebaru a se sidebarem vlevo.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Na co se m\u016f\u017eete t\u011b\u0161it p\u0159\u00ed\u0161t\u011b?<\/h3>\n\n\n\n<p>Uprav\u00edme v\u00fdpis \u010dl\u00e1nk\u016f, kam p\u0159id\u00e1me informace o autorovi, datu publikace a po\u010dtu koment\u00e1\u0159\u016f. Pod\u00edv\u00e1me se podrobn\u011bji pr\u00e1v\u011b na koment\u00e1\u0159e a jejich zobrazov\u00e1n\u00ed na detailu \u010dl\u00e1nku.<\/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 dal\u0161\u00edm d\u00edle seri\u00e1lu o tvorb\u011b \u0161ablony se zam\u011b\u0159\u00edme na vytvo\u0159en\u00ed vlastn\u00edch \u0161ablon str\u00e1nek. P\u0159iprav\u00edme si str\u00e1nku se stoprocentn\u00ed \u0161\u00ed\u0159kou a str\u00e1nku se sidebarem vlevo. Z\u00e1rove\u0148 u\u017e d\u00e1me \u0161ablon\u011b trochu vzhledu. P\u0159i instalaci nov\u00fdch \u0161ablon je \u010dasto t\u011b\u017ek\u00e9 p\u0159edstavit si, jak bude \u0161ablona vypadat s obsahem, naimportujeme si na web testovac\u00ed data, kter\u00e1 si st\u00e1hnete<\/p>\n","protected":false},"author":1,"featured_media":8399,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[402],"class_list":["post-1426","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jak-vytvorit-vlastni-sablonu-pro-wordpress","tag-vlastni-sablona-pro-wordpress"],"_links":{"self":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/1426"}],"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=1426"}],"version-history":[{"count":0,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/1426\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media\/8399"}],"wp:attachment":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media?parent=1426"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/categories?post=1426"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/tags?post=1426"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}