Valikko on sivustosi luuranko. Käyttäjä silmäilee sen läpi sekunneissa: jos ei ole selvää, mistä klikata, hän poistuu. Perus WordPress -rakentaja kohdasta "Ulkoasu → Valikot" kokoaa navigaation minuutissa, mutta lopputulos näyttää paljaalta tekstinauhalta. Ei kuvakkeita, ei vierityksen mukana pysyvää toimintoa, ei kunnollista mobiiliversiota.

Ongelma on syvempi kuin miltä näyttää: oletustoiminnallisuus riittää ensimmäisiksi päiviksi julkaisun jälkeen, mutta pian tarvitset asioita, joita ei yksinkertaisesti ole ytimessä. Kuvakkeet valikkokohtiin, kirjautumispainike suoraan navigaatioon, shortcode valikon lisäämiseksi artikkelin runkoon, älykäs mobiilipaneeli: kaikki tämä vaatii joko koodia tai lisäosan.

Tämä artikkeli käsittelee molemmat lähestymistavat: kevyet säädöt functions.php- ja style.css-tiedostojen kautta sekä parhaat aktiivisesti ylläpidetyt lisäosat edistyneisiin valikoihin. Materiaali toimii klassisten teemojen, lohkoteemojen ja minkä tahansa suositun kehyksen kanssa.

💡 Pikakatsaus:

• Asenna Menu Icons -lisäosa ja lisää kuvakkeet valikkokohtiin viidessä minuutissa ilman koodia
• Lisää wp_loginout-funktio functions.php-tiedostoon, ja kirjautumispainike ilmestyy suoraan navigaatioon
• Rekisteröi valikon shortcode ja tulosta valmis valikko mihin tahansa sivustolla
• Tee valikosta vierityksessä pysyvä kolmella CSS-rivillä tai yhdellä kolmesta lisäosasta
• Valitse edistynyt rakentaja kolmesta vaihtoehdosta: UberMenu, Max Mega Menu tai QuadMenu
• Määritä mobiilinavigaatio WP Mobile Menulla tai Mobilla, joissa on kosketusystävällinen käyttöliittymä

1. Valikkokohtien kuvakkeet Menu Iconsilla

Nopea tapa elävöittää navigaatiota: lisää kuvakkeet osioiden nimien viereen. Silmä "tarttuu" kuvakkeeseen ennen tekstiä, ja parin käynnin jälkeen kuvake jää mieleen paremmin kuin mikään nimike.

Ilmainen Menu Icons -lisäosa ThemeIsle-tiimiltä hoitaa tämän tehtävän, ja sillä on yli 400 000 aktiivista asennusta WordPress.orgissa ja 4,4 arvosana. Koodia ei tarvita.

Vaiheet:

• Asenna lisäosa kohdasta "Lisäosat → Lisää uusi" ja hae "Menu Icons"
• Aktivoi ja siirry kohtaan "Ulkoasu → Valikot"
• Laajenna mikä tahansa kohta, jolloin kuvakkeen valintalohko tulee näkyviin
• Valitse kuvake Dashiconsista (sisäänrakennettu WordPressiin), Font Awesomesta tai lataa oma
• Säädä sijainti ja koko ja tallenna

Konepellin alla lisäosa lisää CSS-luokan kuvakkeineen <li>-elementtiin: siisti ratkaisu ilman teemaristiriitoja. Se tukee Dashiconeja, Font Awesomea, Elusive Iconseja ja Genericoneja. Toimii minkä tahansa valikon kanssa, joka on rekisteröity tavallisella wp_nav_menu-funktiolla.

🔗 Menu Icons WordPress.orgissa

2. Kirjautumis- ja uloskirjautumispainike suoraan valikossa

Jos sivustollasi on rekisteröityminen, käyttäjät tarvitsevat nopean pääsyn ilman /wp-login.php-sivun etsimistä. "Kirjaudu sisään"- tai "Kirjaudu ulos" -linkki on suoraan päävalikossa ja vaihtuu automaattisesti tilan mukaan.

Tämä ratkaistaan yhdellä funktiolla functions.php-tiedostossa:

1
function add_login_logout_link($items, $args) {
2
    $loginoutlink = wp_loginout('index.php', false);
3
    $items .= '<li>'. $loginoutlink .'</li>';
4
    return $items;
5
}
6
add_filter('wp_nav_menu_items', 'add_login_logout_link', 10, 2);

Koodinpätkä koukuttuu wp_nav_menu_items-koukkuun ja lisää <li>-elementin linkkeineen minkä tahansa valikon loppuun. wp_loginout()-funktio tunnistaa tilan itse: jos käyttäjä on kirjautunut ulos, se näyttää "Kirjaudu sisään"; jos todennettu, "Kirjaudu ulos" ja ohjaa samalle sivulle.

Kun olet tallentanut tiedoston, lataa sivusto uudelleen ja tarkista molemmat tilat. Jos haluat ohjata käyttäjän tietylle sivulle kirjautumisen jälkeen, korvaa wp_loginout()-funktion ensimmäinen argumentti 'index.php' halutulla URL-osoitteella.

3. Shortcode valikon näyttämiseksi missä tahansa

WordPress antaa sinun määrittää valikon ylätunnisteeseen, alatunnisteeseen tai sivupalkkialueelle, juuri sinne, minne teema on varannut tilaa. Mutta entä jos tarvitset valikon artikkelin sisään, laskeutumissivulle tai tekstiwidgettiin?

Vastaus on oman shortcoden rekisteröinti:

1
function menu_function($atts, $content = null) {
2
    extract(
3
        shortcode_atts(
4
            array( 'name' => null, ),
5
            $atts
6
        )
7
    );
8
    return wp_nav_menu(
9
        array(
10
            'menu' => $name,
11
            'echo' => false
12
        )
13
    );
14
}
15
add_shortcode('menu', 'menu_function');

Lisää koodi functions.php-tiedostoon, tallenna ja kirjoita mihin tahansa sivustolla:

[menu name="main-menu"]

Ota nimi kohdasta "Ulkoasu → Valikot", jossa se näkyy kohdeluettelon yläpuolella. Shortcode kutsuu tavallista wp_nav_menu()-funktiota estetyllä tulostuksella ('echo' => false) ja palauttaa valmiin HTML-merkinnän.

Näin voit pitää yleisen navigaation alatunnisteessa, lisänavigaation tietyn artikkelin sivupalkissa ja koota erillisen valikon laskeutumissivulle ilman minkäänlaista teemasidonnaisuutta.

4. Hakukenttä navigointipalkissa

Tavallinen WordPressin hakuwidgetti sijaitsee sivupalkissa. Mutta jos sivupalkkia ei ole tai se siirtyy mobiilissa alas, kävijät eivät yksinkertaisesti löydä hakua. Siirretään se suoraan valikkoon.

Perusversio käyttäen samaa wp_nav_menu_items-suodatustekniikkaa:

1
add_filter( 'wp_nav_menu_items','add_search_box', 10, 2 );
2
function add_search_box( $items, $args) {
3
    $items .= '<li>'. get_search_form( false ). '</li>';
4
    return $items;
5
}

get_search_form(false)-funktio palauttaa hakulomakkeen HTML:n tulostamatta sitä ruudulle. Kenttä kiinnittyy viimeiseen valikkokohtaan; todennäköisesti tarvitset asemointia. Lisää CSS-luokka <li>-elementtiin:

1
$items .= '<li class="searchbox-position">'. get_search_form( false ). '</li>';

Ja määritä teemasi style.css-tiedostossa marginaalit:

1
.searchbox-position {
2
    margin-top: 15px;
3
    margin-right: 20px;
4
}

Kolme riviä PHP:tä ja pari riviä CSS:ää. Lopputulos: hakukenttä näkyy aina, millä tahansa resoluutiolla.

