Aangepaste navigatiemenu’s toevoegen in WordPress-thema’s

Wilt u aangepaste navigatiemenu’s toevoegen aan uw WordPress-thema? Navigatiemenu’s zijn de horizontale lijst met links die bovenaan de meeste websites worden weergegeven.


Standaard worden WordPress-thema’s geleverd met vooraf gedefinieerde menulocaties en lay-outs, maar wat als u uw eigen aangepaste navigatiemenu’s wilt toevoegen?

In dit artikel laten we u zien hoe u eenvoudig aangepaste navigatiemenu’s kunt maken en toevoegen in WordPress, zodat u ze overal in uw thema kunt weergeven.

Aangepaste navigatiemenu's toevoegen aan WordPress-thema's

Wanneer heb je deze zelfstudie over het WordPress-navigatiemenu nodig??

De meeste WordPress-thema’s worden geleverd met ten minste één plek waar u de navigatielinks van uw site in een menu kunt weergeven.

U kunt menu-items beheren vanuit een eenvoudig te gebruiken interface in uw WordPress-beheergebied.

Als u alleen navigatiemenu’s op uw website wilt toevoegen, volgt u eenvoudig onze beginnershandleiding over het toevoegen van een navigatiemenu in WordPress.

Het doel van deze tutorial is om doe-het-zelvers / gemiddelde gebruikers te helpen bij het toevoegen van aangepaste navigatiemenu’s in hun WordPress-thema’s.

In dit artikel behandelen we de volgende onderwerpen:

    Dat gezegd hebbende, laten we eens kijken hoe u aangepaste WordPress-navigatiemenu’s aan uw thema kunt toevoegen.

    Aangepaste navigatiemenu’s maken in WordPress-thema’s

    Navigatiemenu’s zijn een functie van WordPress-thema’s. Elk thema kan zijn eigen menulocaties en menuondersteuning definiëren.

    Om een ​​aangepast navigatiemenu toe te voegen, moet u eerst uw nieuwe navigatiemenu registreren door deze code toe te voegen aan het functies.php-bestand van uw thema.

    functie wpb_custom_new_menu () {
    register_nav_menu (‘mijn aangepast menu’, __ (‘Mijn aangepast menu’));
    }
    add_action (‘init’, ‘wpb_custom_new_menu’);

    Je kunt nu naar Uiterlijk »Menu’s pagina in uw WordPress-beheerder en probeer een nieuw menu te maken of te bewerken. U ziet ‘Mijn eigen menu’ als optie voor themalocatie.

    Aangepast navigatiemenu toegevoegd aan het thema

    Als u meer dan één nieuwe navigatiemenulocatie wilt toevoegen, moet u een code als deze gebruiken:

    functie wpb_custom_new_menu () {
    register_nav_menus (
    matrix (
    ‘my-custom-menu’ => __ (‘Mijn eigen menu’),
    ‘extra-menu’ => __ (‘Extra menu’)
    )
    );
    }
    add_action (‘init’, ‘wpb_custom_new_menu’);

    Zodra je de menulocatie hebt toegevoegd, ga je gang en voeg je een aantal menu-items toe in de WordPress-beheerder door onze tutorial te volgen over het toevoegen van navigatiemenu’s voor beginners.

    Hierdoor kunnen we doorgaan naar de volgende stap, namelijk het weergeven van het menu in uw thema.

    Aangepaste navigatiemenu’s weergeven in WordPress-thema’s

    Vervolgens moeten we het nieuwe navigatiemenu weergeven in uw WordPress-thema. De meest gebruikelijke plaats waar navigatiemenu’s meestal worden geplaatst, is in de koptekst van een website net na de sitetitel of het logo.

    U kunt uw navigatiemenu echter overal toevoegen waar u maar wilt.

    U moet deze code toevoegen aan het sjabloonbestand van uw thema waar u uw menu wilt weergeven.

    <?php
    wp_nav_menu (array (
    ‘theme_location’ => ‘mijn-custom-menu’,
    ‘container_class’ => ‘custom-menu-class’));
    ?>

    De themalocatie is de naam die we in de vorige stap hebben gekozen.

    De containerklasse is de CSS-klasse die aan uw navigatiemenu wordt toegevoegd. Uw menu wordt weergegeven als een lijst met opsommingstekens op uw website.

    Aangepast weergegeven als gewone lijst

    U kunt de CSS-klasse .custom_menu_class gebruiken om uw menu’s vorm te geven. Hier is een voorbeeld-CSS om u op weg te helpen:

    div.custom-menu-class ul {
    marge: 20px 0px 20px 0px;
    list-style-type: geen;
    lijststijl: geen;
    list-style-image: geen;
    text-align: right;
    }
    div.custom-menu-class li {
    opvulling: 0px 20px 0px 0px;
    display: inline;
    }
    div.custom-menu-class a {
    kleur: #FFFFFF;
    }

    Aangepast menu gestileerd

    Voor meer informatie over het vormgeven van een navigatiemenu, bekijk onze gedetailleerde tutorial over het vormgeven van WordPress-navigatiemenu’s

    Een aangepast navigatiemenu toevoegen in WordPress met Page Builder

    Als u een aangepaste bestemmingspagina of startpagina-indeling maakt, zou het gebruik van een plug-in voor WordPress-paginabuilder alles een stuk eenvoudiger maken.

    We raden aan om Beaver Builder te gebruiken, de beste WordPress-paginabuilder op de markt. Hiermee kunt u elk type paginalay-out maken met eenvoudige hulpmiddelen voor slepen en neerzetten (geen codering vereist).

    Dit omvat ook het toevoegen van een aangepast navigatiemenu aan uw paginalay-out.

    Eerst moet je de Beaver Builder-plug-in installeren en activeren. Raadpleeg onze stapsgewijze handleiding voor het installeren van een WordPress-plug-in voor meer informatie.

    Na activering moet u een nieuwe pagina maken of een bestaande bewerken waar u het navigatiemenu aan wilt toevoegen. Klik in het scherm van de berichteditor op de knop ‘Beaver Builder starten’.

    Start Beaver Builder

    Als het een nieuwe pagina is, kunt u een van de kant-en-klare sjablonen gebruiken die bij Beaver Builder worden geleverd. Je kunt ook je spannende pagina meteen bewerken.

    Kies een sjabloon

    Vervolgens moet u de module Menu’s toevoegen en deze op uw pagina slepen en neerzetten op de plaats waar u het menu wilt weergeven.

    Menumodule toevoegen aan uw pagina

    Hierdoor worden de instellingen van de menumodule in een pop-up weergegeven. Eerst moet u het navigatiemenu selecteren dat u wilt gebruiken. U kunt altijd nieuwe menu’s maken of een bestaand menu bewerken door naar te gaan Uiterlijk »Menu’s pagina in WordPress admin gebied.

    Menu module instellingen

    U kunt ook andere instellingen bekijken. Met Beaver Builder kunt u aangepaste kleuren, achtergrond en andere stijleigenschappen voor uw menu kiezen.

    Als je klaar bent, kun je op de knop Opslaan klikken en een voorbeeld van je menu bekijken.

    Voorbeeld van een aangepast navigatiemenu toegevoegd met Beaver Builder

    Mobielvriendelijke responsieve menu’s maken in WordPress

    Met het toenemende gebruik van mobiele apparaten, wilt u uw menu’s mogelijk mobielvriendelijk maken door een van de vele populaire effecten toe te voegen.

    Voorbeeld van een responsief menu

    U kunt een uitschuifeffect (hierboven), een dropdown-effect en zelfs een wisseleffect voor mobiele menu’s toevoegen.

    We hebben een gedetailleerde stapsgewijze handleiding voor het maken van responsieve WordPress-menu’s die geschikt zijn voor mobiel gebruik.

    Doe meer met WordPress-navigatiemenu’s

    Navigatiemenu’s zijn een krachtig hulpmiddel voor webdesign. Hiermee kunt u gebruikers naar de belangrijkste secties van uw website verwijzen.

    Met WordPress kun je veel meer doen dan alleen links weergeven in je menu. Probeer deze handige tutorials om de functionaliteit van navigatiemenu’s op uw WordPress-site uit te breiden.

    • Afbeeldingspictogrammen toevoegen met navigatiemenu’s in WordPress
    • Voorwaardelijke logica toevoegen aan menu’s in WordPress
    • Menu-beschrijvingen toevoegen aan uw WordPress-thema
    • Hoe u een responsief menu op volledig scherm kunt toevoegen in WordPress
    • Hoe u een megamenu toevoegt aan uw WordPress-site

    Dat is alles, we hopen dat deze ultieme gids je heeft geholpen om te leren hoe je een navigatiemenu toevoegt in WordPress. Misschien wilt u ook onze lijst met 25 meest bruikbare WordPress-widgets en onze lijst met de WordPress-plug-ins zien.

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