Ako prida┼ą ponuku pos├║vacieho panela v t├ęmach WordPress

Ned├ívno sa jeden z na┼íich pou┼ż├şvate─żov op├Żtal, ako m├┤┼żu nahradi┼ą svoje naviga─Źn├ę menu ponukou pos├║vacieho panela jQuery. Menu posuvn├ęho panela sa d├í pou┼żi┼ą na v├Żrazn├ę zv├Ż┼íenie u┼ż├şvate─żsk├ęho komfortu na mobiln├Żch str├ínkach. V tomto ─Źl├ínku v├ím uk├í┼żeme, ako prida┼ą ponuku panelov├ęho panela v t├ęmach WordPress.

Pozn├ímka: Toto je tutorial na strednej ├║rovni a vy┼żaduje si dostato─Źn├ę znalosti HTML a CSS.

Nahra─Ćte predvolen├║ ponuku ponukou posuvn├ęho panela v programe WordPress

Cie─żom je zobrazi┼ą ponuku posuvn├ęho panela pou┼ż├şvate─żom na men┼í├şch obrazovk├ích a z├írove┼ł zachova┼ą predvolen├ę menu t├ęmy, aby pou┼ż├şvatelia notebookov a stolov├Żch po─Ź├şta─Źov mohli vidie┼ą cel├║ ponuku. Predt├Żm, ako za─Źnete, je d├┤le┼żit├ę vedie┼ą, ┼że existuje ve─ża r├┤znych t├ęm WordPress, a budete sa musie┼ą trochu vysporiada┼ą s CSS nesk├┤r.

Prv├í vec, ktor├║ by ste mali urobi┼ą, je otvorenie oby─Źajn├ęho textov├ęho editora v po─Ź├şta─Źi, napr├şklad programu Pozn├ímkov├Ż blok, a vytvorenie nov├ęho s├║boru. Skop├şrujte a prilepte tento k├│d:

 
 (funkcia ($) {
┬á$ ('# toggle'). prep├şna┼ą (
 function () {
┬á$ ('# popout'). animova┼ą ({v─żavo: 0}, ÔÇ×pomal├íÔÇť, funkcia () {
┬á$ ('# toggle'). html ('bl├şzkosti');
         });
     }, 
     function() {
         $('#popout').animate({ left: -250 }, 'slow', function() {
             $('#toggle').html('Ako prida┼ą ponuku pos├║vacieho panela v t├ęmach WordPress 1,);
 });
 }
 );
 }) (jQuery);
 

Nahra─Ćte example.com svoj├şm vlastn├Żm n├ízvom dom├ęny a tie┼ż nahra─Ćte svoju t├ęmu skuto─Źn├Żm adres├írom t├ęmy. Ulo┼żte tento s├║bor ako slidepanel.js na plochu. Tento k├│d pou┼ż├şva jQuery na prep├şnanie ponuky posuvn├ęho panela. Animuje tie┼ż efekt prep├şnania.

Otvorte FTP klienta ako je Filezilla a pripojte sa k svojim webov├Żm str├ínkam. Potom prejdite do adres├íra t├ęmy a ak m├íte prie─Źinok js, otvorte ho. Ak adres├ír t├ęmy nem├í prie─Źinok js, mus├şte ho vytvori┼ą a na─Ź├şta┼ą s├║bor slidepanel.js do prie─Źinka js.

─Äal┼í├şm krokom je navrhn├║┼ą alebo n├íjs┼ą ikonu ponuky. Naj─Źastej┼íie pou┼ż├şvanou ikonou ponuky je ikona s tromi riadkami. Jeden si m├┤┼żete vytvori┼ą pomocou Photoshopu alebo n├íjs┼ą jeden z mnoh├Żch existuj├║cich obr├ízkov Google. Pre tento tutori├íl pou┼ż├şvame ikonu ponuky 27x23px. Po vytvoren├ş alebo n├íjden├ş ikony ponuky ju premenujte na menu.png a nahrajte ju do prie─Źinka obr├ízkov v adres├íri t├ęm.

─Äal┼í├şm krokom je front do s├║boru javascript pre panel sn├şmok v WordPress. V podstate sta─Ź├ş tento k├│d skop├şrova┼ą a vlo┼żi┼ą do s├║boru function.php v t├ęme.

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

Po nastaven├ş v┼íetk├ęho by ste mali zmeni┼ą predvolen├║ ponuku t├ęmy. V├Ą─Ź┼íina t├ęm zvy─Źajne zobrazuje naviga─Źn├ę ponuky v s├║bore header.php. Otvorte s├║bor header.php a n├íjdite riadok podobn├Ż tomuto: