Slik legger du til tilpassede navigasjonsmenyer i WordPress-temaer

Vil du legge til tilpassede navigasjonsmenyer i WordPress-temaet? Navigasjonsmenyer er den horisontale listen over lenker som vises på toppen av de fleste nettsteder.


Som standard kommer WordPress-temaer med forhåndsdefinerte menyplasseringer og oppsett, men hva om du ville legge til dine egne tilpassede navigasjonsmenyer?

I denne artikkelen viser vi deg hvordan du enkelt kan lage og legge til tilpassede navigasjonsmenyer i WordPress, slik at du kan vise dem hvor som helst på temaet ditt.

Legge til tilpassede navigasjonsmenyer i WordPress-temaer

Når trenger du denne opplæringen for WordPress Navigation Menu?

De fleste WordPress-temaer har minst ett sted der du kan vise nettstedets navigasjonslenker i en meny.

Du kan administrere menyelementer fra et brukervennlig grensesnitt i ditt WordPress admin-område.

Hvis du bare ønsker å legge til navigasjonsmenyer på nettstedet ditt, kan du bare følge vår nybegynnerveiledning for hvordan du legger til en navigasjonsmeny i WordPress.

Målet med denne opplæringen er å hjelpe DIY / mellombrukere å legge til tilpassede navigasjonsmenyer i WordPress-temaene sine.

Vi vil dekke følgende emner i denne artikkelen:

    Når det er sagt, la oss se på hvordan du legger til tilpassede WordPress-navigasjonsmenyer i temaet ditt.

    Opprette tilpassede navigasjonsmenyer i WordPress-temaer

    Navigasjonsmenyer er en funksjon i WordPress-temaer. Hvert tema kan definere sine egne menylokasjoner og menystøtte.

    For å legge til en tilpasset navigasjonsmeny er det første du trenger å gjøre å registrere den nye navigasjonsmenyen ved å legge denne koden til temaets funksjoner.php-fil.

    funksjon wpb_custom_new_menu () {
    register_nav_menu (‘my-custom-menu’, __ (‘My Custom Menu’));
    }
    add_action (‘init’, ‘wpb_custom_new_menu’);

    Du kan nå gå til Utseende »Menyer side i WordPress-administratoren din og prøv å opprette eller redigere en ny meny. Du vil se ‘Min tilpassede meny’ som alternativ for temaplassering.

    Tilpasset navigasjonsmeny lagt til temaet

    Hvis du vil legge til mer enn en ny plassering av navigasjonsmenyen, må du bruke en slik kode:

    funksjon wpb_custom_new_menu () {
    register_nav_menus (
    array (
    ‘my-custom-menu’ => __ (‘Min tilpassede meny’),
    ‘ekstra-meny’ => __ (‘Ekstra meny’)
    )
    );
    }
    add_action (‘init’, ‘wpb_custom_new_menu’);

    Når du har lagt til menyplasseringen, gå videre og legg til noen menyelementer i WordPress-admin ved å følge veiledningen vår om hvordan du legger til navigasjonsmenyer for nybegynnere.

    Dette vil tillate oss å gå videre til neste trinn som viser menyen i temaet ditt.

    Vise tilpassede navigasjonsmenyer i WordPress-temaer

    Deretter må vi vise den nye navigasjonsmenyen i ditt WordPress-tema. Det vanligste stedet der navigasjonsmenyer vanligvis plasseres, er i overskriftsdelen av et nettsted like etter nettstedets tittel eller logo.

    Du kan imidlertid legge til navigasjonsmenyen hvor som helst du ønsker.

    Du må legge til denne koden i templatens malfil der du vil vise menyen.

    <?php
    wp_nav_menu (matrise (
    ‘theme_location’ => ‘Min-custom-menyen’,
    ‘container_class’ => ’tilpasset menyklasse’));
    ?>

    Temaområdet er navnet vi valgte i forrige trinn.

    Containerklassen er CSS-klassen som blir lagt til i navigasjonsmenyen. Menyen din vises som en vanlig punktliste på nettstedet ditt.

    Tilpasset vises som vanlig liste

    Du kan bruke CSS-klassen. Custom_menu_class til å style menyene dine. Her er et eksempel på CSS som hjelper deg i gang:

    div.custom-menyklasse ul {
    margin: 20px 0px 20px 0px;
    listestil-type: ingen;
    listestil: ingen;
    listestil-bilde: ingen;
    tekst-Justering: høyre;
    }
    div.custom-menu-class li {
    polstring: 0px 20px 0px 0px;
    skjerm: inline;
    }
    div.custom-menyklasse a {
    color: #FFFFFF;
    }

    Tilpasset meny stylet

    Hvis du vil lære mer om styling av en navigasjonsmeny, kan du se vår detaljerte veiledning om hvordan du utformer navigasjonsmenyer for WordPress

    Legge til en tilpasset navigasjonsmeny i WordPress ved hjelp av Page Builder

    Hvis du oppretter en tilpasset destinasjonsside eller hjemmesideoppsett, ville det å gjøre en ting enklere å bruke en WordPress-sidebygger-plugin.

    Vi anbefaler å bruke Beaver Builder, som er den beste WordPress-sidebyggeren på markedet. Det lar deg lage alle typer sideoppsett ved å bruke enkle dra- og slippverktøy (ingen koding nødvendig).

    Dette inkluderer også å legge til en tilpasset navigasjonsmeny til sideoppsettet.

    Først må du installere og aktivere Beaver Builder-plugin. For mer informasjon, se vår trinnvise guide for hvordan du installerer en WordPress-plugin.

    Ved aktivering må du opprette en ny side eller redigere en eksisterende der du vil legge til navigasjonsmenyen. Klikk på knappen “Start Beaver Builder” på innleggsredigeringsskjermen.

    Start Beaver Builder

    Hvis det er en ny side, kan du bruke en av de ferdige malene som følger med Beaver Builder. Du kan også redigere den spennende siden din med en gang.

    Velg en mal

    Deretter må du legge til Meny-modulen og dra og slippe den på siden din til stedet der du vil vise menyen.

    Legg til menymodul på siden din

    Dette vil få opp menymodulinnstillingene i en popup. Først må du velge navigasjonsmenyen du vil bruke. Du kan alltid opprette nye menyer eller redigere en eksisterende meny ved å gå til Utseende »Menyer side i WordPress admin-område.

    Innstillinger for menymodulen

    Du kan også se på andre innstillinger. Beaver Builder lar deg velge egendefinerte farger, bakgrunn og andre stilegenskaper for menyen.

    Når du er ferdig, kan du klikke på Lagre-knappen og forhåndsvise menyen.

    Forhåndsvisning av en tilpasset navigasjonsmeny lagt til med Beaver Builder

    Opprette mobilvennlige responsive menyer i WordPress

    Med økningen i bruken av mobile enheter kan det være lurt å gjøre menyene dine mobilvennlige ved å legge til en av de mange populære effektene.

    Responsivt menyeksempel

    Du kan legge til en lysbildeeffekt (over), nedtrekkseffekt og til og med en veksleeffekt for mobile menyer.

    Vi har en detaljert trinnvis veiledning om hvordan du lager mobile-responsive WordPress-menyer.

    Gjør mer med WordPress-navigasjonsmenyer

    Navigasjonsmenyer er et kraftig webdesignverktøy. De lar deg peke brukere til de viktigste delene av nettstedet ditt.

    WordPress lar deg gjøre mye mer enn bare å vise lenker i menyen. Prøv disse nyttige opplæringsprogrammene for å utvide funksjonaliteten til navigasjonsmenyer på WordPress-nettstedet ditt.

    • Hvordan legge til bildeikoner med navigasjonsmenyer i WordPress
    • Hvordan legge til betinget logikk til menyer i WordPress
    • Slik legger du til menybeskrivelser i WordPress-temaet
    • Slik legger du til en responsiv meny i fullskjerm i WordPress
    • Slik legger du til en mega-meny til WordPress-nettstedet ditt

    Det er alt, vi håper denne ultimate guiden hjalp deg med å lære hvordan du legger til en navigasjonsmeny i WordPress. Det kan også være lurt å se listen over 25 mest nyttige WordPress-widgeter, og listen vår med WordPress-plugins.

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
      Like this post? Please share to your friends:
      Adblock
      detector
      map