{"id":2847,"date":"2016-04-17T19:49:16","date_gmt":"2016-04-17T19:49:16","guid":{"rendered":"http:\/\/musilda.cz\/?p=2847"},"modified":"2016-04-17T19:49:16","modified_gmt":"2016-04-17T19:49:16","slug":"vlastni-woocommerce-sablony-jak-je-pouzivat","status":"publish","type":"post","link":"https:\/\/affinite.io\/cs\/vlastni-woocommerce-sablony-jak-je-pouzivat\/","title":{"rendered":"Vlastn\u00ed WooCommerce \u0161ablony &#8211; jak je pou\u017e\u00edvat?"},"content":{"rendered":"\n<p>Plugin WooCommerce funguje s jakoukoliv WordPress \u0161ablonou, pr\u00e1v\u011b d\u00edky \u0161ablon\u00e1m, kter\u00e9 obsahuje. A my si uk\u00e1\u017eeme, jak s nimi spr\u00e1vn\u011b pracovat.<\/p>\n\n\n\n<p>Pokud si nainstalujete WooCommerce plugin, na va\u0161em webu se objev\u00ed n\u011bkolik str\u00e1nek, kter\u00e9 defaultn\u00ed WordPress neobsahuje.<\/p>\n\n\n\n<p>Jsou to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Obchod<\/li>\n\n\n\n<li>Ko\u0161\u00edk<\/li>\n\n\n\n<li>Pokladna<\/li>\n\n\n\n<li>M\u016fj \u00fa\u010det<\/li>\n\n\n\n<li>Kategorie produktu<\/li>\n\n\n\n<li>Detail produktu<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Obchod<\/h2>\n\n\n\n<p>Obchod je v\u00fdpis produkt\u016f, kter\u00e9 jsou v eshopu. P\u0159esto\u017ee se jedn\u00e1 o v\u00fdpis, nejedn\u00e1 se o arch\u00edv (v\u00fdpis p\u0159\u00edsp\u011bvk\u016f), ale statickou str\u00e1nku, kam WooCommerce vypisuje produkty. D\u00edky tomu, \u017ee Obchod je str\u00e1nka, pou\u017e\u00edv\u00e1 se \u010dasto, jako hlavn\u00ed strana eshopu.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Ko\u0161\u00edk<\/h2>\n\n\n\n<p>Ko\u0161\u00edk je statick\u00e1 str\u00e1nka, jen\u017e obsahuje shortcode, staraj\u00edc\u00ed se o funkce ko\u0161\u00edku.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Pokladna<\/h2>\n\n\n\n<p>Pokladna je technicky stejn\u00e1, jako ko\u0161\u00edk, li\u0161\u00ed se pouze pou\u017eit\u00fdm shortcodem a funkcemi. Sou\u010d\u00e1st\u00ed pokladny je i d\u011bkovn\u00e1 str\u00e1nka, co\u017e ob\u010das \u0159adu u\u017eivatel\u016f mate.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">M\u016fj \u00fa\u010det<\/h2>\n\n\n\n<p>Stejn\u011b, jako u Ko\u0161\u00edku a Pokladny, jde o statickou str\u00e1nku, s v\u00fdpisem osobn\u00edch \u00fadaj\u016f z\u00e1kazn\u00edka a jeho objedn\u00e1vek.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Kategorie produktu a \u0161t\u00edtky produktu<\/h2>\n\n\n\n<p>Zde je pot\u0159eba \u0159\u00edci, \u017ee produkty ve WooCommerce jsou custom post type a jako takov\u00e9 maj\u00ed i vlastn\u00ed v\u00fdpis arch\u00edvu. Stejn\u011b, jako nap\u0159\u00edklad kategorie \u010dl\u00e1nk\u016f, lze vypsat i kategorie produkt\u016f.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Detail produktu<\/h2>\n\n\n\n<p>Podobn\u011b, jako u detailu \u010dl\u00e1nku, m\u00e1 produkt sv\u016fj vlastn\u00ed detail. Li\u0161\u00ed se jen v zobrazen\u00ed a funkc\u00edch, technicky se jedn\u00e1 o detail custom post type.<\/p>\n\n\n\n<p>Pro\u010d ale vypadaj\u00ed str\u00e1nky eshopu jinak, ne\u017e zbytek webu? Odpov\u011bd\u00ed jsou pr\u00e1v\u011b custom templates, kter\u00e9 plugin WooCommerce obsahuje.<\/p>\n\n\n\n<p>Ka\u017ed\u00e1 str\u00e1nka je toti\u017e slo\u017een\u00e1 ze samostatn\u00fdch \u0161ablon (soubor\u016f) a vypadat to m\u016f\u017ee i takto:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"http:\/\/musilda.cz\/wp-content\/uploads\/2016\/04\/obchod.jpeg\" rel=\"attachment wp-att-2848 noopener\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" width=\"811\" height=\"524\" src=\"http:\/\/musilda.cz\/wp-content\/uploads\/2016\/04\/obchod.jpeg\" alt=\"obchod\" class=\"wp-image-2848\" srcset=\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/04\/obchod.jpeg 811w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/04\/obchod-300x194.jpeg 300w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/04\/obchod-768x496.jpeg 768w\" sizes=\"(max-width: 811px) 100vw, 811px\" \/><\/a><\/figure><\/div>\n\n\n<p>Ka\u017ed\u00fd obd\u00e9ln\u00edk na obr\u00e1zku, prezentuje jeden soubor \u0161ablony, nebo p\u0159inejmen\u0161\u00edm funkci zav\u011b\u0161enou do hooku v p\u0159\u00edslu\u0161n\u00e9m souboru \u0161ablony. Nap\u0159\u00edklad cenu v tomto v\u00fdpisu, zobrazuje k\u00f3d, um\u00edst\u011bn\u00fd v souboru price.php, ve slo\u017ece loop.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;?php if ( $price_html = $product-&gt;get_price_html() ) : ?&gt;\n &lt;span class=\"price\"&gt;&lt;?php echo $price_html; ?&gt;&lt;\/span&gt;\n&lt;?php endif; ?&gt;<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Kde jsou soubory \u0161ablon um\u00edst\u011bny?<\/h2>\n\n\n\n<p>Jako ka\u017ed\u00fd jin\u00fd plugin, se WooCommerce nainstaluje do slo\u017eky plugins a tam je lze naj\u00edt:<\/p>\n\n\n\n<p>\/wp-content<br \/>\/plugins<br \/>\/woocommerce<br \/>\/templates<\/p>\n\n\n\n<p>Pro pochopen\u00ed zp\u016fsobu na\u010d\u00edt\u00e1n\u00ed soubor\u016f \u0161ablon si uk\u00e1\u017eeme \u010d\u00e1st k\u00f3du z template loader t\u0159\u00eddy:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">if ( is_single() &amp;&amp; get_post_type() == 'product' ) {<\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">&nbsp; $file = 'single-product.php';\n&nbsp; $find[] = $file;\n&nbsp; $find[] = WC()-&gt;template_path() . $file;<\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">}<\/pre>\n\n\n\n<p>Tato podm\u00ednka zji\u0161\u0165uje, zda se aktu\u00e1ln\u011b nach\u00e1z\u00edme na detailu produktu a pokud ano, tak do pole definuje jm\u00e9no souboru a pot\u00e9 cestu ke kopii souboru v \u0161ablon\u011b webu. N\u00e1sleduj\u00edc\u00ed k\u00f3d se postar\u00e1 o zji\u0161t\u011bn\u00ed, zda v \u0161ablon\u011b webu, existuje kopie souboru z pluginu:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">if ( $file ) {\n&nbsp; $template = locate_template( array_unique( $find ) );\n&nbsp; &nbsp; if ( ! $template || WC_TEMPLATE_DEBUG_MODE ) {\n&nbsp; &nbsp; &nbsp; $template = WC()-&gt;plugin_path() . '\/templates\/' . $file;\n&nbsp; &nbsp; }\n }<\/pre>\n\n\n\n<p>Funkce locate_template nejprve zji\u0161\u0165uje, zda existuje kopie souboru a pokud ne, tak na\u010dte origin\u00e1ln\u00ed soubor z pluginu.<\/p>\n\n\n\n<p>Cel\u00e9 toto vysv\u011btlov\u00e1n\u00ed m\u00e1 jedin\u00fd d\u016fvod. Uk\u00e1zat, pro\u010d, pro \u00fapravu custom soubor\u016f pluginu v \u0161ablon\u011b, je nutn\u00e9, ulo\u017eit je do slo\u017eky:<\/p>\n\n\n\n<p>\/wp-content<br \/>\/themes<br \/>\/theme-name<br \/>\/woocommerce<\/p>\n\n\n\n<p>D\u00edky tomu, m\u016f\u017eete vz\u00edt, v\u00fd\u0161e zm\u00edn\u011bn\u00fd soubor price.php, p\u016fvodn\u011b um\u00edst\u011bn\u00fd v<\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>wp-content\/plugins\/woocommerce\/templates\/loop\/price.php<\/strong><\/p>\n\n\n\n<p>a p\u0159esunout jej do<\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>wp-content\/themes\/theme-name\/woocommerce\/loop\/price.php<\/strong><\/p>\n\n\n\n<p>D\u016fvod je jednoduch\u00fd. Vy m\u016f\u017eete soubor upravovat, dle libosti a aktualizace pluginu samotn\u00e9ho se va\u0161ich \u00faprav nedotknou.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;?php if ( $price_html = $product-&gt;get_price_html() ) : ?&gt;\n &lt;div class=\"my-custom-class\"&gt;&lt;span class=\"price\"&gt;&lt;?php echo $price_html; ?&gt;&lt;\/span&gt;&lt;\/div&gt;\n &lt;?php endif; ?&gt;<\/pre>\n\n\n\n<p>Zde jsem p\u0159idal div kolem tla\u010d\u00edtka, pokud jej budete cht\u00edt upravit. M\u016f\u017eete nahradit v podstat\u011b v\u0161echny soubory z pluginu a upravit je, ale doporu\u010duji, u soubor\u016f checkoutu (pokladny), postupovat opatrn\u011b, proto\u017ee na html k\u00f3d je nav\u00e1z\u00e1na \u0159ada jQuery funkc\u00ed.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">P\u0159esunujte pouze ty soubory, kter\u00e9 upravujete!<\/h2>\n\n\n\n<p>Proto\u017ee jsme bytosti pohodln\u00e9, b\u00fdv\u00e1 jednoduch\u00e9, vz\u00edt slo\u017eku templates, p\u0159esunout ji do \u0161ablony a p\u0159ejmenovat na woocommerce. Pr\u00e1ce kvapn\u00e1, m\u00e1lo platn\u00e1. Ka\u017ed\u00fd soubor \u0161ablony m\u00e1 v hlavi\u010dce \u010d\u00edslo verze:<\/p>\n\n\n\n<p>* @see http:\/\/docs.woothemes.com\/document\/template-structure\/<br \/>* @author WooThemes<br \/>* @package WooCommerce\/Templates<br \/>* @version 1.6.4<\/p>\n\n\n\n<p>Pokud dojde k aktualizaci a vy m\u00e1te v \u0161ablon\u011b star\u0161\u00ed soubory, i kdy\u017e jste je neupravovali, aktualizace se jich nebude t\u00fdkat, proto\u017ee aktualizovan\u00e9 soubory pluginu, budou p\u0159episov\u00e1ny t\u011bmi zastaral\u00fdmi ze \u0161ablony.<\/p>\n\n\n\n<p>Nav\u00edc se ve stavu syst\u00e9mu, budou zobrazovat podobn\u00e1 hl\u00e1\u0161en\u00ed:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"http:\/\/musilda.cz\/wp-content\/uploads\/2016\/04\/older-files.jpeg\" rel=\"attachment wp-att-2849 noopener\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" width=\"664\" height=\"152\" src=\"http:\/\/musilda.cz\/wp-content\/uploads\/2016\/04\/older-files.jpeg\" alt=\"older-files\" class=\"wp-image-2849\" srcset=\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/04\/older-files.jpeg 664w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/04\/older-files-300x69.jpeg 300w\" sizes=\"(max-width: 664px) 100vw, 664px\" \/><\/a><\/figure><\/div>\n\n\n<p>Tak\u017ee si vytvo\u0159te strukturu slo\u017eky a p\u0159esu\u0148te pouze ty souboru, se kter\u00fdmi pracujete.<\/p>\n\n\n\n<p>A nakonec upozorn\u011bn\u00ed:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Nikdy neupravujte soubory v pluginu!<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Kam d\u00e1l?<\/h3>\n\n\n\n<p><a href=\"http:\/\/musilda.cz\/nastaveni-skladu-ve-woocommerce\/\" target=\"_blank\" rel=\"noopener\">Nastaven\u00ed skladu ve WooCommerce<\/a><\/p>\n\n\n\n<p><a href=\"http:\/\/musilda.cz\/vlastni-woocommerce-sablony-jak-je-pouzivat\/\" target=\"_blank\" rel=\"noopener\">Vlastn\u00ed WooCommerce \u0161ablony &#8211; jak je pou\u017e\u00edvat?<\/a><\/p>\n\n\n\n<p><a href=\"http:\/\/musilda.cz\/pruvodce-instalaci-woocommerce\/\" target=\"_blank\" rel=\"noopener\">Pr\u016fvodce instalac\u00ed WooCommerce<\/a><\/p>\n\n\n\n<p><a href=\"http:\/\/musilda.cz\/woocommerce-stranky-obchodu\/\" target=\"_blank\" rel=\"noopener\">WooCommerce str\u00e1nky obchodu&nbsp;<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Plugin WooCommerce funguje s jakoukoliv WordPress \u0161ablonou, pr\u00e1v\u011b d\u00edky \u0161ablon\u00e1m, kter\u00e9 obsahuje. A my si uk\u00e1\u017eeme, jak s nimi spr\u00e1vn\u011b pracovat. <\/p>\n","protected":false},"author":1,"featured_media":8732,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[25],"tags":[334,425],"class_list":["post-2847","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-woocommerce","tag-sablony","tag-woocommerce"],"_links":{"self":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/2847"}],"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=2847"}],"version-history":[{"count":0,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/2847\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media\/8732"}],"wp:attachment":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media?parent=2847"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/categories?post=2847"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/tags?post=2847"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}