Hur man lÀgger till en bildpanelmeny i WordPress-teman

Hur man lÀgger till en bildpanelmeny i WordPress-teman

Nyligen frÄgade en av vÄra anvÀndare oss hur de kan ersÀtta sin navigeringsmeny med en jQuery-bildpanelmeny? Skjutpanelmenyn kan anvÀndas för att avsevÀrt förbÀttra anvÀndarupplevelsen pÄ mobila webbplatser. I den hÀr artikeln visar vi dig hur du lÀgger till en bildpanelmeny i WordPress-teman.

Obs: Detta Àr en mellannivÄhandledning och krÀver tillrÀcklig HTML- och CSS-kunskap.

ErsÀtta standardmeny med en bildpanelmeny i WordPress

MÄlet hÀr Àr att visa en bildpanelmeny för anvÀndare pÄ mindre skÀrmar och samtidigt behÄlla vÄrt temas standardmeny sÄ att anvÀndare 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 ta itu med lite CSS senare.

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


(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);

ErsÀtt exempel.com med ditt eget domÀnnamn och ersÀtt ocksÄ ditt tema med din faktiska 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 bildpanelmeny. Det animerar ocksÄ vÀxlingseffekten.

Ö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 js-mappen.

NÀsta steg Àr att designa eller hitta en menyikon. Den vanligaste menyikonen Àr den med tre rader. Du kan skapa en med 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 byter du namn pÄ den till menu.png och laddar upp den till bildmappen i din temakatalog.

NÀsta steg Àr att ange javascript-fil för bildpanelen i WordPress. I grund och botten bara kopiera och klistra in den hÀr koden i ditt temas funktioner.php-fil.

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

Nu nĂ€r allt Ă€r instĂ€llt mĂ„ste du Ă€ndra ditt temas standardmeny. Vanligtvis visar de flesta teman navigeringsmenyer i temas header.php-fil. Öppna header.php-filen och hitta raden som liknar den hĂ€r:


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

MÄlet hÀr Àr att slÄ in tematas navigeringsmeny med HTML-koden för att visa din bildpanelmeny pÄ mindre skÀrmar. Vi ska slÄ in den i en

och

. SÄ hÀr:


<div id="toggle"><img src="https://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>

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 för menyikonen och utseendet pÄ bilden. Kopiera och klistra in den hÀr CSS i temat.


@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%;
}
} 

Kom ihÄg att ditt temas navigeringsmeny kan anvÀnda olika CSS-klasser, och de kan komma i konflikt med denna CSS-stil. Du kan dock felsöka dessa problem genom att anvÀnda Chrome Inspector-verktyget för att ta reda pÄ vilka css-klasser som strider mot ditt formatmall. Lek med CSS för att matcha din stil och dina behov.

Vi hoppas att den hÀr guiden hjÀlpte dig att lÀgga till en bildpanelmeny 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+