Menüü on sinu saidi skelett. Külastaja skannib seda sekunditega: kui pole selge, kuhu klõpsata, lahkub ta. Tavaline WordPressi ehitaja jaotises „Välimus → Menüüd" paneb navigatsiooni minutiga kokku, kuid tulemus näeb välja nagu paljas tekstijada. Ei ikoone, ei kerimisel kinnituvat käitumist, ei korralikku mobiiliversiooni.

Probleem on sügavam, kui paistab: vaikefunktsionaalsusest piisab esimesteks päevadeks pärast käivitamist, kuid peagi vajad asju, mida tuumikus lihtsalt pole. Ikoonid menüüpunktidele, sisselogimisnupp otse navigatsioonis, lühikood menüü postituse sisusse lisamiseks, nutikas mobiilipaneel: kõik see nõuab kas koodi või pluginat.

See artikkel käsitleb mõlemat lähenemist: kerged näpunäited functions.php ja style.css faili kaudu ning parimad aktiivselt hooldatud pluginad edasijõudnud menüüde jaoks. Materjal töötab klassikaliste teemade, plokiteemade ja mis tahes populaarse raamistikuga kombineeritult.

💡 Kiirülevaade:

• Paigalda Menu Icons plugin ja lisa menüüpunktidele ikoonid viie minutiga ilma koodita
• Lisa wp_loginout funktsioon faili functions.php ja sisselogimisnupp ilmub otse navigatsiooni
• Registreeri menüü lühikood ja väljasta valmis menüü ükskõik kus saidil
• Muuda menüü kerimisel kinnituvaks kolme CSS-i rea või ühega kolmest pluginast
• Vali edasijõudnud ehitaja kolme variandi seast: UberMenu, Max Mega Menu või QuadMenu
• Seadista mobiilne navigatsioon WP Mobile Menu või Mobi abil, millel on puutetundlik liides

1. Menüüpunktide ikoonid Menu Icons abil

Kiire viis navigatsiooni elavdamiseks: lisa ikoonid jaotiste nimede kõrvale. Silm „püüab" ikooni enne teksti ja paari külastuse järel jääb ikoon mällu paremini kui ükski silt.

Tasuta Menu Icons plugin ThemeIsle’i meeskonnalt lahendab selle ülesande, omades 400 000+ aktiivset paigaldust WordPress.org-is ja hinnet 4,4. Koodi pole vaja.

Sammud:

• Paigalda plugin jaotise „Pluginad → Lisa uus" kaudu ja otsi „Menu Icons"
• Aktiveeri ja mine jaotisse „Välimus → Menüüd"
• Laienda suvalist üksust ja ilmub ikooni valimise plokk
• Vali ikoon Dashiconsi (WordPressi sisseehitatud), Font Awesome’i hulgast või laadi üles oma ikoon
• Kohanda asukohta ja suurust ning salvesta

Kulisside taga lisab plugin <li> elemendile ikooniga CSS-klassi: puhas lahendus ilma teemade konfliktideta. See toetab Dashiconse, Font Awesome’i, Elusive Iconse ja Genericonse. Töötab iga menüüga, mis on registreeritud standardse wp_nav_menu kaudu.

🔗 Menu Icons WordPress.org-is

2. Sisse- ja väljalogimise nupp otse menüüs

Kui sinu saidil on registreerimine, vajavad kasutajad kiiret ligipääsu ilma /wp-login.php lehte otsimata. „Logi sisse" või „Logi välja" link asub otse peamenüüs ja muutub automaatselt vastavalt olekule.

See lahendatakse ühe funktsiooniga failis functions.php:

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);

See koodijupp haakub wp_nav_menu_items külge ja lisab iga menüü lõppu <li> elemendi koos lingiga. Funktsioon wp_loginout() tuvastab oleku ise: kui kasutaja on välja logitud, näitab see „Logi sisse"; kui autenditud, siis „Logi välja" koos ümbersuunamisega samale lehele.

Pärast faili salvestamist laadi sait uuesti ja kontrolli mõlemat olekut. Kui on vaja kasutaja pärast sisselogimist kindlale lehele suunata, asenda wp_loginout() esimene argument 'index.php' soovitud URL-iga.

3. Lühikood menüü kuvamiseks ükskõik kus

WordPress võimaldab määrata menüü päisesse, jalusesse või külgriba alasse, täpselt sinna, kuhu teema on ruumi eraldanud. Aga mis siis, kui vajad menüüd postituse sees, sihtlehel või tekstividinas?

Vastus on registreerida oma lühikood:

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');

Lisa kood faili functions.php, salvesta ja kirjuta ükskõik kus saidil:

[menu name="main-menu"]

Võta nimi jaotisest „Välimus → Menüüd", kus see kuvatakse üksuste loendi kohal. Lühikood kutsub välja standardse wp_nav_menu() summutatud väljundiga ('echo' => false) ja tagastab valmis HTML-märgendi.

