{"id":233637,"date":"2023-02-19T13:31:00","date_gmt":"2023-02-19T10:31:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233637"},"modified":"2022-11-11T00:46:29","modified_gmt":"2022-11-10T21:46:29","slug":"luo-mukautettuja-woocommerce-tuotevaelilehtiae-mukautetuilla-kentillae","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/luo-mukautettuja-woocommerce-tuotevaelilehtiae-mukautetuilla-kentillae\/","title":{"rendered":"Luo mukautettuja WooCommerce-tuotev\u00e4lilehti\u00e4 mukautetuilla kentill\u00e4"},"content":{"rendered":"\n<p>Kun tarkastelet tuotetta <a href=\"https:\/\/woocommerce.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WooCommercessa<\/a>, tuotteen tiedot n\u00e4kyv\u00e4t v\u00e4lilehdiss\u00e4. N\u00e4m\u00e4 v\u00e4lilehdet on korjannut ja luonut WooCommerce, sinun hallinnassasi. T\u00e4m\u00e4 viesti n\u00e4ytt\u00e4\u00e4 sinulle, kuinka voit lis\u00e4t\u00e4 koodia, jonka avulla kirjoittajat voivat lis\u00e4t\u00e4 tuotteisiin mukautettuja v\u00e4lilehti\u00e4, joissa on mukautettua sis\u00e4lt\u00f6\u00e4.<\/p>\n<p>Vastuuvapauslauseke: WooCommerce-laajennus nimelt\u00e4 <a href=\"https:\/\/woocommerce.com\/products\/woocommerce-tab-manager\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WooCommerce Tab Manager<\/a> tarjoaa t\u00e4m\u00e4n ominaisuuden. Se ei kuitenkaan ole ilmaista. En ole itse testannut sit\u00e4, mutta sik\u00e4li kuin n\u00e4en, se tukee vain v\u00e4lilehden sis\u00e4ll\u00f6n WYSIWYG-editoria (mit\u00e4 n\u00e4et, mit\u00e4 saat). T\u00e4m\u00e4 viesti on sinulle, joka haluat hienos\u00e4\u00e4t\u00e4\u00e4 v\u00e4lilehden sis\u00e4lt\u00f6\u00e4 tai haluat kirjoittaa koodin itse maksamatta toisesta laajennuksesta.<\/p>\n<p>K\u00e4yt\u00e4mme <a href=\"https:\/\/www.advancedcustomfields.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Advanced Custom Fields<\/a> (ACF) -laajennusta prosessin yksinkertaistamiseksi. Mutta sinun pit\u00e4isi pysty\u00e4 melko helposti korvaamaan ACF: n osa omalla mukautetulla koodillasi, jos et halua k\u00e4ytt\u00e4\u00e4 laajennusta. ACF:st\u00e4 tulee <a href=\"https:\/\/wordpress.org\/plugins\/advanced-custom-fields\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ilmainen versio<\/a> ja <a href=\"https:\/\/www.advancedcustomfields.com\/pro\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Pro-versio<\/a>. ACF Prossa on n\u00e4pp\u00e4r\u00e4 kentt\u00e4tyyppi: toistin, joka sopii t\u00e4ydellisesti t\u00e4llaiseen k\u00e4ytt\u00f6\u00f6n. Jos sinulla ei kuitenkaan ole tai haluat ostaa Pro-lisenssi\u00e4, \u00e4l\u00e4 huoli. Alla oleva koodin opetusohjelma n\u00e4ytt\u00e4\u00e4, kuinka voit lis\u00e4t\u00e4 kentti\u00e4 k\u00e4ytt\u00e4m\u00e4ll\u00e4 sek\u00e4 ilmaista versiota ett\u00e4 toistinta Pro-versiossa.<\/p>\n<p>Jos et ole viel\u00e4 perehtynyt ACF:\u00e4\u00e4n, ACF auttaa meit\u00e4 helpon post-meta-kenttien asettamisessa \u2013 kaikenlaisten. Voit helposti lis\u00e4t\u00e4 editorin, tiedostovalitsimen, p\u00e4iv\u00e4m\u00e4\u00e4r\u00e4- tai v\u00e4rivalitsimen, postauksen tai kategorian valitsimen, joka tukee useita valintoja ja uudelleenj\u00e4rjest\u00e4mist\u00e4, ja paljon muuta. Voimme saavuttaa saman ilman ACF:\u00e4\u00e4, mutta silloin meid\u00e4n pit\u00e4isi koodata itse metabox-sis\u00e4ll\u00f6n n\u00e4ytt\u00f6 ja tallennus.<\/p>\n<h2>Mit\u00e4 teemme<\/h2>\n<p>Yksinkertaisesti sanottuna haluamme sallia mukautettujen v\u00e4lilehtien lis\u00e4\u00e4misen tuoten\u00e4kym\u00e4\u00e4n. Jokainen v\u00e4lilehti tukee otsikkoa, joka n\u00e4ytet\u00e4\u00e4n v\u00e4lilehden otsikona, ja sis\u00e4lt\u00f6\u00e4, joka n\u00e4ytet\u00e4\u00e4n, kun v\u00e4lilehte\u00e4 napsautetaan. Mukautetut v\u00e4lilehdet riippuvat todellakin projektin tyypist\u00e4 tai tarpeistasi; ehk\u00e4 tarvitset v\u00e4lilehti\u00e4 teknisi\u00e4 tietoja varten, v\u00e4lilehden tiedostoineen (esim. k\u00e4ytt\u00f6oppaat ja vastaavat), lis\u00e4tietoja tai mukautetun kyselyn, joka n\u00e4ytt\u00e4\u00e4 liittyv\u00e4t tuotteet.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152607-61e4e196664e9.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152607-61e4e196664e9.png\" alt=\"Luo mukautettuja WooCommerce-tuotev\u00e4lilehti\u00e4 mukautetuilla kentill\u00e4\" ><\/a><\/p>\n<p>T\u00e4ss\u00e4 opetusohjelmassa pid\u00e4mme sen yksinkertaisena lis\u00e4\u00e4m\u00e4ll\u00e4 v\u00e4lilehden sis\u00e4lt\u00f6\u00f6n WYSIWYG-editorin. Kuten edell\u00e4 mainittiin, muita kentt\u00e4tyyppej\u00e4 (esim. tiedostot tai viestikysely) on helppo ottaa k\u00e4ytt\u00f6\u00f6n, se johtuu vain erosta kirjoittamasi koodissa, joka n\u00e4ytt\u00e4\u00e4 v\u00e4lilehden sis\u00e4ll\u00f6n \u2013 mik\u00e4 ei liity t\u00e4h\u00e4n opetusohjelmaan.<\/p>\n<p>Jos sinulla on ACF Pro ja haluat k\u00e4ytt\u00e4\u00e4 toistinta useiden v\u00e4lilehtien lis\u00e4\u00e4miseen helposti; ohittaa seuraavan osan. Jos sinulla on vain ilmainen ACF-versio, jatka. Toistinkent\u00e4n puuttumisen haittana on, ett\u00e4 sinun on m\u00e4\u00e4ritett\u00e4v\u00e4 kiinte\u00e4 m\u00e4\u00e4r\u00e4 v\u00e4lilehti\u00e4. Joten kirjoittaja ei voi tehd\u00e4 rajattomasti v\u00e4lilehti\u00e4, kuten he voivat tehd\u00e4 toistimella. Mutta t\u00e4m\u00e4 ilmainen ratkaisu toimii mainiosti verkkokaupoissa, joissa haluat vain tietyn (m\u00e4\u00e4r\u00e4n) mukautettuja v\u00e4lilehti\u00e4.<\/p>\n<h2>Opetusohjelma ACF ilmaiselle versiolle<\/h2>\n<h3>ACF-kenttien lis\u00e4\u00e4minen<\/h3>\n<p>Uuden metaboxin lis\u00e4\u00e4minen kenttineen on todella helppoa ACF:n avulla. Sinulla on kaksi vaihtoehtoa; k\u00e4yt\u00e4 ACF:n k\u00e4ytt\u00f6liittym\u00e4\u00e4 kaiken m\u00e4\u00e4ritt\u00e4miseen tai lis\u00e4\u00e4 kent\u00e4t koodin mukaan. Yleens\u00e4 kenttien m\u00e4\u00e4ritt\u00e4minen adminissa on tapa edet\u00e4. Mutta jos sinun on varmistettava, ett\u00e4 kent\u00e4t ovat useilla WordPress-sivustoilla (esim. localhost-kehitys, testipalvelin ja live-palvelin), saatat hy\u00f6ty\u00e4 kenttien lis\u00e4\u00e4misest\u00e4 koodin mukaan teemassasi tai laajennuksessasi.<\/p>\n<p>Sinun on m\u00e4\u00e4ritett\u00e4v\u00e4 seuraavat:<\/p>\n<ul>\n<li>Ryhm\u00e4, joka n\u00e4ytt\u00e4\u00e4, kun viestityyppi on yht\u00e4 suuri kuin WooCommerce-tuotteet<\/li>\n<li>Tekstinsy\u00f6tt\u00f6 v\u00e4lilehden otsikolle<\/li>\n<li>Mit\u00e4 kentti\u00e4 haluat v\u00e4lilehden sis\u00e4ll\u00f6lle. Esimerkkin\u00e4 lis\u00e4\u00e4mme WYSIWYG-editorin.<\/li>\n<li>(Valinnainen) Muita v\u00e4lilehtien otsikoita ja v\u00e4lilehtien sis\u00e4lt\u00f6j\u00e4 niin monelle v\u00e4lilehdelle, jota haluamme tukea.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152607-61e4e197a93a6.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152607-61e4e197a93a6.png\" alt=\"Luo mukautettuja WooCommerce-tuotev\u00e4lilehti\u00e4 mukautetuilla kentill\u00e4\" ><\/a><\/p>\n<p>Muista kenttien nimet, sill\u00e4 sinun on viitattava niihin my\u00f6hemmin. Olen m\u00e4\u00e4ritt\u00e4nyt v\u00e4lilehden otsikon muotoon <code>tab_title<\/code>ja WYSIWYG-kent\u00e4n muotoon <code>tab_contents<\/code>.<\/p>\n<p>Jos haluat mieluummin lis\u00e4t\u00e4 kent\u00e4t koodin mukaan, t\u00e4ss\u00e4 on esimerkki. Lis\u00e4\u00e4 t\u00e4m\u00e4 teema- <code>functions.php<\/code>tai laajennustiedostoosi:<\/p>\n<pre><code>if (class_exists('acf')) {\n    add_action('acf\/init', function() {\n        $fields = [\n            [\n                'key' =&gt; 'field_tab_title',\n                'label' =&gt; __('Custom tab title', 'txtdomain'),\n                'name' =&gt; 'tab_title',\n                'type' =&gt; 'text',\n            ],\n            [\n                'key' =&gt; 'field_tab_contents',\n                'label' =&gt; __('Custom tab content', 'txtdomain'),\n                'name' =&gt; 'tab_contents',\n                'type' =&gt; 'wysiwyg',\n                'tabs' =&gt; 'all',\n                'toolbar' =&gt; 'full',\n                'media_upload' =&gt; 1,\n                'delay' =&gt; 0,\n            ],\n        ];\n\u00a0\n        acf_add_local_field_group([\n            'key' =&gt; 'group_custom_woocommerce_tabs',\n            'title' =&gt; __('Custom Tabs', 'txtdomain'),\n            'fields' =&gt; $fields,\n            'label_placement' =&gt; 'top',\n            'menu_order' =&gt; 0,\n            'style' =&gt; 'default',\n            'position' =&gt; 'normal',\n            'location' =&gt; [\n                [\n                    [\n                        'param' =&gt; 'post_type',\n                        'operator' =&gt; '==',\n                        'value' =&gt; 'product'\n                    ]\n                ]\n            ],\n        ]);\n    });\n}<\/code><\/pre>\n<p>Jos haluat enemm\u00e4n kuin yhden v\u00e4lilehden, lis\u00e4\u00e4 vain toinen v\u00e4lilehden otsikko ja sis\u00e4lt\u00f6 -merkin j\u00e4lkeen <code>line #19<\/code>. Muista vain pit\u00e4\u00e4 <code>name<\/code>ainutlaatuinen.<\/p>\n<p>Kun muokkaamme tuotetta, meid\u00e4n pit\u00e4isi n\u00e4hd\u00e4 t\u00e4m\u00e4 metalaatikko:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152607-61e4e198aac0f.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152607-61e4e198aac0f.png\" alt=\"Luo mukautettuja WooCommerce-tuotev\u00e4lilehti\u00e4 mukautetuilla kentill\u00e4\" ><\/a><\/p>\n<h3>Mukautettujen v\u00e4lilehtien tulostaminen<\/h3>\n<p>WooCommercen avulla voimme suodattaa <code>woocommerce_product_tabs<\/code>v\u00e4lilehtien k\u00e4sittely\u00e4. T\u00e4m\u00e4n suodattimen argumenttina saat taulukon kaikille v\u00e4lilehdille. Taulukko koostuu kunkin v\u00e4lilehden matriiseista, joissa on yksil\u00f6lliset avaimet. Mutta kunkin v\u00e4lilehden matriisi ei sis\u00e4ll\u00e4 v\u00e4lilehden sis\u00e4ll\u00f6n todellista tulosta. Sen sijaan se odottaa takaisinsoittoa &#8211; funktion nime\u00e4, jota WooCommerce suorittaa v\u00e4lilehden sis\u00e4ll\u00f6n tulostamiseksi.<\/p>\n<p>Kun olet funktion sis\u00e4ll\u00e4, voit k\u00e4ytt\u00e4\u00e4 <code>global $post<\/code>nykyist\u00e4 viestiobjektia, tai jos haluat WooCommercen luoman tuoteobjektin, tee yksinkertaisesti <code>global $product<\/code>. Tarvitsemme viestitunnuksen, jotta voimme noutaa mukautettujen kenttiemme arvon ACF-toiminnolla <code>[get_field](https:\/\/www.advancedcustomfields.com\/resources\/get_field\/)()<\/code>. Alla olevassa koodiesimerkiss\u00e4 haemme vain v\u00e4lilehden otsikon ja tarkistamme, onko t\u00e4m\u00e4 tyhj\u00e4 vai ei. Jos se ei ole, se lis\u00e4\u00e4 uuden v\u00e4lilehden taulukkoon. On j\u00e4rkev\u00e4\u00e4 olla lis\u00e4\u00e4m\u00e4tt\u00e4 v\u00e4lilehti\u00e4, joissa v\u00e4lilehden otsikko on tyhj\u00e4.<\/p>\n<pre><code>if (class_exists('acf') &amp;&amp; class_exists('WooCommerce')) {\n    add_filter('woocommerce_product_tabs', function($tabs) {\n        global $post, $product;  \/\/ Access to the current product or post\n        $custom_tab_title = get_field('tab_title', $post-&gt;ID);\n\u00a0\n        if (!empty($custom_tab_title)) {\n            $tabs['awp-'. sanitize_title($custom_tab_title)] = [\n                'title' =&gt; $custom_tab_title,\n                'callback' =&gt; 'awp_custom_woocommerce_tabs',\n                'priority' =&gt; 10\n            ];\n        }\n        return $tabs;\n    });\n\u00a0\n    function awp_custom_woocommerce_tabs($key, $tab) {\n        global $post;\n\u00a0\n        ?&gt;&lt;h2&gt;&lt;?php echo $tab['title']; ?&gt;&lt;\/h2&gt;&lt;?php\n\u00a0\n        $custom_tab_contents = get_field('tab_contents', $post-&gt;ID);\n        echo $custom_tab_contents;\n    }\n}<\/code><\/pre>\n<p>Huomaa, ett\u00e4 voit <code>priority<\/code>ohjata v\u00e4lilehden sijaintia painikkeella. Jos esimerkiksi asetat sen arvoon 1, v\u00e4lilehti tulee n\u00e4kyviin ensimm\u00e4isen\u00e4, ennen kaikkia WooCommercen v\u00e4lilehti\u00e4. M\u00e4\u00e4rit\u00e4 funktion nimi <code>callback<\/code>elementille &quot; &quot;. M\u00e4\u00e4rittelemme riviss\u00e4 <code>#17<\/code>toiminnon, jota WooCommerce suorittaa v\u00e4lilehden sis\u00e4ll\u00f6n tulostamiseksi.<\/p>\n<p>N\u00e4m\u00e4 v\u00e4lilehden takaisinkutsutoiminnot saavat kaksi parametria; nykyisen v\u00e4lilehden kaikkien arvojen avain ja taulukkoelementti. Takaisinsoittotoiminnossamme tulostamme v\u00e4lilehden otsikon uudelleen viitaten toimitettuun <code>$tab<\/code>taulukkoon. WooCommerce toistaa niiden v\u00e4lilehtien otsikot sis\u00e4ll\u00e4, <code>h2<\/code>joten teemme samoin. Ja sitten k\u00e4yt\u00e4mme <code>get_field()<\/code>saamaan v\u00e4lilehden sis\u00e4ll\u00f6n arvon ja yksinkertaisesti toistamaan arvon. S\u00e4\u00e4d\u00e4 rivi\u00e4 <code>#23<\/code>sopimaan mihin tahansa lis\u00e4\u00e4m\u00e4\u00e4si kentt\u00e4tyyppiin (esim. l\u00e4het\u00e4 objektin valitsin, kuvat tai jotain muuta).<\/p>\n<p>Huomaa, ett\u00e4 olen k\u00e4\u00e4rinyt kaiken if-tarkistukseen, joka tarkistaa, onko sek\u00e4 WooCommerce ett\u00e4 ACF aktivoitu. T\u00e4m\u00e4 on hyv\u00e4 k\u00e4yt\u00e4nt\u00f6 est\u00e4\u00e4ksesi sivustosi rikkoutumisen.<\/p>\n<p>Ja <strong>siin\u00e4 se<\/strong>! Olet nyt onnistuneesti luonut koodin mukautettujen WooCommerce-v\u00e4lilehtien lis\u00e4\u00e4miseksi!<\/p>\n<p>Jos haluat tehd\u00e4 t\u00e4m\u00e4n ACF Pron toistinkent\u00e4n avulla, joka tukee rajatonta m\u00e4\u00e4r\u00e4\u00e4 v\u00e4lilehti\u00e4, lue eteenp\u00e4in.<\/p>\n<h2>Opetusohjelma ACF Prolle ja toistimelle<\/h2>\n<h3>ACF-kenttien lis\u00e4\u00e4minen<\/h3>\n<p>Lis\u00e4\u00e4 ryhm\u00e4si joko ACF:n j\u00e4rjestelm\u00e4nvalvojan k\u00e4ytt\u00f6liittym\u00e4ll\u00e4 tai lis\u00e4\u00e4m\u00e4ll\u00e4 ne koodilla teema- tai laajennustiedostoihin. Meid\u00e4n on m\u00e4\u00e4ritett\u00e4v\u00e4 seuraavat:<\/p>\n<ul>\n<li>Ryhm\u00e4, joka n\u00e4ytt\u00e4\u00e4, kun viestityyppi on yht\u00e4 suuri kuin WooCommerce-tuote<\/li>\n<li>Toistin, jossa on seuraavat alakent\u00e4t:\n<ul>\n<li>Tekstinsy\u00f6tt\u00f6 v\u00e4lilehden otsikolle<\/li>\n<li>Mit\u00e4 kentti\u00e4 haluat v\u00e4lilehden sis\u00e4ll\u00f6lle.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>N\u00e4in m\u00e4\u00e4rit\u00e4t sen ACF-j\u00e4rjestelm\u00e4nvalvojan avulla:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152607-61e4e19a1ed6d.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152607-61e4e19a1ed6d.png\" alt=\"Luo mukautettuja WooCommerce-tuotev\u00e4lilehti\u00e4 mukautetuilla kentill\u00e4\" ><\/a><\/p>\n<p>Tai voit lis\u00e4t\u00e4 ryhm\u00e4n koodilla seuraavasti:<\/p>\n<pre><code>if (class_exists('acf')) {\n    add_action('acf\/init', function() {\n        $fields = [\n            [\n                'key' =&gt; 'field_custom_tabs_repeater',\n                'label' =&gt; __('Custom tabs', 'txtdomain'),\n                'name' =&gt; 'custom_tabs_repeater',\n                'type' =&gt; 'repeater',\n                'layout' =&gt; 'row',\n                'button_label' =&gt; __('Add new tab', 'txtdomain'),\n                'sub_fields' =&gt; [\n                    [\n                        'key' =&gt; 'field_tab_title',\n                        'label' =&gt; __('Tab title', 'txtdomain'),\n                        'name' =&gt; 'tab_title',\n                        'type' =&gt; 'text',\n                    ],\n                    [\n                        'key' =&gt; 'field_tab_contents',\n                        'label' =&gt; __('Tab content', 'txtdomain'),\n                        'name' =&gt; 'tab_contents',\n                        'type' =&gt; 'wysiwyg',\n                        'tabs' =&gt; 'all',\n                        'toolbar' =&gt; 'full',\n                        'media_upload' =&gt; 1,\n                        'delay' =&gt; 0,\n                    ],\n                ],\n            ],\n        ];\n\u00a0\n        acf_add_local_field_group([\n            'key' =&gt; 'group_custom_woocommerce_tabs',\n            'title' =&gt; __('Custom Tabs', 'txtdomain'),\n            'fields' =&gt; $fields,\n            'label_placement' =&gt; 'top',\n            'menu_order' =&gt; 0,\n            'style' =&gt; 'default',\n            'position' =&gt; 'normal',\n            'location' =&gt; [\n                [\n                    [\n                        'param' =&gt; 'post_type',\n                        'operator' =&gt; '==',\n                        'value' =&gt; 'product'\n                    ]\n                ]\n            ],\n        ]);\n    });\n}<\/code><\/pre>\n<p>Joka tapauksessa sinun pit\u00e4isi p\u00e4\u00e4ty\u00e4 t\u00e4h\u00e4n metalaatikkoon, kun muokkaat tuotteita:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152607-61e4e19e02c1d.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152607-61e4e19e02c1d.png\" alt=\"Luo mukautettuja WooCommerce-tuotev\u00e4lilehti\u00e4 mukautetuilla kentill\u00e4\" ><\/a><\/p>\n<h3>Mukautettujen v\u00e4lilehtien tulostaminen<\/h3>\n<p>Mukautettujen v\u00e4lilehtien n\u00e4ytt\u00e4minen on hyvin samanlaista kuin mit\u00e4 teimme yll\u00e4 ilmaisessa versiossa. Suodatamme <code>woocommerce_product_tabs<\/code>, mutta t\u00e4ss\u00e4 k\u00e4ymme l\u00e4pi jokaisen toistimen toistetun kohteen. Tarvitsemme tavan tunnistaa toistimen jokainen elementti avaimilla, joten luomme avaimen itse k\u00e4ytt\u00e4m\u00e4ll\u00e4 silmukan sijaintia ja v\u00e4lilehden otsikon slug-versiota. Takaisinsoittofunktiossa poimimme silmukan sijainnin avaimesta ja k\u00e4yt\u00e4mme t\u00e4t\u00e4 viittaamaan toistimemme taulukkoon.<\/p>\n<pre><code>if (class_exists('acf') &amp;&amp; class_exists('WooCommerce')) {\n    add_filter('woocommerce_product_tabs', function($tabs) {\n        global $post, $product;  \/\/ Access to the current product or post\n        $custom_tabs_repeater = get_field('custom_tabs_repeater', $post-&gt;ID);\n\u00a0\n        if (!empty($custom_tabs_repeater)) {\n            $counter = 0;\n            $start_at_priority = 10;\n            foreach ($custom_tabs_repeater as $custom_tab) {\n                $tab_id = $counter. '_'. sanitize_title($custom_tab['tab_title']);\n                $tabs[$tab_id] = [\n                    'title' =&gt; $custom_tab['tab_title'],\n                    'callback' =&gt; 'awp_custom_woocommerce_tabs',\n                    'priority' =&gt; $start_at_priority++\n                ];\n                $counter++;\n            }\n        }\n        return $tabs;\n    });\n\u00a0\n    function awp_custom_woocommerce_tabs($key, $tab) {\n        global $post;\n\u00a0\n        ?&gt;&lt;h2&gt;&lt;?php echo $tab['title']; ?&gt;&lt;\/h2&gt;&lt;?php\n\u00a0\n        $custom_tabs_repeater = get_field('custom_tabs_repeater', $post-&gt;ID);\n        $tab_id = explode('_', $key);\n        $tab_id = $tab_id[0];\n\u00a0\n        echo $custom_tabs_repeater[$tab_id]['tab_contents'];\n    }\n}<\/code><\/pre>\n<p>Suodatintoimintomme sis\u00e4ll\u00e4 haemme toistimen arvon ja tarkistamme, ettei se ole tyhj\u00e4. M\u00e4\u00e4rittelemme sitten laskurimuuttujan, joka alkaa 0:sta (taulukot alkavat aina paikasta 0), jota lis\u00e4\u00e4mme 1:ll\u00e4 kullekin silmukan sis\u00e4ll\u00e4 olevalle elementille (rivill\u00e4 <code>#18<\/code>). Jokaisen toistinkohteen silmukassa m\u00e4\u00e4rit\u00e4mme ne kaikki samaan takaisinsoittotoimintoon. K\u00e4yt\u00e4mme WordPressin toimintoa <code>[sanitize_title](https:\/\/developer.wordpress.org\/reference\/functions\/sanitize_title\/)()<\/code>v\u00e4lilehden otsikon muuntamiseen sen slug-versioksi ja lis\u00e4\u00e4mme sen avaimeen.<\/p>\n<p>Takaisinsoittofunktiossamme rivill\u00e4 <code>#31 - 32<\/code>teemme joitain yksinkertaisia \u200b\u200bmerkkijonok\u00e4sittelyj\u00e4 laskurin arvon poimimiseksi (joka alkaa 0:sta ja kasvaa 1:ll\u00e4 jokaiselle kohteelle). K\u00e4yt\u00e4mme t\u00e4t\u00e4 sitten yksinkertaisesti toistintaulukon indeksin\u00e4 oikean v\u00e4lilehden sis\u00e4lt\u00f6kent\u00e4n hakemiseksi.<\/p>\n<p>Ja <strong>siin\u00e4 se<\/strong>! Olet nyt ottanut k\u00e4ytt\u00f6\u00f6n rajattoman m\u00e4\u00e4r\u00e4n mukautettuja v\u00e4lilehti\u00e4 WooCommerceen!<\/p>\n<p>Muista, ett\u00e4 voit korvata WYSIWYG:n mill\u00e4 tahansa kent\u00e4ll\u00e4. Sinun tarvitsee vain muuttaa tapaa, jolla tulostat kent\u00e4n rivill\u00e4 <code>#23<\/code>.<\/p>\n<h2>Johtop\u00e4\u00e4t\u00f6s<\/h2>\n<p>Oman koodin kirjoittaminen mukautettujen WooCommerce-v\u00e4lilehtien lis\u00e4\u00e4mist\u00e4 varten on todella helppoa, kun olet ymm\u00e4rt\u00e4nyt WooCommercen perusk\u00e4sitteen. Se ei edes vaadi paljon koodia. T\u00e4m\u00e4 on aivan hyv\u00e4 ratkaisu sinulle, joka et halua tai pysty investoimaan laajennuslisensseihin tai tarvitset vain yksinkertaisen ratkaisun verkkokauppaasi.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/awhitepixel.com\" class=\"external external_icon\">awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Opastus siit\u00e4, kuinka voit lis\u00e4t\u00e4 mukautettuja WooCommerce-v\u00e4lilehti\u00e4 tuotteisiin. Katso kuinka helppoa t\u00e4m\u00e4 on Advanced Custom Fields -laajennuksella ja pienell\u00e4 koodilla.<\/p>\n","protected":false},"author":1,"featured_media":224911,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[719,719,813,1110,843,813,843,854,854,864,864],"tags":[1166],"class_list":{"0":"post-233637","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-kehittaejae","9":"category-laajennuksia","10":"category-n-a","11":"category-opetusohjelmia","14":"category-woocommerce-5","16":"category-wordpress-5","18":"tag-affiai-fi"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233637","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/comments?post=233637"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233637\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/224911"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=233637"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=233637"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=233637"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}