Egyéni navigációs menüket szeretnél hozzáadni a WordPress témádhoz? A navigációs menük a legtöbb webhely tetején megjelenő linkek vízszintes listája.
A WordPress témák alapértelmezés szerint előre meghatározott menühelyekkel és elrendezésekkel rendelkeznek, de mi van akkor, ha saját, egyéni navigációs menüket szeretne hozzáadni?
Ebben a cikkben megmutatjuk, hogyan hozhatsz létre és adhatsz hozzá egyszerűen egyéni navigációs menüket a WordPressben, így bárhol megjelenítheted őket a témádban.
- Mikor van szükséged erre a WordPress navigációs menü bemutatóra?
- Egyéni navigációs menük létrehozása WordPress témákban
- Egyéni navigációs menük megjelenítése WordPress témákban
- Egyedi navigációs menü hozzáadása a WordPressben az Oldalépítő használatával
- Mobilbarát, reszponzív menük készítése a WordPressben
- Tegyen többet a WordPress navigációs menükkel
A legtöbb WordPress téma legalább egy olyan helyet tartalmaz, ahol megjelenítheted webhelyed navigációs linkjeit egy menüben.
A menüpontokat egy könnyen kezelhető felületről kezelheted a WordPress admin területen belül.
Ha csak navigációs menüket szeretnél hozzáadni a webhelyedhez, akkor egyszerűen kövesd a kezdőknek szóló útmutatónkat arról, hogyan adhatsz hozzá navigációs menüt a WordPressben.
Ez az útmutató célja, hogy segítsen a barkácsoló / középhaladó felhasználóknak egyéni navigációs menük hozzáadásában a WordPress témáikhoz.
A következő témákkal foglalkozunk ebben a cikkben:
- Egyéni navigációs menü létrehozása WordPress témákban
- Egyéni navigációs menü megjelenítése WordPress témában
- Egyéni navigációs menü hozzáadása WordPressben az oldalépítő segítségével
- Mobilbarát reszponzív menük létrehozása WordPressben
- Minden, amit a WordPress navigációs menükkel tehetsz
Ezzel együtt, nézzük meg, hogyan adhatunk hozzá egyéni WordPress navigációs menüket a témánkhoz.
A navigációs menük a WordPress témák egyik jellemzője. Minden téma meghatározhatja a saját menühelyeit és a menük támogatását.
Egyéni navigációs menü hozzáadásához először is regisztrálnia kell az új navigációs menüt a következő kód hozzáadásával a téma functions.php fájljához.
function wpb_custom_new_menu() { register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));}add_action( 'init', 'wpb_custom_new_menu' );
Ezután a WordPress adminisztrátorodban a Megjelenés ” Menük oldalra léphetsz, és megpróbálhatsz létrehozni vagy szerkeszteni egy új menüt. Látni fogod a ‘Saját egyéni menü’ mint téma helye opciót.
Ha egynél több új navigációs menühelyet szeretnél hozzáadni, akkor egy ilyen kódot kell használnod:
function wpb_custom_new_menu() { register_nav_menus( array( 'my-custom-menu' => __( 'My Custom Menu' ), 'extra-menu' => __( 'Extra Menu' ) ) );}add_action( 'init', 'wpb_custom_new_menu' );
Mihelyt hozzáadtad a menühelyet, menj tovább és adj hozzá néhány menüpontot a WordPress adminban, követve a navigációs menük hozzáadásáról szóló útmutatót kezdőknek.
Ez lehetővé teszi számunkra, hogy továbblépjünk a következő lépésre, ami a menü megjelenítése a témádban.
A következő lépésben meg kell jelenítenünk az új navigációs menüt a WordPress témában. A leggyakoribb hely, ahol a navigációs menüket általában elhelyezik, a webhely fejléc szakasza, közvetlenül a webhely címe vagy logója után.
Mindenesetre a navigációs menüt bárhol elhelyezheted, ahol csak szeretnéd.
Ezt a kódot a témád sablonfájljába kell beillesztened, ahol a menüt meg akarod jeleníteni.
<?phpwp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'container_class' => 'custom-menu-class' ) ); ?>
A téma helye az a név, amelyet az előző lépésben kiválasztottunk.
A konténer osztály az a CSS osztály, amelyet a navigációs menüjéhez adunk. A menüje egyszerű felsorolásos listaként fog megjelenni a webhelyén.
Az .custom_menu_class CSS-osztályt használhatja a menük stílusához. Íme egy minta CSS, amely segít a kezdésben:
div.custom-menu-class ul { margin:20px 0px 20px 0px; list-style-type: none; list-style: none; list-style-image: none; text-align:right;}div.custom-menu-class li { padding: 0px 20px 0px 0px; display: inline;} div.custom-menu-class a { color:#FFFFFF;}
Ha többet szeretnél megtudni a navigációs menü stílusáról, lásd a WordPress navigációs menük stílusáról szóló részletes útmutatónkat
Ha egyéni landing page vagy home page elrendezést készítesz, akkor egy WordPress oldalépítő plugin használatával sokkal egyszerűbbé válna az egész.
A Beaver Builder használatát javasoljuk, amely a legjobb WordPress oldalépítő a piacon. Lehetővé teszi bármilyen típusú oldalelrendezés létrehozását egyszerű drag and drop eszközökkel (nincs szükség kódolásra).
Ez magában foglalja az egyéni navigációs menü hozzáadását is az oldal elrendezéséhez.
Először is telepítenie és aktiválnia kell a Beaver Builder bővítményt. További részletekért lásd a WordPress bővítmény telepítésének lépésről lépésre történő útmutatóját.
Az aktiválás után létre kell hoznod egy új oldalt vagy szerkesztened kell egy meglévőt, ahol a navigációs menüt szeretnéd hozzáadni. A bejegyzésszerkesztő képernyőn kattintson a ‘Beaver Builder indítása’ gombra.
Ha új oldalról van szó, akkor használhatja a Beaver Builderhez mellékelt kész sablonok egyikét. A kilépő oldalát is azonnal szerkesztheti.
A következő lépésben hozzá kell adnod a Menük modult, majd húzd az oldaladon arra a helyre, ahol a menüt meg szeretnéd jeleníteni.
Ez egy felugró ablakban megjeleníti a Menü modul beállításait. Először ki kell választania a használni kívánt navigációs menüt. Mindig létrehozhatsz új menüket vagy szerkeszthetsz egy meglévő menüt a WordPress admin területén a Megjelenés ” Menük oldalra látogatva.
A többi beállítást is áttekintheti. A Beaver Builder lehetővé teszi, hogy egyéni színeket, hátteret és egyéb stílustulajdonságokat válasszon a menüjéhez.
Amint végzett, a Mentés gombra kattintva megtekintheti a menüt.
A mobileszközök használatának növekedésével érdemes mobilbaráttá tenni a menüket a sok népszerű effektus egyikének hozzáadásával.
A mobil menükhöz hozzáadhatod a slide-out hatást (fent), a dropdown hatást, vagy akár a toggle hatást is.
Egy részletes, lépésről lépésre követhető útmutatót adunk arról, hogyan készíts mobilkész reszponzív WordPress menüket.
A navigációs menük egy hatékony webdesign eszköz. Lehetővé teszik, hogy a felhasználókat a weboldalad legfontosabb részeire irányítsd.
A WordPress lehetővé teszi, hogy sokkal többet tegyen, mint csak linkeket jelenítsen meg a menüben. Próbálja ki ezeket a hasznos útmutatókat, hogy bővítse a navigációs menük funkcionalitását WordPress webhelyén.
- Hogyan adjunk képikonokat navigációs menükhöz a WordPressben
- Hogyan adjunk feltételes logikát a WordPress menükhöz
- Hogyan adjunk menüleírásokat a WordPress témádhoz
- Hogyan adjunk teljes képernyős reszponzív menüt a WordPressben
- Hogyan adjunk megamenüt a WordPress webhelyedhez
Ez minden, reméljük, hogy ez a végső útmutató segített megtanulni, hogyan kell navigációs menüt hozzáadni a WordPressben. Érdemes megnézni a 25 leghasznosabb WordPress widgetet tartalmazó listánkat is, valamint a kötelezően szükséges WordPress bővítmények listáját.
Ha tetszett ez a cikk, akkor kérjük, iratkozz fel YouTube-csatornánkra a WordPress-videós oktatóanyagokért. Megtalálhat minket a Twitteren és a Facebookon is.