Mobiililiikenne ohitti työpöytäliikenteen jo vuonna 2018, ja vuoteen 2025 mennessä Statistan mukaan älypuhelimet ja tabletit muodostivat 58% verkkosivustokäynneistä. Silti keskimääräinen WordPress-sivuston valikko toimii yhä 24-tuumaisen näytön logiikalla: tusina linkkiä rivissä, kolme sisennystasoa, hoverilla avautuvat pudotusvalikot. 375 pikseliä leveällä näytöllä oikean kohdan osuminen ensimmäisellä yrittämällä on lähes mahdotonta.

Ongelma ei ole teemassa eikä WordPressissä itsessään. Vakiofunktio wp_nav_menu() ei erottele laitteita; se tuottaa identtistä merkkausta sekä työpöydälle että mobiiliin. Tämän katsauksen lisäosat kaappaavat valikon tulosteen ja muokkaavat sen rakenteen mobiilinäytöille: ei koodimuutoksia, ei teeman vaihtoa, ei kehittäjää tarvita.

Alla on neljä työkalua, jotka testasimme tuotantosivustoilla kesäkuussa 2026: yksinkertaisesta hampurilaisvalikosta minimaalisilla asetuksilla aina megavalikkoon, jonka sisällä on karttoja ja WooCommerce-widgettejä. Lisäksi säännöt, joita ilman edes paras lisäosa ei tee valikostasi käyttäjäystävällistä.

💡 Pikavertailu:

• Asenna Responsive Menu, jos tarvitset yli 150 asetusta ja täyden visuaalisen hallinnan valikostasi
• Valitse Max Mega Menu, kun valikon on toimittava yhtä hyvin kaikilla laitteilla puhelimista 4K-näyttöihin
• Ota UberMenu kaupallisiin projekteihin, joissa navigaatio vaikuttaa suoraan konversioon
• Käytä WP Responsive Menu -lisäosaa yksinkertaisille sivustoille, joissa "asenna ja unohda" riittää

Mobiilivalikon säännöt: mikä toimii vuonna 2026

Ennen lisäosan asentamista tässä on neljä periaatetta, joita ilman mobiilinavigaatio pysyy turhauttavana. Ne eivät riipu mistään tietystä työkalusta ja perustuvat käytännön kokemukseen kymmeniltä sivustoilta.

Sääntö 1: enintään viisi kohtaa. Työpöydällä 12 linkin valikko näyttää hyvältä. Älypuhelimessa se on loputon vieritys, jota kukaan ei jaksa selata loppuun. Pidä vain se, millä on eniten merkitystä: palvelut, yhteystiedot, blogi, tietoa meistä. Kaikki muu menee alatunnisteeseen tai sisäsivuille.

Sääntö 2: yhteystiedot keskiöön. Mobiilikävijät etsivät yleensä puhelinnumeroa, osoitetta tai yhteydenottolomaketta. Googlen tutkimus osoitti, että 55% käyttäjistä sanoo huonon mobiilikokemuksen vahingoittavan suoraan brändimielikuvaa. Sijoita yhteystiedot valikon yläosaan tai erilliseksi painikkeeksi; älä pakota ihmisiä selaamaan niiden perässä.

Sääntö 3: mahdollisimman vähän napautuksia. Ihanteellinen määrä on kaksi napautusta mille tahansa sivulle. Avaa valikko, napauta osiota, päädy sivulle. Kolme sisennystasoa mobiilissa on epäonnistuminen: käyttäjät eksyvät ja poistuvat löytämättä tarvitsemaansa.

Sääntö 4: hampurilaiskuvake ja teksti. Kolme viivaa nurkassa tunnistetaan, mutta lisää sana "Valikko", kun se on mahdollista. Ja varmista, että napautusalue on riittävän suuri peukalolle osumatta ohi: jos kuvake on sormenpäätä pienempi, käyttäjät menevät ohi ja poistuvat sivustolta.

4 Responsiivisen valikon lisäosaa: vertailu

1. Responsive Menu

Muokattavin ilmainen lisäosa mobiilivalikoille WordPress.orgin hakemistossa. Kehittäjä ExpressTech Systems on ylläpitänyt sitä vuodesta 2014, ja kesäkuussa 2026 lisäosa saa päivityksiä kahden tai kolmen kuukauden välein. Uusin versio 4.7.2 julkaistiin toukokuussa 2026.

