Uusi sivusto ilman valikkoa on kuin supermarketti ilman opasteita. Missä on kassa? Millä käytävällä on leipä? Käyttäjät poistuvat, koska eivät löydä etsimäänsä.

Sama juttu WordPressin kanssa. Vakioasennus ei luo valikkoa automaattisesti, vaan se pitää rakentaa käsin. Onneksi kehittäjät tekivät tästä visuaalista: ei koodia, pelkkää raahaamista ja muutama klikkaus. Navigaatiovalikko kootaan sivuista, kategorioista ja mukautetuista linkeistä yksinkertaisessa Ulkoasu → Valikot -käyttöliittymässä.

Jos sinulla on jo sisältöä mutta ei navigaatiota, menetät sekä kävijöitä että hakukonenäkyvyyttä. Selkeä valikkorakenne auttaa Googlea ymmärtämään sivustosi arkkitehtuurin. Alla on vaiheittainen opas ensimmäisestä klikkauksesta valmiiseen valikkoon, jossa on alavalikot ja vimpainsijoittelu.

💡 Pikaopas:

• Avaa valikkoeditori: Ulkoasu → Valikot, anna sille nimi ja klikkaa "Luo valikko"
• Lisää kohteita: sivuja, kategorioita, mukautettuja linkkejä editorin vasemman paneelin kautta
• Järjestä järjestys raahaamalla ja luo alavalikot siirtämällä kohteita oikealle
• Määritä näyttösijainnit ja tallenna työsi
• Tarvittaessa näytä valikko sivupalkissa "Mukautettu valikko" -vimpaimen kautta

Valikon mahdollisuudet riippuvat teemastasi. Jotkin mallipohjat tarjoavat yhden paikan navigaatiolle, toiset neljä tai viisi: päävalikko, mobiili, alatunniste, some. Jotkin teemat tukevat animoituja valikoita ja kuvia sisältäviä megavalikoita. Mutta perusmekaniikka (sivut, linkit, kategoriat) on sama kaikilla WordPress-sivustoilla.

Seuraavaksi käymme jokaisen vaiheen läpi yksityiskohtaisesti. Vaikka olisit juuri avannut hallintapaneelin ensimmäistä kertaa, tämän oppaan lopussa sinulla on toimiva valikko.

Vaihe 1: Ensimmäisen valikon luominen

Kirjaudu hallintapaneeliin ja siirry kohtaan Ulkoasu → Valikot. Tuoreessa WordPress-asennuksessa sivu on enimmäkseen tyhjä: vasen paneeli näyttää käytettävissä olevat kohteet, oikea alue on listan rakentamista varten.

Ensimmäinen toimenpide: anna valikolle nimi, jotta erotat ne toisistaan, jos luot useita:

• Kirjoita selkeä nimi Valikon nimi -kenttään, esimerkiksi "Päävalikko" tai "Päänavigaatio"

• Klikkaa Luo valikko -painiketta

Näytön oikea puoli muuttuu heti: "Valikon rakenne" ja "Valikon asetukset" -lohkot ilmestyvät. Koska rakenne on tyhjä, siirrytään lisäämään sisältöä.

Et todennäköisesti tarvitse viittä tai kuutta valikkoa kerralla. Mutta mahdollisuus luoda erillinen navigaatio alatunnisteeseen tai mobiiliversioon on olemassa; WordPress ei aseta määrällisiä rajoituksia.

Vaihe 2: Kohteiden lisääminen valikkoon

Nyt päähuomio on editorin vasemmassa paneelissa. Se sisältää välilehdet, joissa on kaikki, mitä voit lisätä navigaatioon:

• Sivut: luettelo kaikista sivustosi julkaistuista sivuista
• Artikkelit: blogiartikkelit
• Kategoriat: taksonomiat, jotka ryhmittelevät artikkelisi
• Mukautetut linkit: mitkä tahansa URL-osoitteet, mukaan lukien ulkoiset sivustot

Tyypillisessä blogissa valikon ydin koostuu sivuista ("Tietoa", "Yhteystiedot", "Palvelut") sekä kategorioista ("Uutiset", "Oppaat", "Arvostelut"). Prosessi on tämä:

• Avaa haluttu välilehti
• Valitse valintaruudut niiden sivujen/kategorioiden kohdalta, joiden pitäisi näkyä valikossa
• Klikkaa Lisää valikkoon
• Toista muille välilehdille

