Oma WordPress teema

4.4. Walker Class – Navigointi 2

Tagged with

Navigaation jäsentelyä Walker elementtikäsittelijällä

WordPress-teemojen kehityksessä Walker-luokat tarjoavat tehokkaan tavan mukauttaa navigaatiovalikoita. WordPressissä on järjestelmän oma walker-luokka ja tässä artikkelissa luodaan teeman navigaatiovalikkoon oma Walker-luokan, joka jäsentelee uudelleen navigaation lähdekoodia ja lisää elementeille tarvittavia CSS-luokkia. Näin voimme muotoilla navigaation ulkoasua helpommin ja luoda täysin mukautettuja valikoita. Luotu walker siis korvaa olemassa olevaa WordPressin walker-luokkaa ja sen toimintaa.

Walker class

Jos haluat hallita navigointivalikon HTML:ää laajemmin ja muotoilla valikkoa rajattomasti, voit käyttää mukautettua Walker-luokkaa. Walker Class on mukautettu PHP-luokka, joka auttaa muokkaamaan WordPressin generoimaa navigointivalikon html-lähdekoodia joka tulee WordPressin omasta walker-tiedostosta. Jos katsot nyt sivustosi sivun lähdekoodia huomaat, että oletusarvoisesti WordPress käyttää valikossa html-listarakennetta <ul> <li> <li> <ul>. Joskus halutaan laajempaa hallintaa HTML-rakenteeseen ja tuolloin tarvitaan walker-luokkaa.

Milloin Walker-luokkaa tarvitaan?

Walkeria ei aina tarvita mutta seuraavassa joitain tapauksia, jolloin walker on tarpeen luoda:

  1. Mukautettu HTML-rakenne valikoille
    • Jos haluat luoda menuvalikolle jonkin erityisen HTML-rakenteen, kuten käyttää vaikka <span> tai <div> -tageja tai vastaavia, walker-luokka antaa sinulle täyden vapauden ja mahdollisuuden muokata menuvalikon rakennetta.
    • Tavallisin ominaisuus, joka halutaan lisätä valikkoon on nuoli-ikoni osoittamaan milloin kyseessä on pudotusvalikko (dropdown) <span class="dropdown-arrow">▼</span> automaattisesti.
  2. Kun tarvitset erityisiä CSS-luokkia valikkoelementteihin
    • WordPress lisää oletuksena CSS-luokkia, kuten menu-item ja current-menu-item. Jos kuitenkin haluat lisätä omia mukautettuja luokkia, Walker-luokalla voit tehdä sen. Esimerkiksi Bootstrap-menuvalikossa on luotava valikkoon tiettyjä luokkia.
  3. Kun haluat muokata alavalikkojen rakennetta
    • Jos haluat esimerkiksi sijoittaa alavalikon eri elementtiin (<div class="submenu"> vs. oletus <ul>), Walkerilla se onnistuu huomattavasti helpommin.
    • Jos haluat perinteisen pudotusvalikon sijaan ns. megavalikon, jossa pudotusvalikon osat sijaitsevat divin sisällä erityisessä asettelussa, tarvitset walker luokan.
  4. Tarvitset edistyneempiä navigaatiorakenteita
    • Monitasoiset valikot, mobiilinavigaatiot tai esimerkiksi tiettyihin käyttöliittymäsuunnitelmiin (esim. ”off-canvas”-valikot) Walker-luokka voi auttaa mukauttamaan valikon tarpeisiin.
    • Haluat Yhdistää WordPressin valikon Bootstrapin navigaatiokomponenttiin.

walker-nav-menu.php -tiedoston koodaus

Kopioi ja liitä leikepöydältä oheinen koodaus luomaasi walker-nav-menu.php -tiedostoon.

<?php



/* Walker-luokka navigoinnin käyttöön ja muotoiluun.*/ 

class Custom_Walker_Nav_Menu extends Walker_Nav_Menu {





    function start_lvl(&$output, $depth = 0, $args = null) {

    

        $indent = str_repeat("\t", $depth);

        $classes = array('sub-menu'); //  Varmista, että tämä on lisätty

        $class_names = join(' ', apply_filters('nav_menu_submenu_css_class', $classes, $args, $depth));

        $output .= "\n$indent<ul class=\"$class_names\">\n";

    

    }



    function start_el( &$output, $item, $depth = 0, $args = null, $id = 0 ) {

    

        $indent = ($depth) ? str_repeat("\t", $depth) : '';



        $li_attributes = '';

        $class_names = $value = '';



        $classes = empty($item->classes) ? array() : (array) $item->classes;



        $classes[] = ($args->walker->has_children) ? 'menu-item-has-children' : '';

        $classes[] = ($item->current || $item->current_item_ancestor) ? 'current-menu-item' : '';

        $classes[] = 'menu-item-' . $item->ID;



        $class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item, $args));

        $class_names = ' class="' . esc_attr($class_names) . '"';



        $id = apply_filters('nav_menu_item_id', 'menu-item-' . $item->ID, $item, $args);

        $id = strlen($id) ? ' id="' . esc_attr($id) . '"' : '';



        $output .= $indent . '<li' . $id . $value . $class_names . $li_attributes . '>';



        $attributes = !empty($item->attr_title) ? ' title="' . esc_attr($item->attr_title) . '"' : '';

        $attributes .= !empty($item->target) ? ' target="' . esc_attr($item->target) . '"' : '';

        $attributes .= !empty($item->url) ? ' href="' . esc_attr($item->url) . '"' : '';



        $item_output = $args->before;

        $item_output .= '<a' . $attributes . '>';

        $item_output .= $args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after;



        //  Lisätään pudotusvalikon nuoli

        if ($args->walker->has_children) {

            $arrow = ($depth === 0) ? '<span class="dropdown-arrow">&#9662;</ span>' : '<span class="dropdown-arrow">&#9656;</ span>';

            $item_output .= $arrow;

        }



        $item_output .= '</a>';

        $item_output .= $args->after;



        $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);

    

    }



    function end_lvl( &$output, $depth = 0, $args = null ) {

    

        $indent = str_repeat("\t", $depth);

        $output .= "$indent</ul>\n";

    

    }



    function end_el( &$output, $item, $depth = 0, $args = null ) {

    

        $output .= "</li>\n";

    

    }



}

?>

Olet lisännyt walker class -luokan sivustosi teemaan. Tarkista, että CSS-luokat generoituvat oikein käyttämällä joko selaimen Tarkista työkalua tai tarkastelemalla sivun lähdekoodia.

Olemme käsitelleet teeman php-tiedostoja ja rakentaneet ne suurimmaksi osakseen valmiiksi. Seuraavaksi on aika siirtyä CSS-muotoilun pariin hetkeksi aikaa. Klikkaa siis itsesi seuraavaan artikkeliin ja tutustutaan syvällisemmin CSS-muotoiluun.

WordPressin navigointivalikot perustuvat yleensä HTML-listarakenteeseen (<ul> --> <li>). Käydään seuraavassa läpi oheinen Walker-luokka vaiheittain ja opitaan, kuinka se vaikuttaa lähdekoodin HTML-merkkaukseen <ul> ja <li> elementteihin.

Koodin yleinen rakenne ja HTML-yhteys:

Walker_Nav_Menu laajennus:

Koodin alussa class Custom -luokka Custom_Walker_Nav_Menu laajentaa WordPressin oletusarvoista Walker_Nav_Menu -luokkaa. Tämä tarkoittaa, että se perii oletusluokan toiminnot, muokkaa niitä ja lisää elementteihin CSS-luokkia.

Navigointivalikossa <ul> elementit edustavat valikkokokonaisuuksia (itse valikko sekä alavalikot eli pudotusvalikot). <li> -elementit sensijaan sisältävät yksittäiset valikkokohteet.

Funktioiden (functions) rooli ja koodaukset:

    walker-luokka

  1. start_lvl(): Tämä funktio luo <ul> -elementin alivalikon alkaessa ja sen sisällä koodataan toiminnallisuus HTML:n <ul>-elementteihin.
    1. $indent tarkoittaa koodin sisentämistä, eli rivien siirtämistä oikealle välilyönneillä tai tabulaattoreilla. Sisennyksen tarkoitus on parantaa sivun lähdekoodin luettavuutta ja hahmotettavuutta. Kun koodi on sisennetty oikein, on helpompi nähdä, mitkä koodiosat kuuluvat yhteen ja mitkä ovat sisäkkäisiä. str_repeat ja sen sisällä oleva merkintä toistaa tabulaattorin painalluksen $depth -muuttujassa asetetun verran. Käytännössä tämä tarkoittaa sitä, että alivalikon syvyyden kasvaessa (esim. ensimmäinen alivalikko, toinen alivalikko jne.), tabulaattoreita lisätään enemmän, jolloin alivalikot sisentyvät syvemmälle.
    2. $classes tarkoittaa CSS-luokkia ja sen sisällä on array -taulukkofunktio, joka asettaa taulukkoon sub-menu CSS-luokan.
    3. $class_names merkkijonolla yhdistetään (join) edellä asetetun taulukon (array) ja muut muuttujat yhdeksi merkkijonoksi.
    4. $output merkkijonossa asetetaan $indentissä asetettu sisennys koodiin ja koodissa merkattu ul-merkintä sisällytettynä $class_names yhdistetyllä merkkijonolla? \n tarkoittaa rivinvaihtoa (vrt. \t on tabulaattori).

    walker-luokka

  2. start_el(): Tämä funktio luo <li> -elementin alivalikon alkaessa ja sen sisällä koodataan toiminnallisuus HTML:n <li>-elementteihin.
    1. $li_attributes kohdassa voidaan lisätä li-elementille attribuutteja. Esimerkiksi voidaan lisätä data-attribuutti javascriptin ja CSS:n tarpeeseen. Yleensä on kuitenkin järkevämpää käyttää tarkoitukseen CSS-luokkamäärityksiä kuin attribuutteja.
    2. $class_names ja $value alustaa muuttujan $class_names arvolla $value. Tässä kohdassa $value on peräisin WordPressin omasta walker-tiedostosta, vaikka sitä ei suoraan määritellä tässä omassa walkerissamme.
    3. $classes Jos WordPress walkerin muuttuja $item ei sisällä luokkia, luodaan tyhjä taulukko (array)
    4. $classes[] ja $class_names Lisätään dynaamisesti luokkia <li>-elementeille. Jos menu-itemillä on alavalintoja (dropdown-valinnat) lisätään <li>-elementtiin CSS-luokaksi menu-item-has-children. Jos taas menuvalinnalla ei ole alavalintoja <li>-elementin CSS-luokaksi lisätään menu-item-(kohteen ID), Jos kohde on aktiivinen eli selaaja on kohteen sivulla lisätään CSS-luokka current-menu-item. Lopuksi koodaus liitetään yhdeksi koodaukseksi (join)
    5. $id ja $output $id funktiossa on apply_filters(). Se on WordPressin ydinfunktio, jonka avulla voidaan muokata ja suodattaa WordPressin dataa. Funktion ansiosta ulkopuoliset lisäosat tai teema voivat muokata CSS-luokkien arvoja. Samassa lauseessa on myös array_filter() -funktio; jolla suodatetaan taulukkojen (array) elementtejä. Se luo uuden taulukon, joka sisältää vain ne elementit, jotka läpäisevät määritellyn testin. Tämän walkerin tapauksessa tarkastetaan $classes -taulukko, joka luotiin walkerin kohdassa $classes = empty($item->classes) ? array() : (array) $item->classes;. Tämä varmistaa, että $classes-taulukko sisältää vain kelvollisia CSS-luokkia, jotka voidaan sitten yhdistää merkkijonoksi $class_names-muuttujassa.
    6. $attributes -funktio muodostaa linkin (<a>-elementin) attribuutit $item-objektin tietojen perusteella (title, target, href).
    7. $item_outputMuodostaa linkin sisällön (attributes kohta f),asetus mahdollistaa myös CSS-määrityksien ”before” ja ”after” -elementit, joiden avulla lisätään pudotusvalikon nuoli-ikoni, jos valikkokohteella on alavalikkoja. Nuoli asetetaan kohdassa h
    8. $if-lause aktivoidaan pudotusvalikkoon nuoli-ikoni, joka on asetettu koodissa sen html entity arvolla (koodilla).
    9. $output Lisätään lopullinen valikkokohde HTML-lähdekoodiin ja mahdollistetaan muokkaus apply_filters-toiminnolla. Toisin sanoen luotu <li>-elementti, sen sisältö ja attribuutit lisätään $output-muuttujaan.

    walker-luokka

  3. end_lvl(): Tämä funktio sulkee </ul> -elementin alivalikon päättävän tagin </ul>.
    1. $indent sisennysmerkkijono , josta kerrottiin jo aiemmin.
    2. $output Viittausmerkkijono, johon kohdassa 2.i koottiin navigointivalikon HTML-koodi. Funktion tekemät muutokset tähän muuttujaan vaikuttavat suoraan alkuperäiseen merkkijonoon.

    walker-luokka

  4. end_el(): Tämä funktio sulkee </li> -elementin valikkokohteen päättävän tagin </li>.
    • &$output on , kuten edellisessä, viittausmerkkijono, johon navigointivalikon HTML-koodi kootaan.
    • $depth = 0 -parametri ilmaisee valikkokohteen syvyyden. Oletusarvo on 0, mikä tarkoittaa, että se on päävalikon kohde.
    • $args = null -parametri sisältää lisäargumentteja, joita voidaan käyttää valikon luomisessa. Tässä tapauksessa sitä ei käytetä.
    • $output .= "</li>\n"; -rivi lisää sulkevan </li>-elementin $output-merkkijonoon.