Wil je een responsive menu maken op je WordPress blog?

Er zijn tegenwoordig meer mobiele gebruikers dan desktop-pc's. Door een responsief mobiel menu toe te voegen, kunnen gebruikers gemakkelijker door uw website navigeren.

In deze zelfstudie laten we u zien hoe u eenvoudig een responsief menu op WordPress maakt.

Maar eerder, als je WordPress nog nooit hebt geïnstalleerd, ontdek je Hoeveel plug-ins moeten worden geïnstalleerd op WordPress. et Hoe te vinden, installeren en activeren van een WordPress theme op uw blog 

Ga dan terug naar waarom we hier zijn.

Hier is het een kwestie van de diepte in door je zowel de methode met een plug-in voor beginners als de coderingsmethode voor gevorderde gebruikers te laten zien.

Eerste methode: maak een mobiel menu met een WordPress-plug-in

Deze methode is eenvoudiger en wordt aanbevolen voor beginners omdat er geen speciale codeervaardigheden zijn vereist.

In deze methode maken we een menu (met een hamburger-pictogram) die op het mobiele scherm schuift.

Het eerste dat u hoeft te doen, is het WordPress Responsive Menu-plug-in . Voor meer informatie bekijk onze handleiding over het installeren van een WordPress-plug-in .

Na het activeren van de plug-in, voegt de plug-in een nieuw item toe aan het menu, getiteld " Responsive Menu ". Als u erop klikt, gaat u naar de instellingenpagina van de WordPress Plugin.

U moet eerst de grootte invoeren waaruit het mobiele menu moet verschijnen. De standaardwaarde is 800px, wat voor de meeste websites zou moeten werken.

Daarna moet je het menu selecteren dat je op mobiel wilt gebruiken.

Met de laatste optie op het scherm kunt u een CSS-klasse voor uw menu opgeven. Hierdoor kan de plug-in uw niet-reagerende menu op kleine schermen verbergen.

Vergeet niet te klikken op « Opties bijwerken Om uw instellingen op te slaan.

We raden u ook aan onze te ontdekken 10 WordPress-plug-ins om menu's op uw blog te maken

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

De plug-in « Responsive Menu »Biedt vele andere opties waarmee u het gedrag en het uiterlijk van uw responsieve menu kunt aanpassen. U kunt deze opties verkennen op de instellingenpagina van de plug-in en deze indien nodig aanpassen.

2-methode: handmatig een mobiel menu toevoegen

Een van de meest gebruikte methoden om een ​​menu op mobiele schermen weer te geven, is het gebruik van hefboomwerking.

Voor deze methode moet u aangepaste code toevoegen aan uw WordPress-bestanden.

In een van onze eerdere tutorials laten we u dat zien hoe u een WordPress-plug-in maakt.

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

