Support » Kokeneille käyttäjille » Valikko esille vain tablet-laitteille

  • Ns. pudotusvalikko toimii varsin huonosti tablet-laitteilla. Laitoin rinnalle kännykkätyyppisen valikon viewport-alueelle 800-1280px, jota monet tablet-laitteet käyttävät (joku voi ehdottaa parempaa aluetta).

    Haluaisin tuon vaihtoehdon rajoittaa pelkästään mobiililaitteille ts. että tietokoneissa näkyisi tuolla leveysalueella vain pudotusvalikko.
    Laittaisin mielellään ns. shortcode-koodauksena.

    Mutta millä tavalla voisin omassa shortcodekoodissani viitata päävalikkoon?
    teema twentyfourteen

Esillä 15 vastausta, 1 - 15 (kaikkiaan 19)
  • Rajoitus toteutuisi PHP-koodina:

    $browserInfo=$_SERVER[’HTTP_USER_AGENT’];
    $Firefox=strpos($_SERVER[’HTTP_USER_AGENT’], ’Firefox’);
    //$FlashFox=strpos($_SERVER[’HTTP_USER_AGENT’], ’Firefox’); – ei tarvitse erikseen
    $Android=strpos($_SERVER[’HTTP_USER_AGENT’], ’Android’);
    $Chrome=strpos($_SERVER[’HTTP_USER_AGENT’], ’Chrome’);
    $iPad=”;// mitähän tähän pitäisi laittaa
    function printAltMenu(){
    if((($Chrome || $Firefox) && $Android) || $iPad){

    tähän koodi, joka hakee päävalikon
    …}}

    Ehtoihin tarvitsisi lisätä vielä iOS iPad-laitteille.

    Loppuun

    add_shortcode( ’printAltMenu’, ’printAltMenu’ );

    ja [printAltMenu] sivupalkkiin

    Oli helppo hakea päävalikko. Mutta mistä löydän iPadin tunnistetiedot?

    https://developers.whatismybrowser.com/useragents/explore/operating_platform/ipad/

    Sain siis tuon ratkaistua eikä tietokone enää näytä tuplavalikkoa.
    Kun otin ylävalikon kokonaan pois käytöstä ja yritin luoda päävalikon vain sivupalkkiin,

    function printAltMenu2(){
    $menu= wp_nav_menu(
    array(
    ’theme_location’ => ’primary’,
    ’menu_class’ => ’nav-menu’,
    ’menu_id’ => ’primary-menu’,
    )
    );
    return $menu;}

    Tuo koodi ei tuottanutkaan päävalikkoa, vaikka tällä sain täysin päävalikkoa vastaavan rakenteen id-arvoja myöten:

    function printAltMenu(){
    if((($Chrome || $Firefox) && $Android) || $iPad){
    $menu= wp_nav_menu(
    array(
    ’theme_location’ => ’primary’,
    ’menu_class’ => ’main-menu’,
    ’menu_id’ => ’main-menu’,
    )
    );
    return $menu;}else{return ”;}}

    Jos saisin päävalikon määrittelyn sivupalkkiin, voisin luopua tuplavalikosta Android-tableteille ja iPadeille kokonaan.

    WordPressissä on muuten tuohon mobiiliuden tarkastamiseen oma funktiokin: wp_is_mobile().

    Jos haluaa wp_nav_menu():sta jotain ulos, sille pitää antaa vielä parametrinä 'echo' => false. Jos shortcodena haluat valikon siihen kohtaan missä shortcode ajetaan, älä käytä theme_locationia. Jos taas käytät theme_locationia, voi olla kriittistä, missä vaiheessa shortcode määritellään.

    Tuo mobiilitarkistus koskenee myös kännyköitä. Ei käy siksi, että kännykälle tulisi valikko, jota ei näytetä, koska viewport alaraja on 800px. Pitäisi saada näkymään vain tablet-laitteilla, jotka käyttävät vähintään 800px viewport-arvoa. wp_nav_menu() rinnalla pitäisi saada mobiiliin vielä viewport-ehto, mutta onko sellaista PHP:lla mahdollista koodata?

    Android Firefox täytyy määrittä uusiksi. Sen tunnistuksessa ei ole Android. Muistin, että Linux, mutta ei taida olla sitäkään.
    $Firefox=strpos($_SERVER[’HTTP_USER_AGENT’], ’Firefox’);
    $Android=strpos($_SERVER[’HTTP_USER_AGENT’], ’Android’);
    $Linux=strpos($_SERVER[’HTTP_USER_AGENT’], ’Linux’);
    $Chrome=strpos($_SERVER[’HTTP_USER_AGENT’], ’Chrome’);
    $iPad=strpos($_SERVER[’HTTP_USER_AGENT’], ’iPad’);
    if(($Chrome && $Android) || ($Firefox && $Linux) || $iPad)

    Laitoin theme_location tyhjäksi. Shortcodena toimi ilman tuota ’echo’ => false parametria. Tarpeen varmaan, jos funktion sisällä sen eteen laitetaan HTML-koodia.

    En nyt saanut ehtoja Firefoxin osalta oikeiksi. Näyttää vain huonosti toimivan pudotusvalikon. Linux olisi sitäpaitsi huono määre, sill se koskisi pöytätietokoneita myös. No Chromella tuo määrittely toimii ja iPadilla ainakin Safarilla sen sivun perusteella, minkä löysin.

    Enkä saa nyt edes testattua – Firefox ei päivity.

    Oli vähän yllätys, miten hankalakäyttöisiä pudotusvalikot ovat mobiililaitteissa. Vaatii oikean rytmityksen, että saa halutun sivun ja silti aika usein valinta menee sivulle, joka ei ollut tarkoitus.

    Mitähän iPadin Chrome vaatisi. Käykö sille sama kuin Safarille eli ’iPad’? Tarkoitus olisi saada yleisimmille tablet-selaimille toimiva ehto.

    Toki myös sivukartta on käytettävissä – se on ollut lähinnä tablet-laitteiden käyttäjille, mutta avattava/piilotetava on näppärämpi, kun sen voi avata milloin vain.

    Päävalikon luonti ns. shortcodena ei ole järkevää, sillä olemassa oleva CSS-koodi ei toimi, koska id=”menu-id…” puuttuu (current-item yms. tulee). Tavanomainen mobiilivalikko tuskin myöskään toimisi, sillä menu-toggle ei tulisi automaattisesti ja ei ehkä toimisi halutusti, jos sen määrittelisi olla koodilla. Kun sijainti poikkeaa teemalle suunnitelusta paikasta, asettaminen halutulle paikalle olisi ongelmallista.

    Jostakin syystä rinnakkaissivustolla ihan pakko laittaa ’theme_location’ => ’primary’, että tulee oikea valikko.

    Löysin tarvitsemani Firefoxille. Erään sivun mukaan se näyttää iPad kyseisissä laitteissa.

    Se, ettei tullut tablet-versio heti alkuun ongelmana oli se, että oli laittanut valinnan käyttää työpöytäversiota, jolloin tietenkin puuttui mobiiliversion tunnistetiedot. Tablet-versiona toimi halutusti.

    Safari näyttäisi erottavan iPhone ja iPad:

    Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10

    Mutta sain käsityksen, ettei toimi kaikissa iPadeissa.

    Chromelle erään sivun mukaan on iPhone:
    https://developers.chrome.com/multidevice/user-agent

    Mutta tuo on väärä kohdennus. Jos laittaa iPhone, iPhone generoi aivan turhaan vaihtoehtoisen valikon.

    Tämä on melkein ok:

    $Firefox=strpos($_SERVER[’HTTP_USER_AGENT’], ’Firefox’);
    $Tablet=strpos($_SERVER[’HTTP_USER_AGENT’], ’Tablet’);
    $Android=strpos($_SERVER[’HTTP_USER_AGENT’], ’Android’);
    $Chrome=strpos($_SERVER[’HTTP_USER_AGENT’], ’Chrome’);
    $iPad=strpos($_SERVER[’HTTP_USER_AGENT’], ’iPad’);
    if(($Chrome && $Android) || ($Firefox && $Tablet) || $iPad)

    Tuo ei siis ymmärtääkseni toimi Chome & iPadilla, mutta Safarilla ja Firefoxilla kyllä.

    Mobble-pluginilla saa aika helposti noita tarkempia määrittelyjä. Jos et halua käyttää pluginia, voit katsella miten se tekee noita määrittelyjä. Määrittelyt löytyvät täältä ja kyllähän ne melko monimutkaiset ovat, jotta kaikki eri tapaukset saadaan käsiteltyä.

    Tarkoitukseni ei ole saada käsiteltyä kaikkia tapauksia, kuten toin esille, tarkoitus olisi vain saada tuplavalikko toimimaan myös iPad & Chrome -yhdistelmässä niin, että iPhonen saan rajattua pois. Tiedä sitten kuinka moni iPadin käyttäjä käyttää vain Safaria. Jos eivät juuri käytä Chromea, asiaan ei edes kannata ryhtyä. Olennaisempi on Android-tabletit. Tosin idea kyllä Firefoxin osalta ei tällä hetkellä toimi, jos selaaja käyttää selainta työpöytämoodissa. Ehkä silloinkin jokin keino olisi rajata tuplavalikko vain tablet-laitteelle. Tietokoneelle tuplavalikko on turha ja tabletlaitteella on ikävä toimia lähinnä tietokoneella toimivalla valikolla.

    Mietin tässä yleisellä tasolla asiaa. Koska monessa leiskassa varsin suosittu pudotusvalikko toimii niin huonosti kosketusnäytöllä kuin toimii, mikähän sen tulevaisuus on?

    Oikeastaan puhdas pudotusvalikko pitäisi ottaa pois käytöstä ja luoda tilalle JavaScript-tuettu valikko, jossa valikko pysyy auki niin kauan kuin on tarpeen. Oikeastaan sen parmmin kännykkävalikko kuin tietokoneessa hyvin toimiva pudotusvalikko eivät ole optimiratkaisu. Tablet-laite kaipaisi jonkinlaisen hybridin. Tosin sitä ei viitsisi pelkkien tablet-laitteiden takia oikein tehdä – jos nyt en vain ihan harrastusmielessä kokeile asiaa. Tablet-laite nettiselaimena muodostaa oman haasteensa.

    Minusta onnistuin tuossa kännykkäversiossa. Sivulla ja alhaalla on yhteensä 20 kpl erilaisia toimintoja, jotka ovat käytettävissä ilman etsimisiä. Kerralla niitä on maksimissaan 16 kpl.

    Koska teemaa päivitetään harvoin, voisihan minä editoida head-osan generoivaa php-tiedostoa. Poistaisin tietyillä ehdoilla päävalikon kokonaan. Mutta ehdot täytyy saada sopiviksi.

    Mä olen ainakin luopunut pudotusvalikoista kokonaan juuri tuosta syystä. Mobiiliversiot olivat järjestään aika kamalia.

    Olen siirtynyt yksitasoisiin valikoihin ja kehitellyt sitten muita ratkaisuja niille alasivuille. Esimerkiksi Kirjavinkit.fi:ssä ylävalikko oli ennen pudotusvalikko, mutta nyt vaikkapa ”Kirjallisuuspalkinnot”-kohdasta aukeaa sivu, josta löytyy kaikki ne palkinnot, joista suosituimpiin pääsi aikaisemmin suoraan pudotusvalikosta.

    Että mun puolestani pudotusvalikot joutaisivat useimmissa tapauksissa pois kokonaan.

    Koska pudotusvalikot toimivat hyvin tietokoneella ja sivustoni kävijöistä tietokoneen käyttäjät muodostavat valtaosan, haluan pitää myös pudotusvalikot. Mutta mobiililaitteilla pitää joko olla niiden rinnalla tai korvata jokin toisen tyyppinen valikko. Jos editoin header.php:tä, saan ne periaatteessa pois mobiililaitteista kokonaan. Kokeilin asiaa. Kokonaan poistaminen aiheutti Chromessa CSS-ongelmia, joita en jaksanut ruveta korjaamaan.

    Toinen vaihtoehto on laittaa päävalikko sivupalkkiin ja jättää sijaintikohta tyhjäksi. Se tulee tehdä omalla PHP-koodilla, sillä jos sen laittaa Amr shortcode any widget -lisäosalla, se poistaa id-attribuutit ja luokat, joissa on ”current-item” yms. Sen avaulla ei saa täysin toimivaa päävalikkoa.

    Paljon CSS-työtä.

    Harmittaa hiivatisti, että teemasta – kuten yleensä – puuttuu käyttäjän määrittämä Header-osio. Olisi todella kiva saada lisättyä header#masthead -alueelle widget-alue.
    Teeman koodissa sille ei ole mitään koukkua, joten header.php:tä ainakin pitäisi sorkkia.
    Valikkoon liittyvällä koukulla tarkoitan yksinkertaisimmillaan
    if(function_exists(’createMenu’)) { }else{…}
    Joissakin CMS:ssä koukku määritellään varsin pitkällä viitauksella. Tietenkin teeman luoja ajattelee, että valikkoa ei pidä korvata jollakin omalla vaihtoehdolla. Mutta yleisellä tasolla valikkokoukku toisi joustavuutta.

    Katsoin tablet-listaa tuossa mobile pluginissa

    ’iPad’ => ’iPad|iPad.*Mobile’,

    Jonkun sivuston mukaan Chrome ei tuota anna, joten siitä ei ollut apua.

    MS-tablet-laiteilla ei sivuillani ole vierailtu. Niitä en huomioi.
    Google Analytics kertoo laitteet. iPad on tablet-laitteissa yleisin. Toki ehkä kaikki ovat käyttäneet Safaria.

    Mozilla/5.0 (iPhone; CPU iPhone OS 10_3 like Mac OS X) AppleWebKit/602.1.50 (KHTML, like Gecko) CriOS/56.0.2924.75 Mobile/14E5239e Safari/602.1

    eräällä sivulla – tuossa ei ole kannaltani mitään käyttökelpoista tunnistetietoa. Kaikilla sivuilla, joita katsoin, esitettiin tuon kaltainen.

    Ei tästä tule kyllä millään täysin toimivaa. Kyllähän iPadille saanee vain sille kuuluvan CSS:n:
    Mietin tässä, että jonkinlainen PHP ja JavaScript ”sekametelisoppa” voisi iPad & Chrome toimia.

    1. PHP tunnistaa iPhone
    2. PHP:llä pätkä Js:ää, joka tunnistaa ruutukoon – JavaScript ymmärtääkseni tunnistaa todellisen pikselimäärän, joten laitettava sen mukaan eli ehdoksi, että näytön pikselimäärä on vähintään 2048px
    3. pätkä PHP:tä, joka tuo CSS:n väliin viewport-alueelle 800-1280

    iPhone saisi silti rasitteekseen turhan valikon. Siltä ei tunnu voivan välttyä.

    Sain sittenkin kuvan, että JS hakee viewport-arvon.

    Onkohan tämä lähelläkään oikeata toimivaa koodia – en pysty testaamaan:

    function generateCSS(){
    global $_SERVER;
    $Firefox=strpos($_SERVER[’HTTP_USER_AGENT’], ’Firefox’);
    $Tablet=strpos($_SERVER[’HTTP_USER_AGENT’], ’Tablet’);
    $Android=strpos($_SERVER[’HTTP_USER_AGENT’], ’Android’);
    $Chrome=strpos($_SERVER[’HTTP_USER_AGENT’], ’Chrome’);
    $iPad=strpos($_SERVER[’HTTP_USER_AGENT’], ’iPad’);
    $iPhone=strpos($_SERVER[’HTTP_USER_AGENT’], ’iPhone’);
    $CSS=’@media screen and (min-width:783px) and (max-width:1280px){…}’;
    if(($Chrome && $Android) || ($Firefox &&($Android || $Tablet)) || $iPad){ return ’<style id=”CSS-tablet-laitteille”>’.$CSS.'</style>’;}
    elseif($iPhone){
    return ’<scipt>
    var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    if(w >799 && w < 1281){
    mystyle = document.createElement(”STYLE”);
    mystyle.innerHTML=”’.$CSS.'”;
    }
    </script>’;
    }
    }
    add_action( ’wp_head’, ’generateCSS’);

Esillä 15 vastausta, 1 - 15 (kaikkiaan 19)
  • You must be logged in to reply to this topic.