5. Vierityksessä mukana pysyvä valikko

Sticky-valikolla tarkoitetaan navigointipalkkia, joka pysyy ruudun yläreunassa ja kulkee käyttäjän mukana sivua alas selattaessa. Se on kätevä aloitussivuilla, pitkissä artikkeleissa ja verkkokaupoissa: ei tarvitse selata takaisin ylös siirtyäkseen toiseen osioon.

Tapa 1: CSS (ilmainen, ei lisäosia)

Etsi teemasi päävalikon valitsin, yleensä .nav-menu, .genesis-nav-menu tai .main-navigation. Lisää tiedostoon style.css:

1
.nav-menu {
2
    position: fixed;
3
    background: #333;
4
    top: 0px;
5
    right: 0px;
6
    left: 0px;
7
    z-index: 99;
8
}

Ratkaiseva rivi on position: fixed. Se poistaa elementin normaalista asettelusta ja kiinnittää sen suhteessa selainikkunaan. top: 0; right: 0; left: 0 venyttää valikon koko leveydelle. Lisää sisällölle yläpuolen täyte, jotta valikko ei peitä otsikkoa.

CSS-tavassa on yksi haittapuoli: kiinnityksen jälkeen valikko poistuu asettelusta ja sisältö "hyppää" ylös. Tämä ratkaistaan lisäämällä body-elementille padding-top, joka vastaa valikon korkeutta.

Tapa 2: Lisäosat (hienosäätöisempi hallinta, ei koodia)

Jos et halua koskea teematiedostoihin, tässä on kolme testattua työkalua.

myStickymenu on ilmainen lisäosa, jolla on yli 200 000 aktiivista asennusta WordPress.orgissa ja arvosana 4,6. Se kiinnittyy teemasi navigoinnin CSS-luokkaan; määritä se vain asetuksissa. Se on responsiivinen: mobiilissa kiinnitysvaikutus poistetaan automaattisesti. Mukana on kenttä mukautetuille CSS-tyyleille ja "viiveellä kiinnitys" -tila, joka perustuu selattujen pikselien määrään.

Sticky Menu (or Anything!) On Scroll on toinen ilmainen vaihtoehto, joka voi "kiinnittää" minkä tahansa elementin CSS-valitsimen perusteella: ei pelkästään valikkoa, vaan myös logon, koko ylätunnisteen tai painikkeen. Se edellyttää HTML:n ja CSS:n perusymmärrystä oikean valitsimen löytämiseksi, mutta antaa täyden vapauden.

UberMenu Sticky Extension on UberMenu-lisäosan lisäosa, joka maksaa 8 dollaria. Jos UberMenu on jo asennettu, laajennus lisää kiinnitystilan yhdellä kytkimellä. Mobiilissa se poistuu automaattisesti käytöstä, jotta se ei peitä näyttöä.

6. Valikkokohtien poistaminen WordPressin hallintapaneelista

Kun luovutat sivuston asiakkaalle tai annat käyttöoikeuden kirjoittajille, vakiohallintapaneeli on liian "runsas": yli 10 osiota, joista monia käyttäjä ei tarvitse ja jotkut ovat jopa vaarallisia. Lisäosien ja teema-asetusten tulisi pysyä vain pääkäyttäjien saatavilla.

Alla oleva koodi poistaa kaikki ylätason osiot kaikilta käyttäjiltä paitsi pääkäyttäjiltä:

1
if (!current_user_can( 'manage_options' )) {
2
    add_action( 'admin_menu', 'my_remove_menus', 999 );
3
}
4
function my_remove_menus() {
5
    remove_menu_page( 'index.php' );                  //Dashboard
6
    remove_menu_page( 'edit.php' );                   //Posts
7
    remove_menu_page( 'upload.php' );                 //Media
8
    remove_menu_page( 'edit.php?post_type=page' );    //Pages
9
    remove_menu_page( 'edit-comments.php' );          //Comments
10
    remove_menu_page( 'themes.php' );                 //Appearance
11
    remove_menu_page( 'plugins.php' );                //Plugins
12
    remove_menu_page( 'users.php' );                  //Users
13
    remove_menu_page( 'tools.php' );                  //Tools
14
    remove_menu_page( 'options-general.php' );        //Settings
15
}

