Articles

Hogyan hozzunk létre egy legördülő menüt a WordPress – ben (5 lépésben)

A webhely navigációja kulcsfontosságú ahhoz, hogy a felhasználók eljuthassanak oda, ahová akarnak menni. A jól megtervezett menü hosszú utat tehet a felhasználói élmény (UX) javítása, sőt a visszafordulási arány csökkentése felé. Egy rosszul kidolgozott azonban éppen az ellenkezőjét teheti meg.

szerencsére a WordPress lehetővé teszi, hogy egyedi menüket hozzon létre a webhely igényeinek megfelelően. Akár natív funkciókat is használhat egy kompakt WordPress legördülő menü hozzáadásához, amely helyet takarít meg, miközben egyértelmű irányt biztosít a látogatók számára.

ebben a bejegyzésben megvitatjuk, miért fontos a weboldal navigáció, és hogyan lehetnek különösen hasznosak a legördülő menük. Ezután bemutatjuk, hogyan hozhatja létre őket a WordPress – ben, és megoszthatunk néhány plugint, amelyek segíthetnek.

merüljünk be!

Bevezetés a WordPress Navigációba és a legördülő menükbe

bár lehet, hogy igénytelenek, a navigációs menük minden weboldal létfontosságú elemei. Segítenek a felhasználóknak gyorsan megtalálni a legrelevánsabb oldalakat céljaik megvalósításához, miközben az első látogatóknak képet adnak arról, hogy mit kínálhat:

menü példa

a Kinsta weboldal elsődleges navigációs menüje

a jól megtervezett navigációs menü kulcsfontosságú a konverziók növeléséhez és a visszafordulási arány csökkentéséhez. Amikor a felhasználók könnyen megtalálják azokat az oldalakat, ahol a termék, az e-mail regisztrációs űrlap vagy más konvertáló tartalom található, egyszerűbb időt kap arra, hogy megvásárolja vagy regisztráljon.

plusz, ha a felhasználók magabiztosan megtalálják az utat az egész webhelyen, akkor nem kell lepattanniuk az oldalakról, mert rossz helyre kerültek. Ha segít nekik az első alkalommal, mind az UX javítása, mind a frusztráció minimalizálása érdekében.

a WordPress-ben a menük velejárói. A platformmal létrehozott bármely webhely megjeleníthet egyet vagy többet. A WordPress témák azonban fontos szerepet játszanak a menü vagy menük formázásában és elhelyezésében is.

emiatt a WordPress menü sokféle formát ölthet. A legismertebb a szabványos fejléc menü:

fejlécmenü példa

példa egy tipikus fejlécmenüre

gyakran további láblécmenüt is tartalmazhat az oldalak alján. Lehet, hogy ugyanazt a tartalmat jeleníti meg, mint a Főmenü, vagy kissé eltérő lehetőségeket kínál:

lábléc menü példa

példa egy lábléc menüre

egy másik stílus a menüfedvény, amelyet a felhasználók tetszés szerint megnyithatnak és bezárhatnak:

overlay menü példa

példa egy overlay menüre

Alternatív megoldásként fontolóra veheti az oldalsáv menü használatát:

oldalsáv menü példa

példa egy oldalsáv menüre

vagy beépíthet egy legördülő menüt, amelyet néha “beágyazott” menünek is neveznek:

legördülő menü példa

példa egy legördülő menüre

Ez a fajta navigáció sokféle webhely számára ideális. Nem fogja elhomályosítani a tartalmát, mint egy overlay menü, de nem olyan tolakodó, mint egy nagy fejléc vagy egy oldalsáv menü.

bizonyos tartalmak elrejtésével, amíg szükség van rá, megtakaríthatja a képernyőterületet, miközben továbbra is biztosítja a felhasználók számára a könnyű utat.

Hogyan hozzunk létre egy legördülő menüt a WordPress – ben (5 lépésben)

ha úgy döntött, hogy egy legördülő menü jól illeszkedik a WordPress webhelyéhez, az egyik beállítása meglehetősen egyszerű. A WordPress-ben elérhető natív menüfunkciók használatával mindössze öt lépésben létrehozhat egy egyedi navigációs rendszert, amely megfelel az Ön igényeinek.

