Hoe maak je een Responsable WordPress-menu dat geschikt is voor mobiele apparaten

7 min


138

Wilt u een voor mobiele apparaten geschikt responsief WordPress-menu maken? Mobiele gebruikers hebben al veel desktop-gebruikers overtroffen voor veel websites. 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 responsive WordPress-menu kunt maken dat geschikt is voor mobiele apparaten.

Creëer een mobiel responsief WordPress-menu

Dit is een diepgaande zelfstudie. We zullen zowel de plugin-methode voor beginners laten zien (geen codering) en de codeermethode voor onze meer geavanceerde gebruikers.

Aan het einde van deze zelfstudie leert u hoe u een in te stellen mobiel menu, een mobiel vervolgkeuzemenu en een mobiel Toggle-menu maakt.

Klaar? Laten we beginnen.

Video-instructies

Abonneer je op WPBeginner

Als je de video niet leuk vindt of meer instructies nodig hebt, ga dan door met lezen.

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

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

In deze methode maken we een hamburgermenu dat op mobiel scherm wordt weergegeven.

Responsieve menu plug-in demo

Het eerste wat u hoeft te doen is de invoegtoepassing voor het 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 hierop 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 begint te tonen. De standaardwaarde is 800 px, wat voor de meeste websites zou moeten werken.

Hierna moet u het menu selecteren dat u wilt gebruiken voor uw responsieve menu. Als je nog geen menu hebt gemaakt, kun je er een maken door de menu- indeling Uiterlijk te bezoeken . Raadpleeg onze handleiding over het toevoegen van een navigatiemenu in WordPress voor gedetailleerde instructies.

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

Vergeet niet op de knop ‘Update-opties’ te klikken om uw instellingen op te slaan.

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

Responsieve menu plug-in demo

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

Methode 2: een vervolgkeuzemenu toevoegen Selecteer 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 wordt deze aanbevolen voor beginners.

Responsive select menu

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

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

Selecteer menu-instellingen

U moet naar beneden scrollen naar het gedeelte ‘Thema-locaties activeren’. Standaard is de plug-in op alle themalocaties geactiveerd. U kunt dit wijzigen door het selectief in te schakelen voor specifieke themalocaties.

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

U kunt nu uw website bezoeken en het formaat van het browservenster aanpassen om het responsieve keuzemenu in actie te zien.

Methode 3: Creëren van mobielvriendelijk responsief menu met Toggle-effect

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
( function() {
    var nav = document.getElementById( 'site-navigation' ), button, menu;
    if ( ! nav ) {
        return;
    }
    button = nav.getElementsByTagName( 'button' )[0];
    menu   = nav.getElementsByTagName( 'ul' )[0];
    if ( ! button ) {
        return;
    }
    // Hide button if menu is missing or empty.
    if ( ! menu || ! menu.childNodes.length ) {
        button.style.display = 'none';
        return;
    }
    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( ' toggled-on', '' );
            menu.className = menu.className.replace( ' toggled-on', '' );
        } else {
            button.className += ' toggled-on';
            menu.className += ' toggled-on';
        }
    };
} )(jQuery);

Nu moet je dit bestand opslaan als navigation.jsop je bureaublad.

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

Vervang uw -themap door de directory 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 deze JavaScript laadt. U moet de volgende code toevoegen aan het functie.php- bestand van uw thema .

1
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. Gewoonlijk wordt het navigatiemenu toegevoegd aan het header.phpbestand van een thema .

1
2
3
4
<nav id="site-navigation" class="main-navigation" role="navigation">
            <button class="menu-toggle">Menu</button>
            <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav>

