Sisuta lehel ilma struktuurita on nagu raamat ilma sisukorrata. Külastaja kerib läbi ja lahkub, sest ei näe, kus asub vastus tema küsimusele.

Vahekaardid lahendavad selle probleemi: need suruvad kolm ekraanitäit infot ühte klikki, ilma lehte üle koormamata. WooCommerce’i poe puhul tõstavad vahekaartidel olevad kirjeldused ja spetsifikatsioonid konversiooni. Blogi puhul hoiavad vahekaartidel olevad juhendid ja KKK-d lugejaid kauem kaasatuna.

Selles ülevaates on 7 WordPressi vahekaartide pluginat, mida testisime käsitsi testisaidil koormuse all: alates kergetest lühikoodilahendustest kuni Gutenbergi plokkide ja WooCommerce’i tööriistadeni. Ei mingeid „kõik-ühes" leheehitajaid, ainult pluginad, mis vahekaartidega päriselt töötavad.

💡 Kiirülevaade:

• Loe artikli alguses olevat võrdlustabelit, see filtreerib kohe välja sobimatud variandid.
• Vali plugin oma ülesande järgi: WooCommerce → Custom Product Tabs, Gutenberg → Ultimate Blocks, külgvahekaardi CTA → Simple Side Tab.
• Paigalda plugin, lisa vahekaardid postitusele või lehele lühikoodi või ploki kaudu ning kontrolli, kuidas vahekaardid mobiilis välja näevad.

Pluginate võrdlustabel

Ülaltoodud videos on samm-sammuline protsess vahekaartide lisamiseks WordPressi tavalise redaktori kaudu. Sama põhimõte töötab kõigi selle ülevaate pluginatega.

1. Tabs Responsive

Bootstrapi raamistikul põhinev plugin, mis on koheselt responsiivne ja mobiilisõbralik. Kuvab võrdselt hästi nii horisontaalseid kui ka vertikaalseid vahekaarte. Vahekaardid lisad lühikoodiga [TABS_R id=xx] ükskõik millisele lehele või postitusele.

Vahekaardi sees saab kasutada teksti, pilte, videot, muusikat ja pesastatud lühikoode. Külgriba jaoks on eraldi vidin. Tasuta versioon pakub lohista-ja-tilguta koostamist, kohandatud ikoone Font Awesome’i kaudu ja piiramatult vahekaarte.

Plussid:

• Töötab WooCommerce’iga, eraldi laiendus toote vahekaartide jaoks.
• Pro versioonis 20+ malli ja 500+ Google Fontsi.
• Vahekaartide lohista-ja-tilguta sorteerimine otse administraatori paneelis.

Miinused:

• WYSIWYG-redaktor lähtestab mõnikord HTML-vormingu, kontrolli pärast salvestamist.
• Pro litsents ühele saidile, tugi kuueks kuuks.

Hind: Tasuta. Pro, $9 ühe saidi kohta.

🔗 Tabs Responsive WordPress.org-is🔗 Pro live-demo

2. Custom Product Tabs for WooCommerce

Kitsas, kuid võimas tööriist: lisab kohandatud vahekaardid WooCommerce’i tootelehtedele. Standardseid vahekaarte „Kirjeldus", „Andmed" ja „Arvustused" saab eemaldada või täiendada näiteks vahekaartidega „Tarne", „Suurustabel" või „Videoülevaade".

Vahekaardi sisu sisestatakse tavalises WordPressi redaktoris: tekst, HTML, pildid, lühikoodid. Salvestatud vahekaarte rakendatakse korraga mitmele tootele. Plugin ühildub WPML-iga, mis on mitmekeelsete poodide puhul kriitilise tähtsusega.

Plussid:

• Laiendab tavalist WooCommerce’i otsingut kohandatud vahekaartide sisule.
• Vahekaardi pealkirja globaalne peitmine ilma väliste filtriteta.
• Tasuta versiooni funktsionaalsus ei ole kärbitud.

Miinused:

• Ainult WooCommerce’ile, ei sobi tavalistele postitustele ja lehtedele.
• Kasutajate arvustuste kohaselt vastab tugi aeglaselt.

Hind: Tasuta. Pro, $29.99.

🔗 Custom Product Tabs WordPress.org-is

3. Responsive Tabs

WP Darko kerge lühikoodi-plugin. Lood administraatoripaneelis vahekaartide komplekti, igaühel oma pealkiri ja sisu, kopeerid lühikoodi ja kleebid selle ükskõik kuhu. Tasuta versioonil pole piiranguid: muudad värvi, vahekaartide järjekorda ja murdepunkti, millest alates minnakse mobiilis akordionvaatele üle.

Praktikas on see kiireim viis olemasolevale saidile vahekaartide lisamiseks: paigaldamisest tulemuseni viis minutit. Toetab PHP 8, ühildub uusima WordPressi versiooniga (testitud kuni 6.9.4).

Plussid:

