Nyt kun tiedämme, miten luoda perus WordPress-teema tyhjästä, katsotaanpa, miten luoda mukautettu navigointivalikko teemaan. Tätä valikkoa pitäisi pystyä hallitsemaan WordPressin kojelaudalta. Toisin sanoen sinun pitäisi pystyä menemään Dashboardiin ja lisäämään tai poistamaan linkkejä haluamiisi sivuihin, viesteihin tai luokkiin. Tämän opetusohjelman loppuun mennessä meillä on juuri tämä. Kaivetaanpa sisään ja katsotaan, miten tämä tavoite saavutetaan.
Avaa header.php
Avaa header.php-tiedosto siitä teemasta, jonka parissa olemme työskennelleet. Tavoitteenamme on lisätä valikko, joka asuu sivuston pääsisällön yläpuolella, mutta sivuston nimen ja tagline-alueen alapuolella. Tätä varten voimme lisätä alla olevan koodin:
<!DOCTYPE html><html <?php language_attributes(); ?>><head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <title><?php bloginfo( 'name' ); ?></title><?php wp_head() ?></head><body <?php body_class(); ?>><div class="container"> <header class="site-header"> <h1><a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></h1> <h4><?php bloginfo( 'description' ); ?></h4> <nav class="navigation-menu"><?php wp_nav_menu() ?> </nav> </header>Huomaa, että käytämme WordPressin meille tarjoamaa erityistä funktiota wp_nav_menu(). Tämä funktio hoitaa kaiken jalkatyön puolestasi mukautetun valikon rakentamisessa. Sinun ei tarvitse käsin kirjoittaa kaikkea html:ää itse, joten tämä on varsin hyödyllistä. Nyt meillä ei ole vielä paljon sivuja, mutta jos käymme testisivustollamme, funktio antaa jo linkin esimerkkisivulle, joka on olemassa asennuksessamme.
Argumenttien välittäminen wp_nav_menu()-funktiolle
Kuten useimmille WordPressin funktioille, voit välittää valinnaisia argumentteja wp_nav_menu()-funktiolle. Tässä asetetaan joukko ja määritetään vain yksi vaihtoehto. Käytämme arraya siltä varalta, että haluamme tulevaisuudessa välittää useita vaihtoehtoja. Näin voisimme lisätä tuon koodinpätkän.
<!DOCTYPE html><html <?php language_attributes(); ?>><head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <title><?php bloginfo( 'name' ); ?></title><?php wp_head() ?></head><body <?php body_class(); ?>><div class="container"> <header class="site-header"> <h1><a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></h1> <h4><?php bloginfo( 'description' ); ?></h4> <nav class="navigation-menu"><?php $args = ; ?><?php wp_nav_menu( $args ) ?> </nav> </header>Tämän vaihtoehdon avulla voimme nimetä tiettyjä valikoita teemassamme. Saatamme haluta useamman kuin yhden valikon, ja tämä on tapa, jolla voimme erottaa useat valikot toisistaan.
Registeröi valikon sijainti functions.php-tiedostossa
Voidaksemme käyttää juuri header.php-tiedostossamme luomamme valikkoa WordPressin hallintataulusta käsin, meidän on rekisteröitävä valikon sijainti teeman functions.php-tiedostossa. Miten voimme siis rekisteröidä uuden valikkomme WordPressiin? Voimme tehdä sen WordPressiin sisäänrakennetulla register_nav_menus()-funktiolla. Rekisteröidään valikkomme näin:
<?phpfunction custom_theme_assets() {wp_enqueue_style( 'style', get_stylesheet_uri() );}add_action( 'wp_enqueue_scripts', 'custom_theme_assets' );register_nav_menus( );Konfiguroi mukautettu valikkomme WordPressin kojelaudassa
Uuden valikkomme pitäisi nyt olla rekisteröity WordPressin ytimeen. WordPress on nyt tietoinen valikostamme ja sen sijainnista teemassa. Voimme nyt mennä kojelautaan, luoda uuden valikon ja hallita sen sijaintia. Erityisesti haluamme saada sen näkymään siellä, missä käytimme tuota wp_nav_menu()-funktiota. Siirrymme kohtaan Appearance->Menus ja klikkaamme sitten ”luo uusi valikko”.
Voitamme nimetä tämän valikon miksi haluamme. Valitsemme yksinkertaisuuden vuoksi vain Main Menu (Päävalikko) ja napsautamme sitten ’Create Menu’ (Luo valikko).
Tässä seuraavassa vaiheessa linkitämme kaikki kategoriamme. Voimme siis valita Categories (Luokat), Select All (Valitse kaikki), päivittää Display location (Näytön sijainti) -asetukseksi ’Primary Menu’ (Päävalikko) ja napsauttaa sitten ’Save Menu’ (Tallenna valikko) -painiketta. Kokeillaan sitä.
Käymällä sivustollamme näemme, että saamme nyt linkin jokaiseen luomaamme luokkaan uudessa valikossa. Se on tällä hetkellä vain järjestämätön lista, eikä se ole vielä kaunein mahdollinen – mutta se toimii!
Mitä hyötyä on mukautetun valikon rekisteröinnistä?
Tiedän, tiedän. Ajattelet, ettei ole edes järkevää käydä läpi kaikkea tätä hulinaa vain saadaksesi muutaman hyperlinkin joihinkin kategorioihin näkymään sivustollasi. Jossain mielessä olet oikeassa. Mikset vain rakentaisi joitakin näistä asioista manuaalisesti itse. Toki sen voi tehdä, mutta kun rakennamme valikkomme, kuten teimme tässä, meillä on nyt WordPressin kojelaudan valta hallita koodia, jonka olemme sisällyttäneet teemaan. Voimme nyt helposti raahata ja pudottaa linkkien tilauksen muun muassa suoraan Dashboardista. Muutetaan järjestys WordPressistä, PHP:stä ja JavaScriptistä JavaScriptiin, WordPressiin ja sitten PHP:hen. Hyvin helppoa!
Nyt kun vierailet sivustolla, linkkien järjestys valikossa päivittyy. Tällä lähestymistavalla ei tarvitse sotkea taustalla olevaa koodia.
Style that custom menu
Tämä järjestämätön lista ei vain riitä! Meidän on tehtävä asioista hieman tyylikkäämpiä. Käytetään hieman aikaa soveltamalla mukautettua CSS:ää tuon valikon siistimiseksi hieman. Ensinnäkin haluamme muuttaa pystysuuntaisen järjestämättömän listan vaakasuuntaiseksi valikoksi. Haluamme myös poistaa luettelon jokaisen elementin bullet pointit, lisätä pehmusteita ja marginaaleja sekä poistaa linkkien alleviivauksen. Tässä on kokeilu tämän vaikutuksen luomiseksi style.css-tiedostossamme.
/* Nav Menu */.navigation-menu ul { margin: 0; padding: 0;}.navigation-menu ul:before, .navigation-menu ul:after { content: ""; display: table;}.navigation-menu ul:after { clear: both;}.navigation-menu ul { *zoom: 1}.navigation-menu ul li { list-style: none; float: left; margin-right: 3px;}.navigation-menu ul li a:link,.navigation-menu ul li a:visited { display: block; padding: 12px 17px; border: 2px solid #ecf0f1; border-bottom: none; text-decoration: none;}Yllä olevassa CSS-tiedostossa tapahtuu aika paljon. Käydäänpä se läpi. Ensimmäisessä .navigation-menu ul -valitsimessa poistamme kaikki pehmusteet ja marginaalit järjestämättömästä listasta. Seuraavaksi varmistamme, että järjestämätön lista tyhjentää listakohtien lasten kelluvuudet. .navigation-menu ul li -valitsimessa poistamme luettelosta bulletit, kellutamme luettelon kohteet vasemmalle ja lisäämme hieman marginaalia oikealle. Lopussa kohdistamme linkit. Ensin muutamme ne lohkotason elementeiksi, joiden pehmuste on 12px pystysuunnassa ja 17px vaakasuunnassa. Lisäämme kivan rajaustehosteen ja poistamme linkkien alleviivauksen. Tarkistetaan se nyt selaimessa.
Hienoa! Tuo valikko näyttää paljon paremmalta kuin se alun perin näytti.
Valikon mukautetun värin lisääminen hoverissa
Perusmuotoilu ins paikallaan. Voisi olla kiva saada vähän hover-efektiä, kun siirtää hiiren jokaisen linkin päälle. Tämä on erittäin helppo määrittää seuraavan pätkän avulla:
.navigation-menu ul li a:hover { background-color: #ebf5fb;}
Näyttää aika hyvältä!
Miten kohdistaa valikkokohdan aktiivinen tila
Toinen asia, jonka haluaisimme ehkä lisätä, on mahdollisuus mukauttaa aktiivisen linkin väriä. Tämä eroaa yksinkertaisesta hover-efektistä. Tässä tapauksessa, kun käymme tietyssä linkissä valikosta, haluamme WordPressin olevan tietoinen siitä, että tämä on nyt aktiivinen sivu, jota katsotaan, ja päivittää visuaalisen esityksen vastaamaan aktiivista linkkiä. Tätä varten voimme hyödyntää erityistä luokkaa, joka on rakennettu WordPressiin juuri tätä asiaa varten. Tämä on current-menu-item-luokka. Näin voimme sisällyttää sen mukautettuun valikkoomme.
.navigation-menu ul li.current-menu-item a:link,.navigation-menu ul li.current-menu-item a:visited { background-color: #4285f4; color: #ffffff;}Jos käymme nyt sivustollamme ja testaamme vierailemalla mukautetun valikon eri linkeillä, näemme, että se näyttää erittäin hyvältä. Meillä on nyt erityinen ulkoasu hover-tilalle ja erilainen ulkoasu valikkomme linkkien aktiiviselle tilalle. Tämä on hyvä tapa varmistaa, että sivustosi kävijät tietävät, missä he tällä hetkellä ovat pitämällä aktiivisen valikon niin sanotusti valaistuna.
Miten luoda mukautettu valikko WordPressissä Yhteenveto
Tässä opetusohjelmassa katsoimme tarkkaan, miten voimme lisätä mukautetun valikon mukautettuun teemaan WordPressissä. Käytimme apuna muutamia WordPressin toimintoja. Ensimmäinen käyttämämme funktio oli wp_nav_menu(). Tämä funktio voi automaattisesti muodostaa järjestämättömän luettelon ja lapsielementit luodakseen rakenteen kivalle valikolle, johon voit soveltaa muotoilua. Tähän funktioon voi antaa monia argumentteja, mutta keskityimme tässä vain perusasioihin. Seuraava käyttämämme funktio oli register_nav_menus()-funktio. Tämän funktion avulla voimme kertoa WordPressille uudesta valikostamme ja kytkeytyä siihen WordPressin kojelaudassa. Kun uusi valikkomme oli rekisteröity WordPressiin, huomasimme, että oli helppoa lisätä tai poistaa mitä tahansa haluamaamme kyseisestä valikosta suoraan WordPressin kojelaudalta eikä meidän tarvinnut muokata mitään koodia teematiedostoissamme. Lopuksi käytimme hieman aikaa parantaaksemme valikkomme ulkoasua käyttämällä joitakin mukautettuja CSS-muotoiluja.