(function () {nav var = document.getElementById ('site-navigation'), knop, menu; if (! nav) {return;} button = nav.getElementsByTagName ('button') [0]; menu = nav. getElementsByTagName ('ul') [0]; if (! button) {return;} // Hide button als menu ontbreekt of leeg if (! menu ||! menu.childNodes.length) {button.style.display = 'geen'; terug;} 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 ',' ');} anders {button.className + =' toggled-on '; menu.className + =' toggled-on ';}};}) (jQuery);

Nu moet u dit bestand opslaan met de naam ' navigation.js Op je bureau.

Vervolgens moet u een FTP-client openen om dit bestand te downloaden naar de locatie "/ wp-content / themes / your-theme / js /" op uw WordPress-website.

Vervang de uitdrukking " your-theme » met de naam van de map van uw WordPress theme huidig. Als uw themamap geen js-map heeft, moet u er een maken.

Na het uploaden van het JavaScript-bestand, is de volgende stap om ervoor te zorgen dat uw WordPress-website de JavaScript-bestanden laadt. U moet de volgende code toevoegen aan de " functions.php »Van uw WordPress theme.

Ontdek iets anders Wat kunt u doen met het bestand function.php?

 wp_enqueue_script ( 'bpc_togglemenu' get_template_directory_uri () /js/navigation.js ', array (' jquery '), 20160909' true.);

Nu moeten we het navigatiemenu toevoegen aan ons WordPress theme. Meestal wordt het navigatiemenu toegevoegd in de “ header.php Van je WordPress-thema.

<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 menulocatie die is gedefinieerd door uw WordPress-thema " primair ". Gebruik anders de locatie die is gedefinieerd door uw WordPress-thema.

De laatste stap is om wat CSS toe te voegen, zodat ons menu de juiste CSS-klassen gebruikt om te schakelen wanneer deze op mobiele apparaten worden bekeken.

/* 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 browserscherm wijzigen om te zien of uw responsieve menu schakelt.

Ontdek ook enkele premium WordPress-plug-ins  

U kunt andere gebruiken WordPress plugins om een ​​moderne uitstraling te geven en de afhandeling van uw blog of website te optimaliseren.

We bieden je hier enkele premium WordPress-plug-ins die je daarbij kunnen helpen.

1. UberMenu

UberMenu is een WordPress Plugin toegewijd aan het creëren van een zeer aanpasbaar, responsief en voor de gebruiker toegankelijk megamenu. Het is functioneel na installatie, zonder dat er een specifieke configuratie nodig is.

Het is een gebruiksvriendelijke plug-in, maar krachtig genoeg om zeer aanpasbare en creatieve megamenu-indelingen te maken.

Zie ook onze 9 WordPress-plug-ins om prijsgrids op een blog te maken

U vindt er onder meer: ​​3 menusjablonen, volledig responsieve lay-out, compatibiliteit met mobiele apparaten (iPhone, iPad, Android), aanraakondersteuning, enz ...

Downloaden | demonstratie | web hosting

2. LMM

Liquida Mega Menu, ook wel LMM genoemd, is een WordPress Plugin ontworpen voor gebruikers en ontwikkelaars. Het heeft een eenvoudige en intuïtieve interface, geïntegreerd in het WP-dashboard, waarmee u een onbeperkt aantal megamenu's kunt maken en aanpassen, zonder enige programmeerkennis.

Het wordt geleverd met tientallen functies, zowel voor gewone als gevorderde gebruikers. Als functionaliteiten biedt het onder meer: ​​automatische en handmatige integratie, ondersteuning voor multisite, het verzorgen van kinderthema's, volledig aanpasbare stijl voor menu's, aanpasbare menulocaties, plakkerig menu, enz ...

Downloaden | demonstratie | web hosting

3. 8Graad Vliegmenu

8Degree Fly Menu is een premium WordPress-plug-in waarmee u een canvasmenu aan uw website kunt toevoegen om het een look te geven die uw informatie benadrukt en gemakkelijk maakt. Het gebruikt de standaard WordPress-menufunctie om zijn menu's te maken.

U kunt extra elementen toevoegen aan de standaardmenu-items, zoals pictogrammen, menuslogans, een kop met pseudogroepering en een lange beschrijving.

Om ook te lezen: 10 WordPress-plug-ins om zijbalken en plakkerige headers te optimaliseren

Het komt ook met een WYSIWYG-editor om u te helpen uw lange beschrijving op een gebruiksvriendelijke manier te begrijpen.Met deze editor kunt u ook shortcodes gebruiken.

Downloaden | demonstratie | web hosting

Andere aanbevolen bronnen

We nodigen u ook uit om de onderstaande bronnen te raadplegen om verder te gaan in de greep en controle van uw website en blog.

• Hoe om beelden te hernoemen op een WordPress blog
• Hoe maak je een drijvend menu op WordPress
• 8 WordPress-plug-ins om een ​​megamenu op uw blog te maken
• Enkele tips voor het maken van moderne menu's voor je blog
• 6 WordPress plug-ins om categorieën en subcategorieën op uw blog te beheren

Conclusie

Alstublieft ! Dat was het voor deze tutorial, ik hoop dat je hiermee een menu voor mobiele gebruikers kunt maken. voel je vrij om deel de tip met je vrienden op je sociale netwerken.

U kunt echter ook onze ressources, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie.

Maar vertel ons in de tussentijd over uw commentaires en suggesties in de speciale sectie.

...