Pri práci na jednom som mal situáciu, keď hlavná horizontála obsahovala asi dve desiatky článkov. Na stránke sa dajú ľahko usporiadať vo forme rozbaľovacích zoznamov, ale v mobilnej verzii sa to všetko nahromadilo v jednom bloku. Takýto prvok pôsobí „neprehľadne“ a zrejme niektorým používateľom bráni v navigácii.
Jedným východiskom zo situácie je vytvorenie alternatívneho mobilného menu vo WordPresse, ktoré by malo zjednodušený vzhľad a obsahovalo by len odkazy na hlavné sekcie. Dá sa to urobiť pomocou niektorých modulov alebo funkcie wp_is_mobile. Zvážte všetky možnosti:
funkcia wp_is_mobile
Tento podmienený operátor skontroluje, či osoba navštívi vašu stránku z mobilného zariadenia, vráti hodnotu True alebo False. Jeho syntax je nasledovná:
if (wp_is_mobile()) ( /* Zobrazia sa informácie pre mobilné zariadenia */ ) else ( /* Inak - bežné informácie o stránke */ )
Funkcia funguje tak, že určí hodnotu reťazca User Agent v prehliadači návštevníka – $_SERVER['HTTP_USER_AGENT'] (napríklad Mobile, Kindle, Android, BlackBerry, Opera Mini atď.). Neprenáša však údaje o veľkosti obrazovky či názve zariadenia – iba True / False.
Vo Wodpress sa wp_is_mobile nepoužíva na výber/nastavenie responzívnych štýlov dizajnu. Definuje len prvky webového projektu, ktoré by sa mali zobrazovať výlučne na mobilných zariadeniach bez ohľadu na veľkosť obrazovky – zodpovedajúce triedy, výrez, skripty na dotykovej obrazovke atď.
Pozor! Funkcia má 2 nuansy:
- Ak sa niekto rozhodne zmeniť hodnotu User Agent, systém ho nebude schopný rozpoznať.
- Keď máte povolené ukladanie do vyrovnávacej pamäte, informácie sa neaktualizujú zakaždým, takže vždy získate rovnaký výsledok a riešenie sa stane zbytočným (možno kvôli tomu budete musieť zakaždým vynulovať vyrovnávaciu pamäť prehliadača, aby ste si mohli pozrieť mobilnú verziu cez nástroje pre vývojárov).
A ak sa prvá situácia vyskytne pomerne zriedka, potom to nefunguje veľmi dobre (na navštívených stránkach sa bez toho nezaobídete).
Algoritmus na vytvorenie alternatívneho mobilného menu
1. Najprv prejdite do sekcie správcu "Vzhľad" - "Menu". Tu potrebujete pre každú z verzií iné, napríklad:
- top-mobile-menu - možnosť pre mobilné zariadenia;
- top-pc-menu - pre stolnú bežnú verziu.
| if ( wp_is_mobile() ) ( wp_nav_menu( pole ( "menu" => "top-mobile-menu" ) ) ; ) else ( wp_nav_menu( pole ( "menu" => "top-pc-menu" ) ) ; ) |
if (wp_is_mobile()) ( wp_nav_menu(array("menu" => "top-mobile-menu")); ) else ( wp_nav_menu(array("menu" => "top-pc-menu")); )
Vo vašom rozložení sa kód môže mierne líšiť v dôsledku ďalších parametrov. Podstatou metódy je zobrazenie možnosti ako mobilného menu WordPress horné mobilné menu, pre bežné - top-pc-menu(v prípade potreby doplňte svoje mená).
Po implementácii skontrolujte fungovanie navigácie na smartfónoch / tabletoch. Ako som uviedol vyššie, funkcia wp_is_mobile presne určuje User Agent, preto je vhodné pristupovať na stránku z telefónu, možnosť s panelom vývojárov Ctrl + Shift + I môže byť chybná.
Ak nie je čas sa zaoberať, vždy sa nájde vhodný modul. Možností je niekoľko, no my sa pozrieme len na tú, ktorá je potrebná pre aktuálnu úlohu – zobrazenie rôznych ponúk WordPress na mobilnej a desktopovej verzii.
Stiahnite si WP Responsive Menu v úložisku odtiaľto alebo . Toto riešenie umožňuje jednoducho vytvoriť jednoduché a plne prispôsobiteľné rozbaľovacie menu pre smartfóny, tablety atď. Takto bude konečný výsledok približne vyzerať (farby sú nastaviteľné, je tu blok vyhľadávania):
WP Responsive Menu je veľmi populárne - 70 000 zobrazení. stiahnutí a 4,5 bodov hodnotenia. Založené na doplnku menu sidr jquery . Napriek tomu, že posledná aktualizácia bola pred rokom, práce na chybách (súdiac podľa štatistík) aktívne prebiehajú.
Hlavné funkcie:
- plne adaptívne riešenie s podporou swipe;
- funguje na všetkých typoch mobilných zariadení;
- jednoduchá integrácia s funkciami menu systému WP;
- nastavenie farebnej palety, ktorá by vyhovovala vašej téme;
- skrytie všetkých nepotrebných prvkov v mobilnej verzii;
- určenie miesta, odkiaľ sa menu objaví;
- výber loga, riadku a textu v ňom zobrazeného;
Po nainštalovaní modulu nájdete všetky nastavenia v časti „Menu WPR“, sú rozdelené na 2 záložky – Všeobecné (hlavné) a Vzhľad (vzhľad).
Najprv teda vyberiete objekt pre a po druhé skryjete všetky nepotrebné prvky (v našom prípade ide o hlavnú navigáciu). V dôsledku toho budete môcť implementovať rôzne ponuky vo Wordpresse pre stolné počítače a smartfóny.
Skontrolujte ostatné možnosti doplnku a začiarknite ich podľa potreby: potiahnutie prstom, priblíženie, vyhľadávacie pole, zobrazenie loga, vzhľad prvku a rozlíšenie obrazovky, pri ktorom sa spúšťa. Aj na karte „Vzhľad ponuky“ potrebujete pozadie a v prípade potreby odstráňte rámy.
Vo všeobecnosti je práca s WP Responsive Menu celkom jednoduchá. Aj keď funkcia wp_is_mobile nespôsobuje nadmernú zložitosť. Testoval som obe možnosti a fungovali dobre. Uvedomte si však, že podmienka wp_is_mobile sa stane zbytočnou, keď je povolené ukladanie do vyrovnávacej pamäte. Vzhľadom na nastavenia doplnku s veľkosťou obrazovky neexistuje žiadna väzba na User Agent, čo znamená, že takéto obmedzenia pre neho nie sú hrozné.
Ak poznáte ďalšie zaujímavé riešenia implementácie mobilného menu pre WordPress, napíšte do komentárov. Pre moduly si myslím, že bude samostatná recenzia.
Jednou z oblastí, ktorá si pri navrhovaní rozhrania pre mobilné zariadenie vyžaduje osobitnú pozornosť, je navigačná ponuka. Ak má stránka veľa sekcií alebo stránok, je potrebná špeciálna zručnosť, aby sa všetky položky zmestili na malé rozlíšenie obrazovky. Navigácia sa veľmi často zmení na množinu riadkov alebo hromadu tlačidiel nahromadených na sebe. V tomto návode sa pozrieme na jeden zo spôsobov, ako vytvoriť navigáciu pomocou jQuery.
Úloha
Snímky obrazovky nižšie zobrazujú situácie so šablónami na obrazovkách mobilných zariadení. Ak má navigácia 3 alebo 4 tlačidlá, tak sa jej rozloženie uloží do jedného riadku. Ale keď menu obsahuje 6 a viac položiek, ukáže sa, že je to škaredá banda.
Riešenie
Jedným z bežných spôsobov je previesť navigáciu na rozbaľovaciu ponuku založenú na prvku select. Toto riešenie má tú nevýhodu, že prvok select nemôže byť štylizovaný pomocou CSS. Doplnky Javascript, ako je Zvolen, vám umožňujú upraviť ponuku alebo sa budete musieť uspokojiť so systémovými štýlmi pre rozbaľovací zoznam. Používateľ môže byť zavádzaný aj vtedy, keď sa širokouhlá verzia štruktúry ponuky na mobilnom zariadení zmení na rozbaľovací zoznam.
2) Blokový výstup
Ďalším populárnym spôsobom je vytvárať položky ponuky ako prvky vertikálneho bloku. Tento prístup však zaberá veľa miesta v nadpise. Ak navigácia obsahuje veľa tlačidiel, používateľ bude musieť listovať dlhým zoznamom, aby sa k informáciám dostal.
3) Ikona ponuky
A posledný spôsob, na ktorý sa v našom návode pozrieme, je použitie ikony ponuky na aktiváciu navigácie. Tento prístup šetrí miesto na stránke (dôležité na mobilnom zariadení) a poskytuje vám plnú kontrolu nad vzhľadom a štýlom pomocou CSS. Ikona menu a samotná navigácia môžu byť prezentované v súlade so všeobecným štýlom stránky.
Mobilná navigácia povolená pomocou jQuery
V tomto návode vám ukážeme, ako vytvoriť navigáciu na malej obrazovke. jQuery sa použije na prípravu ikony ponuky a povolenie navigácie. Na fungovanie navigácie nie sú potrebné žiadne ďalšie značky HTML.
Naše menu bude používať jednoduchú štruktúru:
Menu vyžaduje na fungovanie JavaScript kód. Funkcia pripraví prvok
Súvisiace články
Rozmýšľame, ako obnoviť Skype na prenosnom počítači
Fixies masters plná verzia Fixies hra plná verzia stiahnutá do vášho počítača
Inštalácia alebo aktualizácia, oprava chýb Net framework 3
Virtuálne meny a virtuálne burzy vo svete
Zlaté čísla Ako predať krásne telefónne číslo