Nii saad hoida ühist navigatsiooni jaluses, lisanavigatsiooni konkreetse postituse külgribas ja koostada eraldi menüü sihtlehe jaoks ilma igasuguse teemaseoseta.

4. Otsinguväli navigatsiooniribal

Tavaline WordPressi otsinguvidin elab külgribas. Aga kui külgriba pole või see liigub mobiilis alla, ei leia külastajad otsingut lihtsalt üles. Liigutame selle otse menüüsse.

Põhiversioon, kasutades sama wp_nav_menu_items filtri tehnikat:

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
}

Funktsioon get_search_form(false) tagastab otsinguvormi HTML-i ilma seda ekraanile väljastamata. Väli kinnitub viimase menüüpunkti külge; tõenäoliselt vajad positsioneerimist. Lisa <li> elemendile CSS-klass:

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

Ja määra oma teema style.css failis veerised:

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

Kolm rida PHP-d ja paar rida CSS-i. Tulemus: otsinguväli on igal ekraanilaiusel alati nähtav.

5. Kerimisel kinnituv menüü

Kinnituv menüü tähendab, et navigeerimisriba jääb ekraani ülaossa ja liigub koos kasutajaga lehte alla kerides. See on mugav maandumislehtedel, pikkadel artiklites ja veebipoodides: teisele jaole liikumiseks ei pea tagasi kerima.

Meetod 1: CSS (tasuta, ilma pluginateta)

Leia oma teemast peamenüü selektor, tavaliselt .nav-menu, .genesis-nav-menu või .main-navigation. Lisa faili 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
}

Võtmerida on position: fixed. See eemaldab ploki lehe voost ja fikseerib selle brauseriakna suhtes. top: 0; right: 0; left: 0 venitab menüü täislaiuseks. Lisa sisule ülemine polsterdus, et menüü ei kataks päist.

CSS-meetodil on üks puudus: pärast fikseerimist lahkub menüü lehe voost ja sisu „hüppab" üles. See lahendatakse, lisades kehaelemendile padding-top, mis on võrdne menüü kõrgusega.

Meetod 2: pluginad (peenem kontroll, koodivaba)

Kui sa pigem ei soovi teemafaile puutuda, siis siin on kolm tõestatud tööriista.

myStickymenu on tasuta plugin, millel on WordPress.org-is üle 200 000 aktiivse installatsiooni ja hinne 4,6. See haakub sinu teema navigatsiooni CSS-klassi külge; määra see lihtsalt seadetes. See on responsiivne: mobiilis lülitub kinnituv efekt automaatselt välja. Seal on väli kohandatud CSS-stiilide jaoks ja kerimise pikslitel põhinev „viivitusega kinnitumise" režiim.

Sticky Menu (or Anything!) On Scroll on veel üks tasuta võimalus, mis suudab CSS-selektori järgi „kinnitada" ükskõik millist elementi: mitte ainult menüüd, vaid ka logot, tervet päist või nuppu. See eeldab HTML-i ja CSS-i põhiteadmisi õige selektori leidmiseks, kuid annab täieliku vabaduse.

UberMenu Sticky Extension on 8-dollarine lisamoodul UberMenu pluginile. Kui UberMenu on juba paigaldatud, lisab laiendus ühe lülitiga kinnituva režiimi. Mobiilis lülitub see ekraani katmise vältimiseks automaatselt välja.

6. Menüüelementide eemaldamine WordPressi administraatorivaatest

Kui sa annad saidi üle kliendile või lubad ligipääsu autoritele, on tavaline administraatorivaade liiga „rikkalik": üle 10 jaotise, millest paljusid kasutaja ei vaja ja mõned on isegi ohtlikud. Pluginad ja teema seaded peaksid jääma kättesaadavaks ainult administraatoritele.

Allolev kood eemaldab kõik ülataseme jaotised kõigilt kasutajatelt, välja arvatud administraatorid:

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
}

See koodijupp läheb faili functions.php. Kontroll !current_user_can('manage_options') välistab administraatorid; nemad näevad kõike. Teised rollid saavad kärbitud nimekirja selle põhjal, mida sa alles jätad.

Eemalda ainult need remove_menu_page read, mida vajad. Näiteks toimetaja puhul võid jätta alles „Postitused", „Meedia" ja „Lehed", eemaldades kõik muu. Oluline märkus: funktsioon peidab elemendid menüüst, kuid ei blokeeri otsest URL-i kaudu ligipääsu. Lehe täielikuks lukustamiseks seadista õigused kasutajarollis.

7. Täiustatud pistikprogrammid menüüde loomiseks

Kui tavalisest redaktorist ei piisa, on vaja megamenüüsid piltide, vahekaartide, vormide ja dünaamiliste elementidega. Siin on kolm aktiivselt hooldatavat pistikprogrammi erinevate ülesannete ja eelarvete jaoks.

7.1 UberMenu: kõige funktsioonirikkam ehitaja

Turu veteran, millel on CodeCanyonis üle 43 000 müügi. Loob puutetundliku toega reageerivaid megamenüüsid. Alammenüüdesse saab paigutada pilte, videoid, kaarte ja valmis kontaktivormi. Üle 50 stiiliseade koos eelvaatega, automaatne alammenüü genereerimine sisust ja vahekaardid üksuste all. Integreerub WooCommerce'iga: suudab dünaamiliselt tuua tootekategooriaid.

Hind: alates $26. 🔗 UberMenu CodeCanyonis

7.2 Max Mega Menu: tasuta liider

Kõige populaarsem tasuta megamenüü pistikprogramm WordPress.org-is: 400 000+ aktiivset paigaldust ja hinnang 4,8. Ehitab megamenüüsid lohistamise teel standardses „Välimus → Menüüd" ekraanil, ilma eraldi liideseta. Toetab veergude ruudustikke, vidinaid alammenüüdes, ikoone ja mobiilivaates külgmenüü režiimi. Esiosa skript kaalub alla 2 KB pakitud kujul, seega ei mõjuta see saidi kiirust.

• Plussid: integreeritud loomulikku WordPressi menüü liidesesse, minimaalne skripti maht, vidinad alammenüüdes, tasuta versioon katab 90% kasutusjuhtudest
• Miinused: mõned täiustatud stiilid ja vahekaardimenüüd ainult Pro versioonis ($29/aastas)
• Hind: Tasuta / Pro alates $29/aastas
• Allalaadimine: 🔗 Max Mega Menu WordPress.org-is

7.3 QuadMenu: vahekaardid, karussellid ja täielik kohandamine

QuadMenu muudab standardse menüü vahekaartide ja karussellidega megamenüüks, pakkudes rohkem funktsioone kui Max Mega Menu, kuid veidi kõrgema õppimiskõveraga. Toetab vertikaalset ja horisontaalset paigutust, integratsiooni Elementori ja Beaver Builderiga, Google'i fonte ja 2000+ Font Awesome ikooni. Tumedad ja heledad teemad on kohe olemas, reageeriv mobiiliversioon külgmenüü paneeliga.

• Plussid: vahekaardid ja karussellid menüü sees, sügav integratsioon leheehitajatega, arendajasõbralik (konksud ja filtrid)
• Miinused: keerulisem esmane seadistamine kui Max Mega Menu puhul, mõned funktsioonid ainult tasulises versioonis
• Hind: Tasuta / Premium alates $15/aastas
• Allalaadimine: 🔗 QuadMenu WordPress.org-is

8. Mobiilimenüüd nutitelefonidele ja tahvelarvutitele

Mobiililiiklus edestas lauaarvuteid juba ammu. Kui menüü muutub telefonis loetamatuks segaduseks, lahkuvad külastajad. Reageeriv teema skaleerib lauaarvuti menüü kitsastele ekraanidele, kuid struktuur jääb samaks: viiest või kuuest elemendist reas saab pikk vertikaalne nimekiri. Spetsiaalne pistikprogramm pakub hamburgeri nuppu, pühkimisliigutusi ja puuteoptimeerimist.

8.1 WP Mobile Menu: kiire külgmenüü igale saidile

Kõige populaarsem tasuta mobiilimenüü plugin WordPress.org-is: 80 000+ aktiivset paigaldust ja hinnang 4,7. Lisab ekraanivälise paneeli, mis libiseb välja, kui hamburgeri nuppu puudutatakse. Toetab kolme pesastustaset, otsingut mobiilimenüüs, ikoone ja värvide kohandamist. Käitumine erinevatel ekraanilahutustel seadistatakse eraldi.

• Plussid: minimaalne seadistamine (töötab kohe pärast aktiveerimist), adaptiivne (kuvatakse ainult mobiilis), ei lähe teemadega vastuollu
• Miinused: mõned täiustatud stiilid ja WooCommerce'i integratsioon Pro versioonis (19 $/aastas)
• Hind: Tasuta / Pro alates 19 $/aastas
• Allalaadimine: 🔗 WP Mobile Menu WordPress.org-is

8.2 Mobi: lohista-ja-tilguta mobiilimenüü koostaja

Intuitiivne lohista-ja-tilguta menüükoostaja. Menüü saab paigutada ekraani üla- või alaossa. Sisaldab 700+ sisseehitatud ikooni, suvalist arvu sotsiaalmeedia ikoone paneelil ja Google Fonts'i stiilimiseks. Menüü nähtavust saab eraldi juhtida külalistele ja sisselogitud kasutajatele. Hästi sobiv saitidele, kus mobiilimenüü peaks välja nägema nagu iseseisev liides, mitte kahandatud koopia töölauaversioonist.

Hind: alates 16 $. 🔗 Mobi CodeCanyonis

⁉️🤔 Korduma kippuvad küsimused

Kas menüüd saab luua täiesti ilma pluginateta, ainult koodiga?

Jah, kõiki kirjeldatud tehnikaid (ikoonid, kleepuv efekt, lühikood, sisselogimisnupp) saab rakendada functions.php ja style.css kaudu, ilma kolmandate osapoolte tööriistu paigaldamata. Pluginad lihtsalt säästavad aega ja pakuvad graafilist liidest neile, kes eelistavad koodi mitte puutuda. Kui oled PHP ja CSS-iga sina peal, pole pluginad kohustuslikud. Aga kui vajad megamenüüd või animatsioonidega ekraanivälist paneeli, säästab valmisplugin tunde käsitsi kodeerimist.

Millise plugina peaksin valima WooCommerce'i poe jaoks?

Poe puhul on kriitilise tähtsusega megamenüü tootekategooriate, piltide ja filtritega. UberMenu toimib siin kõige paremini: see tõmbab dünaamiliselt WooCommerce'i kategooriaid ja ehitab alam-menüüsid käigu pealt. Tasuta alternatiiv on Max Mega Menu koos vidinatega alam-menüüdes: kategooriapildid tõmmatakse standardse WooCommerce'i vidina kaudu ja otsing saab eraldi rea.

Mida teha, kui sait lakkab laadimast pärast koodi lisamist faili functions.php?

Taasta algne fail FTP või oma hostingu failihalduri kaudu. Enne mis tahes muudatusi failis functions.php tee varukoopia. Alternatiivne ohutu lähenemine on Code Snippets plugin: see võimaldab lisada PHP juppe läbi administraatori ja keelab koodi automaatselt, kui tekib fataalne viga, taastades saidi töökorra.

Kas menüüd on vaja uuendada pärast WordPressi teema vahetamist?

Menüüd on seotud kuvamisalaga (asukoht), mille teema registreerib. Teemat vahetades need alad muutuvad ja menüü tuleb uuesti määrata jaotises „Välimus → Menüüd" vahekaardil „Halda asukohti". Üksused ise, nende järjekord ja pesastus säilivad; kaob ainult asukoha seos.

Kuidas kontrollida, kas mobiilimenüü töötab kõigis seadmetes?

Ava sait responsiivse disaini režiimis Chrome DevToolsis (F12 → seadme ikoon) ja mine läbi kuus murdepunkti: 320px, 375px, 414px, 768px, 1024px, 1280px. Kontrolli hamburgeri nuppu (peab olema sisu kohal, mitte kaetud), animatsiooni reageerimiskiirust ja kõigi menüüelementide nähtavust ilma horisontaalse kerimiseta. Populaarsed pluginad nagu WP Mobile Menu võimaldavad murdepunkti käsitsi määrata, lubades sul oma konkreetse teema jaoks erinevaid käivitamislaiuseid määrata.

Mida oma ülesande jaoks kasutada: lõplik jaotus

Lühidalt: esmalt ammenda WordPressi sisseehitatud võimalused ja kerged CSS-i näpunäited, seejärel lisa pluginad. See hoiab virna minimaalse, saidi kiire ja navigatsiooni täpselt sellisena, nagu lugejad vajavad.

• Lihtne blogi või visiitkaardisait: alusta Menu Iconsiga (tasuta) ja kleepuva menüüga kolme CSS-i reaga. Sellest piisab, et navigatsioon ei näeks toores välja.
• Registreerimisega sait: lisa sisselogimisnupp wp_loginout() kaudu. Kasutajad lõpetavad sisselogimislehe otsimise.
• Sihtleht või pikk artikkel: [menu] lühikood paigutab navigatsiooniplokid ükskõik kuhu lehe kehas.
• E-pood või sisuportaal: siin on vaja megamenüüd. Vali UberMenu, kui eelarve lubab ja vajad maksimaalseid funktsioone, või Max Mega Menu tüüpiliste ülesannete jaoks (tasuta ja ilma kiirusekaota).
• Mobiilne vaatajaskond domineerib: WP Mobile Menu katab 9 stsenaariumi 10-st: paigaldub minutiga ja pakub kohe ekraanivälist paneeli koos otsinguga. Kui vajad iseseisvamat mobiililiidest, vaata Mobi.

Võta reegliks: üks plugin ühe ülesande kohta. Ära paigalda megamenüüd ainult paari ikooni pärast ja ära kirjuta koodi ekraanivälise paneeli jaoks, kui plugin teeb selle minutiga. Tasakaal saidi kiiruse ja navigatsiooni mugavuse vahel on just see, mis hoiab lugejaid lehel.