Néha találsz egy fantasztikus témát, és rájössz, hogy jó lenne, ha lenne egy extra navigációs menü a fontos vagy gyakran használt linkekkel, hogy növeld a WordPress oldalad használhatóságát.
Egy kis kódolással gyorsan létrehozhatod az új menü alapját, és készen áll arra, hogy a témádhoz igazítsd.
Ha nem szeretne kóddal bíbelődni, számos olyan bővítmény létezik, amely elvégezheti Ön helyett a nehezét, és stilizálási lehetőségeket is biztosít.
Nem számít, melyik lehetőséget választja, az alábbi útmutató segít Önnek a megvalósításban.
Egyszerű házimunka
Az új menü létrehozásához szerkesztenie kell a témafájljait. Mielőtt változtatásokat végeznél bármelyik alapfájlodon, a legjobb, ha biztonsági mentést készítesz az egész webhelyedről, arra az esetre, ha valami elromlana menet közben. Így gyorsan visszaállíthatja webhelyét, és olyan lesz, mintha semmi sem történt volna.
Helyzetéről manuálisan is készíthet biztonsági mentést FTP-n keresztül vagy egy plugin segítségével, például a mi saját Snapshotunkkal. Csak győződjön meg róla, hogy mind az adatbázisának, mind a fájloknak a másolatát a webhelyétől elkülönített helyre menti, hogy minimalizálja a biztonsági mentés elvesztésének kockázatát.
Külső téma felépítése
Új menük kóddal történő létrehozásához olyan módosításokat kell végrehajtania, amelyek a téma frissítésekor elvesznének. Egy gyermektéma létrehozása gondoskodik erről a problémáról.
A gyermektéma létrehozásához szükséges részleteket megtalálod néhány másik bejegyzésünkben: Hogyan hozzunk létre WordPress gyermektémát és Hogyan hozzunk létre automatikusan gyermektémákat a WordPressben.
Egy teljesen új saját témát is létrehozhatsz, vagy kipróbálhatod egy helyi vagy tesztoldalon.
Ezekben a bejegyzésekben további részleteket olvashatsz arról, hogyan hozhatsz létre egy helyi WordPress telepítést:
- Hogyan fejlesszük a WordPress-t helyben a MAMP segítségével
- Hogyan telepítsük a XAMPP-t és a WordPress-t helyben PC/Windows-ra
- Hogyan telepítsük a WordPress-t helyben 5 perc alatt a DesktopServerrel
- A helyi WordPress telepítés élő webhelyre való áttelepítésének gyors és egyszerű útmutatója
- Hogyan helyezzük át a WordPress-t helyi fejlesztés céljából a XAMPP-vel
.
Ha már beállította valamelyik lehetőséget, szabadon elkezdheted létrehozni az extra navigációs menüket. Bár, ha úgy döntesz, hogy egy bővítményt vagy témakeretet használsz, akkor nem kell létrehoznod egy gyermektémát.
Új menük létrehozása
Ahhoz, hogy az admin műszerfaladon a Megjelenés > Menük menüpont alatt hozzáadj egy kiválasztható menühely opciót, meg kell tenned az úgynevezett “menü regisztrálását”. Ehhez mindössze egy kódrészletet kell hozzáadni a functions.php fájlodhoz, amely a wp-content > themes > your-theme.
A cPanelben kattints a Fájlkezelő ikonra a főoldalon a Files részben. Ha korábban nem állítottad be a Fájlkezelőt úgy, hogy a webhelyed dokumentumgyökerébe töltsön be, most navigálj oda.
A /wp-includes/ mappában van egy functions.php fájl, de nem azt kell szerkesztened. Győződj meg róla, hogy megtalálod a functions.php fájlt, amely az általad használt témában található. Ellenkező esetben hibaüzeneteket kapnál, amikor később megpróbálnád hozzáadni a megtalált kódot.
Keresd meg a functions.php fájlt, és kattints rá egyszer, majd kattints az oldal tetején található Szerkesztés gombra.
Ha egy felugró ablak nyílik, egyszerűen kattints a jobb alsó sarokban található Szerkesztés gombra. Előfordulhat, hogy nem jelenik meg, ha korábban letiltotta.
Görgessen a fájl aljára. Ha csak egy menüt szeretnél hozzáadni, akkor a következő kódot írd be egy új sorba:
function register_my_menu() {register_nav_menu('new-menu',__( 'New Menu' ));}add_action( 'init', 'register_my_menu' );
Ebben a példában a New Menu az a név, amely az admin műszerfal menüoldalán fog megjelenni, hogy emberi szemmel is érthető legyen. A new-menu név az, amit a WordPress érteni fog, hogy a kódodat megfelelően hajtsa végre.
A menüt nevezheted, ahogyan csak akarod, de ügyelj arra, hogy csak az ember számára olvasható név tartalmazzon szóközöket és nagybetűket.
Ha több menüt szeretnél hozzáadni a webhelyedhez, akkor helyette ezt a kódot add egy új sorba:
Ezzel a módszerrel annyi új menüt adhatsz hozzá, amennyit csak szeretnél. Az elnevezésükre ugyanazok a szabályok vonatkoznak.
Mentse el a fájlban elvégzett módosításokat. Most már csak az új menü hozzáadása van hátra az oldaladhoz.
Menühelyek hozzáadása a témádhoz
Ez az a pont, ahol el kell döntened, hogy hol szeretnéd elhelyezni a menüt. Ha azt szeretnéd, hogy a menü az oldalad tetején jelenjen meg, akkor a header.php fájlt kell szerkesztened. A láblécbe is elhelyezheted, ami azt jelenti, hogy a footer.php fájlt kell szerkesztened.
A menüt akár egy oldalon is megjelenítheted a sablonfájl szerkesztésével, vagy egy oldalsávra, a sidebar.php fájl szerkesztésével.
Az új menüt ott helyezheted el, ahol csak szeretnéd. Íme a minimális kód, amit a fenti helyek bármelyikéhez hozzá kell adnod:
<?php wp_nav_menu( array( 'theme_location' => 'new-menu' ) ); ?>
Elég, ha a new-menu helyébe a WordPress általad választott, olvasható nevet teszed. A menüt valószínűleg CSS-szel szeretnéd megformázni, hogy az alapvető funkcionalitáson túlmenően jól is nézzen ki. Ehhez létre kell hoznod egy osztályt, és hozzá kell adnod a témádhoz a következő kóddal.
<?php wp_nav_menu( array( 'theme_location' => 'new-menu', 'container_class' => 'new_menu_class' ) ); ?>
Az előzőekhez hasonlóan cseréld ki a new-menu-t az általad választott névre. Ebben a példában az általam létrehozott osztályt new_menu_class-nek neveztem el. Ezt megváltoztathatja, de mindenképpen frissítse ezt a kódot, hogy tükrözze a módosítást.
Nyomja meg a Mentés gombot, és lépjen át a Megjelenés > Menük az irányítópulton. Észre fogod venni, hogy az új menüid a Témahelyek menüpontok alatt lesznek felsorolva a Menübeállítások szakaszban.
Most már láthatod az új menühelyeket felsorolva. A menü hozzáadásakor kiválaszthat egy vagy az összes helyet.
Az újonnan létrehozott menühelyeken megjelenő linkek megjelenítéséhez kattintson az oldal tetején az Új menü létrehozása gombra.
Ha még nincs menüje, az oldalon található mezőben megadhatja a menü nevét, majd kattintson a Menü létrehozása gombra. Ha már van korábban létrehozott menüje, akkor kattintson az oldal teteje felé található Új menü létrehozása linkre.
Ha már létrehozott egy új menüt, a “Helyek kezelése” fül alatt kezelheti a megjelenítési helyeket is.
Stilizálás, bővítmények és reszponzív menük
Az új menüje most már készen áll a CSS segítségével történő stilizálásra. A szükséges kódolás az általad használt témától függ, így ebben a bejegyzésben nem fogok belemenni, de van egy másik bejegyzésünk, amit megnézhetsz ezzel kapcsolatban: Hogyan hozzunk létre egy félelmetes reszponzív menüt a WordPress témádhoz? Ez azt is megmutatja, hogyan hozhatsz létre reszponzív menüket, amelyek mobilkészek.
Ha egy egyszerűbb lehetőséget szeretnél, számos olyan bővítmény létezik, amely a témád stílusai alapján reszponzív menüket hoz létre. Az egyik legjobb, amit találtam, a Responsive Menu.
A ShiftNav, a WP Responsive Menu és a Max Mega Menu nevű említéseket is hasznosnak találhatod.
Források a továbblépéshez
Most már rendelkezel a szilárd alapokkal, amelyekre szükséged van ahhoz, hogy további menüket hozz létre a témádhoz, és forrásokkal, amelyek segítenek a továbblépésben. Akár magad kódolod, akár egy bővítményt vagy egy téma keretrendszert használsz, most már van egy új menü a WordPress oldaladon.
Ha problémákba ütközöl, csak rajta, és kérdezd meg támogató hőseinket. Ők szakértő tanácsokkal és támogatással tudnak segíteni szinte bármilyen probléma megoldásában. Nyithatsz egy jegyet a támogatási fórumunkon, és mi azonnal ott leszünk, hogy segítsünk neked.
Az új témád stílusával kapcsolatos további információkért számos forrást megnézhetsz, és mindet megtalálod az A Mega Guide to Learning and Referencing CSS for WordPress című bejegyzésünkben: 150+ Resources.
Megnézheted néhány más bejegyzésünket is: 10 Simple Tips for Learning CSS for WordPress, 25 Expert Tips for Cleaner CSS Coding for WordPress, 25 Pro Tips for Improving Your CSS Workflow and 5 Free CSS Plugins for Live Editing Your WordPress Site for more details for coding some CSS for your theme.
- menük
- navigáció