Ønsker du at tilføje brugerdefinerede navigationsmenuer i dit WordPress-tema? Navigationsmenuer er den horisontale liste af links, der vises øverst på de fleste websteder.

Som standard leveres WordPress-temaer med foruddefinerede menuplaceringer og layouts, men hvad nu hvis du vil tilføje dine egne brugerdefinerede navigationsmenuer?

I denne artikel viser vi dig, hvordan du nemt kan oprette og tilføje brugerdefinerede navigationsmenuer i WordPress, så du kan vise dem hvor som helst på dit tema.

Hvornår har du brug for denne WordPress navigationsmenu-tutorial?

De fleste WordPress-temaer leveres med mindst ét sted, hvor du kan vise dit websteds navigationslinks i en menu.

Du kan administrere menupunkter fra en brugervenlig grænseflade inde i dit WordPress-administrationsområde.

Hvis du blot ønsker at tilføje navigationsmenuer på dit websted, skal du blot følge vores begynderguide om, hvordan du tilføjer en navigationsmenu i WordPress.

Målet med denne vejledning er at hjælpe DIY / mellemliggende brugere med at tilføje brugerdefinerede navigationsmenuer i deres WordPress-temaer.

Vi vil dække følgende emner i denne artikel:

  • Skabelse af en brugerdefineret navigationsmenu i WordPress-temaer
  • Visning af brugerdefineret navigationsmenu i WordPress-temaet
  • Af tilføjelse af en brugerdefineret navigationsmenu i WordPress ved hjælp af page builder
  • Skabelse af mobilvenlige responsive menuer i WordPress
  • Mere ting, du kan gøre med WordPress-navigationsmenuer

