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.