4.3. Ylätunnisteen toiminnot - Navigointi 1 - Aurinkoverkko

Ylätunnisteen toimintoja käyttöön

Keskitytään ylätunnisteen toimintoihin ja niiden perusmuotoiluun sivuston sivuilla. Ylätunnisteeseen asetetaan navigointivalikon toiminnallisuus sekä logon lisäämismahdollisuus teeman mukautustoimintoon.

Navigointivalikko

Navigointivalikon toiminnallisuuden luominen voi olla usealle aloittelevalle ja jopa kokeneemmallekin sivuston tekijälle hiuksia nostattava haaste. Navigointivalikosta tekee haastavan sen toiminnallisuuden määrä, pudotusvalikot. Tämä kaikki tulisi vielä toimia kaiken kokoisilla laitteilla vähintään kohtalaisesti, jotta selaaja viihtyy sivustolla.

Navigaatiovalikon luomiseen tarvitaan teeman tiedostoista vähintään neljää tiedostoa:

functions.php -tiedostossa otetaan navigointivalikko käyttöön WordPressissä ja tarvittaessa vaikutetaan valikon lähdekoodiin walker-luokka nimisellä elementillä.
header.php -tiedostoa tarvitaan luonnollisestikin, jotta voidaan tuoda luotu navigointivalikko sivuston lähdekoodiin ja näkyviin sivustolla.
harjoitus.css?: -tiedostossa muotoillaan navigointivalikko css-muotoiluin.
harjoitus.js skriptikirjastoon luodaan scripti, joka herättää navigointivalikon eloon.

Navigointivalikko voidaan luoda sivustolle periaatteessa kolmella eri tavalla:

Asentamalla sivustolle Bootstrap-koodikirjasto, jonka avulla voidaan ottaa Bootstrapin tarjoama navigointivalikko käyttöön sivustolla ja vaikka kustomoida sitä omaan tyyliin sopivaksi CSS:llä. Bootstrap on siinä mielessä hyvä, että sen mukana tulee kosolti muitakin valmiita elementtejä ja muotoiluja sivustolla käytettäväksi. Toisaalta sen mukana tulee myös ylimääräistä, jota ei tule sivustolla käytettyä.
Pitäytymällä perusvaihtoehdossa ja koodaamalla itse valikon toiminnallisuudet, muotoilut ja ominaisuudet itse käyttämällä CSS-muotoilua ja Javascriptiä.
Ottamalla käyttöön walker class functions.php -tiedostossa, muotoilla ja lisätä toiminnallisuuden sisältävä script harjoitus.js -tiedostoon.

Tehdään sivustolle navigointivalikoista viimeinen, jossa otetaan käyttöön walker class koodi. Avaa aiemmin luetellut neljä tiedostoa Visual Studio Code -ohjelmistossa aktiiviseksi ja aletaan lisäämään koodauksia sivuston navigointivalikolle. Lisäksi tehdään walker class erilliseen kooditiedostoon, sillä se sisältää melko paljon php-koodausta.

header.php muokkaaminen

Header.php tiedoston luomisvaiheessa lisättiin ylätunnisteeseen jo navigoinnin lisäävä koodaus mutta koodausta, joudutaan muokkaamaan uudelleen, sillä linkitetään tiedostoon navigointivalikkoon tuleva walker class. ssekä muutamia muita asetuksia.

Korvaa header.php-tiedoston koodaus oheisella koodilla. Valitse siis koko tiedoston koodi + ja liitä uusi koodi tiedostoon.

<!DOCTYPE html>

<html lang="fi">


    <head>

	
        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title><?php bloginfo('name'); ?></title>

        <?php wp_head(); ?>

	
    </head>

    <body>

	
        <header>

		
            <?php if (has_custom_logo()) : ?>

			
                <div class="site-logo"><?php the_custom_logo(); ?></div>

			
            <?php else : ?>
			
                <div class="site-name"><?php bloginfo('name'); ?></div>

			
            <?php endif; ?>

            <nav class="main-menu">

            <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">

			
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">

				
                    <polyline fill="transparent" stroke-miterlimit="10" points="853.55 323.22 500 676.78 146.45 323.22"/>

                    <path fill="transparent" stroke-miterlimit="10" d="M780.87,280.58c0,155.01-125.66,280.67-280.67,280.67s-280.67-125.66-280.67-280.67"/>

                    <line stroke-miterlimit="10" x1="300" y1="323.22" x2="700" y2="323.22"/>

                    <line stroke-miterlimit="10" x1="350" y1="402.86" x2="650" y2="402.86"/>

                    <line stroke-miterlimit="10" x1="400" y1="482.51" x2="600" y2="482.51"/>

				
                </svg>

			
            </button>

			
                <div class="menu-primary-container">

				
                    <?php

                    wp_nav_menu(array(

					
                        'theme_location' => 'primary',

                        'container' => 'ul',

                        'menu_class' => 'menu',

                        'walker' => new Custom_Walker_Nav_Menu()

					
                    ));

                    ?>

				
                </div>

			
            </nav>

		
        </header>

