WordPress mahdollistaa ns. Walker-luokkien käytön elementtien läpikulkuun ja näyttämiseen hierarkkisessa rakenteessa. Tässä viestissä opimme luomaan, toteuttamaan ja mukauttamaan omaa kävelijäluokkaamme valikkotulostemme mukauttamiseksi.
WordPressin Walker-luokkien mukauttamisen tunnetuin käyttötapa on valikoissa, mutta todellisuudessa WordPress käyttää Walker-luokkia useissa tapauksissa, esimerkiksi taksonomiahierarkioiden, kommenttihierarkioiden [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/)(). Ne kaikki laajentavat yleistä Walkerluokkaa. Laajennamme sitä, Walker_Nav_Menujota käytetään WordPressin valikoissa.
Koska laajennamme toista luokkaa, meidän tarvitsee vain lisätä ne funktiot, jotka haluamme ohittaa. Jos luokassamme ei ole funktiota, WordPress suorittaa sen sijaan pääluokan (laajennamme luokan) -funktion.
Valmistautuminen
Voit lisätä Walker-luokkasi liitännäistiedostoihisi, teemoihisi function.phptai mihin tahansa PHP-tiedostoon, jonka mukana on functions.php(puhtaampaa koodia). Aloitat määrittämällä luokkasi valitsemallasi nimellä (varmista, että luokan nimi on yksilöllinen, ja tämä sisältää mahdolliset luokkanimet WordPress-ytimessä!) laajentamalla Walker_Nav_Menu:
class AWP_Menu_Walker extends Walker_Nav_Menu {
}[wp_nav_menu](https://developer.wordpress.org/reference/functions/wp_nav_menu/)()Määritämme tämän puheluissamme, jotta voimme käskeä WordPressin käyttämään kävelijämme. Tämä toiminto vastaa valikon tulostamisesta, ja sinulla on luultavasti ainakin yksi teemasi päävalikossa.
Argumenttitaulukkoon wp_nav_menu()lisäät uuden elementin avaimella "walker" ja luo uuden esiintymän Walker-luokastasi seuraavasti:
Jos päivität sivustosi, sinun ei pitäisi nähdä muutosta. Tämä johtuu siitä, että luokkamme ei ohita mitään ylätason toimintoja, ja näin ollen WordPress yksinkertaisesti ajaa normaaleja valikkokävelytoimintoja valikkoa tulostettaessa, aivan kuten ennen kuin käskimme käyttää kävelijämme.
Seuraavat ovat toimintoja, jotka voit lisätä mukautettuun kävelijäluokkaasi ohittaaksesi vanhemmuuden luokan Walker_Nav_Menutoiminnot:
Ensimmäiset neljä ovat funktioita, jotka ovat yksinkertaisesti vastuussa tulostamisesta, ja ne kaikki edellyttävät, että sinun on lisättävä merkkijono – ensimmäinen parametrimuuttuja. On tärkeää tietää, että täällä ei ole echomitään, kaiken oletetaan rakentuvan merkkijonoksi.
start_lvl
Toiminto start_lvlvastaa HTML:n tulostamisesta uuden tason alkuun. Lyhyesti sanottuna sen pitäisi tulostaa käynnistys <ul>.
function start_lvl(&$output, $depth=0, $args=null) { }Ensimmäinen parametri, $outputjoka välitetään viittauksella, on merkkijono, johon liität tulosteen. $depthon kokonaisluku, joka ilmaisee, millä tasolla olet; 0 ylimmälle tasolle, 1 ylimmän tason suoralle lapselle ja niin edelleen. $argson kaikkien kohdassa wp_nav_menu().
end_lvl
Funktio end_lvlvastaa HTML-koodin tulostamisesta tason loppuun. Tämä on yleensä vain päätös </ul>.
function end_lvl(&$output, $depth=0, $args=null) { }Parametrit ovat täsmälleen samat kuin start_lvlyllä.
aloitus_el
Tämä toiminto vastaa kunkin elementin HTML:n tulostamisesta. Lyhyesti sanottuna sen pitäisi tulostaa aloitus <li>ja <a>tagi, jonka sisällä on linkin otsikko.
function start_el(&$output, $item, $depth=0, $args=null, $id=0) { }Ensimmäinen argumentti, $outputon tavalliseen tapaan merkkijono, johon liität tulosteen. Toinen argumentti, $item, on valikkokohteen objekti – ja tästä haet suurimman osan tiedoista valikkokohdan tulostamista varten. Jos valikkolinkki on postausvalikon kohta, saat post-objektin tähän. Valikkotyypistä riippumatta saat myös hyödyllisiä lisäelementtejä; kuten classes, url, title, ja description.
Kolmas argumentti, $depthon kokonaisluku, joka kertoo millä tasolla olemme. Taso 0 on ylätaso, 1 on ylätason välitön lapsi ja niin edelleen. Neljäs argumentti, $args, on kaikkien osoitteelle annettujen argumenttien kohde wp_nav_menu(). Viides parametri, $id, on nykyisen valikon kohdan tunnus.
end_el
Funktio end_elvastaa elementin sulkemisen tulostamisesta. Yleensä se vain tulostaa </li>tunnisteen.
function end_el(&$output, $item, $depth=0, $args=null) { }Argumentit end_elovat samat kuin start_elyllä, paitsi että funktiolla ei ole viidettä parametria, $id.
display_element
Funktio display_elementon peritty funktio yleisestä Walkerluokasta ja se on funktio, joka vastaa kulkemisesta. Tämä on toiminto, joka kutsuu vuorotellen kaikkia yllä olevia toimintoja.
Lisään tämän tähän, koska joissain tapauksissa, esimerkiksi jos haluat estää koko haaran läpikäymisen, käytät tätä toimintoa siihen.
function display_element($element, &$children_elements, $max_depth, $depth, $args, &$output) { }Ensimmäinen argumentti, $elementon valikkokohteen objekti – tämä välitetään kuten $itemyllä olevissa funktioissa. Toinen argumentti, $children_elementsjoka välitetään viittauksella, sisältää kaikki alielementit, jotka tämä funktio kulkee. $max_depth, kolmas argumentti, on kokonaisluku, joka ilmaisee, kuinka syvältä meidän tulisi kulkea, ja neljäs argumentti, $depthon syvyys, jossa olemme tällä hetkellä. Viides argumentti, $argson argumentit, jotka välitetään funktiolle, joka kutsui walkerin (valikoissa se olisi argumentit, jotka annetaan wp_nav_menu()) ja viimeinen argumentti, $outputjoka välitetään viittauksella, on tulos, joka välitetään ensimmäisenä argumenttina kaikissa yllä olevista toiminnoista.
Kunkin elementin tulosteen muokkaaminen
Yllä olevassa yleiskatsauksessa sinun pitäisi nähdä, että toiminto start_el()on vastuussa HTML-koodin tulostamisesta yksittäiselle valikkoelementille. Aloitetaan ohittamalla tämä toiminto Walker-luokassamme yksinkertaisella esimerkillä.
Esimerkki: estetään linkkien lisääminen #-elementteihin
Varmistetaan, että kaikki #linkit saavat <span>elementin linkkitunnisteen sijaan, jotta sivua ei päivitetä.
Aloitamme elementin lisäämällä <li>tunnisteen kohtaan $output. Haluamme varmistaa, että WordPressin oletusluokat (esim. ‘menu-item’, ‘menu-item-has-childs’ jne.) sekä Menu-editoriin manuaalisesti syötetyt luokat lisätään listaelementtiimme. Liimaamme matriisina toimitetut luokat $item->classesPHP-funktiolla [implode](https://www.php.net/manual/en/function.implode.php)()erottamalla jokainen elementti välilyönnillä.
Riveillä #5-9 ja #13-17 käsittelemme käärintäelementin ehdollista tulosta. Annamme <a>tunnisteen, ellei elementin URL-osoite ole " #", jolloin annamme sen <span>sijaan tagin. Rivillä #11 annamme yksinkertaisesti linkin tekstin, joka sijaitsee $item->title.
Tämä on kaikki mitä tarvitsemme varmistaaksemme, että kaikki valikon elementit, joiden #URL-osoite on " ", eivät ole napsautettavissa!
Jos teet tämän tyylitellyssä teemassa, muista, että saatat menettää osan tyylistä, jos teema on tyylittänyt <a>tunnisteen suoraan. Voit ratkaista tämän muuttamalla tyyliä ja mahdollisesti lisäämällä luokan span elementtiin.
Esimerkki: valikon kohteiden kuvausten näyttäminen
Esimerkkinä toinen asia, jonka voit tehdä tässä, on valikon kuvauksen tulostaminen. Tämä on olemassa, mutta sitä ei ole aktivoitu oletuksena. WordPress Menu -editorissa sinun on napsautettava "Näyttöasetukset" oikeassa yläkulmassa ja tarkistettava, näkyykö "Kuvaus":
Näin käyttäjä voi kirjoittaa kuvauksen jokaiselle elementille. Voit tulostaa tämän kuvauksen kävelijäluokassasi. Oletetaan, että haluat näyttää kuvauksen vain ylimmän tason kohteille, koska tämä on osa teemasi suunnittelua. Voit yksinkertaisesti tarkistaa, onko siinä $itemkuvaus ja jos $depthse on 0, kuten näin:
Esimerkki: pudotusvalikon merkintöjen lisääminen
Yleisempi ja hyödyllisempi esimerkki on "caret"-kuvakkeen lisääminen, joka ilmaisee, että tällä valikkokohdalla on pudotusvalikko (sillä on alielementtejä).
Esimerkki huolenpidosta toiminnassa – "Blogi" ja "Uutiset" takana
Sinun on selvitettävä caret HTML -tulostuksesi. Minun tapauksessani tulostan <i>kohteen tietyillä luokilla mukavan alasnuolen saamiseksi, joka on saatavilla Fontawesome- kirjastossa, joka tarjoaa tuhansia kuvakkeita. Haluat myös varmistaa, että tämä kuvaruutu tulostaa vain elementtejä, joissa on lapsia. Paras tapa selvittää, onko nykyisellä elementillä lapsia, on viitata kävelijäobjektiin (kyllä, joka on itse kävelijämme, mutta myös luokkiin, joita se laajentaa!) $argsja tarkistamalla boolen has_children. Caretin tulostaminen on yhtä yksinkertaista kuin:
Koko kävelijäluokka näyttäisi tältä:
Ja se on kaikki mitä tarvitset varmistaaksesi, että valikkosi saa mukavat caret-kuvakkeet ylätason elementteihin ja että " #" -linkkejä ei voi klikata.
Jos haluat, että caret-kuvake muuttuu esimerkiksi ylänuoleksi, kun pudotusvalikko on aktiivinen, sinun on lisättävä tämä Javascriptillä teemaasi.
Kuten yllä olevista esimerkeistä käy ilmi, voit muokata tulostetta haluamallasi tavalla kaikkien ehtojen perusteella. Voit esimerkiksi muokata tulostetta sen perusteella, onko tietty luokka läsnä (esimerkiksi luokka, joka on syötetty manuaalisesti Valikkoeditoriin) etsimällä luokkaa kohdasta $item->classes, tai voit muokata (esimerkiksi isolla kirjaimilla) tulostettavaa alkion tekstiä, joka on annettu kohdassa $item->title.
Haluaisin mainita toisen hyödyllisen asian. Muista, että $args sisältää kaikki osoitteelle annetut argumentit wp_nav_menu(). Tämä sisältää esimerkiksi theme_locationja muut, joten jos voit muokata tulostetta vain tietyille teemapaikoille – esimerkiksi päävalikkoon. Mutta voit itse asiassa tarjota mitä tahansa mukautettuja argumentteja!
Oletetaan, että tulostat saman valikon useita kertoja, esimerkiksi yhden pöytäkoneelle ja uudelleen mobiililaitteelle. Vai haluatko kävelijän manipuloivan kohteita vain silloin, kun ne tulostetaan wp_nav_menu()teemassasi, etkä silloin, kun valikko lisätään widgetin kautta? Ehkä haluat, että kävelijäsi käsittelee tulosta eri tavalla näissä tapauksissa?
Voit antaa mitä tahansa mukautettuja argumentteja wp_nav_menu(). Yksinkertaisena esimerkkinä lisään show_caretsargumentteihin boolen ‘ ‘, jotta varmistetaan, että merkit lisätään vain niissä tapauksissa, joissa haluan niitä – sen sijaan, että kävelijäluokkani lisäisi merkit kaikkiin valikoihin.
Sitten voin yksinkertaisesti muuttaa yllä olevaa caret-lisäyskoodinpalaa (rivit 19-21) tarkistamaan, onko show_caretsse läsnä ja true -koodissa $args, kuten näin:
Voit lisätä mitä tahansa argumentteja varmistaaksesi, että kävelijä mukauttaa vain haluamasi valikot. Esimerkiksi yksinkertaiset loogiset arvot eri tapauksille, esim is_mobile_menu., tai mitä tahansa muuta tarvitsemaasi.
Ja siinä se. Kokeile rohkeasti ja kerro minulle, jos sinulla on kysyttävää tai ehdotuksia alla!