Käytännössä tämä ei ole vain hampurilaisvalikon käyttöönottoa; se on täysiverinen rakennustyökalu. Värit, fontit, koot, painikkeen sijainti, liukusuunta (vasen, oikea, ylä, ala), avausanimaatio: kaikki on määritettävissä hallintapaneelista live-esikatselulla. Muuta parametria ja näe tulos välittömästi ilman sivun päivitystä.

Erityismaininnan ansaitsee valikon sisäinen monipalsta-asettelu: linkit ryhmitellään ja sijoitetaan vierekkäin, kuten työpöytäasettelussa, mutta mobiilinäytöllä. Lisäosa toimii WPML:n ja Polylangin kanssa monikielisille sivustoille. Pro-versio lisää somekuvakkeet, valikonsisäisen haun ja WooCommerce-integraation.

• Hyödyt: live-esikatselu ilman sivun uudelleenlatausta, yli 150 asetusta ilmaisversiossa, aktiivinen kehitys (toukokuu 2026), RTL- ja monikielituki, useita sarakkeita valikossa.
• Haitat: heikolla hostingilla lisäosan hallinta voi hidastella asetusten määrän vuoksi, Pro-ominaisuudet (some, haku) ovat maksumuurin takana.
• Hinta: Ilmaisversio osoitteessa WordPress.org. Pro alkaen $29/vuosi osoitteessa responsive.menu.
• Lataa: 🔗 Responsive Menu WordPress.orgissa | 🔗 Live-demo

2. WP Responsive Menu

Jos Responsive Menu on rakennustyökalu, MagniGenien WP Responsive Menu on kytkin: laita se päälle ja unohda koko asia. Yli 30 000 aktiivista asennusta ja 4,3★ arvosana vahvistavat, että useimmille sivuille se riittää.

Lisäosa lisää esiin liukuvan valikon perusasetuksilla: liukusuunta, logo valikon ylätunnisteeseen, tiettyjen kohteiden piilotus mobiilissa, haku valikossa. Käyttöönotto kestää alle minuutin: valitse valikko listalta, valitse liukusuunta, tallenna, ja se toimii minkä tahansa teeman kanssa.

Pro-versio lisää somekuvakkeet, WooCommerce-tuen ja Google Fonts -muokkauksen. Mutta rehellisesti sanottuna, jos tarvitset kaikkia näitä ominaisuuksia, katso Responsive Menua, jossa ne on toteutettu perusteellisemmin ja ilman lisämaksuja jokaisesta.

Lisäosa päivitettiin kesäkuussa 2026 (versio 3.2.1), mutta jotkut käyttäjät valittavat hitaasta tukivasteesta. Käyntikorttisivulle tai laskeutumissivulle se on enemmän kuin riittävä. Projektiin, jossa valikko on kriittinen, katso vaihtoehtoa 1 tai 3.

• Hyödyt: minimaalinen asennus (alle minuutti), toimii minkä tahansa teeman kanssa, pyyhkäisyeleet avaamiseen ja sulkemiseen, ei ristiriitoja Genesiksen ja Thesiksen kanssa.
• Haitat: tuki vastaa hitaasti, Pro-ominaisuudet ovat vaatimattomampia kuin kilpailijoilla, harvinaiset päivitykset.
• Hinta: Ilmaisversio osoitteessa WordPress.org. Pro alkaen $19.
• Lataa: 🔗 WP Responsive Menu WordPress.orgissa

3. Max Mega Menu

WordPress-hakemiston suosituin valikkolisäosa: yli 400 000 aktiivista asennusta ja 4,8★ arvosana. Kesäkuussa 2026 versio 3.10.5. Suurin ero kahteen ensimmäiseen on se, että Max Mega Menu ei ainoastaan mukauta valikoita mobiililaitteille, vaan se muuntaa tavallisen WordPress-valikon megavalikoksi, jossa on sarakkeita, kuvakkeita ja widgettejä.

Mobiiliversion kannalta tästä on odottamaton hyöty: työpöydälle rakentamasi valikko kutistuu automaattisesti hampurilaisvalikoksi älypuhelimissa. Ei tarvitse määrittää kahta versiota; yksi rakenne toimii kaikkialla. Sisäänrakennetun vedä ja pudota -editorin avulla voit raahata kohteita sarakkeisiin, lisätä kuvakkeita ja tallentaa.

Lisäosa toimii minkä tahansa WordPress-valikon kanssa, ei vaadi teeman vaihtamista ja käsittelee oikein jopa kolme sisennystasoa. Mobiilinäytöillä alavalikot avautuvat napauttamalla eikä hiirellä osoittamalla: tämä on puhelimille kriittinen yksityiskohta, joka monista "responsiivisista" teemoista puuttuu.

• Hyvää: yli 400 000 asennusta ja 4,8★ arvosana, vedä ja pudota -editori, automaattinen mega menu -mukautus mobiililaitteille, toimii minkä tahansa teeman kanssa, sisäänrakennetut Dashicons-kuvakkeet.
• Huonoa: mega menun asennus on monimutkaisempi kuin yksinkertaisen hampurilaisvalikon, ylimitoitettu käyntikorttisivustoille.
• Hinta: ilmainen versio osoitteessa WordPress.org. Pro alkaen 29 $/vuosi.
• Lataa: 🔗 Max Mega Menu WordPress.orgissa

4. UberMenu

Ainoa täysin premium-lisäosa tässä vertailussa. UberMenu maksaa CodeCanyonissa 25 dollaria (kertalisenssi, ei tilaus) ja tekee valikoille asioita, joista tavallinen wp_nav_menu() ei voisi uneksiakaan: Google Maps -karttoja, yhteydenottolomakkeita, kuvakkeita, tuotekuvia, kaikki navigointipalkin sisällä.

Määritykset tehdään WordPressin mukauttamistyökalun kautta: näet valikon reaaliajassa ja muutat mitä tahansa parametria sarakkeen leveydestä erottimen väriin. Ei koodia, ei CSS-virityksiä. Mobiililaitteilla UberMenu muuttaa megavalikon automaattisesti pystysuuntaiseksi listaksi, jossa on laajennettavat alavalikot ja kosketustuki.

Lisäosa saa säännöllisesti päivityksiä, dokumentaatio on perusteellista ja tuki vastaa. Mutta 25 dollarin hinta ja ilmaisversion puute tarkoittavat, että UberMenua kannattaa harkita vain kaupallisiin projekteihin: verkkokauppoihin, tuoteluetteloihin, yrityssivustoihin, joissa navigaatiolla on suoraa kaupallista painoarvoa.

• Edut: mitä tahansa sisältötyyppiä valikon sisällä (kartat, lomakkeet, kuvat), mukauttamistyökalun live-esikatselu, kertalisenssi ilman tilausta, säännölliset päivitykset.
• Haitat: ei ilmaisversiota (vain 25 dollaria), ylimitoitettu blogeille ja käyntikorteille, vaatii aikaa kaikkien ominaisuuksien hallintaan.
• Hinta: 25 dollarin kertalisenssi CodeCanyonissa.
• Lataus: 🔗 UberMenu CodeCanyonissa | 🔗 UberMenu demo

Mobiilivalikon pystytys 10 minuutissa

Teoria ja lisäosalista ovat puolet työstä. Toinen puoli on nähdä prosessi omin silmin. Tämä video näyttää täydellisen responsiivisen valikon WordPress-pystytyksen alusta loppuun: lisäosan asennuksesta julkaisuun.

⁉️🤔 Usein kysytyt kysymykset

Tarvitsenko edes erillistä lisäosaa mobiilivalikoille? Nykyaikaiset teemat ovat jo valmiiksi responsiivisia.

Responsiivinen teema mukauttaa asettelun, ruudukon, fontit ja sarakkeet. Mutta valikko pysyy samana wp_nav_menu()-funktiona, joka on vain tyylitelty mobiilinäytöille media queryjen avulla. Kun sinulla on 8-10 valikkokohtaa ja sisäkkäisiä tasoja, pelkät CSS-säännöt eivät riitä; tarvitset erilaisen navigaatiorakenteen. Lisäosa ei "korjaa" teemaa, vaan korvaa valikon näyttölogiikan mobiililaitteilla.

Mikä lisäosa kannattaa valita WooCommerce-verkkokauppaan?

