WordPress võimaldab kasutada nn Walkeri klasse elementide läbimiseks ja kuvamiseks hierarhilises struktuuris. Selles postituses õpime, kuidas luua, rakendada ja kohandada oma kõndimisklassi, et kohandada meie menüüväljundit.
Kõige tuntum WordPressi Walkeri klassidega kohandamise kasutusala on menüüde jaoks, kuid tegelikult kasutab WordPress Walkeri klasse paljudel juhtudel, näiteks taksonoomia hierarhiate, kommentaaride hierarhiate [wp_list_pages](https://developer.wordpress.org/reference/functions/wp_list_pages/)()ja [wp_list_categories](https://developer.wordpress.org/reference/functions/wp_list_categories/)(). Nad kõik laiendavad Walkerüldklassi. Laiendame Walker_Nav_MenuWordPressi menüüde jaoks kasutatavat valikut.
Kuna laiendame teist klassi, peame lisama ainult need funktsioonid, mida soovime alistada. Kui funktsiooni meie klassis ei eksisteeri, käivitab WordPress selle asemel põhiklassi (klass, mida me laiendame) funktsiooni.
Ettevalmistus
Saate lisada oma kõndimisklassi oma pistikprogrammifailidesse, teemadesse function.phpvõi mis tahes PHP-faili, mille on kaasanud functions.php(puhtama koodi jaoks). Alustuseks määrate oma klassi enda valitud nime järgi (veenduge, et klassi nimi oleks kordumatu ja see hõlmab ka võimalikke klassinimesid WordPressi tuumas!), laiendades Walker_Nav_Menu:
class AWP_Menu_Walker extends Walker_Nav_Menu {
}Selleks, et käskida WordPressil meie kõndijat kasutada, määratleme selle oma [wp_nav_menu](https://developer.wordpress.org/reference/functions/wp_nav_menu/)()kõnedes. See funktsioon vastutab menüü väljastamise eest ja tõenäoliselt on teil vähemalt üks põhimenüü teemas.
Lisage argumendimassiivile wp_nav_menu()uus element võtmega ‘kõndija’ ja loob teie kõndimisklassi uue eksemplari järgmiselt:
Kui värskendate oma saiti, ei tohiks te muudatusi näha. Selle põhjuseks on asjaolu, et meie klass ei alista ühtegi vanemafunktsiooni ja seega käivitab WordPress menüü väljastamisel lihtsalt tavalised menüükäija funktsioonid, täpselt nagu enne, kui käskisime tal kasutada meie kõndijat.
Walker_Nav_MenuVanemlusklassi funktsioonide tühistamiseks saate oma kohandatud kõndimisklassile lisada järgmisi funktsioone.
Esimesed neli on funktsioonid, mis vastutavad lihtsalt väljastamise eest, ja need kõik nõuavad stringi – esimese parameetrimuutuja – lisamist. Oluline on teada, et sa ei tee echosiin midagi, kõik peaks olema üles ehitatud stringina.
start_lvl
Funktsioon start_lvlvastutab HTML-i väljastamise eest uue taseme alustamiseks. Lühidalt, see peaks väljastama stardi <ul>.
function start_lvl(&$output, $depth=0, $args=null) { }Esimene parameeter, $outputmis edastatakse viitena, on string, millele lisate oma väljundi. $depthon täisarv, mis näitab, millisel tasemel te olete; 0 tipptaseme jaoks, 1 tipptaseme otsese alamastme jaoks ja nii edasi. $argson kõigi punktis esitatud argumentide objekt wp_nav_menu().
end_lvl
Funktsioon end_lvlvastutab taseme lõpu HTML-i väljastamise eest. Tavaliselt on see lihtsalt sulgemine </ul>.
function end_lvl(&$output, $depth=0, $args=null) { }Parameetrid on täpselt samad, mis start_lvlülal.
algus_el
See funktsioon vastutab iga elemendi HTML-i väljastamise eest. Lühidalt öeldes peaks see väljastama alguse <li>ja <a>sildi, mille sees on lingi pealkiri.
function start_el(&$output, $item, $depth=0, $args=null, $id=0) { }Esimene argument, $outputon nagu tavaliselt string, millele lisate väljundi. Teine argument, $itemon menüüüksuse objekt – ja siit saate enamiku menüüüksuse väljastamiseks vajalikest andmetest. Kui menüü link on postitusmenüü üksus, saate postituse objekti siit. Olenemata menüü tüübist saate ka mõned täiendavad kasulikud elemendid; nagu classes, url, titleja description.
Kolmas argument, $depthon täisarv, mis näitab, millisel tasemel me oleme. Tase 0 on tipptase, 1 on tipptaseme otsene alam ja nii edasi. Neljas argument, $argson kõigi üksusele esitatud argumentide objekt wp_nav_menu(). Viies parameeter, $idon praeguse menüüelemendi ID.
end_el
Funktsioon end_elvastutab elemendi sulgemise väljastamise eest. Tavaliselt väljastaks see lihtsalt </li>sildi.
function end_el(&$output, $item, $depth=0, $args=null) { }Argumendid end_elon samad, mis start_elülal, välja arvatud see, et funktsioonil pole viiendat parameetrit $id.
kuva_element
Funktsioon display_elementon päritud funktsioon Walkerüldklassist ja vastutab läbimise eest. See on funktsioon, mis kutsub kordamööda kõiki ülaltoodud funktsioone.
Lisan selle siia, sest mõnel juhul, näiteks kui soovite takistada terve haru läbimist, kasutaksite seda funktsiooni selleks.
function display_element($element, &$children_elements, $max_depth, $depth, $args, &$output) { }Esimene argument, $elementon menüüelemendi objekt – see antakse edasi nagu $itemülaltoodud funktsioonides. Teine argument $children_elements– viitega edastatud – sisaldab kõiki alamelemente, mida see funktsioon läbib. $max_depth, kolmas argument, on täisarv, mis annab märku, kui sügavust peaksime läbima, ja neljas argument, $depthon sügavus, milles me praegu oleme. Viies argument $argson argumendid, mis edastatakse funktsioonile, mis kutsus välja kõndija (menüüde puhul on need argumendid, mis antakse funktsioonile wp_nav_menu()) ja viimane argument, $outputmis edastatakse viitena, on väljund, mis edastatakse esimese argumendina ülaltoodud funktsioonidest.
Iga elemendi väljundi muutmine
Ülaltoodud ülevaates peaksite nägema, et funktsioon start_el()vastutab ühe menüüelemendi HTML-i väljastamise eest. Alustuseks alistame selle funktsiooni oma kõndimisklassis lihtsa näitega.
Näide: linkide lisamise keelamine elementide # jaoks
Veenduge, et kõik " #" lingid <span>saaksid lingisildi asemel elemendi, et vältida lehe värskendamist.
Alustame elemendi lisamisega <li>sildi juurde $output. Soovime tagada, et WordPressi vaikeklassid (näiteks ‘menüü-üksus’, ‘menüü-üksus-on-lapsed’ jne) ning ka menüüredaktorisse käsitsi sisestatud klassid lisataks meie loendi elemendile. Liimime massiivina pakutavad klassid $item->classesPHP funktsiooni abil, [implode](https://www.php.net/manual/en/function.implode.php)()eraldades iga elemendi tühikuga.
Ridadel #5-9 ja #13-17 käsitleme mähkimiselemendi tingimuslikku väljundit. Väljastame <a>märgendi, välja arvatud juhul, kui elemendi URL on „ #", sel juhul pakume selle <span>asemel märgendi. Real #11 väljastame lihtsalt lingi teksti, mis asub $item->title.
See on kõik, mida vajame tagamaks, et kõik menüüelemendid, mille #URL on " ", pole klõpsatavad!
Kui teete seda stiiliga teemas, pidage meeles, et kui teema on <a>sildi otse stiili kujundanud, võite stiili kaotada. Saate selle lahendada, muutes stiili ja võimaluse korral lisades spanelemendile klassi.
Näiteks veel üks asi, mida saate siin teha, on menüü kirjelduse väljastamine. See on olemas, kuid see pole vaikimisi aktiveeritud. WordPressi menüüredaktoris peate klõpsama paremas ülanurgas valikul "Ekraani valikud" ja märkima, et kuvada "Kirjeldus":
See võimaldab kasutajal sisestada igale elemendile kirjelduse. Saate selle kirjelduse väljastada oma kõndimisklassis. Oletame, et soovite kuvada ainult tipptaseme üksuste kirjeldust, kuna see on osa teie teema kujundusest. Saate lihtsalt kontrollida, kas sellel $itemon kirjeldus ja kui $depthsee on 0, näiteks:
Levinum ja kasulikum näide on "caret" lisamine, ikoon, mis annab märku, et sellel menüüelemendil on rippmenüü (sellel on alamelemendid).
Näide hoolitsusest tegevuses – “Blogi” ja “Uudised” taga
Peate välja selgitama oma caret HTML-i väljundi. Minu puhul väljastan <i>konkreetsete klassidega üksuse kena allanoole jaoks, mis on saadaval Fontawesome’i raamatukogus, mis pakub tuhandeid ikoone. Samuti soovite tagada, et see tähis väljastaks ainult neid elemente, millel on lapsed. Parim viis teada saada, kas praegusel elemendil on lapsi, on viidata käijaobjektile (jah, mis on meie kõndija ise, aga ka klassidele, mida see laiendab!) $argsja kontrollida tõeväärtust has_children. Kaardi väljastamine on nii lihtne kui:
Täielik kõndimisklass näeks välja selline:
Ja see on kõik, mida vajate tagamaks, et teie menüü saab vanemate elementide peal ilusad ikoonid ja et #lingid " " ei oleks klõpsatavad.
Kui soovite, et ikoon caret muutuks, näiteks ülesnooleks, kui rippmenüü on aktiivne, peate selle oma teemasse lisama Javascriptiga.
Nagu ülaltoodud näited viitavad, saate väljundiga manipuleerida nii, nagu soovite, mis tahes tingimustingimuste alusel. Näiteks saate muuta väljundit vastavalt sellele, kas teatud klass on olemas (nt menüüredaktorisse käsitsi sisestatud klass), otsides klassi kaustast $item->classes, või saate manipuleerida (näiteks suurtähtedega kirjutada) väljastatava üksuse tekstiga, mis on esitatud $item->title.
Tahaksin mainida veel üht kasulikku asja. Pidage meeles, et $args sisaldab kõiki argumente, mis on esitatud wp_nav_menu(). See hõlmab näiteks theme_locationja teisi, nii et kui saate muuta väljundit ainult konkreetsete teema asukohtade jaoks – näiteks peamenüüs. Kuid tegelikult saate esitada mis tahes kohandatud argumente!
Oletame, et väljastate sama menüü mitu korda, näiteks ühe lauaarvuti jaoks ja uuesti mobiili jaoks. Või soovite, et teie jalutusseade manipuleeriks üksustega ainult siis, kui need wp_nav_menu()teie teemas väljastatakse, mitte siis, kui menüü lisatakse vidina kaudu? Võib-olla soovite, et teie jalutuskäik käsitleks nendel juhtudel väljundit erinevalt?
Saate esitada mis tahes kohandatud argumendid wp_nav_menu(). Lihtsa näitena lisan show_caretsargumentidele tõeväärtuse „ ” tagamaks, et tähised lisatakse ainult nendel juhtudel, kui ma neid soovin – selle asemel, et minu kõndimisklass lisaks tähised kõikidesse menüüdesse.
Seejärel saan lihtsalt muuta ülaltoodud koodi lisamise koodi (rida nr 19-21) kontrollimaks, kas show_caretssee on olemas ja tõene keeles $args, näiteks järgmiselt:
Saate lisada mis tahes argumente, tagamaks, et teie jalutuskäik kohandab ainult soovitud menüüsid. Näiteks lihtsad tõeväärtused erinevate juhtumite jaoks, nt is_mobile_menu, või muu vajalik.
Ja sellega asi piirdubki. Katsetage julgelt ja andke mulle teada, kui teil on allpool küsimusi või soovitusi!