{"id":233864,"date":"2023-02-24T09:33:00","date_gmt":"2023-02-24T06:33:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233864"},"modified":"2022-11-11T12:52:41","modified_gmt":"2022-11-11T09:52:41","slug":"siit-saate-teada-kuidas-wordpressi-menueuede-jaoks-menueuekaeijaid-kirjutada","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/et\/siit-saate-teada-kuidas-wordpressi-menueuede-jaoks-menueuekaeijaid-kirjutada\/","title":{"rendered":"Siit saate teada, kuidas WordPressi men\u00fc\u00fcde jaoks men\u00fc\u00fck\u00e4ijaid kirjutada"},"content":{"rendered":"\n

WordPress v\u00f5imaldab kasutada nn Walkeri klasse elementide l\u00e4bimiseks ja kuvamiseks hierarhilises struktuuris. Selles postituses \u00f5pime, kuidas luua, rakendada ja kohandada oma k\u00f5ndimisklassi, et kohandada meie men\u00fc\u00fcv\u00e4ljundit.<\/p>\n

K\u00f5ige tuntum WordPressi Walkeri klassidega kohandamise kasutusala on men\u00fc\u00fcde jaoks, kuid tegelikult kasutab WordPress Walkeri klasse paljudel juhtudel, n\u00e4iteks taksonoomia hierarhiate, kommentaaride hierarhiate [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>. Nad k\u00f5ik laiendavad Walker<\/code>\u00fcldklassi. Laiendame Walker_Nav_Menu<\/code>WordPressi men\u00fc\u00fcde jaoks kasutatavat valikut.<\/p>\n

Kuna laiendame teist klassi, peame lisama ainult need funktsioonid, mida soovime alistada. Kui funktsiooni meie klassis ei eksisteeri, k\u00e4ivitab WordPress selle asemel p\u00f5hiklassi (klass, mida me laiendame) funktsiooni.<\/p>\n

Ettevalmistus<\/h2>\n

Saate lisada oma k\u00f5ndimisklassi oma pistikprogrammifailidesse, teemadesse function.php<\/code>v\u00f5i mis tahes PHP-faili, mille on kaasanud functions.php<\/code>(puhtama koodi jaoks). Alustuseks m\u00e4\u00e4rate oma klassi enda valitud nime j\u00e4rgi (veenduge, et klassi nimi oleks kordumatu ja see h\u00f5lmab ka v\u00f5imalikke klassinimesid WordPressi tuumas!), laiendades Walker_Nav_Menu<\/code>:<\/p>\n

class AWP_Menu_Walker extends Walker_Nav_Menu {\n}<\/code><\/pre>\n
Selleks, et k\u00e4skida WordPressil meie k\u00f5ndijat kasutada, m\u00e4\u00e4ratleme selle oma [wp_nav_menu](https:\/\/developer.wordpress.org\/reference\/functions\/wp_nav_menu\/)()<\/code>k\u00f5nedes. See funktsioon vastutab men\u00fc\u00fc v\u00e4ljastamise eest ja t\u00f5en\u00e4oliselt on teil v\u00e4hemalt \u00fcks p\u00f5himen\u00fc\u00fc teemas.<\/p>\n
Lisage argumendimassiivile wp_nav_menu()<\/code>uus element v\u00f5tmega ‘k\u00f5ndija’ ja loob teie k\u00f5ndimisklassi uue eksemplari j\u00e4rgmiselt:<\/p>\n
wp_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>\n
Kui v\u00e4rskendate oma saiti, ei tohiks te muudatusi n\u00e4ha. Selle p\u00f5hjuseks on asjaolu, et meie klass ei alista \u00fchtegi vanemafunktsiooni ja seega k\u00e4ivitab WordPress men\u00fc\u00fc v\u00e4ljastamisel lihtsalt tavalised men\u00fc\u00fck\u00e4ija funktsioonid, t\u00e4pselt nagu enne, kui k\u00e4skisime tal kasutada meie k\u00f5ndijat.<\/p>\n
\u00dclevaade funktsioonidest, mida saame alistadaWalker_Nav_Menu<\/code><\/h2>\n
Walker_Nav_Menu<\/code>Vanemlusklassi funktsioonide t\u00fchistamiseks saate oma kohandatud k\u00f5ndimisklassile lisada j\u00e4rgmisi funktsioone.<\/p>\n
Esimesed neli on funktsioonid, mis vastutavad lihtsalt v\u00e4ljastamise eest, ja need k\u00f5ik n\u00f5uavad stringi \u2013 esimese parameetrimuutuja \u2013 lisamist. Oluline on teada, et sa ei tee echo<\/code>siin midagi, k\u00f5ik peaks olema \u00fcles ehitatud stringina.<\/p>\n
start_lvl<\/h3>\n
Funktsioon start_lvl<\/code>vastutab HTML-i v\u00e4ljastamise eest uue taseme alustamiseks. L\u00fchidalt, see peaks v\u00e4ljastama stardi <ul><\/code>.<\/p>\n
function start_lvl(&$output, $depth=0, $args=null) { }<\/code><\/pre>\n
Esimene parameeter, $output<\/code>mis edastatakse viitena, on string, millele lisate oma v\u00e4ljundi. $depth<\/code>on t\u00e4isarv, mis n\u00e4itab, millisel tasemel te olete; 0 tipptaseme jaoks, 1 tipptaseme otsese alamastme jaoks ja nii edasi. $args<\/code>on k\u00f5igi punktis esitatud argumentide objekt wp_nav_menu()<\/code>.<\/p>\n
end_lvl<\/h3>\n
Funktsioon end_lvl<\/code>vastutab taseme l\u00f5pu HTML-i v\u00e4ljastamise eest. Tavaliselt on see lihtsalt sulgemine <\/ul><\/code>.<\/p>\n
function end_lvl(&$output, $depth=0, $args=null) { }<\/code><\/pre>\n
Parameetrid on t\u00e4pselt samad, mis start_lvl<\/code>\u00fclal.<\/p>\n
algus_el<\/h3>\n
See funktsioon vastutab iga elemendi HTML-i v\u00e4ljastamise eest. L\u00fchidalt \u00f6eldes peaks see v\u00e4ljastama alguse <li><\/code>ja <a><\/code>sildi, mille sees on lingi pealkiri.<\/p>\n
function start_el(&$output, $item, $depth=0, $args=null, $id=0) { }<\/code><\/pre>\n
Esimene argument, $output<\/code>on nagu tavaliselt string, millele lisate v\u00e4ljundi. Teine argument, $item<\/code>on men\u00fc\u00fc\u00fcksuse objekt \u2013 ja siit saate enamiku men\u00fc\u00fc\u00fcksuse v\u00e4ljastamiseks vajalikest andmetest. Kui men\u00fc\u00fc link on postitusmen\u00fc\u00fc \u00fcksus, saate postituse objekti siit. Olenemata men\u00fc\u00fc t\u00fc\u00fcbist saate ka m\u00f5ned t\u00e4iendavad kasulikud elemendid; nagu classes<\/code>, url<\/code>, title<\/code>ja description<\/code>.<\/p>\n
Kolmas argument, $depth<\/code>on t\u00e4isarv, mis n\u00e4itab, millisel tasemel me oleme. Tase 0 on tipptase, 1 on tipptaseme otsene alam ja nii edasi. Neljas argument, $args<\/code>on k\u00f5igi \u00fcksusele esitatud argumentide objekt wp_nav_menu()<\/code>. Viies parameeter, $id<\/code>on praeguse men\u00fc\u00fcelemendi ID.<\/p>\n
end_el<\/h3>\n
Funktsioon end_el<\/code>vastutab elemendi sulgemise v\u00e4ljastamise eest. Tavaliselt v\u00e4ljastaks see lihtsalt <\/li><\/code>sildi.<\/p>\n
function end_el(&$output, $item, $depth=0, $args=null) { }<\/code><\/pre>\n
Argumendid end_el<\/code>on samad, mis start_el<\/code>\u00fclal, v\u00e4lja arvatud see, et funktsioonil pole viiendat parameetrit $id<\/code>.<\/p>\n
kuva_element<\/h3>\n
Funktsioon display_element<\/code>on p\u00e4ritud funktsioon Walker<\/code>\u00fcldklassist ja vastutab l\u00e4bimise eest. See on funktsioon, mis kutsub kordam\u00f6\u00f6da k\u00f5iki \u00fclaltoodud funktsioone.<\/p>\n
Lisan selle siia, sest m\u00f5nel juhul, n\u00e4iteks kui soovite takistada terve haru l\u00e4bimist, kasutaksite seda funktsiooni selleks.<\/p>\n
function display_element($element, &$children_elements, $max_depth, $depth, $args, &$output) { }<\/code><\/pre>\n
Esimene argument, $element<\/code>on men\u00fc\u00fcelemendi objekt \u2013 see antakse edasi nagu $item<\/code>\u00fclaltoodud funktsioonides. Teine argument $children_elements<\/code>\u2013 \u200b\u200bviitega edastatud \u2013 sisaldab k\u00f5iki alamelemente, mida see funktsioon l\u00e4bib. $max_depth<\/code>, kolmas argument, on t\u00e4isarv, mis annab m\u00e4rku, kui s\u00fcgavust peaksime l\u00e4bima, ja neljas argument, $depth<\/code>on s\u00fcgavus, milles me praegu oleme. Viies argument $args<\/code>on argumendid, mis edastatakse funktsioonile, mis kutsus v\u00e4lja k\u00f5ndija (men\u00fc\u00fcde puhul on need argumendid, mis antakse funktsioonile wp_nav_menu()<\/code>) ja viimane argument, $output<\/code>mis edastatakse viitena, on v\u00e4ljund, mis edastatakse esimese argumendina \u00fclaltoodud funktsioonidest.<\/p>\n
Iga elemendi v\u00e4ljundi muutmine<\/h2>\n
\u00dclaltoodud \u00fclevaates peaksite n\u00e4gema, et funktsioon start_el()<\/code>vastutab \u00fche men\u00fc\u00fcelemendi HTML-i v\u00e4ljastamise eest. Alustuseks alistame selle funktsiooni oma k\u00f5ndimisklassis lihtsa n\u00e4itega.<\/p>\n
N\u00e4ide: linkide lisamise keelamine elementide # jaoks<\/h3>\n
Veenduge, et k\u00f5ik " #<\/code>" lingid <span><\/code>saaksid lingisildi asemel elemendi, et v\u00e4ltida lehe v\u00e4rskendamist.<\/p>\n
class 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>\n
Alustame elemendi lisamisega <li><\/code>sildi juurde $output<\/code>. Soovime tagada, et WordPressi vaikeklassid (n\u00e4iteks ‘men\u00fc\u00fc-\u00fcksus’, ‘men\u00fc\u00fc-\u00fcksus-on-lapsed’ jne) ning ka men\u00fc\u00fcredaktorisse k\u00e4sitsi sisestatud klassid lisataks meie loendi elemendile. Liimime massiivina pakutavad klassid $item->classes<\/code>PHP funktsiooni abil, [implode](https:\/\/www.php.net\/manual\/en\/function.implode.php)()<\/code>eraldades iga elemendi t\u00fchikuga.<\/p>\n
Ridadel #5-9 ja #13-17 k\u00e4sitleme m\u00e4hkimiselemendi tingimuslikku v\u00e4ljundit. V\u00e4ljastame <a><\/code>m\u00e4rgendi, v\u00e4lja arvatud juhul, kui elemendi URL on \u201e #<\/code>", sel juhul pakume selle <span><\/code>asemel m\u00e4rgendi. Real #11 v\u00e4ljastame lihtsalt lingi teksti, mis asub $item->title<\/code>.<\/p>\n
See on k\u00f5ik, mida vajame tagamaks, et k\u00f5ik men\u00fc\u00fcelemendid, mille #<\/code>URL on " ", pole kl\u00f5psatavad!<\/p>\n
Kui teete seda stiiliga teemas, pidage meeles, et kui teema on <a><\/code>sildi otse stiili kujundanud, v\u00f5ite stiili kaotada. Saate selle lahendada, muutes stiili ja v\u00f5imaluse korral lisades spanelemendile klassi.<\/p>\n
N\u00e4ide: men\u00fc\u00fcelementide kirjelduste kuvamine<\/h3>\n
N\u00e4iteks veel \u00fcks asi, mida saate siin teha, on men\u00fc\u00fc kirjelduse v\u00e4ljastamine. See on olemas, kuid see pole vaikimisi aktiveeritud. WordPressi men\u00fc\u00fcredaktoris peate kl\u00f5psama paremas \u00fclanurgas valikul "Ekraani valikud" ja m\u00e4rkima, et kuvada "Kirjeldus":<\/p>\n
\"Siit<\/a><\/p>\n
See v\u00f5imaldab kasutajal sisestada igale elemendile kirjelduse. Saate selle kirjelduse v\u00e4ljastada oma k\u00f5ndimisklassis. Oletame, et soovite kuvada ainult tipptaseme \u00fcksuste kirjeldust, kuna see on osa teie teema kujundusest. Saate lihtsalt kontrollida, kas sellel $item<\/code>on kirjeldus ja kui $depth<\/code>see on 0, n\u00e4iteks:<\/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>\n
N\u00e4ide: rippmen\u00fc\u00fc t\u00e4histe lisamine<\/h3>\n
Levinum ja kasulikum n\u00e4ide on "caret" lisamine, ikoon, mis annab m\u00e4rku, et sellel men\u00fc\u00fcelemendil on rippmen\u00fc\u00fc (sellel on alamelemendid).<\/p>\n
\"Siit<\/a><\/p>\n
N\u00e4ide hoolitsusest tegevuses \u2013 “Blogi” ja “Uudised” taga<\/p>\n
Peate v\u00e4lja selgitama oma caret HTML-i v\u00e4ljundi. Minu puhul v\u00e4ljastan <i><\/code>konkreetsete klassidega \u00fcksuse kena allanoole jaoks, mis on saadaval Fontawesome’i<\/a> raamatukogus, mis pakub tuhandeid ikoone. Samuti soovite tagada, et see t\u00e4his v\u00e4ljastaks ainult neid elemente, millel on lapsed. Parim viis teada saada, kas praegusel elemendil on lapsi, on viidata k\u00e4ijaobjektile (jah, mis on meie k\u00f5ndija ise, aga ka klassidele, mida see laiendab!) $args<\/code>ja kontrollida t\u00f5ev\u00e4\u00e4rtust has_children<\/code>. Kaardi v\u00e4ljastamine on nii lihtne kui:<\/p>\n
if ($args->walker->has_children) {\n    $output .= '<i class=\"caret fa fa-angle-down\"><\/i>';\n}<\/code><\/pre>\n
T\u00e4ielik k\u00f5ndimisklass n\u00e4eks v\u00e4lja selline:<\/p>\n
class 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\u00a0\n        if ($args->walker->has_children) {\n            $output .= '<i class=\"caret fa fa-angle-down\"><\/i>';\n        }\n    }\n}<\/code><\/pre>\n
Ja see on k\u00f5ik, mida vajate tagamaks, et teie men\u00fc\u00fc saab vanemate elementide peal ilusad ikoonid ja et #<\/code>lingid " " ei oleks kl\u00f5psatavad.<\/p>\n
Kui soovite, et ikoon caret muutuks, n\u00e4iteks \u00fclesnooleks, kui rippmen\u00fc\u00fc on aktiivne, peate selle oma teemasse lisama Javascriptiga.<\/p>\n
Nagu \u00fclaltoodud n\u00e4ited viitavad, saate v\u00e4ljundiga manipuleerida nii, nagu soovite, mis tahes tingimustingimuste alusel. N\u00e4iteks saate muuta v\u00e4ljundit vastavalt sellele, kas teatud klass on olemas (nt men\u00fc\u00fcredaktorisse k\u00e4sitsi sisestatud klass), otsides klassi kaustast $item->classes<\/code>, v\u00f5i saate manipuleerida (n\u00e4iteks suurt\u00e4htedega kirjutada) v\u00e4ljastatava \u00fcksuse tekstiga, mis on esitatud $item->title<\/code>.<\/p>\n
Argumentide esitamine oma k\u00f5ndijale l\u00e4bi teiewp_nav_menu<\/code><\/h2>\n
Tahaksin mainida veel \u00fcht kasulikku asja. Pidage meeles, et $args sisaldab k\u00f5iki argumente, mis on esitatud wp_nav_menu()<\/code>. See h\u00f5lmab n\u00e4iteks theme_location<\/code>ja teisi, nii et kui saate muuta v\u00e4ljundit ainult konkreetsete teema asukohtade jaoks \u2013 n\u00e4iteks peamen\u00fc\u00fcs. Kuid tegelikult saate esitada mis tahes kohandatud argumente!<\/p>\n
Oletame, et v\u00e4ljastate sama men\u00fc\u00fc mitu korda, n\u00e4iteks \u00fche lauaarvuti jaoks ja uuesti mobiili jaoks. V\u00f5i soovite, et teie jalutusseade manipuleeriks \u00fcksustega ainult siis, kui need wp_nav_menu()<\/code>teie teemas v\u00e4ljastatakse, mitte siis, kui men\u00fc\u00fc lisatakse vidina kaudu? V\u00f5ib-olla soovite, et teie jalutusk\u00e4ik k\u00e4sitleks nendel juhtudel v\u00e4ljundit erinevalt?<\/p>\n
Saate esitada mis tahes kohandatud argumendid wp_nav_menu()<\/code>. Lihtsa n\u00e4itena lisan show_carets<\/code>argumentidele t\u00f5ev\u00e4\u00e4rtuse \u201e ” tagamaks, et t\u00e4hised lisatakse ainult nendel juhtudel, kui ma neid soovin \u2013 selle asemel, et minu k\u00f5ndimisklass lisaks t\u00e4hised k\u00f5ikidesse men\u00fc\u00fcdesse.<\/p>\n
wp_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    'show_carets' => true\n]);<\/code><\/pre>\n
Seej\u00e4rel saan lihtsalt muuta \u00fclaltoodud koodi lisamise koodi (rida nr 19-21) kontrollimaks, kas show_carets<\/code>see on olemas ja t\u00f5ene keeles $args<\/code>, n\u00e4iteks j\u00e4rgmiselt:<\/p>\n
if ($args->show_carets && $args->walker->has_children) {\n    $output .= '<i class=\"caret fa fa-angle-down\"><\/i>';\n}<\/code><\/pre>\n
Saate lisada mis tahes argumente, tagamaks, et teie jalutusk\u00e4ik kohandab ainult soovitud men\u00fc\u00fcsid. N\u00e4iteks lihtsad t\u00f5ev\u00e4\u00e4rtused erinevate juhtumite jaoks, nt is_mobile_menu<\/code>, v\u00f5i muu vajalik.<\/p>\n
Ja sellega asi piirdubki. Katsetage julgelt ja andke mulle teada, kui teil on allpool k\u00fcsimusi v\u00f5i soovitusi!<\/p>\n
:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Selles postituses \u00f5pime, kuidas luua, rakendada ja kohandada oma k\u00f5ndimisklassi, et kohandada meie men\u00fc\u00fcv\u00e4ljundit WordPressis.<\/p>\n","protected":false},"author":1,"featured_media":224083,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[894,894,916,916,1110,842,926,926,842,863,863],"tags":[1165],"class_list":["post-233864","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-kood","category-muud","category-n-a","category-opetused","category-teemasid","category-wordpress-4","tag-affiai-et"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/233864","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/comments?post=233864"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/233864\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media\/224083"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media?parent=233864"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/categories?post=233864"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/tags?post=233864"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}