Hoe u een mobiel-klaar responsief WordPress-menu maakt

Wil je een mobiel-ready responsive WordPress-menu maken? Mobiele gebruikers hebben desktop-gebruikers al voor veel websites overtroffen. Door een mobiel responsief menu toe te voegen, kunnen gebruikers gemakkelijker door uw website navigeren. In dit artikel laten we u zien hoe u eenvoudig een mobiel-klaar responsief WordPress-menu kunt maken.


Maak een mobiel responsief WordPress-menu

Dit is een uitgebreide tutorial. We zullen zowel de plug-inmethode voor beginners (geen codering) als de coderingsmethode voor onze meer gevorderde gebruikers tonen.

Aan het einde van deze zelfstudie leert u hoe u een mobiel schuifmenu, een dropdown mobiel menu en een mobiel wisselmenu kunt maken.

Klaar? Laten we beginnen.

Video-instructies

Abonneer u op WPBeginner

Als je de video niet leuk vindt of meer instructies nodig hebt, lees dan verder.

Methode 1: Voeg een responsief menu toe in WordPress met behulp van een plug-in

Deze methode is eenvoudiger en wordt aanbevolen voor beginners omdat er geen aangepaste codering vereist is.

In deze methode zullen we een hamburgermenu maken dat uitschuift op een mobiel scherm.

Responsieve demo van menu-plug-in

Het eerste dat u hoeft te doen is de plug-in Responsive Menu installeren en activeren. Raadpleeg onze stapsgewijze handleiding voor het installeren van een WordPress-plug-in voor meer informatie.

Na activering voegt de plug-in een nieuw menu-item met het label ‘Responsive Menu’ toe aan uw WordPress-beheerbalk. Als u erop klikt, gaat u naar de instellingenpagina van de plug-in.

Responsieve menu-instellingen

Eerst moet je de breedte van het scherm invoeren, waarna de plug-in het responsieve menu zal tonen. De standaardwaarde is 800 px, wat voor de meeste websites zou moeten werken.

Daarna moet u het menu selecteren dat u voor uw responsieve menu wilt gebruiken. Als je nog geen menu hebt gemaakt, kun je er een maken door naar te gaan Uiterlijk »Menu’s. Zie onze gids over het toevoegen van het navigatiemenu in WordPress voor gedetailleerde instructies.

De laatste optie op het scherm is om een ​​CSS-klasse te bieden voor uw huidige niet-reagerende menu. Hierdoor kan de plug-in uw niet-reagerende menu op kleinere schermen verbergen.

Vergeet niet op de knop ‘Opties bijwerken’ te klikken om uw instellingen op te slaan.

U kunt nu uw website bezoeken en het formaat van uw browserscherm wijzigen om het responsieve menu in actie te zien.

Demo voor responsieve menu-plug-in

De responsieve menu-plug-in wordt geleverd met vele andere opties waarmee u het gedrag en de weergave van uw responsieve menu kunt wijzigen. Je kunt deze opties verkennen op de instellingenpagina van de plug-in en ze indien nodig aanpassen.

Methode 2: Voeg een vervolgkeuzemenu toe met behulp van een plug-in

Een andere manier om een ​​responsief menu toe te voegen, is door een vervolgkeuzemenu toe te voegen. Deze methode vereist geen codeervaardigheden, dus het wordt aanbevolen voor beginners.

Responsive select menu

Het eerste dat u hoeft te doen, is de plug-in Responsive Select Menu installeren en activeren. Raadpleeg onze stapsgewijze handleiding voor het installeren van een WordPress-plug-in voor meer informatie.

Na activering moet je bezoeken Uiterlijk »Responsive Select om plugin-instellingen te configureren.

Selecteer menu-instellingen

Je moet naar beneden scrollen naar het gedeelte ‘Themalocaties activeren’. Standaard is de plug-in geactiveerd op alle themalocaties. U kunt dat veranderen door het selectief in te schakelen voor specifieke themalocaties.

