Wilt u aangepaste navigatiemenu’s in uw WordPress-thema toevoegen? Navigatiemenu’s zijn de horizontale lijsten met links die boven aan de meeste websites worden weergegeven.
De standaard WordPress-thema’s worden geleverd met voorgedefinieerde 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 in WordPress kunt maken en toevoegen, zodat u ze overal in uw thema kunt weergeven.
- Wanneer hebt u deze handleiding voor WordPress-navigatiemenu’s nodig?
- Aangepaste navigatiemenu’s maken in WordPress-thema’s
- Het weergeven van aangepaste navigatiemenu’s in WordPress thema’s
- Een aangepast navigatiemenu in WordPress toevoegen met behulp van paginabouwer
- Mobielvriendelijke responsieve menu’s maken in WordPress
- Doe meer met WordPress navigatie menu’s
De meeste WordPress-thema’s bevatten 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 admin-gebied.
Als u gewoon op zoek bent om navigatiemenu’s op uw website toe te voegen, volg dan gewoon onze beginnershandleiding over hoe u een navigatiemenu in WordPress toevoegt.
Het doel van deze handleiding is om doe-het-zelvers / gemiddelde gebruikers te helpen bij het toevoegen van aangepaste navigatiemenu’s in hun WordPress-thema’s.
We zullen de volgende onderwerpen in dit artikel behandelen:
- Een aangepast navigatiemenu maken in WordPress thema’s
- Een aangepast navigatiemenu weergeven in WordPress thema
- Een aangepast navigatiemenu toevoegen in WordPress met behulp van page builder
- Mobielvriendelijke responsieve menu’s maken in WordPress
- Meer dingen die je kunt doen met WordPress navigatiemenu’s
Having said that, laten we eens kijken hoe u aangepaste WordPress navigatiemenu’s in uw thema kunt toevoegen.
Navigatiemenu’s zijn een functie van WordPress-thema’s. Elk thema kan zijn eigen menulocaties en menu-ondersteuning definiëren.
Om een aangepast navigatiemenu toe te voegen, is het eerste wat u moet doen het registreren van uw nieuwe navigatiemenu door deze code toe te voegen aan het functions.php bestand van uw thema.
function wpb_custom_new_menu() { register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));}add_action( 'init', 'wpb_custom_new_menu' );
U kunt nu naar de pagina Uiterlijk ” Menu’s in uw WordPress admin gaan en proberen een nieuw menu te maken of te bewerken. U zult ‘Mijn aangepaste menu’ zien als thema locatie optie.
Als u meer dan één nieuwe navigatie menulocatie wilt toevoegen, dan moet u een code als deze gebruiken:
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' );
Als u de menulocatie eenmaal hebt toegevoegd, gaat u verder en voegt u een aantal menu-items toe in de WordPress admin door onze tutorial te volgen over hoe u navigatiemenu’s voor beginners kunt toevoegen.
Dit zal ons toelaten om over te gaan tot de volgende stap die is het weergeven van het menu in uw thema.
Naar aanleiding van deze stap moeten we het nieuwe navigatiemenu in uw WordPress thema weergeven. De meest voorkomende plaats waar navigatie menu’s worden meestal geplaatst is in de header sectie van een website net na de site titel of logo.
Hoewel u uw navigatie menu kunt toevoegen waar u maar wilt.
U moet deze code toevoegen in het template-bestand van uw thema waar u uw menu wilt weergeven.
<?phpwp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'container_class' => 'custom-menu-class' ) ); ?>
De themalocatie is de naam die we in de vorige stap hebben geselecteerd.
De containerklasse is de CSS-klasse die aan uw navigatiemenu zal worden toegevoegd. Uw menu zal verschijnen als een gewone lijst met opsommingstekens op uw website.
U kunt de CSS-klasse .custom_menu_class gebruiken om uw menu’s op te maken. Hier is een voorbeeld van CSS om u op weg te helpen:
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;}
Om meer te weten te komen over het stijlen van een navigatiemenu, raadpleegt u onze gedetailleerde handleiding over het stijlen van WordPress navigatiemenu’s
Als u een aangepaste lay-out voor een landingspagina of startpagina maakt, zou het gebruik van een WordPress paginabouwer plugin de hele zaak een stuk eenvoudiger maken.
Wij raden het gebruik van Beaver Builder aan, dat is de beste WordPress page builder op de markt. Het stelt u in staat om elk type pagina lay-out te maken met behulp van eenvoudige drag and drop tools (geen codering vereist).
Dit omvat ook het toevoegen van een aangepaste navigatie menu aan uw pagina lay-out.
Eerst moet u de Beaver Builder-plugin installeren en activeren. Voor meer details, zie onze stap voor stap handleiding over hoe je een WordPress plugin te installeren.
Na activering, moet u een nieuwe pagina te maken of een bestaande bewerken waar u wilt het navigatiemenu toe te voegen. Op het post editor scherm, klik op de ‘Start Beaver Builder’ knop.
Als het een nieuwe pagina is, kunt u een van de kant-en-klare sjablonen gebruiken die met Beaver Builder worden meegeleverd. U kunt uw bestaande pagina ook meteen bewerken.
Daarna voegt u de module Menu’s toe en sleept u deze op uw pagina naar de plaats waar u het menu wilt weergeven.
De instellingen voor de menumodule worden nu in een pop-upvenster 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 de pagina Uiterlijk ” Menu’s in het WordPress-beheergebied te gaan.
U kunt ook andere instellingen bekijken. Met Beaver Builder kunt u aangepaste kleuren, achtergronden en andere stijleigenschappen voor uw menu kiezen.
Als u klaar bent, kunt u op de knop Opslaan klikken en een voorbeeld van uw menu bekijken.
Met de toename van het gebruik van mobiele apparaten, wilt u uw menu’s wellicht mobielvriendelijk maken door een van de vele populaire effecten toe te voegen.
U kunt een slide-out effect (boven), dropdown effect, en zelfs een toggle effect voor mobiele menu’s toevoegen.
We hebben een gedetailleerde stap voor stap handleiding over hoe u mobiele-ready responsive WordPress menu’s kunt maken.
Navigatie menu’s zijn een krachtig web design tool. Ze stellen u in staat om gebruikers naar de belangrijkste secties van uw website te wijzen.
Met WordPress kunt u veel meer doen dan alleen links in uw menu weergeven. Probeer deze handige tutorials om de functionaliteit van navigatiemenu’s op uw WordPress-site uit te breiden.
- Hoe u afbeeldingspictogrammen toevoegt met navigatiemenu’s in WordPress
- Hoe u voorwaardelijke logica toevoegt aan menu’s in WordPress
- Hoe u menubeschrijvingen toevoegt in uw WordPress-thema
- Hoe u een responsief menu op volledig scherm toevoegt in WordPress
- Hoe u een megamenu toevoegt aan uw WordPress-site
Dat is alles, we hopen dat deze ultieme gids u heeft geholpen om te leren hoe u een navigatiemenu kunt toevoegen in WordPress. Misschien wilt u ook onze lijst van 25 meest nuttige WordPress widgets bekijken, en onze lijst van de must have WordPress plugins.
Als je dit artikel leuk vond, abonneer je dan op ons YouTube-kanaal voor WordPress video tutorials. U kunt ons ook vinden op Twitter en Facebook.