We gaan ervan uit dat de themapositie die door je thema is gedefinieerd, primair wordt genoemd. Als dat niet het geval is, gebruikt u de themapositie 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 schakelen tussen weergave op mobiele apparaten.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
/* Navigation Menu */
.main-navigation {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    text-align: center;
}
.main-navigation li {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    font-size: 12px;
    font-size: 0.857142857rem;
    line-height: 1.42857143;
}
.main-navigation a {
    color: #5e5e5e;
}
.main-navigation a:hover,
.main-navigation a:focus {
    color: #21759b;
}
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
    display: none;
}
.main-navigation ul.nav-menu.toggled-on,
.menu-toggle {
    display: inline-block;
}
// CSS to use on mobile devices
@media screen and (min-width: 600px) {
.main-navigation ul.nav-menu,
    .main-navigation div.nav-menu > ul {
        border-bottom: 1px solid #ededed;
        border-top: 1px solid #ededed;
        display: inline-block !important;
        text-align: left;
        width: 100%;
    }
    .main-navigation ul {
        margin: 0;
        text-indent: 0;
    }
    .main-navigation li a,
    .main-navigation li {
        display: inline-block;
        text-decoration: none;
    }
    .main-navigation li a {
        border-bottom: 0;
        color: #6a6a6a;
        line-height: 3.692307692;
        text-transform: uppercase;
        white-space: nowrap;
    }
    .main-navigation li a:hover,
    .main-navigation li a:focus {
        color: #000;
    }
    .main-navigation li {
        margin: 0 40px 0 0;
        margin: 0 2.857142857rem 0 0;
        position: relative;
    }
    .main-navigation li ul {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 100%;
        z-index: 1;
        height: 1px;
        width: 1px;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px);
    }
    .main-navigation li ul ul {
        top: 0;
        left: 100%;
    }
    .main-navigation ul li:hover > ul,
    .main-navigation ul li:focus > ul,
    .main-navigation .focus > ul {
        border-left: 0;
        clip: inherit;
        overflow: inherit;
        height: inherit;
        width: inherit;
    }
    .main-navigation li ul li a {
        background: #efefef;
        border-bottom: 1px solid #ededed;
        display: block;
        font-size: 11px;
        font-size: 0.785714286rem;
        line-height: 2.181818182;
        padding: 8px 10px;
        padding: 0.571428571rem 0.714285714rem;
        width: 180px;
        width: 12.85714286rem;
        white-space: normal;
    }
    .main-navigation li ul li a:hover,
    .main-navigation li ul li a:focus {
        background: #e3e3e3;
        color: #444;
    }
    .main-navigation .current-menu-item > a,
    .main-navigation .current-menu-ancestor > a,
    .main-navigation .current_page_item > a,
    .main-navigation .current_page_ancestor > a {
        color: #636363;
        font-weight: bold;
    }
    .menu-toggle {
        display: none;
    }
    
    }

U kunt nu uw website bezoeken en het formaat van uw browservenster aanpassen om uw reactieve schakelknop in actie te zien.

Menu-voorbeeld omschakelen

Problemen oplossen: Afhankelijk van uw WordPress-thema moet u mogelijk de CSS aanpassen. Gebruik de tool voor het inspecteren van elementen om de CSS-conflicten met uw thema te achterhalen.

Methode 4: Voeg een mobiel menu toe in WordPress

Een andere veelgebruikte techniek om een ​​mobiel menu toe te voegen, is via een inwerppaneelmenu (zoals weergegeven in methode 1).

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
(function($) {
$('#toggle').toggle(
    function() {
        $('#popout').animate({ left: 0 }, 'slow', function() {
            $('#toggle').html('<img src="https://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="close" />');
        });
    },
    function() {
        $('#popout').animate({ left: -250 }, 'slow', function() {
            $('#toggle').html('<img src="https://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="close" />');
        });
    }
);
})(jQuery);

Vergeet niet om example.com te vervangen door uw eigen domeinnaam en your-thememet uw eigen themamap. Bewaar dit bestand slidepanel.jsop uw bureaublad.

Nu hebt u een afbeelding nodig die als een menupictogram wordt gebruikt. Een hamburgersymbool wordt het meest gebruikt als menupictogram. Je zult tonnen van dergelijke afbeeldingen van verschillende websites vinden. We gebruiken het menupictogram uit de bibliotheek met Google-materiaalpictogrammen .

Zodra u een afbeelding hebt gevonden die u wilt gebruiken, slaat u deze op als menu.png.

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

Als uw themamap niet over de JS-map beschikt, moet u eerst tit creëren en vervolgens uw bestand uploaden.

Hierna moet u het bestand menu.png uploaden naar de /wp-content/themes/your-theme/images/map.

Nadat 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 wacht te slepen.

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

1
wp_enqueue_script( 'wpb_slidepanel', get_template_directory_uri() . '/js/slidepanel.js', array('jquery'), '20160909', true );

Nu moeten we de eigenlijke code toevoegen aan het header.php-bestand van uw thema om het navigatiemenu weer te geven. Je zou op soortgelijke code moeten letten:

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

U wilt een bestaand navigatiemenu omhullen met de HTML-code om uw dia-paneelmenu op kleinere schermen weer te geven.

1
2
3
4
5
<div id="toggle">
<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="Show" /></div>
<div id="popout">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</div>

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
@media screen and (min-width: 769px) {
#toggle {
display:none;
}
}
@media screen and (max-width: 768px) {
#popout {
position: fixed;
height: 100%;
width: 250px;
background: rgb(25, 25, 25);
background: rgba(25, 25, 25, .9);
color: white;
top: 0px;
left: -250px;
overflow:auto;
}
#toggle {
float: right;
position: fixed;
top: 60px;
right: 45px;
width: 28px;
height: 24px;
}
.nav-menu li {
border-bottom:1px solid #eee;
padding:20px;
width:100%;
}
.nav-menu li:hover {
background:#CCC;
}
.nav-menu li a {
color:#FFF;
text-decoration:none;
width: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:

Responsive slide-in menu in WordPress

We hopen dat dit artikel je heeft geholpen om te leren hoe je een mobiel-geschikt responsief WordPress-menu kunt maken.


Erwin@delaatbusiness.com
Dag, Hulp nodig met internet marketing of websites maken? neem dan contact op

0 Comments

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format