1. lépés: hozza létre a menüpontokat

a menü létrehozásának első lépése annak eldöntése, hogy mit kell belefoglalni. Először navigáljon a megjelenéshez > menük a WordPress irányítópultján:

WordPress menü

a menüszerkesztő elérése a WordPress irányítópulton

amit a menüszerkesztőben lát, a témától függően kissé eltér.

most azonban fontos megjegyezni az első lehetőséget a menük szerkesztése lapon. Látnia kell egy lehetőséget, ahol kiválaszthatja a meglévő menük egyikét szerkeszteni, valamint egy lehetőséget egy új menü létrehozására:

az új menü létrehozása link a WordPress menüszerkesztő tetején

az új menü létrehozása link a WordPress menüszerkesztő tetején

ebben a példában a WordPress menüszerkesztő

az utóbbi lehetőség új menüt hoz létre. Ez magában foglalja a cím hozzáadását, majd a menü létrehozása gombra kattintva:

az új menü elnevezése és létrehozása

az új menü elnevezése és létrehozása

most már készen áll arra, hogy elemeket adjon hozzá a WordPress menüjéhez. A legtöbb esetben a legjobb, ha a menüt a lehető legegyszerűbben tartja, miközben továbbra is elegendő információt ad a felhasználóknak ahhoz, hogy oda jussanak, ahová akarnak.

a túl sok oldal használata túlterhelheti a látogatókat, és könnyebbé teheti a navigációt.

a menüelemek hozzáadásának néhány különböző módja van. Az első kettő oldal és bejegyzés, és nagyon hasonlóan működnek.

oldalak hozzáadása a menühöz

oldalak hozzáadása a menühöz

a menüszerkesztő oldalsávján egyszerűen jelölje be az egyes oldalakhoz vagy bejegyzésekhez tartozó jelölőnégyzeteket, majd kattintson a Hozzáadás a menühöz gombra:

a következő lehetőség az Egyéni hivatkozások beépítése. Ez magában foglalja annak az oldalnak az URL-címét, amelyre a felhasználókat irányítani szeretné, majd egy rövid, de leíró címke létrehozását. Ezt követően újra rákattinthat a Hozzáadás menübe:

egyéni Hivatkozás hozzáadása a menühöz

egyéni Hivatkozás hozzáadása a menühöz

végül oldal-és Bejegyzéskategóriákat is hozzáadhat a navigációs menühöz. Ez a felhasználókat egy archív oldalra viszi, ahol megtekinthetik az adott téma összes tartalmát.

blogok és egyéb tartalom-a nehéz webhelyek különösen hasznosnak találhatják ezt a funkciót:

kategóriák hozzáadása a menühöz

kategóriák hozzáadása a menühöz

mint az oldalak és hozzászólások opciónál, csak jelölje be a felvenni kívánt kategóriák jelölőnégyzeteit, és válassza a Hozzáadás a menühöz lehetőséget.

2. lépés: Szervezze meg WordPress menüjét

Miután hozzáadta az összes menüpontot, látnia kell őket az egyes csempékben a szerkesztő Menüszerkezete alatt:

a menüszerkesztő menüstruktúra szakasza

a menüszerkesztő menüstruktúra szakasza

kezdetben a menüelemek a Hozzáadás sorrendjében jelennek meg. Azonban könnyen módosíthatja a szervezet áthúzza őket a helyére. Ez lehetővé teszi egy egyszerű menü létrehozását legördülő funkciók nélkül.

van néhány módja annak, hogy hozzáadja a legördülő listákat a WordPress menüjéhez.

a legegyszerűbb az áthúzás folytatása, de bizonyos menüelemek beágyazása mások alá:

WordPress legördülő menü létrehozása

fészkelő kategóriák a Blogoldal alatt

például a fenti képen áthelyeztük a három bejegyzés kategóriát, amelyeket hozzáadtunk a Blog menübe, így azokat “alelemek”. Az előlapon ez létrehoz egy legördülő menüt, amely így néz ki:

WordPress legördülő menü

példa a WordPress legördülő menüjére

