Tahdotko lisätä mukautettuja navigointivalikkoja WordPress-teemaan? Navigointivalikot ovat useimpien verkkosivustojen yläosassa näkyvä vaakasuora linkkiluettelo.
Vakiossa WordPress-teemoissa on valmiiksi määritellyt valikkojen paikat ja asettelut, mutta entä jos haluaisit lisätä omia mukautettuja navigointivalikoita?
Tässä artikkelissa näytämme, miten voit helposti luoda ja lisätä mukautettuja navigointivalikkoja WordPressissä, jotta voit näyttää ne missä tahansa teemassasi.
- Milloin tarvitset tätä WordPress-navigointivalikon opetusohjetta?
- Kustomoitujen navigointivalikkojen luominen WordPress-teemoissa
- Kustomoitujen navigointivalikoiden näyttäminen WordPress-teemoissa
- Kustomoidun navigointivalikon lisääminen WordPressissä Page Builderin avulla
- Mobiiliystävällisten responsiivisten valikoiden luominen WordPressissä
- Tehdä enemmän WordPress-navigaatiovalikoiden avulla
Useimmissa WordPress-teemoissa on ainakin yksi kohta, jossa voit näyttää sivustosi navigointilinkit valikossa.
Valikkokohtia voit hallita helppokäyttöisestä käyttöliittymästä WordPressin hallinta-alueen sisällä.
Jos haluat vain lisätä navigointivalikoita verkkosivustollesi, seuraa yksinkertaisesti aloittelijan opastustamme navigointivalikon lisäämiseen WordPressissä.
Tämän ohjeen tavoitteena on auttaa DIY / keskitason käyttäjiä lisäämään mukautettuja navigointivalikoita WordPress-teemoihinsa.
Käsittelemme tässä artikkelissa seuraavia aiheita:
- Kustomoidun navigointivalikon luominen WordPress-teemoissa
- Kustomoidun navigointivalikon näyttäminen WordPress-teemassa
- Kustomoidun navigointivalikon lisääminen WordPressissä käyttämällä sivunrakentajaa
- Mobiiliystävällisten reagoivien valikoiden luominen WordPressissä
- Muut asiat, joita voit tehdä WordPressin navigointivalikoiden kanssa
Tämän sanottuani, katsotaanpa, miten voit lisätä mukautettuja WordPress-navigointivalikoita teemassasi.
Navigointivalikot ovat WordPress-teemojen ominaisuus. Jokainen teema voi määritellä omat valikkopaikkansa ja valikkotukensa.
Lisätäksesi mukautetun navigointivalikon sinun on ensin rekisteröitävä uusi navigointivalikko lisäämällä tämä koodi teemasi functions.php-tiedostoon.
function wpb_custom_new_menu() { register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));}add_action( 'init', 'wpb_custom_new_menu' );
Voit nyt mennä Appearance ” Menus-sivulle WordPressin ylläpidossa ja yrittää luoda tai muokata uutta valikkoa. Näet ’Oma mukautettu valikko’ teeman sijaintivaihtoehtona.
Jos haluat lisätä useamman kuin yhden uuden navigointivalikon sijainnin, sinun on käytettävä tällaista koodia:
function wpb_custom_new_menu() { register_nav_menus( array( 'my-custom-menu' => __( 'My Custom Menu' ), 'extra-menu' => __( 'Extra Menu' ) ) );}add_action( 'init', 'wpb_custom_new_menu' );
Kun olet lisännyt valikon sijainnin, siirry eteenpäin ja lisää joitakin valikkokohteita WordPressin ylläpidossa seuraamalla opetusohjelmaamme navigointivalikoiden lisääminen aloittelijoille.
Siten voimme siirtyä seuraavaan vaiheeseen, joka on valikon näyttäminen teemassasi.
Seuraavaksi meidän on näytettävä uusi navigointivalikko WordPress-teemassasi. Yleisin paikka, johon navigointivalikot yleensä sijoitetaan, on verkkosivuston otsikko-osio heti sivuston otsikon tai logon jälkeen.
Voit kuitenkin lisätä navigointivalikon mihin tahansa haluamaasi paikkaan.
Tämä koodi on lisättävä teemasi mallitiedostoon, jossa haluat näyttää valikon.
<?phpwp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'container_class' => 'custom-menu-class' ) ); ?>
Teemasi sijainti on nimi, jonka valitsimme edellisessä vaiheessa.
Säiliöluokka on CSS-luokka, joka lisätään navigointivalikkoosi. Valikkosi näkyy sivustollasi tavallisena bulleted-luettelona.
Valikoiden muotoiluun voit käyttää CSS-luokkaa .custom_menu_class. Tässä on CSS-esimerkki, joka auttaa sinua pääsemään alkuun:
div.custom-menu-class ul { margin:20px 0px 20px 0px; list-style-type: none; list-style: none; list-style-image: none; text-align:right;}div.custom-menu-class li { padding: 0px 20px 0px 0px; display: inline;} div.custom-menu-class a { color:#FFFFFF;}
Jos haluat oppia lisää navigointivalikon muotoilusta, katso yksityiskohtainen oppaamme WordPressin navigointivalikoiden muotoilusta
Jos olet luomassa mukautettua laskeutumissivun tai etusivun ulkoasua, WordPressin Page Builder -lisäosan käyttäminen helpottaisi koko asiaa huomattavasti.
Suosittelemme Beaver Builderin käyttöä, joka on markkinoiden paras WordPress-sivunrakentaja. Sen avulla voit luoda minkä tahansa tyyppisen sivuasettelun käyttämällä yksinkertaisia vedä ja pudota -työkaluja (koodausta ei tarvita).
Tähän kuuluu myös mukautetun navigointivalikon lisääminen sivuasetteluusi.
Ensin sinun on asennettava ja aktivoitava Beaver Builder -lisäosa. Katso lisätietoja vaiheittaisesta oppaastamme WordPress-lisäosan asentamisesta.
Aktivoinnin jälkeen sinun on luotava uusi sivu tai muokattava olemassa olevaa sivua, johon haluat lisätä navigointivalikon. Napsauta postin muokkausnäkymässä ’Launch Beaver Builder’ -painiketta.
Jos kyseessä on uusi sivu, voit käyttää jotakin Beaver Builderin mukana tulevista valmiista malleista. Voit myös muokata poistuvaa sivua heti.
Seuraavaksi sinun on lisättävä Valikot-moduuli ja vedettävä se sivullesi siihen kohtaan, jossa haluat näyttää valikon.
Tällöin avautuu ponnahdusikkuna Menu-moduulin asetukset. Valitse ensin navigointivalikko, jota haluat käyttää. Voit aina luoda uusia valikoita tai muokata olemassa olevaa valikkoa käymällä Appearance ” Menus -sivulla WordPressin hallinta-alueella.
Voit tarkastella myös muita asetuksia. Beaver Builderin avulla voit valita valikoillesi mukautetut värit, taustan ja muut tyyliominaisuudet.
Kun olet valmis, voit klikata Tallenna-painiketta ja esikatsella valikkoasi.
Mobiiliystävällisten responsiivisten valikoiden luominen WordPressissä
Mobiililaitteiden käytön lisääntyessä voit halutessasi tehdä valikoistasi mobiiliystävällisiä lisäämällä jonkin monista suosituista efekteistä.
Voit lisätä mobiilivalikoihin slide-out-efektin (yllä), dropdown-efektin ja jopa toggle-efektin.
Meillä on yksityiskohtainen vaiheittainen opas siitä, miten teet mobiilikäyttöön soveltuvia responsiivisia WordPress-valikoita.
Navigaatiovalikot ovat tehokas web-suunnittelun työkalu. Niiden avulla voit ohjata käyttäjät verkkosivustosi tärkeimpiin osioihin.
WordPressin avulla voit tehdä paljon muutakin kuin vain näyttää linkkejä valikossasi. Kokeile näitä hyödyllisiä opetusohjelmia laajentaaksesi navigointivalikoiden toiminnallisuutta WordPress-sivustollasi.
- How to add image icons with navigation menus in WordPress
- How to add conditional logic to menus in WordPress
- How to add menu descriptions in your WordPress theme
- How to add a fullscreen responsive menu in WordPress
- How to add a mega menu to your WordPress site
Tässä kaikki, toivomme, että tämä lopullinen opas auttoi sinua oppimaan, miten lisätä navigointivalikko WordPressissä. Saatat myös haluta nähdä listamme 25 hyödyllisimmästä WordPress-widgetistä ja listamme pakollisista WordPress-lisäosista.
Jos pidit tästä artikkelista, tilaa YouTube-kanavamme WordPress-video-oppaita varten. Löydät meidät myös Twitteristä ja Facebookista.