Hur man skapar en mobilförberedd responsiv WordPress-meny

Vill du skapa en responsiv WordPress-meny för mobila enheter? Mobilanvändare har presterat bättre än datoranvändare på många webbplatser. Lägg till en anpassningsbar mobilmeny som gör det enkelt för användare att navigera på din webbplats. I den här artikeln kommer vi att visa dig hur du enkelt skapar en mobilanpassad responsiv WordPress-meny.

Detta är en djupgående guide. Vi kommer att visa både plug-in-metoden för nybörjare (ingen kodning) och krypteringsmetoden för våra mer avancerade användare.

I slutet av den här handledningen får du lära dig hur du skapar en glidande popup-meny, en popup-rullgardinsmeny och en växlande popup-meny.

Redo? Låt oss komma igång.

Video handledning

Registrera dig för WPBeginner

Om du inte gillar videon eller behöver fler instruktioner, läs vidare.

Metod 1: Lägg till en responsiv meny i WordPress med hjälp av plugins

Denna metod är enklare och rekommenderas för nybörjare eftersom den inte kräver anpassad kodning.

I den här metoden kommer vi att skapa en hamburgermeny som glider på en mobilskärm.

Det första du bör göra är att installera och aktivera insticksprogrammet Responsive Menu. För mer information, se vår steg-för-steg-guide om hur du installerar ett WordPress-plugin.

Efter aktivering kommer pluginet att lägga till ett nytt menyalternativ märkt “Responsiv meny” till din WordPress admin bar. Om du klickar på den kommer du till insticksprogrammets konfigurationssida.

Du måste först ange skärmens bredd, då kommer plugin-programmet att börja visa en responsiv meny. Standard är 800 px, bör fungera för de flesta webbplatser.

Sedan måste du välja den meny du vill använda för din responsiva meny. Om du inte har skapat en meny kan du skapa en genom att gå till Utseende »Meny. Se vår guide om hur du lägger till navigeringsmenyer i WordPress för detaljerade instruktioner.

Det sista alternativet på skärmen är att tillhandahålla en CSS-klass för din nuvarande meny som inte svarar. Detta gör att plugin-programmet kan dölja sin meny som inte svarar på mindre skärmar.

Glöm inte att klicka “Uppdateringsalternativ” för att spara dina inställningar.

Du kan nu besöka deras webbplats och ändra storlek på din webbläsarskärm för att se den responsiva menyn i aktion.

Den responsiva menypluginen kommer med många andra alternativ som låter dig ändra beteendet och utseendet på dina responsiva menyer. Du kan utforska dessa alternativ på insticksprogrammets konfigurationssida och justera dem efter behov.

metod 2: Lägg till rullgardinsmeny med hjälp av plugin

Ett annat sätt att lägga till en responsiv meny är att lägga till en rullgardinsmeny. Denna metod kräver inga kodningsfärdigheter, så den rekommenderas för nybörjare.

Det första du ska göra är att installera och aktivera insticksprogrammet Responsive Select Menu. För mer information, se vår steg-för-steg-guide om hur du installerar ett WordPress-plugin.

Efter aktivering måste du komma åt Utseende »Responsiv Välj för att konfigurera plugin-inställningar.

Du bör rulla ner till avsnittet “Aktivera temaplats”. Som standard är insticksprogrammet aktiverat på alla temaplatser. Du kan ändra det genom att selektivt aktivera det för specifika temaplatser.

Glöm inte att klicka på knappen Spara alla inställningar för att lagra dina ändringar.

Du kan nu besöka deras webbplats och ändra storlek på webbläsarskärmen för att se den responsiva valmenyn i aktion.

metod 3: Skapa en responsiv mobilvänlig meny med övergångar

En av de mest använda metoderna för att visa menyer på mobilskärmar är att använda övergångar.

Denna metod kräver att du lägger till anpassad kod till dina WordPress-filer. Om du inte har gjort det tidigare, kolla in vår guide om att klistra in webbutdrag i WordPress.

Först måste du öppna en textredigerare som anteckningar och klistra in den här koden.

( 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 måste du spara den här filen som navigation.js på skrivbordet.

Därefter måste du öppna en FTP-klient för att ladda upp den här filen till katalogen /wp-content/themes/your-theme-dir/js/ på din WordPress-webbplats.

Ersätt din temamapp med din nuvarande temas mapp. Om din temamapp inte har en js-mapp måste du skapa den.

Efter att ha laddat JavaScript-filen är nästa steg att se till att din WordPress-webbplats laddar detta JavaScript. Du måste lägga till följande kod till ditt temas .php-fil.

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

Nu måste vi lägga till navigeringsmenyn till vårt WordPress-tema. Vanligtvis läggs navigeringsmenyn till i filen header.php för ett tema.