Med det sagt: Vi vil i denne artikel gennemgå følgende emner:

  • lad os tage et kig på, hvordan du tilføjer brugerdefinerede WordPress-navigationsmenuer i dit tema.

    Skabelse af brugerdefinerede navigationsmenuer i WordPress-temaer

    Navigationsmenuer er en funktion i WordPress-temaer. Hvert tema kan definere sine egne menuplaceringer og menuunderstøttelse.

    For at tilføje en brugerdefineret navigationsmenu er det første, du skal gøre, at registrere din nye navigationsmenu ved at tilføje denne kode til dit temas functions.php-fil.

    function wpb_custom_new_menu() { register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));}add_action( 'init', 'wpb_custom_new_menu' );

    Du kan nu gå til siden Udseende ” Menuer i din WordPress-administrator og forsøge at oprette eller redigere en ny menu. Du vil se ‘Min brugerdefinerede menu’ som valgmulighed for temaets placering.

    Hvis du vil tilføje mere end én ny navigationsmenuplacering, skal du bruge en kode som denne:

    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' );

    Når du har tilføjet menuplaceringen, skal du gå videre og tilføje nogle menupunkter i WordPress-administrationen ved at følge vores vejledning om, hvordan man tilføjer navigationsmenuer for begyndere.

    Dette vil gøre det muligt for os at gå videre til det næste trin, som er at vise menuen i dit tema.

    Visning af brugerdefinerede navigationsmenuer i WordPress-temaer

    Næste trin er vi nødt til at vise den nye navigationsmenu i dit WordPress-tema. Det mest almindelige sted, hvor navigationsmenuer normalt er placeret, er i header-sektionen på et websted lige efter webstedets titel eller logo.

    Du kan dog tilføje din navigationsmenu hvor som helst, du vil.

    Du skal tilføje denne kode i dit temas skabelonfil, hvor du ønsker at vise din menu.

    <?phpwp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'container_class' => 'custom-menu-class' ) ); ?>

    Temaets placering er det navn, som vi valgte i det foregående trin.

    Beholderklassen er den CSS-klasse, der vil blive tilføjet til din navigationsmenu. Din menu vil blive vist som en almindelig liste med punktopstillinger på dit websted.

    Du kan bruge CSS-klassen .custom_menu_class til at style dine menuer. Her er et eksempel på CSS for at hjælpe dig i gang:

    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;}

    For at lære mere om styling af en navigationsmenu kan du se vores detaljerede vejledning om, hvordan du styler WordPress-navigationsmenuer

    Indførelse af en brugerdefineret navigationsmenu i WordPress ved hjælp af Page Builder

    Hvis du opretter en brugerdefineret landingsside eller hjemmesidelayout, vil det gøre det hele meget nemmere at bruge et WordPress-page builder-plugin.

    Vi anbefaler at bruge Beaver Builder, som er den bedste WordPress-sidebygger på markedet. Det giver dig mulighed for at oprette enhver type sidelayout ved hjælp af enkle træk og slip-værktøjer (ingen kodning påkrævet).

    Det omfatter også tilføjelse af en brugerdefineret navigationsmenu til dit sidelayout.

    Først skal du installere og aktivere Beaver Builder-plugin’et. Du kan få flere oplysninger i vores trinvise vejledning om, hvordan du installerer et WordPress-plugin.

    Når du har aktiveret det, skal du oprette en ny side eller redigere en eksisterende side, hvor du gerne vil tilføje navigationsmenuen. På skærmen med indlægsredigering skal du klikke på knappen ‘Launch Beaver Builder’ (Start Beaver Builder).

    Hvis det er en ny side, kan du bruge en af de færdige skabeloner, der leveres med Beaver Builder. Du kan også redigere din udgående side med det samme.

    Næst skal du tilføje Menus-modulet og trække og slippe det på din side til det sted, hvor du ønsker at vise menuen.

    Dette vil få menu-modulets indstillinger frem i en popup. Først skal du vælge den navigationsmenu, du ønsker at bruge. Du kan altid oprette nye menuer eller redigere en eksisterende menu ved at besøge siden Udseende ” Menuer i WordPress-administrationsområdet.

    Du kan også gennemgå andre indstillinger. Beaver Builder giver dig mulighed for at vælge brugerdefinerede farver, baggrund og andre stilegenskaber for din menu.

    Når du er færdig, kan du klikke på knappen Gem og få vist din menu.

    Skabelse af mobilvenlige responsive menuer i WordPress

    Med den øgede brug af mobile enheder ønsker du måske at gøre dine menuer mobilvenlige ved at tilføje en af de mange populære effekter.

    Du kan tilføje en slide-out-effekt (ovenfor), dropdown-effekt og endda en toggle-effekt til mobilmenuer.

    Vi har en detaljeret trin for trin-guide om, hvordan du laver mobilklare responsive WordPress-menuer.

    Gør mere med WordPress-navigationsmenuer

    Navigationsmenuer er et effektivt webdesignværktøj. De giver dig mulighed for at henvise brugerne til de vigtigste sektioner på dit websted.

    WordPress giver dig mulighed for at gøre meget mere end blot at vise links i din menu. Prøv disse nyttige vejledninger for at udvide funktionaliteten af navigationsmenuerne på dit WordPress-websted.

    • Sådan tilføjer du billedikoner med navigationsmenuer i WordPress
    • Sådan tilføjer du betinget logik til menuer i WordPress
    • Sådan tilføjer du menubeskrivelser i dit WordPress-tema
    • Sådan tilføjer du en responsiv fuldskærmsmenu i WordPress
    • Sådan tilføjer du en megamenu til dit WordPress-websted

    Det var det hele, vi håber, at denne ultimative guide hjalp dig med at lære at lære, hvordan du tilføjer en navigationsmenu i WordPress. Du vil måske også gerne se vores liste over 25 mest nyttige WordPress-widgets og vores liste over de must have WordPress-plugins.

    Hvis du kunne lide denne artikel, så abonnér venligst på vores YouTube-kanal for WordPress-videotutorials. Du kan også finde os på Twitter og Facebook.

Skriv et svar

Din e-mailadresse vil ikke blive publiceret.