Koodinpätkä lisätään tiedostoon functions.php. Tarkistus !current_user_can('manage_options') sulkee pois pääkäyttäjät; he näkevät kaiken. Muut roolit saavat karsitun listan sen perusteella, mitä jätät jäljelle.

Poista vain ne remove_menu_page-rivit, joita tarvitset. Esimerkiksi toimittajalle voit jättää "Artikkelit", "Media" ja "Sivut" ja poistaa kaiken muun. Tärkeä huomio: funktio piilottaa kohteet valikosta, mutta ei estä suoraa URL-osoitteen kautta tapahtuvaa pääsyä. Sivujen täydellistä lukitsemista varten määritä käyttöoikeudet käyttäjäroolissa.

7. Edistyneet lisäosat valikoiden luomiseen

Kun vakioeditori ei riitä, tarvitset megavalikoita, joissa on kuvia, välilehtiä, lomakkeita ja dynaamisia elementtejä. Tässä on kolme aktiivisesti ylläpidettyä lisäosaa eri tehtäviin ja budjetteihin.

7.1 UberMenu: monipuolisin rakentaja

Markkinaveteraani, jolla on yli 43 000 myyntiä CodeCanyonissa. Luo responsiivisia megavalikoita kosketustuella. Voit sijoittaa alavalikoihin kuvia, videoita, karttoja ja valmiin yhteydenottolomakkeen. Yli 50 tyyliasetusta live-esikatselulla, automaattinen alavalikoiden luominen sisällöstä ja välilehdet kohteiden alla. Integroituu WooCommercen kanssa: voi hakea tuoteryhmiä dynaamisesti.

Hinta: alkaen 26 $. 🔗 UberMenu CodeCanyonissa

7.2 Max Mega Menu: ilmainen ykkönen

Suosituin ilmainen megavalikkolisäosa WordPress.orgissa: yli 400 000 aktiivista asennusta ja arvosana 4,8. Rakentaa megavalikoita raahaa ja pudota -menetelmällä tavallisessa "Ulkoasu → Valikot" -näkymässä ilman erillistä käyttöliittymää. Tukee sarakeruudukoita, vimpaimia alavalikoissa, kuvakkeita ja mobiilin off-canvas-tilaa. Frontend-skripti painaa alle 2 kt gzipattuna, joten se ei vaikuta sivuston nopeuteen.

• Hyvää: integroitu natiiviin WordPressin valikkokäyttöliittymään, minimaalinen skriptin koko, vimpaimet alavalikoissa, ilmaisversio kattaa 90% käyttötapauksista
• Huonoa: jotkin edistyneet tyylit ja välilehtivalikot vain Pro-versiossa (29 $/vuosi)
• Hinta: Ilmainen / Pro alkaen 29 $/vuosi
• Lataa: 🔗 Max Mega Menu WordPress.orgissa

7.3 QuadMenu: välilehdet, karusellit ja täysi muokattavuus

QuadMenu muuttaa tavallisen valikon megavalikoksi, jossa on välilehtiä ja karuselleja, tarjoten enemmän ominaisuuksia kuin Max Mega Menu, mutta hieman jyrkemmällä oppimiskäyrällä. Tukee pysty- ja vaakasuuntaisia asetteluja, integraatiota Elementorin ja Beaver Builderin kanssa, Google Fontseja ja yli 2 000 Font Awesome -kuvaketta. Tumma ja vaalea teema valmiina, responsiivinen mobiiliversio off-canvas-paneelilla.

• Hyvää: välilehdet ja karusellit valikon sisällä, syvä integraatio sivunrakentajiin, kehittäjäystävällinen (koukut ja suodattimet)
• Huonoa: monimutkaisempi alkuasetus kuin Max Mega Menussa, jotkin ominaisuudet vain maksullisessa versiossa
• Hinta: Ilmainen / Premium alkaen 15 $/vuosi
• Lataa: 🔗 QuadMenu WordPress.orgissa

8. Mobiilivalikot älypuhelimille ja tableteille

Mobiililiikenne ohitti työpöydän jo kauan sitten. Jos valikko muuttuu puhelimella lukukelvottomaksi sekamelskaksi, kävijät poistuvat. Responsiivinen teema skaalaa työpöytävalikon kapeille näytöille, mutta rakenne pysyy samana: viisi tai kuusi kohdetta rivissä muuttuu pitkäksi pystylistaksi. Erikoistunut lisäosa tarjoaa hampurilaispainikkeen, pyyhkäisyt ja kosketuksen optimoinnin.

8.1 WP Mobile Menu: nopea off-canvas mille tahansa sivustolle

Suosituin ilmainen mobiilivalikko-lisäosa WordPress.orgissa: yli 80 000 aktiivista asennusta ja arvosana 4,7. Lisää hampurilaispainikkeesta avautuvan off-canvas-paneelin. Tukee kolmea sisennystasoa, hakua mobiilivalikossa, kuvakkeita ja värien mukauttamista. Eri näyttötarkkuuksien toiminta määritetään erikseen.

• Plussat: minimaalinen asennus (toimii heti aktivoinnin jälkeen), mukautuva (näkyy vain mobiilissa), ei ristiriitoja teemojen kanssa
• Miinukset: osa edistyneistä tyyleistä ja WooCommerce-integraatio Pro-versiossa (19 $/vuosi)
• Hinta: Ilmainen / Pro alkaen 19 $/vuosi
• Lataa: 🔗 WP Mobile Menu WordPress.orgissa

8.2 Mobi: vedä ja pudota -mobiilivalikon rakentaja

Intuitiivinen vedä ja pudota -valikonrakentaja. Valikon voi sijoittaa näytön ylä- tai alareunaan. Sisältää yli 700 sisäänrakennettua kuvaketta, rajattoman määrän some-kuvakkeita paneelissa ja Google Fontsit tyylittelyyn. Voit hallita valikon näkyvyyttä erikseen vieraille ja kirjautuneille käyttäjille. Sopii hyvin sivustoille, joilla mobiilivalikon tulisi näyttää itsenäiseltä käyttöliittymältä eikä kutistetulta kopiolta työpöytäversiosta.

Hinta: alkaen 16 $. 🔗 Mobi CodeCanyonissa

⁉️🤔 Usein kysytyt kysymykset

Voinko luoda valikon kokonaan ilman lisäosia, pelkällä koodilla?

Kyllä, kaikki kuvatut tekniikat (kuvakkeet, sticky-efekti, shortcode, kirjautumispainike) voidaan toteuttaa functions.php- ja style.css-tiedostojen kautta ilman kolmannen osapuolen työkaluja. Lisäosat vain säästävät aikaa ja tarjoavat graafisen käyttöliittymän niille, jotka eivät halua koskea koodiin. Jos PHP ja CSS ovat hallussa, lisäosia ei tarvita. Mutta kun tarvitset mega-valikoita tai animoidun off-canvas-paneelin, valmis lisäosa säästää tunteja käsityötä.

Mikä lisäosa kannattaa valita WooCommerce-verkkokauppaan?

Verkkokaupassa mega-valikko tuotekategorioineen, kuvineen ja suodattimineen on kriittinen. UberMenu toimii tässä parhaiten: se hakee dynaamisesti WooCommerce-kategoriat ja rakentaa alavalikot lennossa. Ilmainen vaihtoehto on Max Mega Menu, jossa käytetään widgettejä alavalikoissa: kategoriakuvat haetaan tavallisella WooCommerce-widgetillä ja haku saa oman rivinsä.

