Kui vaatate toodet WooCommerce’is, kuvatakse toote teave vahekaartidel. Need vahelehed on fikseeritud ja loodud WooCommerce’i poolt väljaspool teie kontrolli. See postitus näitab teile, kuidas lisada koodi, mis võimaldab autoritel lisada toodetele kohandatud sisuga vahekaarte.
Kohustustest loobumine: seda funktsiooni pakub WooCommerce’i laiendus nimega WooCommerce Tab Manager. See pole siiski tasuta. Ma ei ole seda ise testinud, kuid niipalju kui ma näen, toetab see vahekaardi sisu jaoks ainult WYSIWYG-redaktorit (see on see, mida näete). See postitus on mõeldud teile, kes soovite vahekaardi sisu peenhäälestada või soovite koodi ise kirjutada, ilma teise pistikprogrammi eest maksmata.
Protsessi lihtsustamiseks kasutame pluginat Advanced Custom Fields (ACF). Kuid kui te ei soovi pistikprogrammi kasutada, peaksite saama üsna hõlpsalt asendada ACF-i osa oma kohandatud koodiga. ACF on saadaval tasuta versioonina ja Pro versioonina. ACF Pro-s on suurepärane väljatüüp: repiiter, mis sobib suurepäraselt selliseks kasutamiseks. Kui teil aga ei ole Pro-litsentsi või soovite seda osta, ärge muretsege. Allolev koodiõpetus näitab teile, kuidas lisada välju nii tasuta versiooni kui ka Pro versiooni repiiteri abil.
Kui te pole ACF-iga veel tuttav, siis ACF aitab meil hõlpsalt seadistada post-meta väljasid – kõikvõimalikke. Saate hõlpsasti lisada redaktori, failivalija, kuupäeva- või värvivalija, mitme valiku ja ümberjärjestamise toega postituse või kategooria valija ja palju muud. Sama saame ka ilma ACF-ita, kuid siis peaksime ise kodeerima metakasti sisu kuvamise ja salvestamise.
Mida me teeme
Lihtsamalt öeldes tahame lubada tootevaatesse kohandatud vahekaartide lisamist. Iga vahekaart toetab pealkirja, mis kuvatakse vahekaardi sildina, ja sisu, mis kuvatakse vahekaardil klõpsamisel. Kohandatud vahekaardid sõltuvad teie projekti tüübist või vajadustest; võib-olla vajate vahekaarte tehniliste andmete jaoks, failide (nt kasutusjuhendid jms), lisateavet või kohandatud päringut, mis kuvab seotud tooteid.
Selles õpetuses hoiame selle lihtsana, lisades vahekaardi sisu jaoks WYSIWYG-redaktori. Nagu ülalpool mainitud, on lihtne rakendada muid väljatüüpe (nt faile või postituspäringut), see on lihtsalt erinevus koodis, mille jaoks kirjutate, kuvab vahekaardi sisu – mis pole selle õpetusega seotud.
Kui teil on ACF Pro ja soovite kasutada repiiterit mitme vahekaardi hõlpsaks lisamiseks; jätke järgmine jaotis vahele. Kui teil on ainult ACF-i tasuta versioon, jätkake. Repiiteri välja puudumise puuduseks on see, et peate määratlema kindla arvu vahekaarte. Seega ei saa autor teha piiramatul arvul vahekaarte nagu repiiteriga. Kuid see tasuta lahendus töötab suurepäraselt veebipoodides, kus soovite lihtsalt konkreetseid (arvu) kohandatud vahekaarte.
Õpetus ACF-i tasuta versiooni jaoks
ACF väljade lisamine
Uue metakasti lisamine väljadega on ACF-iga väga lihtne. Teil on kaks võimalust; kasutage kõige seadistamiseks ACF-i kasutajaliidest või lisage väljad koodi järgi. Tavaliselt on väljade seadistamine administraatoris. Kui aga peate tagama, et väljad eksisteerivad mitmel WordPressi saidil (nt kohaliku hosti arendus, testserver ja reaalajas server), võib olla kasulik lisada väljad oma teemas või pistikprogrammis koodi järgi.
Peate seadistama järgmise:
- Rühm, mis kuvatakse, kui postituse tüüp võrdub WooCommerce’i toodetega
- Vahekaardi pealkirja tekstisisend
- Ükskõik millise(d) välja(d) vahekaardi sisu jaoks soovite. Näitena lisame WYSIWYG-redaktori.
- (Valikuline) Täiendavad vahelehtede pealkirjad ja vahelehtede sisu nii paljude vahekaartide jaoks, mida soovime toetada.
Pidage meeles väljade nimesid, kuna peate neile hiljem viitama. Olen määranud vahekaardi pealkirjaks tab_titleja välja WYSIWYG kui tab_contents.
Kui soovite pigem väljad koodi järgi lisada, on siin näide. Lisage see oma teema functions.phpvõi pistikprogrammi faili:
Kui soovite rohkem kui ühte vahekaarti, lisage pärast line #19. Ärge unustage hoida nameainulaadset.
Toote redigeerimisel peaksime nägema seda metakasti:
Kohandatud vahekaartide väljastamine
WooCommerce võimaldab meil woocommerce_product_tabsvahekaartidega manipuleerimiseks filtreerida. Selle filtri argumendina saate kõigi vahekaartide massiivi. Massiiv koosneb iga vahekaardi massiividest, millel on ainulaadsed võtmed. Kuid iga vahekaardi massiiv ei sisalda vahekaardi sisu tegelikku väljundit. Selle asemel ootab see tagasihelistamist – funktsiooni nime, mida WooCommerce vahekaardi sisu väljastamiseks käivitab.
Kui olete funktsiooni sees, saate kasutada global $postjuurdepääsu praegusele postitusobjektile või kui soovite, et WooCommerce genereeriks tooteobjekti, tehke lihtsalt global $product. ACF-i funktsiooniga kohandatud väljade väärtuse toomiseks vajame postituse ID-d [get_field](https://www.advancedcustomfields.com/resources/get_field/)(). Allolevas koodinäites hangime ainult vahekaardi pealkirja ja kontrollime, kas see on tühi või mitte. Kui see pole nii, lisab see massiivile uue vahekaardi. Vahekaarte, mille pealkiri on tühi, on mõistlik mitte lisada.
Pange tähele, et saate priorityvahekaardi asukoha juhtimiseks kasutada klahvi. Näiteks kui määrate selle väärtusele 1, kuvatakse teie vahekaart esimesena, enne kõiki WooCommerce’i vahekaarte. callbackMäärake elemendile " " funktsiooni nimi. Reas #17määratleme funktsiooni, mida WooCommerce vahekaardi sisu väljastamiseks käivitab.
Need vahekaardi tagasihelistamise funktsioonid saavad kaks parameetrit; praeguse vahekaardi kõigi väärtuste võti ja massiivielement. Tagasihelistamisfunktsioonis väljastame uuesti vahelehe pealkirja, viidates pakutavale $tabmassiivile. WooCommerce kordab nende vahelehtede pealkirju a sees, h2nii et me teeme sama. Seejärel kasutame get_field()vahekaardi sisu väärtuse leidmiseks ja lihtsalt selle väärtuse kordamiseks. Kohandage joont #23, et see sobiks teie lisatud väljatüüpidega (nt postiobjekti valija, pildid või midagi muud).
Pange tähele, et olen koondanud kõik if-kontrolli, mis kontrollib, kas nii WooCommerce kui ka ACF on aktiveeritud või mitte. See on hea tava, et vältida saidi purunemist.
Ja ongi kõik! Olete nüüd edukalt loonud koodi kohandatud WooCommerce’i vahekaartide lisamiseks!
Kui soovite seda teha ACF Pro repiiteriväljaga, et toetada piiramatut arvu vahekaarte, lugege edasi.
Õpetus ACF Pro ja repiiteri jaoks
ACF väljade lisamine
Lisage oma rühm, kasutades ACF-i administraatoriliidest või lisades need oma teema või pistikprogrammide failides oleva koodi järgi. Peame seadistama järgmise:
- Rühm, mis kuvatakse, kui postituse tüüp võrdub WooCommerce’i tootega
- Repiiter järgmiste alamväljadega:
- Vahekaardi pealkirja tekstisisend
- Ükskõik millise(d) välja(d) vahekaardi sisu jaoks soovite.
ACF-i administraatori abil saate selle seadistada järgmiselt:
Või saate rühma lisada koodi järgi järgmiselt:
Mõlemal juhul peaksite toodete redigeerimisel jõudma selle metakastini:
Kohandatud vahekaartide väljastamine
Kohandatud vahekaartide väljastamine on väga sarnane sellele, mida tegime ülalpool tasuta versiooni puhul. Filtreerime woocommerce_product_tabs, kuid siin vaatame läbi iga korduva üksuse repiiterist. Vajame viisi, kuidas klahvide abil tuvastada repiiteri iga element, nii et loome võtme ise, kasutades silmuse positsiooni ja vahekaardi pealkirja slug-versiooni. Tagasihelistamise funktsioonis eraldame võtmest silmusepositsiooni ja kasutame seda meie repiiteri massiivile viitamiseks.
Filtrifunktsiooni sees hangime repiiteri väärtuse ja kontrollime, kas see pole tühi. Seejärel defineerime loenduri muutuja, mis algab 0-st (massiivid algavad alati positsiooniga 0), mida suurendame 1-ga iga tsükli sees oleva elemendi jaoks (real #18). Iga kordusüksuse tsüklis määrame need kõik samale tagasihelistamise funktsioonile. Kasutame WordPressi funktsiooni [sanitize_title](https://developer.wordpress.org/reference/functions/sanitize_title/)(), et teisendada vahekaardi pealkiri selle sluug-versiooniks ja lisada see võtmele.
Rea tagasihelistamisfunktsioonis #31 - 32teeme loenduri väärtuse eraldamiseks (mis algab 0-st ja suureneb iga üksuse puhul 1 võrra) mõningaid lihtsaid stringidega manipuleerimisi. Seejärel kasutame seda lihtsalt repiiteri massiivi indeksina, et tuua õige vahekaardi sisuväli.
Ja ongi kõik! Olete nüüd WooCommerce’is rakendanud piiramatu arvu kohandatud vahekaarte!
Pidage meeles, et saate WYSIWYG asendada mis tahes väljaga. Peate lihtsalt muutma seda, kuidas välja rea väljastatakse #23.
Järeldus
Oma koodi kirjutamine kohandatud WooCommerce’i vahekaartide lisamiseks on väga lihtne, kui olete aru saanud WooCommerce’i põhikontseptsioonist. See ei nõua isegi palju koodi. See on igati hea lahendus Sulle, kes ei taha või ei saa investeerida laienduslitsentsidesse või vajad lihtsalt oma veebipoe jaoks lihtsat lahendust.