Ha hozzá szeretne adni egy legördülő menüt, amely tartalmazza a webhely összes kategóriáját, akkor ezt egy egyéni hivatkozás hozzáadásával teheti meg. Használja a ” # “URL-t és a” kategóriák”vagy valami hasonlót a címkéhez:

kategóriák címke létrehozása a menühöz

kategóriák címke létrehozása a menühöz

ezután hozzáadhatja az összes kategóriát a menühöz, és beillesztheti őket ebbe a címkébe. Minden kategória kattintható lesz, de a címke nem lesz:

a kategóriák legördülő menü

A kategóriák legördülő menü

hasonló technikával az összes menüpontot egyetlen legördülő menüben is elrejtheti.

adjon hozzá egy másik egyéni linket, URL-ként a”#”, címkeként pedig a “Menu” használatával. Azután, fészkelje be az összes többi menüpontot az alá:

az összes navigációs hivatkozás egyetlen Menücímke alá ágyazása

az összes navigációs hivatkozás egyetlen Menücímke alá ágyazása

az előlapon megjelenő eredmény egy legördülő menü lesz, amely tartalmazza a webhely legfontosabb oldalait.

amint az alábbi kategóriák elemben látható, az alpont alá ágyazott tartalom megjelenik egy almenüben:

egy igazi WordPress legördülő navigációs menü

egy igazi WordPress legördülő navigációs menü

a drag-and-drop menüszerkesztő segítségével így bármilyen stílust és kombinációt létrehozhat a WordPress legördülő menükből. Ne feledje azonban, hogy a túl sok menüpont zavaró lehet a felhasználók számára.

iratkozzon fel a hírlevélre

a forgalmat 1,187% – kal növeltük a WordPress segítségével. Megmutatjuk, hogyan.

Csatlakozz 20.000 + mások, akik megkapják a heti hírlevél bennfentes WordPress tippek!

Feliratkozás most

az is a legjobb, ha korlátozza a beépített almenük számát, hogy elkerülje a navigáció túlzsúfoltságát.

3. lépés: képek beépítése a WordPress menübe

Ha a 2. lépés végére a legördülő menü pontosan úgy néz ki, mint ahogy elképzelte, akkor ugorhat az 5.lépésre a közzétételhez. Vannak azonban további lépések, amelyeket érdemes megtennie, ha testreszabásokkal szeretné javítani a menüt.

az egyik taktika, amelyet figyelembe kell venni, a vizuális elemek beépítése a menükbe, hogy további útmutatást nyújtsanak a látogatók számára. Míg a leíró címkék létfontosságúak, néha egy kép vagy egy ikon segíthet a felhasználóknak abban, hogy gyorsabban meghatározzák, hová vezet egy adott navigációs link.

lehetőség van képek hozzáadására az egyéni CSS használatával, amelyet hamarosan megvitatunk. Javasoljuk azonban, hogy vegyen fel egy plugint, például a Menüképet, az egyszerű ikonokat:

WordPress legördülő menü képekkel a navigációs linkek mellett

WordPress legördülő menü képekkel

így nem kell aggódnia, hogy bármilyen kóddal zavarja, hogy vizuális érdeklődést adjon a legördülő menüjéhez.

Egyszerűen telepítse a plugint, majd térjen vissza a megjelenéshez > menük:

a menüszerkesztő menü Kép szakasza

a menüszerkesztő menü Kép szakasza

látni fogja, hogy most már vannak képbeállítások a menübe felvett minden oldalhoz. Kiválaszthatja az egyes oldalak fényképét, méretét és pozícióját. Ne felejtse el menteni a módosításokat, ha végzett.

4. lépés: egyéni CSS hozzáadása a legördülő menühöz

bár kezdőknek nem ajánlott, a középhaladó és haladó felhasználók esetleg saját stílusukat szeretnék beépíteni a WordPress legördülő menüjükbe. Mielőtt közvetlenül a CSS-be ugrik, hozzá kell adnia egy osztályt a menüjéhez.

ha kihagyja ezt a lépést, az egyéni CSS problémákat okozhat a webhely bármely más menüjében. Például véletlenül alkalmazhatja a lábléc menüjét, amelyet csak a fő legördülő menüre gondolt.

a menüszerkesztőben kattintson a képernyőbeállítások elemre a jobb felső sarokban:

a menüszerkesztő képernyőbeállítások lapja

a menüszerkesztő képernyőbeállítások lapja

ezután jelölje be a CSS osztályok jelölőnégyzetét:

a CSS osztályok jelölőnégyzet a képernyő beállításai lapon

a CSS osztályok jelölőnégyzet a képernyő beállításai lapon

Ez hozzáad egy CSS osztályok mezőt a menü minden oldalához:

a CSS osztályok mező a menüszerkesztőben

a CSS osztályok mező a menüszerkesztőben

Ha egy vagy több CSS osztályt ad hozzá a menüelemekhez, a stíluslapján szereplő egyedi kód csak a Menü azon elemeire vonatkozik, amelyek az Ön által megadott osztályt tartalmazzák.

Unod már a WordPress webhely lassú gazdagépét? Villámgyors szervereket és 24/7 világszínvonalú támogatást nyújtunk a WordPress szakértőktől. Tekintse meg terveinket

most már átmehetsz a stíluslapra vagy a Testreszabóra, és dolgozhatsz az egyedi stílusodon.

5. lépés: Tegye közzé a menüt elsődleges helyeken

miután a WordPress legördülő menüje az Ön igényeinek megfelelően felépült, és beépítette a kívánt testreszabásokat, készen áll arra, hogy közzétegye a webhelyén.

Ez a folyamat kissé eltér a témától és a támogatott menühelyektől függően. Ebben a példában a Twenty Twenty témát fogjuk használni.

a menüszerkesztőben görgessen le a menübeállítások szakaszig:

a szerkesztő menübeállítások szakasza

A szerkesztő menübeállítások szakasza

az első jelölőnégyzetet bejelölheti, ha azt szeretné, hogy új oldalak automatikusan bekerüljenek a menübe. Ha még csak most kezdi el a webhelyét, és még nem adta hozzá az összes kulcsfontosságú oldalt, ez hasznos lehet. Vigyázzon azonban arra, hogy véletlenül ne adjon hozzá túl sok elemet a menüjéhez.

az opció alatt megjelenik a jelölőnégyzetek listája, amelyek megjelölik a webhely különböző területeit, ahol megjelenítheti a menüt.

a húsz húsz téma különböző menüterületeket tartalmaz: asztali vízszintes menü, Asztali kibővített menü, mobil menü, lábléc Menü, Közösségi menü.

ebben az esetben az általunk létrehozott menü a legjobban megfelel az asztali vízszintes Menühelynek, amely a webhely fejlécében található:

asztali vízszintes menü a húsz húsz téma számára

asztali vízszintes menü a húsz húsz téma számára

érdemes lehet a helyek kezelése fülre navigálni az oldal fejlécében menük területe az irányítópulton. Itt láthatja a téma által támogatott összes menühelyet, valamint azt, hogy melyik menüt rendelte hozzá mindegyikhez:

a helyek kezelése lap

a helyek kezelése lap

a menük elhelyezésekor hasznos lehet megnézni, hogy fognak kinézni a kezelőfelületen.

a kezelés élő előnézettel opció

a kezelés élő előnézettel opció

kattintson a kezelés élő előnézettel gombra, hogy megnézze, hogyan jelenik meg a menü a kiválasztott helyen, a WordPress Customizer segítségével:

a testreszabó WordPress menüjének élő előnézete

a testreszabó WordPress menüjének élő előnézete

ezután a menüt vagy menüket közvetlenül a Testreszabóból teheti közzé. Ha valaha is hozzá kell adnia vagy el kell távolítania az elemeket a legördülő menüből, egyszerűen visszatérhet a menüszerkesztőbe, és elvégezheti a szükséges beállításokat.

WordPress Bővítmények a legördülő menük javításához

bár teljesen működőképes WordPress navigációs menüket hozhat létre extra eszközök nélkül, néha hasznos lehet A menü funkcióinak kiterjesztése. Ha ez a helyzet a webhelyével, érdemes megnéznie néhány népszerű WordPress menü plugint.

beágyazott oldalak hatékony módja a tartalom nehéz blogok létrehozni legördülő menük. Bár elsősorban hozzászólások és oldalak rendezésére használják, ez a plugin automatikusan létrehoz egy menüt, amely tükrözi a tartalom szerkezetét:

beágyazott oldalak

beágyazott oldalak WordPress plugin

bár nem feltétlenül tanácsos nagyszámú elemet beépíteni a menükbe, néha elkerülhetetlen.

Ha ez a helyzet a webhelyével, a Max Mega Menu segíthet a meglévő WordPress menük kombinálásában, hogy egy “mega menu”:

max mega menu

Max Mega Menu WordPress plugin

a mobil böngészés egyre növekszik, annak biztosítása, hogy a menük továbbra is olvashatók legyenek a mobil eszközökön kulcsfontosságú.

WP Mobile menü pár bármilyen érzékeny téma, hogy segítsen létrehozni egy navigációs rendszer a webhely felhasználók, akik útközben:

wp mobile menu

WP Mobile Menu WordPress plugin

végül, mint már tárgyalt, lehetnek olyan helyzetek, amikor leíró menüpontok nem elég. Ezekben a helyzetekben érdemes megvizsgálni a menü használatát kép, egyszerű ikonok, amint azt a fenti 3.lépésben leírtuk.

bármelyik bővítményt használhatja a jelenlegi navigációs rendszer fejlesztésére és a WordPress legördülő menü hatékonyabbá tételére. Ne feledje, hogy néha, amikor a navigációról van szó, az egyszerűbb jobb. Csak akkor adjon hozzá extra funkciókat, ha ez javítja az UX-t, és elkerüli a webhely rendetlenségét.

A WordPress legördülő menü hibaelhárítása

Ha a menüt a fent leírtak szerint konfigurálta, de a legördülő funkció nem működik, több oka lehet.

bár itt nem tudjuk mindet lefedni, segíthetünk a probléma okának szűkítésében, hogy megtalálja a megfelelő megoldást.

gyakran a hibásan működő menü az egyéni menü és a téma közötti kód ütközésének eredménye. Az első dolog, amit meg kell tennie, ha a menü nem működik, váltson át egy alapértelmezett témára, például húsz húszra. Ha a menü újra működni kezd, tudni fogja, hogy a probléma a témához kapcsolódik. Ezután kapcsolatba léphet a téma fejlesztőjével, hogy megoldást keressen.

néhány további lehetséges ok a következő:

  • hibás kód: ellenőrizze még egyszer, hogy minden hozzáadott egyéni CSS helyes-e, és hogy a 4.lépésben leírt CSS osztályokat használja-e.
  • Plugin inkompatibilitás: próbálja meg letiltani a telepített menüvel kapcsolatos bővítményeket, hogy megtudja, ez megoldja-e a problémát.
  • elavult jQuery: frissítsen a jQuery legújabb verziójára, és próbálja meg újra megnyitni a legördülő menüt.

azonban, mint korábban említettük, a hibás menü mögött számos lehetséges ok áll. Ha úgy tűnik, hogy a fenti megoldások egyike sem működik, javasoljuk, hogy látogassa meg a WordPress Támogatási fórumait, keresse fel szakértőnket Kinsta WordPress támogatási csapat, vagy béreljen fel egy WordPress fejlesztőt, hogy javítsa ki az Ön számára.

a navigációs menük kulcsfontosságúak a webhely UX-jéhez. De mi van, ha rengeteg menüpont van, amire szüksége van? Legördülő menü a neve a játék itt! Nézze meg, milyen könnyű létrehozni egyet ezzel az útmutatóval! kattintson Tweet

összefoglaló

bár úgy tűnhet, mint egy kis kérdés, a WordPress webhely navigációja sikeressé teheti vagy megszakíthatja sikerét. A legördülő menük használatával helyet takaríthat meg a felhasználók képernyőjén, miközben lehetővé teszi számukra, hogy könnyedén megkerüljék a webhelyet, és javítsák a konverziókat.

Ha tetszett ez a bemutató, akkor szeretni fogja a támogatást. A Kinsta összes tárhelycsomagja 24/7 támogatást tartalmaz veterán WordPress fejlesztőinktől és mérnökeinktől. Csevegjen ugyanazzal a csapattal, amely támogatja a Fortune 500 ügyfeleinket. Tekintse meg terveinket