Hogyan építsünk WordPress navigációt a wp_nav_menu () használatával

Minden modern WordPress témának tartalmaznia kell számos közös elemet a kódon belül. A kézi navigáció fizikai kódolása akkor működik, ha már létrehoztad a tartalmat, de egyáltalán nem túl dinamikus.

A legjobb módszer a saját WP navigációs programozás létrehozása, amelyet a rendszergazda a saját menükbe köti össze.

Ebben a cikkben szeretném végigvenni azokat az alapokat, amelyeket követned kell, amikor saját navigációt hozol létre egy témában. Átnézünk sok egyéni lehetőséget, és hogyan lehet beállítani egy teljesen új menüt a semmiből. Ehhez a cikkhez nem kell semmit létrehoznod, úgyhogy gondolj rá inkább egy útmutatóként a kódolás során.

A bejegyzés angol nyelvű verziója itt érhető el: How to Build WordPress Navigation Using wp_nav_menu()

A navigációs menü alapjai

Régen, a WordPress 3.0 sok fejlesztése előtt a fejlesztők tipikusan a wp_page_menu () -t használták a témafejlődésben. Ezzel az oldalak teljes listáját, a kezdőlapra mutató linket outputolják, és vannak olyan paraméterei, amelyek a kódban szerepelnek. Ezt továbbra is használhatod az oldalsávban vagy láblécén, ha van értelme.

De van egy sokkal népszerűbb navigációs módszer, amely a WordPress beépített menürendszerén keresztül történik. Az adminisztrátorok annyi egyéni menüt hozhatnak létre, amennyit szeretnének, dragging & dropping linkek a manuális hierarchia és struktúra létrehozása érdekében. Közvetlenül kezelheted a linkeket a bejegyzésekhez, oldalakhoz, kategóriákhoz, címkékhez, gyakorlatilag bármihez a webhelyeden. Az első lépés az, hogy egy kódot írj a functions.php fájlba, amely létrehozza a navigációs menüt. Ez történhet a register_nav_menu () vagy a register_nav_menus () paranccsal, ha több elem van. Ezek a menük csak egy $location nevű azonosítót igényelnek egy kis leíró karakterlánccal.

1

register_nav_menu( 'primary', 'Primary Menu' );

A $location több mint egy slug ID, amelyet a téma menüjének azonosításához használnak. Használhatod ezt az eszközt bármely PHP téma fájlban. Ezenkívül vedd figyelembe, hogy a navigációs menük automatikusan iniciálják a téma támogatását, így nem kell add_theme_support () menüt használni.

Pozíciók a témádban

A functions.php menüpontjainak beállításával át kell menni a többi témafájlra. Kezdjük egy olyan tipikus helyszínen, mint a header.php, ahol hozzáadhatunk egy nagyon egyszerű kódot. Ez a minta át van másolva a wp_nav_menu () kódexből és tartalmazza az összes opcionális paramétert.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

$defaults = array(
	'theme_location'  => '',
	'menu'            => '',
	'container'       => 'div',
	'container_class' => '',
	'container_id'    => '',
	'menu_class'      => 'menu',
	'menu_id'         => '',
	'echo'            => true,
	'fallback_cb'     => 'wp_page_menu',
	'before'          => '',
	'after'           => '',
	'link_before'     => '',
	'link_after'      => '',
	'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
	'depth'           => 0,
	'walker'          => ''
);
 
wp_nav_menu( $defaults );

Ezeket a lehetőségeket a következő részben fogjuk megtárgyalni. Kezdjük az első kettővel. Ne feledd, hogy ezek mind opcionálisak, mert a fent látható értékek alapértelmezettnek minősülnek, ha nem írják felül. A theme_location-nak meg kell egyeznie a menüben regisztrált helycsatornával. Ez az egyetlen olyan érték, amelyet meg kell változtatni annak biztosítása érdekében, hogy megfelelően illeszkedjen.

Paraméterek beállítása

A többi beállítás elsősorban a testreszabásról szól, ezért figyelmen kívül hagyhatod. De tekintsük meg a többit, hogy jobban megismerhessük a lehetőségeket.
A container, a container_class és a container_id a menü megtervezésénél előnyös. A külső container elem az UL körül van, így akár HTML5 <nav> is lehet, ha tetszik a szemantika.

A menu_class és a menu_id a saját rendezetlen listára kerül. Minden menü a .menu osztályt kapja, szóval érdemes megváltoztatni, ha többször is használnád. Az echo param ezt a funkciót adja meg a HTML menü megjelenítéséhez, különben visszaadja az értéket egy függvényre vagy PHP változóra. Amikor a wp_nav_menu () nem tud futni valamilyen okból, akkor a wp_page_menu ()  automatikusan visszaesik, amint azt korábban már említettem.

A következő két előtte és utána param minden HTML-t közvetlenül a horgony linkek előtt, vagy csak a bezárás után fognak outputolni. A link_before és a link_after a HTML linket a horgony linkek közé illeszti, közvetlenül a szöveg előtt és után. Ne feledkezz meg ezekről a lehetőségekről, és győződj meg róla, hogy nem keverednek össze! Ha kétségeid vannak, ellenőrizd a támogatási kódot.

Most, ha nem szeretnél rendezetlen listát használni, megváltoztathatod belülről az items_wrap elemet. A sprintf () típusú szintaxist használva ugyanazon funkciójú dinamikus paraméterek értékeinek helyébe lép. % 1 $ s hivatkozik a menu_idre,% 2 $ s hivatkozik a menu_classra, és % 3 $ s kapcsolódik a kimenő listaelemekhez. Mivel az <li> elemek megváltoztatása sok extra munkát igényel, általában csak hagyjuk ezt egyedül.

Végül a mélységi paraméter megmondja a menünek, hogy milyen mélyre kell menni a hierarchia felé. Ha a fejléc navigáció csak egyszintű legördülő menü, akkor csak egy szint mélységre van szükségünk. Vagy lehet egy 2-tier flyout menü, amely 2 szintet tud használni. A -1 egy speciális érték, amely a menü összes linkjét megjeleníti, ugyanakkor ugyanazt a megjelenítési szintet kondenzálja.

Most a $ walker elem egy speciális paraméter, amely testreszabhatja, hogy a WordPress hogyan adja ki a tartalmat egy fa hierarchiában. Egy új osztályobjektumot vár el, amely testreszabott módszereket tartalmaz az elemek kimenetéhez. Ez egy meglehetősen fejlett téma, de erről többet olvashatsz a Walker osztály referencia útmutatójában.

Menük létrehozása a WP Adminból

Ez az utolsó bit a rendszergazdáknak és webmestereknek jobb menüket biztosít a menük megértéséhez. Miután bejelentkeztél az admin panelbe, menj a "Megjelenés" elemre, majd kattints a menük linkre.

Innentől át kell rendezned a linkeket, a bal harmonikán a jobb oldali szakaszba szervezve.  Adhatsz a menünek egy nevet, amelyre hivatkozni lehet a PHP-ban - de vedd figyelembe, hogy a felső részen látható lesz egy legördülő menü. Regisztráld a navigációt és add meg a témakört ebben a legördülőben. Így tudják a webmesterek saját menüiket megszervezni anélkül, hogy PHP-t kellene kódolniuk.

A bal oldalon választhatsz az oldalak, hozzászólások, linkek, kategóriák és címkék között. Ha a jobb felső sarokban lévő kis képernyőre kattintasz a "Képernyőbeállítások" mellett, elrejthetsz a képernyők közül néhányat. Az egyes linkek célmegadásához (például target = "_ blank") vagy akár egyedi CSS-osztályok létrehozásához speciális menüopciók is találhatók.

Minden egyes kategória link eltérő osztályt használhat az egyedi színekhez a kiválasztáskor. Alapértelmezés szerint minden linknek meg fogsz adni egy rövid szöveget és rövid leírást, amelyet gyakran csak a weboldal rendszergazdája használ. A hivatkozások is lehetnek cím attribútumok és egyedi XFN értékek.

Minél többet fogod gyakorolni a menü rendszer használatát, annál világosabb lesz. Mint fejlesztő, aki évek óta használ WordPresst, úgy találom, nagyon praktikus. Azok az újonnan érkezők, akik csak a WordPress alapjait tanulják, még mindig gyorsan fel tudnak zárkózni bármilyen különösebb nehézség nélkül.

Lezárás

Remélem, ez az áttekintés némileg segíteni fog a fejlesztőknek könnyebben beleugrani a témába. Nyilvánvaló, hogy vannak más fontos szempontok is egy téma kódolásánál. De a navigáció annyira elengedhetetlen, mégis kissé zavaró, főleg ha eddig még soha nem építettél semmi ilyesmit. Próbáld ki ezeket a minta PHP kódokat, és nézd meg, mi válhat hasznodra.