Sivut ja kategoriat haetaan automaattisesti; valitse vain valintaruudut. Mukautetut linkit toimivat hieman eri tavalla: tarvitset täyden URL-osoitteen (esimerkiksi https://developer.wordpress.org) ja tekstinimikkeen (mitä kävijät näkevät valikossa paljaan osoitteen sijaan).

Huomio: kategoriat toimivat artikkeliryhminä. Kun kävijä klikkaa valikossa "Oppaat", hän päätyy sivulle, jolla on kaikki kyseisen kategorian artikkelit. Lisätietoja kategorioiden toiminnasta on tässä SitePointin artikkelissa.

Vaihe 3: Järjestyksen järjestäminen ja alavalikoiden luominen

Kun oikeassa sarakkeessa on vähintään kaksi kohdetta, voit muuttaa niiden järjestystä. WordPress tarjoaa kaksi tapaa.

Raahaa ja pudota. Pidä kohdetta hiiren vasemmalla painikkeella ja vedä se ylös tai alas. Kohteet vaihtavat paikkaa välittömästi; käyttöliittymä toimii ilman sivun uudelleenlatauksia.

Nuolen käyttäminen. Klikkaa pientä nuolta kohteen nimen oikealla puolella; kortti, jossa on vaihtoehtoja, avautuu:

• Siirrä ylös / alas: siirrä yhden position verran
• Ylimmäksi / Alkuun: siirrä ensimmäiselle riville
• **Alle **** **: muuta alakohteeksi (katso alla)
• **Ulos **** **: palauta ylätasolle
• Poista: kortin alareunan punainen linkki poistaa kohteen VAIN valikosta vaikuttamatta varsinaiseen sivuun tai artikkeliin

Alavalikot luodaan yksinkertaisesti siirtämällä kohteita oikealle. Pidä kohdetta, siirrä sitä hieman ylemmän kohteen oikealle puolelle, ja siitä tulee lapsikohde. Sivustolla tämä kohde avautuu, kun kävijät vievät hiiren ylemmän kohteen päälle.

Tärkeää: älä liioittele syvyyden kanssa. Yksi sisennystaso on normaali. Kaksi on rajatapaus hyvin haaroittuneille sivustoille. Kolme on liikaa: kävijät eksyvät, ja mobiilinäytöillä tällainen valikko on sokkelo.

Saman tuloksen voit saavuttaa kohdekortin kautta: avaa nuolella, klikkaa **Alle **** **. Peruuttaaksesi käytä **Ulos **** ** tai yksinkertaisesti vedä vasemmalle.

Kohteen poistaminen valikosta ei poista sivua sivustoltasi. Mukautetut linkit katoavat pysyvästi, kun ne poistetaan, joten jos aiot palauttaa sellaisen myöhemmin, kirjoita URL-osoite erikseen muistiin.

Vaihe 4: Valikon asetukset ennen tallennusta

Ennen kuin klikkaat "Tallenna valikko", tarkista kaksi parametria oikean sarakkeen alareunasta.

Lisää sivut automaattisesti. Jos tämä on käytössä, jokainen uusi ylätason sivu (ilman yläsivua) lisätään automaattisesti tähän valikkoon. Pienillä sivustoilla tämä vaihtoehto säästää aikaa. Kymmeniä sivuja sisältävillä sivustoilla se aiheuttaa yleensä kaaosta; pidä se pois käytöstä.

Näyttösijainti. Tässä luetellaan paikat, jotka teemasi on varannut valikoille: päänavigaatio, alatunniste, mobiilivalikko ja niin edelleen. Valitse tarvitsemasi; yksi valikko voidaan näyttää useassa sijainnissa.

Kun rakenne ja asetukset ovat tyydyttävät, klikkaa Tallenna valikko. Painike näkyy sekä editorin ylä- että alareunassa; ne toimivat samalla tavalla.

Vaihe 5: Lisäasetukset "Näyttöasetukset"-kohdan kautta

Aivan valikkoeditorisivun yläreunassa on Näyttöasetukset-välilehti. Laajenna se, niin näet luettelon lisävaihtoehdoista, jotka on oletuksena piilotettu.

Mitä voit ottaa käyttöön:

• Tunnisteet ja artikkeliformaatit: jos teemasi käyttää formaattityyppejä (aside, galleria, video), voit lisätä ne valikkoon erillisinä kohteina
• Linkin kohde: avaa kohde uudessa välilehdessä (target="_blank")
• CSS-luokat: mukautetut luokat tiettyjen kohteiden tyylittelyyn CSS:n avulla
• Linkin suhde (XFN): mikroformaatti sivujen välisten suhteiden määrittelyyn (harvoin tarpeen; jätä tyhjäksi)
• Kuvaus: teksti, joka näkyy, kun hiiri viedään kohteen päälle (riippuu teemasta)

Käytännössä hyödyllisimmät vaihtoehdot tästä luettelosta ovat uudessa välilehdessä avaaminen (ulkoisille linkeille) ja CSS-luokat (suunnittelutehtäviin). Loput ovat niche-työkaluja, joihin useimmat sivustot eivät koske.

Vaihe 6: Valikon näyttäminen sivupalkissa vimpaimien kautta

Jos teemasi tukee vimpaimia, valikoita voidaan sijoittaa paitsi ylätunnisteeseen myös sivupalkkiin, alatunnisteeseen tai mille tahansa muulle vimpainalueelle.

Prosessi:

• Siirry kohtaan Ulkoasu → Vimpaimet
• Etsi Mukautettu valikko -vimpain käytettävissä olevasta luettelosta
• Vedä se halutulle alueelle, esimerkiksi "Sivupalkki" tai "Alatunnisteen vimpaimet"
• Valitse pudotusvalikosta aiemmin luomasi valikko
• Lisää otsikko (näkyy valikon yläpuolella sivupalkissa) ja klikkaa Tallenna

Tämä mekanismi toimii sekä vanhemmille teemoille, jotka käyttävät "Perinteisiä vimpaimia", että lohkopohjaisille teemoille, jotka käyttävät sivustoeditoria; logiikka on sama, vain käyttöliittymä muuttuu.

⁉️🤔 Usein kysytyt kysymykset

Voinko luoda kaksi eri valikkoa ja näyttää ne eri paikoissa?

Kyllä, ilman rajoituksia. Luo useita valikoita Ulkoasu → Valikot -kohdassa ja määritä kullekin oma näyttösijaintinsa. Yksi valikko ylätunnisteeseen, toinen alatunnisteeseen, kolmas sivupalkkiin vimpaimien kautta. Käytettävissä olevien paikkojen määrä riippuu teemastasi: tyypillisesti 2-4 paikkaa.

Entä jos teemassani on vain yksi valikkopaikka?

Käytä vimpaimia. Ulkoasu → Vimpaimet -kohdan kautta voit sijoittaa lisävalikoita sivupalkkiin tai alatunnisteeseen, vaikka teema ei rekisteröisikään sinne erityisiä paikkoja. Vaihtoehtoisesti käytä lisäosaa laajennettuun navigaatioon; esimerkiksi Max Mega Menu lisää megavalikot ja ylimääräisiä sijoitusvaihtoehtoja ilman koodin muokkaamista.

Miten lisään valikon sivustoni mobiiliversioon?

Useimmat modernit teemat rakentavat mobiilivalikon automaattisesti samasta päävalikosta. Valitset sen vain näyttösijaintien luettelosta, ja teema mukauttaa näytön mobiilinäytöille (hampurilaiskuvake, pudotusvalikko). Jos teemasi ei tee näin, etsi mukauttajan asetuksista (Ulkoasu → Mukauta) Valikot / Mobiilivalikko -osio.

Voinko lisätä WooCommerce-ostoskorin tai hakupainikkeen valikkoon?

En vakiotyökaluilla. Oletuksena valikoihin voi lisätä vain sivuja, kategorioita ja mukautettuja linkkejä. Ostoskorikuvakkeisiin, hakupainikkeisiin tai kirjautumispainikkeisiin tarvitset joko erikoistuneen lisäosan (kuten Menu Icons by ThemeIsle) tai teeman, joka tukee tällaisia elementtejä mukauttajan asetuksissa.

Rikkoutuuko valikko, kun vaihdan teemaa?

Itse valikot eivät rikkoudu; ne ovat sidoksissa sivustoon, eivät teemaan. Mutta määritetyt näyttösijainnit kyllä, koska jokainen teema rekisteröi omat positionsa omilla nimillään. Teeman vaihdon jälkeen mene valikkoeditoriin ja määritä sijainnit uudelleen "Valikon asetukset" -lohkossa.

Lopputulos: navigaatio rakennettu kuudessa vaiheessa

Ensimmäisen valikon luominen vie kolme minuuttia, jos tiedät, mistä klikata. Käytännössä työnkulku näyttää tältä: annoit nimen → lisäsit 4-5 avainsivua ja pari kategoriaa → järjestit järjestyksen → tallensit. Siinä kaikki. Siitä voit hienosäätää: alavalikot rakenteeseen, lisäsijoittelut vimpaimien kautta, CSS-luokat tarkempaan tyylittelyyn.

Pääsääntö: rakenna valikot kävijöitä, älä estetiikkaa varten. Kolme tai neljä selkeää kohdetta on parempi kuin kymmenen pientä, joita kukaan ei ymmärrä. Jos sivua on vaikea löytää kahden klikkauksen päästä valikosta, navigaatiossasi on todennäköisesti jotain vialla.

Tarkista, miltä valikko näyttää puhelimella; kolmasosa WordPress-sivustojen liikenteestä tulee mobiililaitteista. Huonosti muotoiltu alavalikko älypuhelimessa tekee kaikista navigaation eduista hyödyttömiä.