Slik legger du til en lysbildesmeny i WordPress-temaer

Nylig spurte en av brukerne oss hvordan de kan erstatte deres navigasjonsmeny med en jQuery lysbildemeny? Skjermmenyen kan brukes til å forbedre brukeropplevelsen på mobilnettstedene sterkt. I denne artikkelen vil vi vise deg hvordan du legger til en lysbildespanemeny i WordPress-temaer.

Merk: Dette er en mellomveiledning og krever tilstrekkelig HTML og CSS kunnskap.

Bytte standardmeny med en skjermpanelmeny i WordPress

Målet her er å vise en lysbilde meny til brukere på mindre skjermer mens du holder temaets standardmeny, slik at brukerne på bærbare datamaskiner og stasjonære datamaskiner kan se hele menyen. Før vi kommer i gang, er det viktig å vite at det er mange forskjellige WordPress-temaer, og du må håndtere litt CSS senere.

Det første du må gjøre er å åpne et vanlig tekstredigeringsprogram på datamaskinen, som Notisblokk, og opprett en ny fil. Kopier og lim inn denne koden:

 (funksjon ($) $ ('# toggle'). bytt (funksjon () $ ('# popout'). animate (left: 0, 'slow' ) HTML (''); ); , funksjon () $ ('# popout'). animate (left: -250, 'slow', funksjon () $ ('# bytte'). html'); ); ); ) (JQuery); 

Erstatte example.com med ditt eget domenenavn, og også erstatte your-tema med din aktuelle temakatalog. Lagre denne filen som slidepanel.js på skrivebordet. Denne koden bruker jQuery til å bytte til en lysbildemeny. Det animerer også bytteeffekten.

Åpne en FTP-klient som Filezilla og koble til nettstedet ditt. Deretter går du til temakatalogen din, og hvis den har en js-mappe, åpner du den. Hvis temakatalogen din ikke har en js-mappe, må du opprette en og laste opp slidepanel.js-filen til js-mappen.

Det neste trinnet er å designe eller finne et menyikon. Mest brukte menyikon er den med tre linjer. Du kan opprette en som bruker Photoshop eller finne en av de mange eksisterende bildene fra google. For denne opplæringen bruker vi et 27x23px menyikon. Når du har opprettet eller funnet menyikonet ditt, endre navn til menyen.png og last det opp til bildemappen i temakatalogen din.

Det neste trinnet er å enqueue javascript-fil for lysbildepanel i WordPress. I utgangspunktet bare kopier og lim inn denne koden i temaet ditt functions.php fil.

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

Nå som alt er satt opp, må du endre temaets standardmeny. Vanligvis viser de fleste temaer navigasjonsmenyer i temaet header.php fil. Åpen header.php fil og finn linjen som ligner denne:

  'primær', 'menu_class' => 'nav-meny')); ?> 

Målet her er å pakke temaets navigasjonsmeny med HTML-koden for å vise lysbildemenyen på mindre skjermer. Vi skal pakke den inn i a og . Som dette:

    'primær', 'menu_class' => 'nav-meny')); ?>  

Erstatt example.com med ditt eget domenenavn og ditt tema med temakatalogen din. Lagre endringene dine.

Det siste trinnet er å bruke CSS til å skjule menyikonet for brukere med større skjermer og vise det til brukere med mindre skjermer. Vi må også justere posisjonen til menyikonet og utseendet på lysbildet. Kopier og lim inn dette CSS til temaets stilark.

 @media skjerm og (min bredde: 769px) #toggle display: none;  @ media skjerm og (maksimal bredde: 768px) #popout posisjon: fast; høyde: 100%; bredde: 250px; bakgrunn: rgb (25, 25, 25); bakgrunn: rgba (25, 25, 25, .9); farge: hvit; topp: 0px; igjen: -250px; flow: auto;  #toggle float: right; posisjon: fast; topp: 60px; høyre: 45px; bredde: 28px; høyde: 24px;  .nav-meny li grensebunn: 1px solid #eee; padding: 20 piksler; bredde: 100%;  .nav-meny li: svever bakgrunn: #CCC;  .nav-menyen li a color: #FFF; text-decoration: none; bredde: 100%;  

Husk at temaets navigasjonsmeny kan bruke forskjellige CSS-klasser, og de kan være i konflikt med denne CSS-stilen. Du kan imidlertid feilsøke disse problemene ved hjelp av verktøyet Chrome Inspector for å finne ut hvilke css-klasser som er motstridende i stilarket. Spill rundt med CSS for å matche din stil og dine behov.

Vi håper denne opplæringen hjalp deg med å legge til en lysbildespanemeny i WordPress ved hjelp av jQuery. For tilbakemelding og spørsmål, vennligst legg igjen en kommentar under og ikke glem å følge oss på Google+