Vergeet niet op de knop alle instellingen opslaan te klikken om uw wijzigingen op te slaan.

U kunt nu uw website bezoeken en het formaat van het browserscherm wijzigen om het responsieve selectiemenu in actie te zien.

Methode 3: Mobielvriendelijk responsief menu maken met Toggle-effect

Een van de meest gebruikte methoden om een ​​menu op mobiele schermen weer te geven, is met behulp van het toggle-effect.

Voor deze methode moet u aangepaste code toevoegen aan uw WordPress-bestanden. Als je dit nog niet eerder hebt gedaan, bekijk dan onze gids over het plakken van fragmenten van internet in WordPress.

Eerst moet je een teksteditor zoals Kladblok openen en deze code plakken.

(functie () {
var nav = document.getElementById (‘sitenavigatie’), knop, menu;
if (! nav) {
terugkeren;
}

button = nav.getElementsByTagName (‘button’) [0];
menu = nav.getElementsByTagName (‘ul’) [0];
if (! button) {
terugkeren;
}

// Verberg knop als het menu ontbreekt of leeg is.
if (! menu ||! menu.childNodes.length) {
button.style.display = ‘geen’;
terugkeren;
}

button.onclick = function () {
if (-1 === menu.className.indexOf (‘nav-menu’)) {
menu.className = ‘nav-menu’;
}

if (-1! == button.className.indexOf (‘toggled-on’)) {
button.className = button.className.replace (‘aan / uit’, ”);
menu.className = menu.className.replace (‘aan / uit’, ”);
} anders {
button.className + = ‘aan / uit’;
menu.className + = ‘aan / uit’;
}
};
}) (jQuery);

Nu moet je dit bestand opslaan als navigatie.js op je bureaublad.

Vervolgens moet je een FTP-client openen om dit bestand te uploaden naar / wp-content / themes / your-theme-dir / js / map op je WordPress-site.

Vervang uw-themamap door de map van uw huidige thema. Als uw themamap geen js-map heeft, moet u deze maken.

Na het uploaden van het JavaScript-bestand, is de volgende stap om ervoor te zorgen dat uw WordPress-site dit JavaScript laadt. U moet de volgende code toevoegen aan het functies.php-bestand van uw thema.

wp_enqueue_script (‘wpb_togglemenu’, get_template_directory_uri (). ‘/js/navigation.js’, array (‘jquery’), ‘20160909’, true);

Nu moeten we het navigatiemenu toevoegen aan ons WordPress-thema. Meestal wordt het navigatiemenu toegevoegd aan het header.php-bestand van een thema.

Menu
<?php wp_nav_menu (array (‘theme_location’ => ‘primary’, ‘menu_class’ => ‘nav-menu’)); ?>

We gaan ervan uit dat de themalocatie die door uw thema wordt gedefinieerd primair wordt genoemd. Als dit niet het geval is, gebruik dan de themalocatie die is gedefinieerd door uw WordPress-thema.

De laatste stap is om CSS toe te voegen, zodat ons menu de juiste CSS-klassen gebruikt om te werken wanneer het op mobiele apparaten wordt bekeken.

/* Navigatie menu */
.hoofdnavigatie {
margin-top: 24px;
margin-top: 1.714285714rem;
text-align: center;
}
.hoofdnavigatie li {
margin-top: 24px;
margin-top: 1.714285714rem;
lettergrootte: 12px;
lettergrootte: 0.857142857rem;
lijnhoogte: 1.42857143;
}
.hoofdnavigatie a {
kleur: # 5e5e5e;
}
.hoofdnavigatie a: hover,
.hoofdnavigatie a: focus {
kleur: # 21759b;
}
.hoofdnavigatie ul.nav-menu,
.hoofdnavigatie div.nav-menu > ul {
Geen weergeven;
}

.hoofdnavigatie ul.nav-menu.toggled-on,
.menu-schakelaar {
display: inline-block;
}

// CSS voor gebruik op mobiele apparaten

@media-scherm en (min-width: 600px) {

.hoofdnavigatie ul.nav-menu,
.hoofdnavigatie div.nav-menu > ul {
border-bottom: 1px solid #ededed;
border-top: 1px solid #ededed;
display: inline-block! belangrijk;
text-align: left;
breedte: 100%;
}
.hoofdnavigatie ul {
marge: 0;
text-indent: 0;
}
.hoofdnavigatie li a,
.hoofdnavigatie li {
display: inline-block;
tekstversiering: geen;
}
.hoofdnavigatie li a {
border-bottom: 0;
kleur: # 6a6a6a;
lijnhoogte: 3.692307692;
text-transform: hoofdletters;
witruimte: nowrap;
}
.hoofdnavigatie li a: hover,
.hoofdnavigatie li a: focus {
kleur: # 000;
}
.hoofdnavigatie li {
marge: 0 40px 0 0;
marge: 0 2.857142857rem 0 0;
positie: relatief;
}
.hoofdnavigatie li ul {
marge: 0;
opvulling: 0;
positie: absoluut;
top 100%;
z-index: 1;
hoogte: 1px;
breedte: 1px;
overloop verborgen;
clip: rect (1px, 1px, 1px, 1px);
}
.hoofdnavigatie li ul ul {
top: 0;
links: 100%;
}
.hoofdnavigatie ul li: hover > ul,
.hoofdnavigatie ul li: focus > ul,
.hoofdnavigatie .focus > ul {
border-left: 0;
clip: erven;
overflow: erven;
hoogte: erven;
breedte: erven;
}
.hoofdnavigatie li ul li a {
achtergrond: #efefef;
border-bottom: 1px solid #ededed;
display: blok;
lettergrootte: 11px;
lettergrootte: 0.785714286rem;
lijnhoogte: 2.181818182;
opvulling: 8px 10px;
opvulling: 0.571428571rem 0.714285714rem;
breedte: 180px;
breedte: 12.85714286rem;
witruimte: normaal;
}
.main-navigation li ul li a: hover,
.main-navigation li ul li a: focus {
achtergrond: # e3e3e3;
kleur: # 444;
}
.hoofdnavigatie .stroom-menu-item > een,
.hoofdnavigatie .stroom-menu-voorouder > een,
.hoofdnavigatie .current_page_item > een,
.hoofdnavigatie .current_page_ancestor > een {
kleur: # 636363;
font-weight: bold;
}
.menu-schakelaar {
Geen weergeven;
}

}

U kunt nu uw website bezoeken en het formaat van uw browserscherm wijzigen om uw responsieve wisselmenu in actie te zien.

Menu-voorbeeld wisselen

Probleemoplossen: Afhankelijk van uw WordPress-thema moet u mogelijk de CSS aanpassen. Gebruik de inspect-elementtool om de CSS-conflicten met uw thema te achterhalen.

Methode 4: Voeg een Slide-In mobiel menu toe in WordPress

Een andere veelgebruikte techniek om een ​​mobiel menu toe te voegen, is door gebruik te maken van een schuifpaneelmenu (zoals weergegeven in methode 1).

Methode 4 vereist dat u code toevoegt aan uw WordPress-themabestanden en het is gewoon een andere manier om dezelfde resultaten te bereiken als methode 1.

Eerst moet je een platte-teksteditor zoals Kladblok openen en de volgende code aan een leeg tekstbestand toevoegen.

(functie ($) {
$ (‘# toggle’). toggle (
functie () {
$ (‘# popout’). animeren ({left: 0}, ‘slow’, function () {
$ (‘# toggle’). html (‘dichtbij‘);
});
},
functie () {
$ (‘# popout’). animeren ({left: -250}, ‘slow’, function () {
$ (‘# toggle’). html (‘dichtbij‘);
});
}
);
}) (jQuery);

Vergeet niet voorbeeld.com te vervangen door uw eigen domeinnaam en uw thema door uw eigen themamap. Sla dit bestand op als slidepanel.js op uw bureaublad.

Nu heb je een afbeelding nodig die als menupictogram zal worden gebruikt. Een hamburgerpictogram wordt meestal gebruikt als menupictogram. Je zult tonnen van dergelijke afbeeldingen vinden van verschillende websites. We gebruiken het menupictogram uit de Google Material Icons-bibliotheek.

Zodra je een afbeelding hebt gevonden die je wilt gebruiken, sla je deze op als menu.png.

Vervolgens moet u een FTP-clientclient openen en het slidepanel.js-bestand uploaden naar / wp-content / your-theme / js / folder.

Als uw themamap niet de JS-map heeft, moet u een tit maken en vervolgens uw bestand uploaden.

Daarna moet u het menu.png-bestand uploaden naar / wp-content / themes / uw-thema / afbeeldingen / map.

Zodra de bestanden zijn geüpload, moeten we ervoor zorgen dat uw thema het JavaScript-bestand laadt dat u zojuist hebt toegevoegd. We zullen dit bereiken door het JavaScript-bestand in de wachtrij te plaatsen.

Voeg deze code toe aan het functies.php-bestand van uw thema.

wp_enqueue_script (‘wpb_slidepanel’, get_template_directory_uri (). ‘/js/slidepanel.js’, array (‘jquery’), ‘20160909’, true);

Nu moeten we de daadwerkelijke code toevoegen aan het header.php-bestand van uw thema om het navigatiemenu weer te geven. Je zou moeten zoeken naar code die er ongeveer zo uitziet:

<?php wp_nav_menu (array (‘theme_location’ => ‘primary’, ‘menu_class’ => ‘nav-menu’)); ?>

U wilt het bestaande navigatiemenu omhullen met de HTML-code om uw schuifpaneelmenu op kleinere schermen weer te geven.

Laten zien

<?php wp_nav_menu (array (‘theme_location’ => ‘primary’, ‘menu_class’ => ‘nav-menu’)); ?>

Merk op dat het navigatiemenu van je thema er nog steeds is. We hebben het zojuist in HTML gewikkeld dat we het schuifpaneelmenu moeten activeren.

De laatste stap is om CSS toe te voegen om het pictogram van het menubeeld op grotere schermen te verbergen. U moet ook de positie van het menupictogram aanpassen.

Hier is een voorbeeld-CSS die u als uitgangspunt kunt gebruiken:

@media-scherm en (min-width: 769px) {
#toggle {
Geen weergeven;
}

}

@media-scherm en (max. breedte: 768px) {
#popout {
positie: vast;
hoogte: 100%;
breedte: 250px;
achtergrond: rgb (25, 25, 25);
achtergrond: rgba (25, 25, 25, .9);
kleur wit;
top: 0px;
links: -250px;
overloop: auto;
}

#toggle {
zweven: rechts;
positie: vast;
bovenkant: 60px;
rechts: 45px;
breedte: 28px;
hoogte: 24px;

}

.nav-menu li {
border-bottom: 1px solid #eee;
opvulling: 20px;
breedte: 100%;
}

.nav-menu li: hover {
achtergrond: #CCC;
}

.nav-menu li a {
kleur: #FFF;
tekstversiering: geen;
breedte: 100%;
}
}

Afhankelijk van uw WordPress-thema, moet u mogelijk de CSS aanpassen om conflicten te voorkomen.

Hier is hoe het eruit zag op onze demo-website:

Responsief inschuifmenu in WordPress

We hopen dat dit artikel u heeft geholpen om te leren hoe u een responsief WordPress-menu voor mobiele apparaten kunt maken. Misschien wilt u ook onze gids bekijken over het toevoegen van een responsief menu op volledig scherm in WordPress

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me