Mitä teen, jos sivusto lakkaa latautumasta sen jälkeen, kun olen lisännyt koodia functions.php-tiedostoon?

Palauta alkuperäinen tiedosto FTP:n tai hosting-palvelusi tiedostonhallinnan kautta. Ennen kuin muokkaat functions.php-tiedostoa, tee varmuuskopio. Vaihtoehtoinen turvallinen tapa on Code Snippets -lisäosa: sen avulla voit lisätä PHP-pätkiä hallintapaneelin kautta, ja se poistaa koodin automaattisesti käytöstä vakavan virheen sattuessa palauttaen sivuston toimintakuntoon.

Täytyykö valikko päivittää WordPress-teeman vaihtamisen jälkeen?

Valikot on sidottu näyttöalueeseen (sijaintiin), jonka teema rekisteröi. Kun vaihdat teemaa, nämä alueet muuttuvat, ja sinun on kohdistettava valikko uudelleen kohdassa "Ulkoasu → Valikot" "Hallitse sijainteja" -välilehdellä. Itse kohteet, niiden järjestys ja sisennys säilyvät; ainoastaan sidonta sijaintiin katoaa.

Miten varmistan, että mobiilivalikko toimii kaikilla laitteilla?

Avaa sivusto responsiivisen suunnittelun tilassa Chrome DevToolsissa (F12 → laitekuvake) ja käy läpi kuusi taitekohtaa: 320px, 375px, 414px, 768px, 1024px, 1280px. Tarkista hampurilaispainike (sen tulee olla sisällön päällä, ei peittyneenä), animaation vastenopeus ja kaikkien valikkokohtien näkyvyys ilman vaakasuuntaista vieritystä. Suositut lisäosat, kuten WP Mobile Menu, antavat sinun asettaa taitekohdan manuaalisesti, jolloin voit määrittää eri trigger-leveydet juuri sinun teemallesi.

Mitä käyttää omaan tehtävääsi: lopullinen yhteenveto

Lyhyesti: hyödynnä ensin WordPressin sisäänrakennetut ominaisuudet ja kevyet CSS-säädöt, lisää sitten lisäosia. Näin kokonaisuus pysyy minimaalisena, sivusto nopeana ja navigaatio juuri sellaisena kuin lukijat tarvitsevat.

• Yksinkertainen blogi tai käyntikorttisivusto: aloita Menu Iconsilla (ilmainen) ja sticky-valikolla kolmella CSS-rivillä. Se riittää, jotta navigaatio lakkaa näyttämästä viimeistelemättömältä.
• Sivusto, jossa on rekisteröityminen: lisää kirjautumispainike wp_loginout()-funktiolla. Käyttäjät lopettavat kirjautumissivun metsästämisen.
• Laskeutumissivu tai pitkä artikkeli: [menu]-shortcode sijoittaa navigaatiolohkoja minne tahansa sivun runkoon.
• Verkkokauppa tai sisältöportaali: tarvitset mega-valikon. Valitse UberMenu, jos budjetti sallii ja haluat maksimaaliset ominaisuudet, tai Max Mega Menu tyypillisiin tehtäviin (ilmainen ja ilman nopeuden menetystä).
• Mobiiliyleisö on hallitseva: WP Mobile Menu kattaa 9 skenaariota 10:stä: asentuu minuutissa ja tarjoaa heti off-canvas-paneelin haulla. Jos tarvitset itsenäisemmän mobiilikäyttöliittymän, tutustu Mobiin.

Ota tavaksi: yksi lisäosa yhtä tehtävää kohden. Älä asenna mega-valikkoa vain muutaman kuvakkeen takia, äläkä kirjoita koodia off-canvas-paneelia varten, kun lisäosa hoitaa sen minuutissa. Tasapaino sivuston nopeuden ja navigaation kätevyyden välillä on juuri se, mikä pitää lukijat sivulla.