Most, hogy tudjuk, hogyan hozzunk létre egy alapvető WordPress témát a semmiből, nézzük meg, hogyan hozzunk létre egy egyéni navigációs menüt a témánkhoz. Ennek a menünek rendelkeznie kell azzal a képességgel, hogy a WordPress műszerfaláról vezérelhető legyen. Más szóval, képesnek kell lenned arra, hogy belépj a Dashboardba, és hozzáadj vagy eltávolíts linkeket bármelyik oldalhoz, bejegyzéshez vagy kategóriához, amelyik tetszik. Ennek a bemutatónak a végére pontosan ez lesz a miénk. Ássuk bele magunkat, és nézzük meg, hogyan érhetjük el ezt a célt.
Open header.php
Menjünk előre, és nyissuk meg a header.php fájlt abból a témából, amin eddig dolgoztunk. A célunk egy olyan menü hozzáadása lesz, amely az oldal fő tartalma felett, de az oldal neve és a szlogen területe alatt él. Ehhez az alábbi kódot adhatjuk hozzá:
<!DOCTYPE html><html <?php language_attributes(); ?>><head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <title><?php bloginfo( 'name' ); ?></title><?php wp_head() ?></head><body <?php body_class(); ?>><div class="container"> <header class="site-header"> <h1><a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></h1> <h4><?php bloginfo( 'description' ); ?></h4> <nav class="navigation-menu"><?php wp_nav_menu() ?> </nav> </header>Megjegyezzük, hogy a WordPress által rendelkezésünkre bocsátott wp_nav_menu() speciális függvényt használjuk. Ez a függvény elvégzi helyettünk az összes lábmunkát az egyéni menü létrehozásával kapcsolatban. Nem kell kézzel beírnod magadnak az összes html-t, így ez nagyon hasznos. Most még nincs sok oldalunk, de ha meglátogatjuk a tesztoldalunkat, a függvény máris kiad egy linket a mintaoldalra, amely a telepítésünkön létezik.
Argumentumok átadása a wp_nav_menu() függvénynek
A WordPress legtöbb függvényéhez hasonlóan a wp_nav_menu() függvénynek is átadhatunk opcionális argumentumokat. Itt egy tömböt fogunk létrehozni, és csak egy opciót fogunk beállítani. Tömböt használunk arra az esetre, ha a jövőben több opciót szeretnénk átadni. Így adhatnánk hozzá ezt a kóddarabot.
<!DOCTYPE html><html <?php language_attributes(); ?>><head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <title><?php bloginfo( 'name' ); ?></title><?php wp_head() ?></head><body <?php body_class(); ?>><div class="container"> <header class="site-header"> <h1><a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></h1> <h4><?php bloginfo( 'description' ); ?></h4> <nav class="navigation-menu"><?php $args = ; ?><?php wp_nav_menu( $args ) ?> </nav> </header>Ez az opció lehetőséget ad arra, hogy bizonyos menüket elnevezzünk a témánkban. Lehet, hogy egynél több menüt szeretnénk, és ez az a módszer, amellyel megkülönböztethetjük a több menüt.
Regisztrálni a menü helyét a functions.php fájlban
Hogy a header.php fájlunkban az imént létrehozott menüt a WordPress admin műszerfaláról használhassuk, regisztrálnunk kell a menü helyét a téma functions.php fájljában. Hogyan regisztrálhatjuk tehát az új menünket a WordPressben? Ezt a WordPressbe épített register_nav_menus() függvénnyel tehetjük meg. Regisztráljuk a menünket így:
<?phpfunction custom_theme_assets() {wp_enqueue_style( 'style', get_stylesheet_uri() );}add_action( 'wp_enqueue_scripts', 'custom_theme_assets' );register_nav_menus( );Egyéni menünk beállítása a WordPress Dashboardban
Az új menünket most már regisztrálnunk kell a WordPress core-ban. A WordPress most már tisztában van a menünkkel, és annak helyével a témában. Most már beléphetünk a műszerfalba, létrehozhatunk egy új menüt, és kezelhetjük annak helyét. Konkrétan azt akarjuk elérni, hogy ott jelenjen meg, ahol azt a wp_nav_menu() függvényt használtuk. Látogassunk el a Megjelenés->Menük menüpontra, majd kattintsunk az ‘új menü létrehozása’ gombra.
A menüt úgy nevezhetjük el, ahogy nekünk tetszik. Az egyszerűség kedvéért csak a Főmenü nevet választjuk, majd kattintsunk a ‘Menü létrehozása’ gombra.
A következő lépésben az összes kategóriánkat összekapcsoljuk. Tehát kiválaszthatjuk a Kategóriák, Mindent kiválasztunk, a Megjelenítés helyét ‘Elsődleges menü’-re frissítjük, majd a ‘Menü mentése’ gombra kattintunk. Próbáljuk ki.
Az oldalunkat meglátogatva láthatjuk, hogy most már minden egyes kategóriához kapunk egy linket az általunk létrehozott új menüben. Ez egyelőre csak egy rendezetlen lista, és még nem a legszebb – de működik!
Mi a haszna az egyéni menü regisztrálásának?
Tudom, tudom. Arra gondolsz, hogy nincs is értelme végigcsinálni ezt az egész felhajtást csak azért, hogy néhány kategóriára mutató hiperhivatkozás megjelenjen az oldaladon. Bizonyos szempontból igazad van. Miért nem építed fel ezeket a dolgokat kézzel magad. Persze, ezt is meg lehet tenni, de ha úgy építjük ki a menünket, ahogy itt tettük, akkor most már a WordPress Dashboard hatalmában áll a témánkba beépített kódot ellenőrizni. Most már könnyedén áthúzhatjuk a linkrendezést többek között közvetlenül a Dashboardról. Változtassuk meg a sorrendet WordPress, PHP, JavaScriptről JavaScriptre, WordPressre, majd PHP-ra. Nagyon egyszerű!
Most, amikor meglátogatjuk az oldalt, a menüben lévő linkek sorrendje frissül. Ezzel a megközelítéssel nincs szükség a mögöttes kóddal való babrálásra.
Style that custom menu
A rendezetlen lista egyszerűen nem lesz elég! Ennél egy kicsit elegánsabbá kell tennünk a dolgokat. Töltsünk egy kis időt néhány egyéni CSS alkalmazásával, hogy egy kicsit megtisztítsuk a menüt. Először is, a függőlegesen tájolt rendezetlen listát vízszintesen tájolt menüvé akarjuk alakítani. Szeretnénk továbbá eltávolítani az egyes listaelemek felsoroláspontjait, hozzáadni némi kitöltést és margót, valamint eltávolítani a linkek aláhúzását. Íme egy próbálkozás ennek a hatásnak a létrehozására a style.css fájlban.
/* Nav Menu */.navigation-menu ul { margin: 0; padding: 0;}.navigation-menu ul:before, .navigation-menu ul:after { content: ""; display: table;}.navigation-menu ul:after { clear: both;}.navigation-menu ul { *zoom: 1}.navigation-menu ul li { list-style: none; float: left; margin-right: 3px;}.navigation-menu ul li a:link,.navigation-menu ul li a:visited { display: block; padding: 12px 17px; border: 2px solid #ecf0f1; border-bottom: none; text-decoration: none;}A fenti CSS-ben elég sok minden történik. Menjünk végig rajta. Az első .navigation-menu ul szelektorban eltávolítunk minden paddingot és margót a rendezetlen listából. Ezután gondoskodunk arról, hogy a rendezetlen lista törölje a listaelemek gyermekeinek lebegését. A .navigation-menu ul li szelektorban eltávolítjuk a listából a golyósorokat, a listaelemeket balra lebegtetjük, és jobbra egy kis margót adunk hozzá. A végén megcélozzuk a linkeket. Először blokk szintű elemmé alakítjuk őket 12px függőleges és 17px vízszintes kitöltéssel. Hozzáadunk egy szép kerethatást, és eltávolítjuk az aláhúzást a linkeken. Most nézzük meg a böngészőben.
Klassz! Ez a menü sokkal jobban néz ki, mint eredetileg.
Hogyan adjunk egyéni színt a lebegtetéskor a menühöz
Az alapvető styling ins a helyén. Jó lenne egy kis hover effekt, amikor az ember az egeret az egyes linkek fölé viszi. Ez nagyon könnyen beállítható az alábbi snippet segítségével:
.navigation-menu ul li a:hover { background-color: #ebf5fb;}
Ez elég jól néz ki!
Hogyan célozzuk meg egy menüpont aktív állapotát
Egy másik dolog, amit talán szeretnénk hozzáadni, az az aktív link színének testreszabása. Ez eltér az egyszerű lebegőhatástól. Ebben az esetben, amikor meglátogatunk egy adott linket a menüből, azt szeretnénk, ha a WordPress tudatában lenne annak, hogy ez most az aktív oldal, amelyet megtekintünk, és frissítené a vizuális megjelenítést, hogy tükrözze az aktív linket. Ehhez igénybe vehetünk egy speciális osztályt, amely éppen erre a célra van beépítve a WordPressbe. Ez a current-menu-item osztály. Íme, hogyan tudjuk beépíteni az egyéni menünkbe.
.navigation-menu ul li.current-menu-item a:link,.navigation-menu ul li.current-menu-item a:visited { background-color: #4285f4; color: #ffffff;}Ha most meglátogatjuk az oldalunkat, és kipróbáljuk az egyéni menüben lévő különböző linkek meglátogatását, láthatjuk, hogy nagyon szépen néz ki. Most már van egy sajátos megjelenésünk a lebegő állapothoz, és egy másik megjelenésünk a menüben lévő linkek aktív állapotához. Ez egy nagyszerű módja annak, hogy webhelyünk látogatói tudják, hogy éppen hol tartózkodnak azáltal, hogy az aktív menü úgymond világít.
How To Create A Custom Menu In WordPress Summary
Ebben a bemutatóban jól megnéztük, hogyan adhatunk hozzá egy egyéni menüt az egyéni témánkhoz a WordPressben. Ehhez segítségül hívtunk néhány WordPress funkciót. Az első, amelyet felhasználtunk, a wp_nav_menu() volt. Ez a függvény képes automatikusan létrehozni egy rendezetlen listát és gyermekelemeket, hogy létrehozza egy szép menü struktúráját, amelyre stilizálást alkalmazhatunk. Számos argumentumot adhatsz át ennek a függvénynek, de mi itt csak az alapokra koncentráltunk. A következő függvény, amelyet használtunk, a register_nav_menus() függvény volt. Ez a függvény lehetővé teszi számunkra, hogy tájékoztassuk a WordPress-t az új menüpontunkról, és bekapcsoljuk azt a WordPress műszerfalon. Miután az új menünket regisztráltuk a WordPressnél, úgy találtuk, hogy könnyen hozzáadhatunk vagy eltávolíthatunk bármit, amit csak akarunk ebből a menüből, közvetlenül a WordPress műszerfaláról, anélkül, hogy bármilyen kódot kellene szerkesztenünk a témafájljainkban. Végül szántunk egy kis időt arra, hogy némi egyéni CSS-formázással javítsuk a menü kinézetét.