header.php-lisättyä

Logo: PHP:n IF-lauseke, joka näyttää ylätunnisteessa mukauta toiminnossa asetetun logokuvan, jos sellainen on asetettu. Muutoin näytetään sivuston nimi. Div-elementti ja luokka muotoilemista varten.
HTML nav-elementtiin asetetaan css-luokka main-menu
Mobiilileveyksille menuvalikon avauspainike HTML button
Painikkeen koodaus:

class eli CSS-luokka painikkeelle.
aria-controls: ARIA-attribuutti, joka kertoo avustaville teknologioille (kuten näytönlukijoille tai laitteille), että tämä painike ohjaa elementtiä, jonka ID on ”primary-menu”.
aria-expand: ARIA-attribuutti kertoo, onko ohjattu elementti (tässä tapauksessa ”primary-menu”) näkyvissä vai ei. ”false” tarkoittaa, että se ei ole näkyvissä. Kun käyttäjä napsauttaa painiketta, tämän arvon tulisi muuttua ”true”-arvoksi, ja valikko tulisi näyttää. Muutos tehdään javascript-tiedostossa (harjoitus.js)

Painikkeen vektorigrafiikalla toteutettu ikoni: Tässä osassa rakennetaan ikoni vektoripisteillä, joka painikkeen sisällä on. Ikoni on tässä toteutettu SVG-vektorigrafiikalla. Tilalla voi toki olla vain esimerkiksi teksti- tai kuvaelementti. Vektorigrafiikalla asetetulla ikonilla on etunsa. Voit esimerkiksi muokata viivojen väriä CSS-muotoiluilla ja luoda uniikin kokonaisuuden. Voit lukea vektorigrafiikka ikonin luomisesta esimerkiksi ilmaisella vektorigrafiikan piirtämiseen tarkoitetulla omalle koneelle asennettavalla Inkscape-ohjelmalla. Lue ohjeet yksinkertaisen vektori-ikonin luomiselle täältä.
Navigointivalikon sisään kietova div-elementti, jossa asetettu css-luokka menu-primary-container. Array on WordPressin sisäänrakennettu funktio, joka näyttää navigointivalikon ja palauttaa argumenttina taulukon, joka sisältää valikon asetukset, joita ovat seuraavat:

theme_location: Asetus määrittää, mikä navigointivalikko näytetään (vrt. functions.php ja ohjauspaneelin menus-toiminto).
container: Asetus määrittää, mikä HTML-elementti ympäröi valikkoa.
menu_class: Määrittää valikon ul HTML-elementin luokan. Luokkaa menu käytetään yleisesti luokkana WordPressissä.
walker: Tarkoittaa mukautettua ”walker”-luokkaa nimeltä Custom_Walker_Nav_Menu. Walker-luokka mahdollistaa valikon HTML-rakenteen mukauttamisen. Tulemme käyttämään walker-luokan nimeä walker-nav-menu.php -tiedoston koodauksessa.

functions.php muokkaaminen

Functions.php tiedostossa emme tee mitään muutoksia koodiin sillä navigointivalikon toiminnon otimme käyttöön jo aiemmin teemassa. Lisätään kuitenkin yksi koodinpätkä tiedostoon, joka lisää walker-nav-menu.php -tiedoston koodin functions.php -tiedostoon. Muista myös luoda walker-nav-menu.php -niminen tiedosto teemaan!! Lisää siis seuraava koodi functions.php -tiedostoon.

HUOM! Muista lisätä koodi ennen tiedoston PHP-päätöstagia ?>



/*Navigointivalikko ja walker-luokka tuodaan erillisestä tiedostosta*/
require_once get_template_directory() . '/walker-nav-menu.php';

functions.php-tiedosto pitäisi näyttää sinulla nyt tältä:

Linkitetään walker class-tiedosto functions.php -tiedostoon ja luodaan walker-tiedosto ja nimetään koodin mukaan.

harjoitus.js

Olemme luoneet teemaan toimintaan Javascript-tiedoston harjoitus.js, johon täytyy asettaa scriptejä, jotka herättävät navigointivalikon henkiin. harjoitus.js-tiedostossa viitataan jatkossa luotavan walker-nav-menu.php -tiedoston lisäämiin CSS-luokkiin navigaation elementeissä. Ne tullaan siis luomaan myöhemmin seuraavassa artikkelissa Walker Class.

Tällä kurssilla ei tutustuta Javascript-skriptikieleen, vaan kopioidaan vaan oheinen scriptitiedoston sisältö harjoitus.js-tiedostoon. Tiedostossa on kommentoitu koodien toiminta, jos haluat tutustua kielen toimintaan tarkemmin itsenäisesti.

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. 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:

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.

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.

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.

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.