{"id":234021,"date":"2023-02-27T16:03:00","date_gmt":"2023-02-27T13:03:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=234021"},"modified":"2022-11-11T13:58:32","modified_gmt":"2022-11-11T10:58:32","slug":"woocommercen-koodaus-johdanto","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/woocommercen-koodaus-johdanto\/","title":{"rendered":"WooCommercen koodaus: Johdanto"},"content":{"rendered":"\n

T\u00e4m\u00e4 on aloittelijan kehitt\u00e4j\u00e4n johdanto WordPress WooCommerce -laajennukseen<\/a>. T\u00e4ss\u00e4 viestiss\u00e4 tarkastellaan WooCommercen toiminnan perusteita ja kuinka voimme muokata sit\u00e4 teemassamme tai laajennuksessamme koukkujen ja mallien avulla.<\/p>\n

Ensinn\u00e4kin WooCommerce tarjoaa suurta joustavuutta teema- ja laajennuskehitt\u00e4jille toimintojensa s\u00e4\u00e4t\u00e4misess\u00e4. Yksinkertaisia \u200b\u200bmuutoksia varten sinulla on yleens\u00e4 v\u00e4hint\u00e4\u00e4n kaksi vaihtoehtoa. Muokkaustavan valinta riippuu siit\u00e4, miten haluat ty\u00f6skennell\u00e4, kuinka joustavaa ja luettavaa koodisi tulee olla ja kuinka haluat jatkaa sivustosi tulevaa yll\u00e4pitoa, kun kyse on laajennusten (ja WordPressin) p\u00e4ivityksist\u00e4.<\/p>\n

Ennen kuin alat tutkia WooCommercen toimivuuden muokkaamista koodin avulla, sinun tulee tarkistaa, onko se, mit\u00e4 haluat saavuttaa, mahdollista muuttamalla asetuksia. WooCommerce sis\u00e4lt\u00e4\u00e4 valtavan asetussivun, jonka avulla voit muuttaa melko v\u00e4h\u00e4n. Uudemmissa versioissa WooCommerce on my\u00f6s lis\u00e4nnyt ja siirt\u00e4nyt lis\u00e4asetuksia WordPress Customizeriin. T\u00e4\u00e4ll\u00e4 voit esimerkiksi s\u00e4\u00e4t\u00e4\u00e4 sarakkeiden m\u00e4\u00e4r\u00e4\u00e4 ja s\u00e4\u00e4t\u00e4\u00e4 joitain kassakentti\u00e4.<\/p>\n

WooCommerce-mallit<\/h2>\n

WooCommerce tarjoaa suuren joukon mallitiedostoja, jotka voit ohittaa teeman kehitt\u00e4j\u00e4n\u00e4. Voit tehd\u00e4 t\u00e4m\u00e4n kopioimalla alkuper\u00e4isen WooCommerce-mallin teemakansioosi. Ja sitten teet muutokset teemasi tiedostoon.<\/p>\n

Siirry WooCommerce-laajennuskansioosi kohteessa \/wp-content\/plugins\/woocommerce\/<\/code>. T\u00e4\u00e4lt\u00e4 l\u00f6yd\u00e4t alikansion templates<\/code>. Tiedostojen koko sis\u00e4lt\u00f6 (niit\u00e4 on paljon!), \/wp-content\/plugins\/woocommerce\/templates\/<\/code>mukaan lukien sen alikansiot, ovat kaikki mallitiedostoja, jotka voit ohittaa teemassasi.<\/p>\n

Jotta WooCommerce l\u00f6yt\u00e4\u00e4 muokatut mallit, tarvitset teemasi juurihakemistoon alikansion nimelt\u00e4 woocommerce<\/code>. Jos teemasi slug on "awhitepixel", kansiosi pit\u00e4isi sijaita osoitteessa \/wp-content\/themes\/awhitepixel\/woocommerce\/<\/code>. T\u00e4m\u00e4n kansion sis\u00e4\u00e4n voit sijoittaa muokatut kopiot WooCommercen mallitiedostoista. Muista, ett\u00e4 alikansioissa olevat mallitiedostot on sijoitettava vastaaviin woocommerce-kansiosi alikansioihin. Esimerkiksi; WooCommercen ohittaminen \/templates\/single-product\/add-to-cart\/simple.php<\/code>edellytt\u00e4\u00e4, ett\u00e4 asetat kopiosi simple.php<\/code>teemasi \/woocommerce\/single-product\/add-to-cart\/<\/code>kansioon.<\/p>\n

Olet ehk\u00e4 my\u00f6s huomannut, ett\u00e4 malleissa on paljon toimintoja ja suodattimia. Suurin osa niist\u00e4 on t\u00e4ynn\u00e4 do_action()<\/code>s. WooCommercen optimaalisen k\u00e4yt\u00f6n vuoksi sinun ei pit\u00e4isi poistaa mit\u00e4\u00e4n koukkuja malleista. Useimmissa tapauksissa voit harkita toimintojen muuttamista k\u00e4ytt\u00e4m\u00e4ll\u00e4 toimintoja ja suodattimia ohittaen mallien sijaan. Selit\u00e4n miksi!<\/p>\n

T\u00e4rke\u00e4 huomautus mallien ja laajennusp\u00e4ivitysten ohittamisesta<\/h3>\n

Aloittelijalle mallin ohittaminen saattaa tuntua helpoimmalta ja intuitiivisimmalta korjaukselta. Miksi pelleill\u00e4 koukkujen kanssa, jos voit muuttaa suoraan mallia, joka tulostaa muutettavan asian? Vastaus: Koska t\u00e4m\u00e4 strategia tuottaa enemm\u00e4n ty\u00f6t\u00e4 verkkokauppasi yll\u00e4pidon yll\u00e4pit\u00e4miseen.<\/p>\n

WooCommerce p\u00e4ivitt\u00e4\u00e4 usein, ja joskus ne p\u00e4ivitt\u00e4v\u00e4t mallitiedoston. Jotta verkkokauppasi pysyisi ajan tasalla, sinun on p\u00e4ivitett\u00e4v\u00e4 my\u00f6s teemasi ohitusmallitiedostot. Sinun on yleens\u00e4 korvattava koko mallitiedosto uusimmalla p\u00e4ivitetyll\u00e4 tiedostolla ja lis\u00e4tt\u00e4v\u00e4 sitten muutokset uudelleen. T\u00e4st\u00e4 tulee nopeasti paljon vaikeampaa, jos et muista kaikkia tekemi\u00e4si muutoksia. Ota se minulta, jolla on vuosien kokemus muiden kehitt\u00e4jien WooCommerce-mallitiedostojen korjaamisesta laajennusp\u00e4ivitysten aikana. Luota minuun, se ei ole hauskaa ty\u00f6t\u00e4!<\/p>\n

Nyt kun tied\u00e4mme, ett\u00e4 koukut ovat parempi strategia, katsotaanpa kuinka edet\u00e4 siin\u00e4.<\/p>\n

WooCommerce-koukut<\/h2>\n

WooCommerce tarjoaa valtavan m\u00e4\u00e4r\u00e4n koukkuja, sek\u00e4 toimintoja ett\u00e4 suodattimia. Koukkujen k\u00e4ytt\u00f6 on todella yksinkertaista!<\/p>\n

Koukkujen avulla voit my\u00f6s muuttaa paljon muutakin kuin vain mallien tulosta. Voit muokata tuotteiden hintoja, kassakentti\u00e4 tai saada verkkokauppasi tekem\u00e4\u00e4n jotain, kun tuote lis\u00e4t\u00e4\u00e4n ostoskoriin.<\/p>\n

Jos olet kehitt\u00e4m\u00e4ss\u00e4 laajennusta, koukut ovat my\u00f6s ainoa tapa edet\u00e4. Voit ohittaa vain teeman malleja, et laajennuksia. (Okei, on olemassa tapoja voittaa t\u00e4m\u00e4, mutta se on hyvin harvinaista eik\u00e4 sit\u00e4 suositella).<\/p>\n

Jos olet katsonut joitain WooCommerce-mallitiedostoja, sinun olisi pit\u00e4nyt n\u00e4hd\u00e4 paljon do_action()<\/code>. N\u00e4m\u00e4 ovat koukkuja; tarkistuspisteit\u00e4, joihin voit liitty\u00e4 ja lis\u00e4t\u00e4 koodisi tai muokata muuttujaa. Jos olet ep\u00e4varma koukkujen toiminnasta, minulla on viesti, joka selitt\u00e4\u00e4<\/a> t\u00e4m\u00e4n perusteellisesti.<\/p>\n

Jos haluat tulostaa jotain, esimerkiksi teksti\u00e4 tai jotain vastaavaa, etsi toimintoja (do_action()<\/code>). Jos esimerkiksi tulostat jotain ostoskorimalliin, voit valita, haluatko liitt\u00e4\u00e4 sen woocommerce_before_cart<\/code>, woocommerce_before_cart_table<\/code>, woocommerce_before_cart_contents<\/code>, woocommerce_cart_contents<\/code>, woocommerce_cart_actions<\/code>, woocommerce_after_cart_contents<\/code>, woocommerce_after_cart_table<\/code>, woocommerce_cart_collaterals<\/code>, tai woocommerce_after_cart<\/code>. Valitse vain se, joka on sijoitettu sinne, miss\u00e4 haluat tulostaa. T\u00e4m\u00e4 on esimerkki tekstin n\u00e4ytt\u00e4misest\u00e4 ennen taulukkoa ja lomaketta ostoskorisivulla:<\/p>\n

add_action('woocommerce_before_cart', function() {\n    _e('Here are the products you have added in the cart so far', 'textdomain');\n});<\/code><\/pre>\n
Suodattimet (etsi apply_filters()<\/code>) ovat tulosteen tai muuttujan muokkaamiseen. Yleinen suodattimien k\u00e4ytt\u00f6 WooCommercessa on "Lis\u00e4\u00e4 ostoskoriin" -tekstin muokkaaminen ostopainikkeissa. WooCommerce tarjoaa t\u00e4h\u00e4n useita suodattimia, joiden avulla voit hallita teksti\u00e4 eri sivuilla. Voit esimerkiksi muokata teksti\u00e4 kauppasilmukassa tai yksitt\u00e4isess\u00e4 tuoten\u00e4kym\u00e4ss\u00e4. Suodattimet tarjoavat usein useita argumentteja lis\u00e4hallintaa varten, esimerkiksi tuoteobjektin. T\u00e4ss\u00e4 on yksinkertainen esimerkki "Lis\u00e4\u00e4 ostoskoriin" -tekstien muuttamisesta yksitt\u00e4isess\u00e4 tuoten\u00e4kym\u00e4ss\u00e4:<\/p>\n
add_filter('woocommerce_product_single_add_to_cart_text', function($original_text, $product) {\n    return __('Buy this', 'textdomain');\n}, 10, 2);<\/code><\/pre>\n
Tiet\u00e4en koukkujen toiminnasta ja yksinkertaisesti katsomalla mallitiedostojen sis\u00e4\u00e4n voit l\u00f6yt\u00e4\u00e4 melko paljon helposti vaihdettavia toimintoja. Ilmeisesti WooCommerce tarjoaa paljon edistyneempi\u00e4 muokkauksia, hintojen, maksutapojen, tuotteiden muunnoksia tai tuontia, kaikki mahdollista koukkujen avulla.<\/p>\n
Johtop\u00e4\u00e4t\u00f6s<\/h2>\n
T\u00e4m\u00e4n postauksen tarkoitus on antaa aloittelijalle perustiedot WooCommerceen muutosten tekemisest\u00e4 ja muutosten tekemisen seuraukset. Suosittelen aina k\u00e4ytt\u00e4m\u00e4\u00e4n koukkuja mallitiedostojen p\u00e4\u00e4llekirjoittamiseen, ellei se ole ehdottoman v\u00e4ltt\u00e4m\u00e4t\u00f6nt\u00e4.<\/p>\n
Seuraava askel on sukeltaa edistyneisiin modifikaatioihin tutustumalla WooCommercen koukkuihin, prosesseihin ja objekteihin. Koska WooCommerce<\/a> on suosituin verkkokauppaalusta, verkosta l\u00f6ytyy runsaasti resursseja ja koodiesimerkkej\u00e4. Katso my\u00f6s luokka Woocommerce<\/a> t\u00e4\u00e4ll\u00e4 t\u00e4ll\u00e4 sivustolla saadaksesi lis\u00e4\u00e4.<\/p>\n
:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Kehitt\u00e4j\u00e4n johdatus WordPress WooCommercen perusteisiin; miten se toimii ja kuinka voit mukauttaa sen toimintoja teemassasi tai laajennuksessasi.<\/p>\n","protected":false},"author":1,"featured_media":239407,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[895,895,813,1110,843,813,843,854,854,864,864],"tags":[1166],"class_list":["post-234021","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-koodi","category-laajennuksia","category-n-a","category-opetusohjelmia","category-woocommerce-5","category-wordpress-5","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/234021","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=234021"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/234021\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/239407"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=234021"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=234021"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=234021"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}