• Tasuta versioon on täisfunktsionaalne, kunstlike piiranguteta.
• Muudab vahekaardid kitsastel ekraanidel automaatselt akordioniks.
• Toetab pesastatud lühikoode vahekaartide sees.

Miinused:

• Pro versioon lisab peamiselt ikoone ja stiile, tuum on lihtne.
• Varasematel versioonidel olid XSS-i turvaaugud, uuenda versioonile 4.0.11.

Hind: Tasuta. Pro, alates $19.99 saidi kohta.

🔗 Responsive Tabs WordPress.org-is

4. WP Tabs

ShapedPlugini plugin mugava lühikoodigeneraatoriga. Lood piiramatul arvul vahekaardikomplekte, igaühel oma seadistuste komplekt: värvid, fondid, veerised, ikoonid. Valmis lühikood sisestatakse postitusse, lehele või vidinasse.

RTL-ühilduvus ja tõlge mitmesse keelde, pluss mitmekeelsetele projektidele. Vahekaardid vahetuvad klikil või hõljutamisel, sorteeritakse lohistamise teel. Plugina teine versioon on täielikult Gutenbergi jaoks ümber kirjutatud.

Plussid:

• 30+ stiili kohandamise võimalust tasuta versioonis.
• Lühikoodigeneraator ühildub kõigi populaarsete leheehitajatega.
• Puhas ja intuitiivne juhtpaneel.

Miinused:

• Vahekaartide muutmine ainult taustasüsteemis, lehel visuaalne eelvaade puudub.
• Pro versioon aastase tellimusega, mitte ühekordne.

Hind: Tasuta. Pro, alates $29/aasta.

🔗 WP Tabs WordPress.org-is🔗 ShapedPlugini sait

5. Tabby Responsive Tabs

Ülikerge plugin minimalistidele. Administraatoripaneeli pole, ainult lühikoodid tekstis. Lauaarvutil on horisontaalsed vahekaardid, mobiilis (kitsal ekraanil) vajuvad need automaatselt akordioniks kokku.

Arendajad hindavad: vahekaarte kohandatakse CSS-i kaudu, need toetavad semantilist pealkirjamärgendust (H1-H2 vahekaardi sisus parandab SEO-d) ja on klaviatuuriga ligipääsetavad. Font Awesome'i ikoonid lubatakse ühe märkeruuduga. Mitu vahekaardigruppi ühel lehel, pole probleemi.

Plussid:

• Laeb täpselt vajaliku, ilma üleliigse koodita.
• Klaviatuuriga ligipääsetav ja ekraanilugejasõbralik.
• Akordion mobiilis kohe kasutusvalmis.

Miinused:

• Visuaalne redaktor puudub, ainult CSS.
• Üks paigutuse tüüp: horisontaalsed vahekaardid.

Hind: Tasuta. Tabby Tabs Customizer, £24 ühe saidi jaoks või £89 piiramatule arvule.

🔗 Tabby Responsive Tabs WordPress.org-is🔗 Cubecolour site

6. Ultimate Blocks

Plugin, mis sisaldab 22 Gutenbergi plokki, millest üks on „Tabbed Content". Valida saab kolme stiili vahel: klassikalised vahekaardid, „pillid" ja allajoonimine. Värve, vahekaartide järjekorda ja ankruid seadistad otse plokiredaktori külgribal.

Lisaks vahekaartidele pakub Ultimate Blocks plokke arvustuste, sisukorra, „Jaga" nuppude ja skeemimärgistuse (KKK, HowTo) jaoks. WordPress.org-is on hinnang 4,9 tärni ja üle 60 000 aktiivse installatsiooni. Täiesti tasuta, ka äriliseks kasutuseks.

Plussid:

• Kolm vahekaardistiili (vahekaardid, pillid, allajoonimine), sobib igasse kujundusse.
• 21 täiendavat kasulikku plokki on kaasas.
• Piiranguteta tasuta, ka äriprojektide jaoks.

Miinused:

• Ainult Gutenberg, ei tööta klassikalises redaktoris ega leheehitajates.
• Vahekaartide kohandamine on piiratud plokiredaktori raamistikuga.

Hind: Tasuta. Pro, 49 $/aasta ühe saidi kohta.

🔗 Ultimate Blocks WordPress.org-is

7. Lihtne külgvahekaart

Nišitööriist üheks ülesandeks: lisab brauseriaknast vasakule või paremale vertikaalse vahekaardi. Vahekaart on fikseeritud ja jääb kerimisel nähtavaks, sobib ideaalselt kutseks tegevusele: „Kontakt", „Portfoolio", „Registreeru".

Pole graafikat, ainult CSS. Seitse standardset fonti, piiramatu värvipalett. Filter vahekaardi tingimuslikuks kuvamiseks kindlatel lehtedel ja teksti muutmiseks koodi kaudu. Pistmoodulit testitud kuni WordPress 6.9.4, uuendatud kuus kuud tagasi.

Plussid:

• Laadib ainult CSS-i, null mõju kiirusele.
• Töötab mobiilis tõrgeteta.
• Filtrid kohandatud kuvamisloogika jaoks.

Miinused:

• Üks vahekaart, ei saa hallata rohkem kui ühte.
• Täpsemaks kohandamiseks on vaja CSS-i.

Hind: Tasuta.

🔗 Simple Side Tab WordPress.org-is

Võrdlus: lühikood, plokk või vidin?

Kolm lähenemist vahekaartide lisamiseks lahendavad erinevaid probleeme. Lühikoodil põhinevad pistmoodulid on universaalsed ja töötavad igas redaktoris ja igas leheehitajas: Tabs Responsive / Responsive Tabs / WP Tabs / Tabby. Plokipõhine Ultimate Blocks on kohandatud Gutenbergile visuaalse seadistusega redaktorist lahkumata. Külgvahekaart Simple Side Tab pole isegi sisu vahekaartide, vaid navigeerimise kutse tegevusele jaoks, alati nähtav.

Custom Product Tabs seisab eraldi, see pole lehtede, vaid WooCommerce'i toodete jaoks. See ei ole konkurent ülejäänud kuuele pistmoodulile, vaid täiendus ükskõik millisele neist.

⁉️🤔 Korduma kippuvad küsimused

Kas mitut vahekaardi pistmoodulit saab korraga kasutada?

Jah, kuid mööndusega. Erinevad pistmoodulid tavaliselt ei lähe vastuollu, kui nad ei ürita hallata samu vahekaarte. Praktikas paigaldame Custom Product Tabs WooCommerce'i toodete jaoks ja WP Tabs blogilehtede jaoks, need töötavad paralleelselt probleemideta. Kontrolli pärast aktiveerimist esiotsa: kui vahekaardid kattuvad või paigutus laguneb, keela üks pistmoodulitest.

Kuidas vahekaardid SEO-d mõjutavad?

Google indekseerib vahekaartide sees olevat sisu, eeldusel et see laaditakse HTML-is lehe renderdamisel, mitte AJAX-i kaudu klikkimisel. Enamik ülevaate pistmooduleid: Tabs Responsive, WP Tabs ja Tabby renderdavad sisu serveripoolel, see jõuab lähtekoodi ja indekseeritakse. AJAX-laadimine (WP Tab Widget, mis just sel põhjusel ülevaatest välja jäeti) ei anna sisu indekseerijale. Kahtluse korral ava leht JavaScripti keelatuna ja kontrolli, kas vahekaardid on nähtavad.

Millega asendada suletud pistmoodulid Easy Side Tab ja Oxilabi Tabs Plugin?

Easy Side Tab eemaldati WordPress.org-i kataloogist 2023. aasta märtsis reeglite rikkumise tõttu. Otsene asendus, Simple Side Tab: sama külgvahekaart, kuid aktiivselt toetatud ja ei riku juhiseid. Oxilabi Tabs Plugin suleti 2024. aasta märtsis turvaaugu tõttu. Selle asemel Responsive Tabs WP Darkolt: tasuta ilma piiranguteta, lühikoodipõhine, automaatse akordioniga mobiilis.

Kas vahekaardid töötavad mobiilseadmetes?

Jah, kõik ülevaate pistmoodulid on responsiivsed. Tabby Responsive Tabs ja Responsive Tabs muudavad horisontaalsed vahekaardid kitsastel ekraanidel automaatselt akordioniks. Simple Side Tab muudab külgvahekaardi suurust ja veeriseid mobiilivaate jaoks. Kontrolli päris seadmetel: see, mis näeb ilus välja 1920px juures, võib 375px juures laguneda.

Kuidas lisada vahekaarte ilma pistmoodulita, puhta HTML/CSS/JS-iga?

Kirjuta HTML-märgendus ul-loendiga siltide jaoks ja div-konteineritega sisu jaoks, ühenda CSS :target või raadionupu trikiga ja minimaalne JS klasside vahetamiseks. Kood teema functions.php faili või lõigupistmoodulisse (Code Snippets). Valik neile, kes vajavad täielikku kontrolli märgenduse üle ja null sõltuvust kolmanda osapoole koodist.

Milline vahekaardi pistmoodul 2026. aastal paigaldada?

Kui tegemist on WooCommerce'i poega, on Custom Product Tabs ületamatu. See ei tee midagi üleliigset ega varasta kiirust.

Kui see on Gutenbergi blogi, siis Ultimate Blocks: vahekaardid pluss veel kaks tosinat kasulikku plokki, tasuta ja visuaalse seadistusega.

Kui sait on klassikalisel redaktoril või leheehitajal, siis Tabs Responsive või WP Tabs. Esimene on hea laetud tasuta funktsionaalsuse poolest, teine puhta liidese ja lühikoodigeneraatori poolest.

Kui vajad külgmist kutset tegevusele vahekaarti, siis Simple Side Tab. Turul pole midagi kiiremat ja kergemat.

Proovi ühte pistmoodulit, paigaldus ja esimene vahekaart võtavad vähem kui viis minutit. Ei sobinud, kustuta ja paigalda järgmine. Nii leiadki tööriista, mis projektis juurdub.