Hur man lägger till Dashboard-meny i WordPress-tema

Nyligen frågade en av våra användare oss hur de kunde ersätta sin navigeringsmeny med en jQuery-konsolmeny. Menyer med skjutbara paneler kan användas för att avsevärt förbättra användarupplevelsen på mobila webbplatser. I den här artikeln kommer vi att visa dig hur du lägger till instrumentpanelmenyer i WordPress-teman.

Obs: Detta är en självstudiekurs på mellannivå och kräver tillräckliga kunskaper om HTML och CSS.

Ersätt standardmeny med glidande tabellmeny i WordPress

Målet här är att visa instrumentpanelsmenyn för användare på mindre skärmar samtidigt som temats standardmeny bibehålls så att användare på portar och stationära datorer kan se hela menyn. Innan du sätter igång är det viktigt att veta att det finns många olika WordPress-teman där ute, och du kommer att behöva ta itu med lite CSS senare.

Det första du bör göra är att öppna en enkel textredigerare på din dator, som Anteckningar, och skapa en ny fil. Kopiera och klistra in denna kod:

(hàm ($) {
$ ('# chuyển đổi'). chuyển đổi (
chức năng () {
$ ('# bật ra'). animate ({trái: 0}, 'chậm', hàm () {
$ ('# chuyển đổi'). html ('');
        });
    }, 
    function() {
        $('#popout').animate({ left: -250 }, 'slow', function() {
            $('#toggle').html('');  });  } );  }) (jQuery);

Byt ut example.com med ditt eget domännamn och ersätt även ditt tema med din faktiska temakatalog. Spara den här filen som slidepanel.js på ditt skrivbord. Den här koden använder jQuery för att växla mellan en skjutbar meny. Den animerar också övergångseffekten.

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

Nästa steg är att designa eller hitta en menyikon. Den vanligaste menyikonen är en ikon med tre rader. Du kan skapa en med Photoshop eller hitta en av de många befintliga Google-bilderna. För denna handledning använder vi en 27x23px menyikon. När du har skapat eller hittat din menyikon, byt namn på den till menu.png och ladda den i mappen bilder i din temamapp.

Nästa steg är att köa javascript-filen för bildpanelen i WordPress. I princip är det bara att kopiera och klistra in den här koden i ditt temas .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 bör du ändra ditt temas standardmeny. I allmänhet visar de flesta teman navigeringsmenyer i temats header.php-fil. Öppna filen header.php och leta efter en rad som liknar denna: