Så här lägger du till en bildspelsmeny i WordPress-teman

Nyligen frågade en av våra användare hur de kan ersätta deras navigeringsmeny med en jQuery bildruta-meny? Bildspelmenyn kan användas för att förbättra användarupplevelsen på mobila webbplatser. I den här artikeln visar vi hur du lägger till en bildruta-meny i WordPress-teman.

Obs! Det här är en handledning på mellannivå och kräver tillräcklig HTML- och CSS-kunskap.

Byta standardmeny med en bildspelsmeny i WordPress

Målet är att visa en bildruta-meny för användare på mindre skärmar samtidigt som vi håller vårt temas standardmeny så att användarna på bärbara datorer och stationära datorer kan se hela menyn. Innan vi börjar, är det viktigt att veta att det finns många olika WordPress-teman, och du kommer att behöva hantera en liten CSS senare.

Det första du behöver göra är att öppna en vanlig textredigerare på din dator, som Anteckningar, och skapa en ny fil. Kopiera och klistra in den här koden:

 (left: 0, "slow", function () $ ('# toggle'). ).html(''); ); , funktion () $ ('# popout'). animera (vänster: -250, 'långsam', funktion () $ ('# växla'). html'); ); ); ) (JQuery); 

Byta ut example.com med ditt eget domännamn, och ersätt också your-tema med din aktuella temakatalog. Spara den här filen som slidepanel.js på skrivbordet. Den här koden använder jQuery för att växla mellan en bildruta-meny. Det animerar också växelverkan.

Öppna en FTP-klient som Filezilla och anslut till din webbplats. Gå sedan till din temakatalog och om den har en js-mapp öppnar du den. Om din temakatalog inte har en js-mapp måste du skapa en och ladda upp slidepanel.js-filen till mappen js.

Nästa steg är att designa eller hitta en menyikon. Den vanligaste menyikonen är den med tre linjer. Du kan skapa en som använder Photoshop eller hitta en av de många befintliga bilderna från google. För denna handledning använder vi en 27x23px menyikon. När du har skapat eller hittat din menyikon, byt namn på den till menyn.png och ladda upp den till bildmappen i din temakatalog.

Nästa steg är att enqueue javascript-filen för bildrutan i WordPress. I princip bara kopiera och klistra in den här koden i ditt tema functions.php fil.

 wp_enqueue_script ('wpb_slidepanel', get_template_directory_uri (). '/js/slidepanel.js', array ('jquery'), '20131010', sant); 

Nu när allt är inställt måste du ändra ditt temas standardmeny. Vanligtvis visar de flesta teman navigationsmenyerna i temat header.php fil. Öppna header.php fil och hitta raden som liknar den här:

  'primary', 'menu_class' => 'nav-meny')); ?> 

Målet är att paketera ditt temas navigationsmeny med HTML-koden för att visa din bildskärmsmeny på mindre skärmar. Vi ska lägga den i en och . Så här:

    'primary', 'menu_class' => 'nav-meny')); ?>  

Ersätt example.com med ditt eget domännamn och ditt tema med din temakatalog. Spara dina ändringar.

Det sista steget är att använda CSS för att dölja menyikonen för användare med större skärmar och visa den för användare med mindre skärmar. Vi måste också justera positionen på menyikonen och utseendet på bildrutan. Kopiera och klistra in den här CSS-filen i ditt temans stilark.

 @media skärm och (min bredd: 769px) #toggle display: none;  @ media skärm och (maxbredd: 768px) #popout position: fixed; höjd: 100%; bredd: 250px; bakgrund: rgb (25, 25, 25); bakgrund: rgba (25, 25, 25, 9); färg vit; topp: 0px; vänster: -250px; overflow: auto;  #toggle float: right; position: fast; topp: 60px; höger: 45px; bredd: 28px; höjd: 24px;  .nav-meny li border-bottom: 1px solid #eee; padding: 20px; bredd: 100%;  .nav-meny li: sväva bakgrund: #CCC;  .nav-meny li a color: #FFF; text-decoration: none; bredd: 100%;  

Kom ihåg att ditt temats navigationsmeny kan använda olika CSS-klasser, och de kan störa i konflikt med denna CSS-stil. Du kan dock felsöka dessa problem genom att använda verktyget Chrome Inspector för att ta reda på vilka css-klasser som är motstridiga i ditt stylesheet. Spela runt med CSS för att matcha din stil och dina behov.

Vi hoppas att den här handledningen hjälpte dig att lägga till en bildspelsmeny i WordPress med jQuery. För feedback och frågor, vänligen lämna en kommentar nedan och glöm inte att följa oss på Google+