Jos budjetti ei ole rajoitettu, UberMenu. Tuotekortit, hinnat ja "Lisää ostoskoriin" -painike suoraan valikossa: se on konversiota, ei pelkkää navigaatiota. Jos tarvitset ilmaisen aloituksen, Max Mega Menu: se integroituu WooCommercen kanssa suoraan paketista ja näyttää tuotteet megavalikossa widgettien kautta ilman lisäosia.

Haittaako lisäosa hakukoneoptimointia? Valikko kuitenkin indeksoidaan.

Ei, jos lisäosa on hyvin rakennettu. Responsive Menu, Max Mega Menu ja UberMenu eivät piilota valikoita hakukoneilta display:none-määrityksellä. Valikon merkintäkieli pysyy DOMissa; Google näkee ja indeksoi sen. Ongelma on lisäosissa, jotka renderöivät valikot selainpuolen JavaScriptillä, mutta yksikään tämän vertailun lisäosista ei tee niin.

Voinko käyttää kahta valikkolisäosaa samanaikaisesti?

Voit, mutta ei pitäisi. Kaksi wp_nav_menu()-funktiota muokkaavaa lisäosaa aiheuttavat lähes varmasti ristiriidan: toinen kaappaa suodattimen, toinen ei enää laukea, tai molemmat vaikuttavat ja valikko hajoaa. Kokemus testisivustoilta osoittaa: valitse yksi työkalu ja määritä se kaikille laitteille.

Miten varmistan, että valikko on oikeasti kätevä puhelimella?

Avaa sivusto oikealla älypuhelimella, älä Chrome DevToolsin emulaattorissa. Kokeile käyttää yhtä kättä ja peukaloa jokaisen kohdan napauttamiseen. Jos yksikin vaatii "tähtäämistä", napautuskohde on alle 48 pikseliä ja sitä on suurennettava. Navigoi etusivulta syvimmälle sivulle: jos siihen menee yli 5 sekuntia tai 3 napautusta, yksinkertaista rakennetta.

Mitä teen, jos valikko hajoaa lisäosan asennuksen jälkeen?

Ensiksi: tarkista selaimen konsoli JavaScript-virheiden varalta (F12, Console-välilehti). Yleinen syy on ristiriita teeman jQuery-version tai toisen lisäosan kanssa. Toiseksi: vaihda väliaikaisesti vakio-WordPress-teemaan (Twenty Twenty-Five); jos valikko toimii, ongelma on teemassa, ei lisäosassa. Kolmanneksi: poista välimuistilisäosat käytöstä asennuksen ajaksi, muuten näet valikon vanhan version.

Mitä asentaa: lopullinen tuomio

Neljä lisäosaa kattaa koko tarpeiden kirjon aloitussivuista verkkokauppoihin. Valinta tiivistyy kolmeen skenaarioon:

• Jos tarvitset maksimaaliset säädöt ilmaiseksi, asenna Responsive Menu. Yli 150 vaihtoehtoa, live-esikatselu, aktiivista kehitystä päivityksillä kahden, kolmen kuukauden välein. Paras vastine (ilmainen) WordPress.orgin hakemistossa.

• Jos valikon on oltava yhtenäinen työpöydällä ja mobiilissa, valintasi on Max Mega Menu. Yli 400 000 asennusta ja 4,8★ arvosana eivät valehtele: lisäosa toimii yhtä hyvin kaikilla näytöillä, ja vedä ja pudota -editori säästää tunteja koodausta.

• Jos budjetti sallii ja valikko on keskeinen konversioelementti, osta UberMenu. Kartat, lomakkeet ja tuotteet navigaation sisällä maksavat 25 dollaria takaisin jo ensimmäisestä tilauksesta.

Säästä WP Responsive Menu "asenna ja unohda" -tapauksiin: käyntikorttisivusto, viiden sivun aloitussivu, blogi, jossa on yksinkertainen rakenne.

Jos olet uudistamassa sivustosi rakennetta, tässä on opas WordPress-valikon pystytykseen koodilla ja lisäosilla. Ja kun valikkosi on valmis ja on aika yleiselle mobiilioptimoinnille, tutustu lisäosakokoelmaan mobiileille WordPress-sivustoille.