Cum să adăugați un meniu panou de diapozitive în temele WordPress

Recent, unul dintre utilizatorii noștri ne-a întrebat cum pot înlocui meniul de navigare cu un meniu al panoului de diapozitive jQuery? Meniul panoului de diapozitive poate fi utilizat pentru a îmbunătăți considerabil experiența utilizatorilor pe site-urile mobile. În acest articol vă vom arăta cum să adăugați un meniu al panoului de diapozitive în teme WordPress.

Notă: Acesta este un tutorial de nivel intermediar și necesită cunoștințe HTML și CSS suficiente.

Înlocuirea meniului implicit cu un meniu al panoului de diapozitive în WordPress

Scopul este să afișați un meniu al panoului de diapozitive utilizatorilor pe ecrane mai mici, menținând meniul implicit al temei, astfel încât utilizatorii de pe laptop-uri și desktop-uri să poată vedea meniul complet. Înainte de a începe, este important să știți că există multe teme WordPress diferite și va trebui să vă ocupați mai târziu de un CSS.

Primul lucru pe care trebuie să-l faceți este să deschideți un editor de text simplu pe computer, cum ar fi Notepad, și să creați un fișier nou. Copiați și inserați acest cod:

 (functie ($) $ ('# toggle') comutare (function () $ ('popout' ) .html (“„); ); , funcția () $ ('# popout'). animat (left: -250„); ); ); ) (JQuery); 

A inlocui example.com cu propriul nume de domeniu, și, de asemenea, înlocuiți dvs. temă cu directorul tematic actual. Salvați acest fișier ca slidepanel.js pe desktop. Acest cod utilizează jQuery pentru a comuta un meniu al panoului de diapozitive. De asemenea, animă efectul de comutare.

Deschideți un client FTP precum Filezilla și conectați-vă la site-ul dvs. Web. Apoi, mergeți la directorul temă și dacă are un dosar js, deschideți-l. Dacă directorul de teme nu are un dosar js, atunci trebuie să creați unul și să încărcați fișierul slidepanel.js în folderul js.

Următorul pas este proiectarea sau găsirea unei pictograme de meniu. Pictograma de meniu cea mai frecvent utilizată este cea cu trei linii. Puteți crea unul utilizând Photoshop sau puteți găsi una dintre numeroasele imagini existente de pe Google. Pentru acest tutorial folosim o pictogramă de meniu de 27x23px. Odată ce ați creat sau găsit pictograma de meniu, redenumiți-o în meniu.png și încărcați-o în directorul de imagini din directorul tematic.

Următorul pas este să enquege fișier javascript pentru panoul de diapozitive în WordPress. Practic, copiați și inserați acest cod în tema proprie functions.php fişier.

 wp_enqueue_script ('wpb_slidepanel', get_template_directory_uri ()) '/js/slidepanel.js', array ('jquery'), '20131010', adevărat); 

Acum că totul este setat, trebuie să modificați meniul implicit al temei. De obicei, majoritatea temelor afișează meniurile de navigare în temă header.php fişier. Deschis header.php fișier și găsiți linia similară cu aceasta:

  'primar', 'menu_class' => 'nav-meniu')); ?> 

Scopul aici este de a încheia meniul de navigare al temei dvs. cu codul HTML pentru a afișa meniul panoului de diapozitive pe ecrane mai mici. O vom împacheta într-un și . Asa:

    'primar', 'menu_class' => 'nav-meniu')); ?>  

Înlocuiți example.com cu propriul nume de domeniu și tema dvs. cu directorul tematic. Salvați modificările.

Ultimul pas este să utilizați CSS pentru a ascunde pictograma de meniu pentru utilizatorii cu ecrane mai mari și pentru a le afișa utilizatorilor cu ecrane mai mici. De asemenea, trebuie să ajustăm poziția pictogramei meniului și aspectul panoului de diapozitive. Copiați și inserați acest CSS în foaia de stil a temei.

 Ecranul @media și (min-width: 769px) #toggle display: none;  ecranul @media și (max-width: 768px) #popout position: fixed; înălțime: 100%; lățime: 250px; fundal: rgb (25, 25, 25); fundal: rgba (25, 25, 25, .9); culoare albă; top: 0px; stânga: -250px; overflow: auto;  #toggle float: right; poziție: fixă; top: 60px; drept: 45px; lățime: 28px; înălțime: 24px;  .nav-meniul li border-bottom: 1px solid #eee; padding: 20px; lățime: 100%;  .nav-meniul li: mutați background: #CCC;  .info-menu li a culoare: #FFF; text-decoration: none; lățime: 100%;  

Rețineți că meniul de navigare al temei dvs. poate utiliza diferite clase CSS și poate intra în conflict cu acest stil CSS. Cu toate acestea, puteți remedia aceste probleme utilizând instrumentul Inspector Chrome pentru a afla ce clase CSS sunt în conflict în foaia dvs. de stil. Redați-vă cu CSS pentru a vă potrivi stilului și nevoilor.

Sperăm că acest tutorial vă va ajuta să adăugați un meniu al panoului de diapozitive în WordPress utilizând jQuery. Pentru feedback și întrebări, lăsați un comentariu mai jos și nu uitați să ne urmați pe Google+