Joskus saatat löytää mahtavan teeman vain tajutaksesi, että olisi hienoa, jos siinä olisi ylimääräinen navigointivalikko tärkeillä tai usein käytetyillä linkeillä, jotka parantavat WordPress-sivustosi käytettävyyttä.
Hieman koodaamalla saat uuden valikon perustan luotua nopeasti, ja se on valmiina, jotta voit muotoilla sen teemasi mukaiseksi.
Jos et halua sotkea itseäsi koodin kanssa, on olemassa monia liitännäisiä, jotka voivat tehdä raskaan työn puolestasi ja tarjota myös muotoiluvaihtoehtoja.
Valitsitpa minkä vaihtoehdon tahansa, alla oleva opas auttaa sinua toteuttamaan sen.
Perussiivous
Luodaksesi uuden valikon sinun on muokattava teemasi tiedostoja. Ennen kuin teet muutoksia mihinkään ydintiedostoihisi, on parasta varmuuskopioida koko sivustosi siltä varalta, että jokin menee pieleen matkan varrella. Voit palauttaa sivustosi nopeasti ja se on kuin mitään ei olisi koskaan tapahtunut.
Voit varmuuskopioida sivustosi manuaalisesti FTP:n kautta tai käyttämällä lisäosaa, kuten omaa Snapshot-ohjelmaamme. Muista vain tallentaa kopio sekä tietokannasta että tiedostoista sivustostasi erilliseen paikkaan, jotta minimoit varmuuskopion menettämisen riskin.
Lapsi-teeman rakentaminen
Luoaksesi uusia valikoita koodin avulla, sinun on tehtävä muutoksia, jotka menetettäisiin, kun päivität teemasi. Lapsiteeman luominen huolehtii tästä ongelmasta.
Voit löytää tarvittavat tiedot lapsiteeman luomiseen tutustumalla pariin muuhun postaukseemme How to Create a WordPress Child Theme (Kuinka luoda WordPressin lapsiteema) ja How to Automagically Create Child Themes in WordPress (Kuinka luoda automaattisesti lapsiteemoja WordPressissä).
Voit myös halutessasi luoda kokonaan uuden oman teeman tai kokeilla sitä paikallisella tai testisivustolla.
Voit tutustua näihin viesteihin saadaksesi lisätietoja WordPressin paikallisen asennuksen luomisesta:
- How to Develop WordPress Locally with MAMP
- How to Install XAMPP and WordPress Locally on PC/Windows
- How to Set Up WordPress Locally in 5 Minutes with DesktopServer
- Nopea ja helppo opas paikallisen WordPress-asennuksen siirtämiseen elävälle sivustolle
- How to Move WordPress for Local Development with XAMPP
Kun olet asettanut jonkin näistä vaihtoehdoista, olet vapaa aloittamaan ylimääräisten navigointivalikoiden luomisen. Tosin, jos päätät käyttää lisäosaa tai teemakehystä, sinun ei tarvitse luoda lapsiteemaa.
Uusien valikoiden luominen
Lisätäksesi valittavissa olevan valikon sijaintivaihtoehdon ylläpidon kojelaudan kohdassa Ulkoasu > Valikot sinun on tehtävä niin sanottu ”valikon rekisteröinti”. Se vaatii vain koodinpätkän lisäämisen functions.php-tiedostoosi, joka sijaitsee osoitteessa wp-content > themes > your-theme.
Klikkaa cPanelissa Tiedostohallinta-kuvaketta etusivun Tiedostot-osiossa. Jos et ole aiemmin asettanut Tiedostonhallintaasi latautumaan sivustosi dokumenttijuureen, siirry nyt sinne.
Kansiossasi /wp-includes/ on functions.php-tiedosto, mutta se ei ole se, jota sinun täytyy muokata. Varmista, että löydät functions.php-tiedoston, joka löytyy käyttämästäsi teemasta. Muuten saat virheitä, kun yrität lisätä myöhemmin löytämääsi koodia.
Löydä functions.php-tiedostosi ja napsauta sitä kerran, minkä jälkeen napsautat sivun yläreunassa olevaa Muokkaa-painiketta.
Jos avautuu ponnahdusikkuna, napsauta yksinkertaisesti Muokkaa-painiketta alareunassa oikealla puolella. Et ehkä näe sitä, jos olet aiemmin poistanut sen käytöstä.
Rullaa tiedoston alareunaan. Jos haluat lisätä vain yhden valikon, lisää seuraavanlainen koodi uudelle riville:
function register_my_menu() {register_nav_menu('new-menu',__( 'New Menu' ));}add_action( 'init', 'register_my_menu' );
Tässä esimerkissä New Menu on nimi, joka näkyy ylläpitäjän kojelaudan valikkosivulla, jotta se olisi ihmissilmille ymmärrettävä. Nimi new-menu on se, mitä WordPress ymmärtää suorittaakseen koodisi oikein.
Voit kutsua valikkoasi miksi haluat, mutta varmista, että vain ihmisen luettavissa oleva nimi sisältää välilyöntejä ja isoja kirjaimia.
Jos haluat lisätä sivustollesi useita valikoita, lisää sen sijaan tämä koodi uudelle riville:
Voit lisätä tällä menetelmällä niin monta uutta valikkoa kuin haluat. Niiden nimeämiseen sovelletaan samoja sääntöjä.
Tallenna tekemäsi muutokset tiedostoon. Nyt jäljellä on enää uuden valikon lisääminen sivustoosi.
Valikon paikkojen lisääminen teemaan
Tässä vaiheessa sinun täytyy päättää, mihin haluat sijoittaa valikon. Jos haluat valikon näkyvän sivun yläosassa, sinun täytyy muokata header.php-tiedostoa. Voit myös laittaa sen alatunnisteeseen, mikä tarkoittaa, että muokkaat footer.php-tiedostoa.
Voit jopa näyttää valikon sivulla muokkaamalla sen mallitiedostoa tai sivupalkkiin, muokkaamalla sen sidebar.php-tiedostoa.
Voit sijoittaa uuden valikkosi minne ikinä haluat. Tässä on vähimmäismäärä koodia, joka sinun on lisättävä mihin tahansa näistä paikoista:
<?php wp_nav_menu( array( 'theme_location' => 'new-menu' ) ); ?>
Vaihda vain new-menu valitsemaasi WordPressin luettavaan nimeen. Haluat luultavasti tyylitellä valikkoasi CSS:llä, jotta se ylittää perustoiminnallisuuden ja näyttää myös hyvältä. Tätä varten sinun on luotava luokka ja lisättävä se teemaan seuraavalla koodilla:
<?php wp_nav_menu( array( 'theme_location' => 'new-menu', 'container_class' => 'new_menu_class' ) ); ?>
Juuri kuten aiemmin, korvaa new-menu valitsemallasi nimellä. Tässä esimerkissä nimesin luomani luokan new_menu_class. Voit muuttaa tätä, mutta muista päivittää tämä koodi vastaamaan muutosta.
Paina Tallenna-painiketta ja siirry kojelaudan Appearance > Menus -valikoihin. Huomaat, että uudet valikkosi luetellaan kohdassa Teemapaikat kohdassa Valikkoasetukset.
Näet nyt uudet valikkopaikkasi listattuna. Kun lisäät valikon, voit valita yhden tai kaikki sijainnit.
Jos haluat, että linkit näkyvät juuri tekemissäsi valikkopaikoissa, napsauta sivun yläosassa olevaa Luo uusi valikko -painiketta.
Jos sinulla ei ole vielä valikkoa, voit kirjoittaa valikon nimen sivun kenttään ja napsauttaa sitten Luo valikko. Jos sinulla on jo aiemmin luotu valikko, voit napsauttaa sivun yläreunassa olevaa Luo uusi valikko -linkkiä.
Kun olet luonut uuden valikon, voit myös hallita sijainteja, joissa ne näkyvät ”Hallitse sijainteja” -välilehdellä.
Tyylittely, liitännäiset ja responsiiviset valikot
Uusi valikkosi on nyt valmis tyyliteltäväksi CSS:n avulla. Tarvittava koodaus riippuu käyttämästäsi teemasta, joten en käsittele sitä tässä postauksessa, mutta meillä on toinen postaus, jonka voit tarkistaa sitä varten nimeltään How to Create an Awesome Responsive Menu for Your WordPress Theme. Siinä näytetään myös, miten voit luoda responsiivisia valikoita, jotka ovat mobiilikäyttöön sopivia.
Jos haluat helpomman vaihtoehdon, on olemassa monia liitännäisiä, jotka luovat responsiivisia valikoita teemasi tyylien perusteella. Yksi parhaista löytämistäni on Responsive Menu.
Joitakin huomionarvoisia mainintoja, joista voi olla hyötyä, ovat ShiftNav, WP Responsive Menu ja Max Mega Menu.
Lähteet, joiden avulla pääset pidemmälle
Sinulla on nyt vankka perusta, jota tarvitset luodaksesi teemallesi lisämenuja, sekä resursseja, joiden avulla pääset pidemmälle. Koodasitpa sen sitten itse, käytitpä lisäosaa tai teemakehystä, sinulla on nyt uusi valikko WordPress-sivustollasi.
Jos törmäät ongelmiin, kysy rohkeasti tukisankareiltamme. He voivat antaa sinulle asiantuntevia neuvoja ja tukea lähes minkä tahansa ongelman ratkaisemiseksi. Voit avata tiketin tukifoorumillamme, ja me tulemme heti auttamaan sinua.
Lisätietoa uuden teemasi tyylittelystä saat monista resursseista, ja löydät ne kaikki postauksestamme A Mega Guide to Learning and Referencing CSS for WordPress: 150+ Resources.
Voit myös tutustua joihinkin muihin postauksiimme 10 yksinkertaista vinkkiä CSS:n oppimiseen WordPressissä, 25 asiantuntijan vinkkiä puhtaampaan CSS-koodaukseen WordPressissä, 25 ammattilaisen vinkkiä CSS-työnkulun parantamiseen ja 5 ilmaista CSS-liitännäistä CSS-liitännäistä, joiden avulla voit reaaliaikaisesti muokata WordPress-sivustoasi, saadaksesi lisätietoja CSS:n koodaamisesta teemallesi.
Tunnisteet:
- valikot
- navigointi
.