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 ('
');
});
},
function() {
$('#popout').animate({ left: -250 }, 'slow', function() {
$('#toggle').html(',);
});
}
);
}) (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:
