[wp_list_pages](https:\/\/developer.wordpress.org\/reference\/functions\/wp_list_pages\/)()<\/code>ja [wp_list_categories](https:\/\/developer.wordpress.org\/reference\/functions\/wp_list_categories\/)()<\/code>. Ne kaikki laajentavat yleist\u00e4 Walker<\/code>luokkaa. Laajennamme sit\u00e4, Walker_Nav_Menu<\/code>jota k\u00e4ytet\u00e4\u00e4n WordPressin valikoissa.<\/p>\nKoska laajennamme toista luokkaa, meid\u00e4n tarvitsee vain lis\u00e4t\u00e4 ne funktiot, jotka haluamme ohittaa. Jos luokassamme ei ole funktiota, WordPress suorittaa sen sijaan p\u00e4\u00e4luokan (laajennamme luokan) -funktion.<\/p>\n
Valmistautuminen<\/h2>\n
Voit lis\u00e4t\u00e4 Walker-luokkasi liit\u00e4nn\u00e4istiedostoihisi, teemoihisi function.php<\/code>tai mihin tahansa PHP-tiedostoon, jonka mukana on functions.php<\/code>(puhtaampaa koodia). Aloitat m\u00e4\u00e4ritt\u00e4m\u00e4ll\u00e4 luokkasi valitsemallasi nimell\u00e4 (varmista, ett\u00e4 luokan nimi on yksil\u00f6llinen, ja t\u00e4m\u00e4 sis\u00e4lt\u00e4\u00e4 mahdolliset luokkanimet WordPress-ytimess\u00e4!) laajentamalla Walker_Nav_Menu<\/code>:<\/p>\nclass AWP_Menu_Walker extends Walker_Nav_Menu {\n}<\/code><\/pre>\n[wp_nav_menu](https:\/\/developer.wordpress.org\/reference\/functions\/wp_nav_menu\/)()<\/code>M\u00e4\u00e4rit\u00e4mme t\u00e4m\u00e4n puheluissamme, jotta voimme k\u00e4ske\u00e4 WordPressin k\u00e4ytt\u00e4m\u00e4\u00e4n k\u00e4velij\u00e4mme. T\u00e4m\u00e4 toiminto vastaa valikon tulostamisesta, ja sinulla on luultavasti ainakin yksi teemasi p\u00e4\u00e4valikossa.<\/p>\nArgumenttitaulukkoon wp_nav_menu()<\/code>lis\u00e4\u00e4t uuden elementin avaimella "walker" ja luo uuden esiintym\u00e4n Walker-luokastasi seuraavasti:<\/p>\nwp_nav_menu([\n 'theme_location' => 'primary',\n 'menu_class' => 'main-menu',\n 'container' => 'nav',\n 'container_class' => 'header__main-nav',\n 'walker' => new AWP_Menu_Walker()\n]);<\/code><\/pre>\nJos p\u00e4ivit\u00e4t sivustosi, sinun ei pit\u00e4isi n\u00e4hd\u00e4 muutosta. T\u00e4m\u00e4 johtuu siit\u00e4, ett\u00e4 luokkamme ei ohita mit\u00e4\u00e4n yl\u00e4tason toimintoja, ja n\u00e4in ollen WordPress yksinkertaisesti ajaa normaaleja valikkok\u00e4velytoimintoja valikkoa tulostettaessa, aivan kuten ennen kuin k\u00e4skimme k\u00e4ytt\u00e4\u00e4 k\u00e4velij\u00e4mme.<\/p>\n
Yleiskatsaus toiminnoista, joissa voimme ohittaaWalker_Nav_Menu<\/code><\/h2>\nSeuraavat ovat toimintoja, jotka voit lis\u00e4t\u00e4 mukautettuun k\u00e4velij\u00e4luokkaasi ohittaaksesi vanhemmuuden luokan Walker_Nav_Menu<\/code>toiminnot:<\/p>\nEnsimm\u00e4iset nelj\u00e4 ovat funktioita, jotka ovat yksinkertaisesti vastuussa tulostamisesta, ja ne kaikki edellytt\u00e4v\u00e4t, ett\u00e4 sinun on lis\u00e4tt\u00e4v\u00e4 merkkijono – ensimm\u00e4inen parametrimuuttuja. On t\u00e4rke\u00e4\u00e4 tiet\u00e4\u00e4, ett\u00e4 t\u00e4\u00e4ll\u00e4 ei ole echo<\/code>mit\u00e4\u00e4n, kaiken oletetaan rakentuvan merkkijonoksi.<\/p>\nstart_lvl<\/h3>\n
Toiminto start_lvl<\/code>vastaa HTML:n tulostamisesta uuden tason alkuun. Lyhyesti sanottuna sen pit\u00e4isi tulostaa k\u00e4ynnistys <ul><\/code>.<\/p>\nfunction start_lvl(&$output, $depth=0, $args=null) { }<\/code><\/pre>\nEnsimm\u00e4inen parametri, $output<\/code>joka v\u00e4litet\u00e4\u00e4n viittauksella, on merkkijono, johon liit\u00e4t tulosteen. $depth<\/code>on kokonaisluku, joka ilmaisee, mill\u00e4 tasolla olet; 0 ylimm\u00e4lle tasolle, 1 ylimm\u00e4n tason suoralle lapselle ja niin edelleen. $args<\/code>on kaikkien kohdassa wp_nav_menu()<\/code>.<\/p>\nend_lvl<\/h3>\n
Funktio end_lvl<\/code>vastaa HTML-koodin tulostamisesta tason loppuun. T\u00e4m\u00e4 on yleens\u00e4 vain p\u00e4\u00e4t\u00f6s <\/ul><\/code>.<\/p>\nfunction end_lvl(&$output, $depth=0, $args=null) { }<\/code><\/pre>\nParametrit ovat t\u00e4sm\u00e4lleen samat kuin start_lvl<\/code>yll\u00e4.<\/p>\naloitus_el<\/h3>\n
T\u00e4m\u00e4 toiminto vastaa kunkin elementin HTML:n tulostamisesta. Lyhyesti sanottuna sen pit\u00e4isi tulostaa aloitus <li><\/code>ja <a><\/code>tagi, jonka sis\u00e4ll\u00e4 on linkin otsikko.<\/p>\nfunction start_el(&$output, $item, $depth=0, $args=null, $id=0) { }<\/code><\/pre>\nEnsimm\u00e4inen argumentti, $output<\/code>on tavalliseen tapaan merkkijono, johon liit\u00e4t tulosteen. Toinen argumentti, $item<\/code>, on valikkokohteen objekti \u2013 ja t\u00e4st\u00e4 haet suurimman osan tiedoista valikkokohdan tulostamista varten. Jos valikkolinkki on postausvalikon kohta, saat post-objektin t\u00e4h\u00e4n. Valikkotyypist\u00e4 riippumatta saat my\u00f6s hy\u00f6dyllisi\u00e4 lis\u00e4elementtej\u00e4; kuten classes<\/code>, url<\/code>, title<\/code>, ja description<\/code>.<\/p>\nKolmas argumentti, $depth<\/code>on kokonaisluku, joka kertoo mill\u00e4 tasolla olemme. Taso 0 on yl\u00e4taso, 1 on yl\u00e4tason v\u00e4lit\u00f6n lapsi ja niin edelleen. Nelj\u00e4s argumentti, $args<\/code>, on kaikkien osoitteelle annettujen argumenttien kohde wp_nav_menu()<\/code>. Viides parametri, $id<\/code>, on nykyisen valikon kohdan tunnus.<\/p>\nend_el<\/h3>\n
Funktio end_el<\/code>vastaa elementin sulkemisen tulostamisesta. Yleens\u00e4 se vain tulostaa <\/li><\/code>tunnisteen.<\/p>\nfunction end_el(&$output, $item, $depth=0, $args=null) { }<\/code><\/pre>\nArgumentit end_el<\/code>ovat samat kuin start_el<\/code>yll\u00e4, paitsi ett\u00e4 funktiolla ei ole viidett\u00e4 parametria, $id<\/code>.<\/p>\ndisplay_element<\/h3>\n
Funktio display_element<\/code>on peritty funktio yleisest\u00e4 Walker<\/code>luokasta ja se on funktio, joka vastaa kulkemisesta. T\u00e4m\u00e4 on toiminto, joka kutsuu vuorotellen kaikkia yll\u00e4 olevia toimintoja.<\/p>\nLis\u00e4\u00e4n t\u00e4m\u00e4n t\u00e4h\u00e4n, koska joissain tapauksissa, esimerkiksi jos haluat est\u00e4\u00e4 koko haaran l\u00e4pik\u00e4ymisen, k\u00e4yt\u00e4t t\u00e4t\u00e4 toimintoa siihen.<\/p>\n
function display_element($element, &$children_elements, $max_depth, $depth, $args, &$output) { }<\/code><\/pre>\nEnsimm\u00e4inen argumentti, $element<\/code>on valikkokohteen objekti \u2013 t\u00e4m\u00e4 v\u00e4litet\u00e4\u00e4n kuten $item<\/code>yll\u00e4 olevissa funktioissa. Toinen argumentti, $children_elements<\/code>joka v\u00e4litet\u00e4\u00e4n viittauksella, sis\u00e4lt\u00e4\u00e4 kaikki alielementit, jotka t\u00e4m\u00e4 funktio kulkee. $max_depth<\/code>, kolmas argumentti, on kokonaisluku, joka ilmaisee, kuinka syv\u00e4lt\u00e4 meid\u00e4n tulisi kulkea, ja nelj\u00e4s argumentti, $depth<\/code>on syvyys, jossa olemme t\u00e4ll\u00e4 hetkell\u00e4. Viides argumentti, $args<\/code>on argumentit, jotka v\u00e4litet\u00e4\u00e4n funktiolle, joka kutsui walkerin (valikoissa se olisi argumentit, jotka annetaan wp_nav_menu()<\/code>) ja viimeinen argumentti, $output<\/code>joka v\u00e4litet\u00e4\u00e4n viittauksella, on tulos, joka v\u00e4litet\u00e4\u00e4n ensimm\u00e4isen\u00e4 argumenttina kaikissa yll\u00e4 olevista toiminnoista.<\/p>\nKunkin elementin tulosteen muokkaaminen<\/h2>\n
Yll\u00e4 olevassa yleiskatsauksessa sinun pit\u00e4isi n\u00e4hd\u00e4, ett\u00e4 toiminto start_el()<\/code>on vastuussa HTML-koodin tulostamisesta yksitt\u00e4iselle valikkoelementille. Aloitetaan ohittamalla t\u00e4m\u00e4 toiminto Walker-luokassamme yksinkertaisella esimerkill\u00e4.<\/p>\nEsimerkki: estet\u00e4\u00e4n linkkien lis\u00e4\u00e4minen #-elementteihin<\/h3>\n
Varmistetaan, ett\u00e4 kaikki #<\/code>linkit saavat <span><\/code>elementin linkkitunnisteen sijaan, jotta sivua ei p\u00e4ivitet\u00e4.<\/p>\nclass AWP_Menu_Walker extends Walker_Nav_Menu {\n function start_el(&$output, $item, $depth=0, $args=[], $id=0) {\n $output .= \"<li class='\". implode(\" \", $item->classes). \"'>\";\n\u00a0\n if ($item->url && $item->url != '#') {\n $output .= '<a href=\"'. $item->url. '\">';\n } else {\n $output .= '<span>';\n }\n\u00a0\n $output .= $item->title;\n\u00a0\n if ($item->url && $item->url != '#') {\n $output .= '<\/a>';\n } else {\n $output .= '<\/span>';\n }\n }\n}<\/code><\/pre>\nAloitamme elementin lis\u00e4\u00e4m\u00e4ll\u00e4 <li><\/code>tunnisteen kohtaan $output<\/code>. Haluamme varmistaa, ett\u00e4 WordPressin oletusluokat (esim. ’menu-item’, ’menu-item-has-childs’ jne.) sek\u00e4 Menu-editoriin manuaalisesti sy\u00f6tetyt luokat lis\u00e4t\u00e4\u00e4n listaelementtiimme. Liimaamme matriisina toimitetut luokat $item->classes<\/code>PHP-funktiolla [implode](https:\/\/www.php.net\/manual\/en\/function.implode.php)()<\/code>erottamalla jokainen elementti v\u00e4lily\u00f6nnill\u00e4.<\/p>\nRiveill\u00e4 #5-9 ja #13-17 k\u00e4sittelemme k\u00e4\u00e4rint\u00e4elementin ehdollista tulosta. Annamme <a><\/code>tunnisteen, ellei elementin URL-osoite ole " #<\/code>", jolloin annamme sen <span><\/code>sijaan tagin. Rivill\u00e4 #11 annamme yksinkertaisesti linkin tekstin, joka sijaitsee $item->title<\/code>.<\/p>\nT\u00e4m\u00e4 on kaikki mit\u00e4 tarvitsemme varmistaaksemme, ett\u00e4 kaikki valikon elementit, joiden #<\/code>URL-osoite on " ", eiv\u00e4t ole napsautettavissa!<\/p>\nJos teet t\u00e4m\u00e4n tyylitellyss\u00e4 teemassa, muista, ett\u00e4 saatat menett\u00e4\u00e4 osan tyylist\u00e4, jos teema on tyylitt\u00e4nyt <a><\/code>tunnisteen suoraan. Voit ratkaista t\u00e4m\u00e4n muuttamalla tyyli\u00e4 ja mahdollisesti lis\u00e4\u00e4m\u00e4ll\u00e4 luokan span elementtiin.<\/p>\nEsimerkki: valikon kohteiden kuvausten n\u00e4ytt\u00e4minen<\/h3>\n
Esimerkkin\u00e4 toinen asia, jonka voit tehd\u00e4 t\u00e4ss\u00e4, on valikon kuvauksen tulostaminen. T\u00e4m\u00e4 on olemassa, mutta sit\u00e4 ei ole aktivoitu oletuksena. WordPress Menu -editorissa sinun on napsautettava "N\u00e4ytt\u00f6asetukset" oikeassa yl\u00e4kulmassa ja tarkistettava, n\u00e4kyyk\u00f6 "Kuvaus":<\/p>\n
![\"Opi](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151802-61e4cfd7d3371.png\")
<\/a><\/p>\nN\u00e4in k\u00e4ytt\u00e4j\u00e4 voi kirjoittaa kuvauksen jokaiselle elementille. Voit tulostaa t\u00e4m\u00e4n kuvauksen k\u00e4velij\u00e4luokassasi. Oletetaan, ett\u00e4 haluat n\u00e4ytt\u00e4\u00e4 kuvauksen vain ylimm\u00e4n tason kohteille, koska t\u00e4m\u00e4 on osa teemasi suunnittelua. Voit yksinkertaisesti tarkistaa, onko siin\u00e4 $item<\/code>kuvaus ja jos $depth<\/code>se on 0, kuten n\u00e4in:<\/p>\n ...\n $output .= $item->title;\n\u00a0\n if ($depth == 0 && !empty($item->description)) {\n $output .= '<span class=\"description\">'. $item->description. '<\/span>';\n }\n ...<\/code><\/pre>\nEsimerkki: pudotusvalikon merkint\u00f6jen lis\u00e4\u00e4minen<\/h3>\n
Yleisempi ja hy\u00f6dyllisempi esimerkki on "caret"-kuvakkeen lis\u00e4\u00e4minen, joka ilmaisee, ett\u00e4 t\u00e4ll\u00e4 valikkokohdalla on pudotusvalikko (sill\u00e4 on alielementtej\u00e4).<\/p>\n
![\"Opi](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151802-61e4cfd965e21.png\")
<\/a><\/p>\nEsimerkki huolenpidosta toiminnassa \u2013 "Blogi" ja "Uutiset" takana<\/p>\n