Numerolla mobiili-Internetin käyttäjät ohittavat pöytätietokoneiden käyttäjät, ei ole yllätys, että verkkosivustojen suunnittelijat tekevät kaikkensa huolehtiakseen niistä. Verkkosivuston mobiiliversiosta tai jopa verkkosivuston muuntamisesta mobiilisovellukseksi on tullut normi. Syy siihen on yksinkertainen: erilaiset kuvasuhteet ja eri resoluutiot vaativat erilaisia näyttötapoja eri ominaisuuksilletai kokonaan erilaisia ominaisuuksia. Tätä kutsutaan responsiiviseksi suunnitteluksi: eri versioita eri näyttökokoille. Ja yksi käsilaitteiden suunnittelijoille ja käyttäjille ongelmia aiheuttavista ominaisuuksista on valikko.
Valikot voivat olla suuria, monimutkaisia ja hankalia mobiilikäyttäjille, joilla on laitteidensa luonteen vuoksi rajoitettu näyttötila. Tästä syystä monet premium-WordPress-teemat on varustettu mobiilivalikoilla. Silti sinulla saattaa olla teema, joka näyttää ja toimii täsmälleen haluamallasi tavalla ja josta tämä vaihtoehto yksinkertaisesti puuttuu. Joten jos haluat piilottaa mobiilivalikkosi tai ehkä korvata sen toisella, autamme sinua tässä. Tästä me puhumme:
Ensimmäinen asia, jonka haluamme näyttää, on, kuinka valikko tai valikon osia piilotetaan mobiililaitteissa CSS:n avulla. Tämä vaatii sinulta hieman koodausta ja myös tarkastustyökalun käyttöä, mutta se ei ole iso juttu kummassakaan tapauksessa.
Piilottaaksesi koko valikon sinun on selvitettävä valikosi tunniste ja CSS-luokka. Se voi vaihdella teemasta toiseen, jolloin tarkastustyökalu on hyödyllinen. Napsauta hiiren kakkospainikkeella mitä tahansa verkkosivustosi kohtaa, jos et ole poistanut hiiren kakkospainikkeen napsautusta käytöstä, ja valitse Tarkastaa avattavasta valikosta. Voit myös painaa F12-painiketta.
Nyt kun olet kytkenyt tarkastustyökalun päälle, voit vierittää alaspäin Elementit -välilehti korostaaksesi elementit päänäkymässä. Löydät valikon helposti verkkosivustosi työpöytäversiosta, mutta sitä ei tarvitse piilottaa. Sen sijaan sinun on muutettava näytön kokoa näyttääksesi kapeamman näkymän vetämällä ikkunan pystyreunaa. Luokka, jonka haluamme piilottaa verkkosivustomme mobiiliversioon, on nimeltään menu-button-container. Huomaa, että sivustollasi luokka voi olla nimetty eri tavalla.
Jotta voit piilottaa tämän valikon version verkkosivuston mobiiliversiosta, sinun on lisättävä verkkosivustollesi CSS. Navigoida johonkin Ulkonäkö / Mukauta WordPress-hallintapaneelista ja valitse Ylimääräinen CSS osio ja mobiili versio verkkosivustosta. Voit vaihtaa verkkosivustosi eri versioiden välillä vasemman alakulman valikosta. Napsauta mobiilikuvaketta muokataksesi verkkosivuston mobiiliversiota.
Koodi, joka sinun on syötettävä Ylimääräinen CSS kenttä on:
.menu-button-container {
display:none;
}
Kun olet tehnyt sen, näet, että valikko on kadonnut esikatseluikkunasta. Tallentaaksesi muutokset sinun on napsautettava Julkaista -painiketta, ja mobiilivalikkosi ei näy verkkosivustosi mobiiliversiossa.
Tietenkin sinun on vaihdettava menu-button-container oman mobiilimenun luokassa.
Mutta entä jos et halua piilottaa koko valikkoa? Vain muutaman elementin piilottaminen tekee siitä lyhyemmän ja helpommin navigoitavan mobiililaitettasi käyttäville vierailijoille.
Jos haluat piilottaa yhden elementin, sinun on jälleen lisättävä valikkoon CSS. Siirry ensin kohteeseen Ulkonäkö/Menut WordPress-hallintapaneelista, napsauta Näytön asetukset oikeassa yläkulmassa ja tarkista CSS-luokat.
Sano nyt, että haluamme piilottaa Tiimi elementti päävalikostamme mobiilikäyttäjille. Napsauttamalla sitä nyt näet, että olet ottanut käyttöön kentän, jonka nimi on CSS-luokat (valinnainen). Täällä voit määrittää luokan valikkoelementille. Annamme luokan piilottaa matkapuhelimeen kohtaan Tiimi elementti ja Tallentaa meidän menu.
Voit nimetä luokkasi haluamallasi tavalla näiden nimeämissääntöjen mukaisesti: luokan on aloitettava kirjaimella (isoilla tai pienillä kirjaimilla) ja nimessä on käytettävä kirjaimia, numeroita, alaviivoja ja yhdysmerkkejä.
Tämä vain merkitsee Tiimi -elementtiä päävalikossamme luokkaan kuuluvana piilottaa matkapuhelimeen. Piilottaaksemme kaikki tämän luokan elementit verkkosivuston mobiiliversiosta, meidän on lisättävä – arvasit sen – koodia verkkosivustollemme. Navigoida johonkin Ulkonäkö / Mukauta WordPress-hallintapaneelista ja valitse Ylimääräinen CSS -osio.
Koodi, joka sinun on lisättävä Ylimääräinen CSS kenttä on tämä:
@media (max-width: 767px){
.hide-on-mobile{
display: none !important;
}
}
Tämä koodi piilottaa kaikki elementit, jotka kuuluvat piilottaa matkapuhelimeen luokkaa, kun sivuston leveys on 767 pikseliä tai vähemmän. Voit tietysti tehdä tämän mille tahansa yksittäiselle valikkoelementille piilottamalla tai näyttäen eri elementtejä eri laitteille.
Kuten hyvin yleistä, jos teema ei toimi täsmälleen haluamallasi tavalla, voit täydentää sitä laajennuksella. Laajennus, jota aiomme käyttää, on WP-mobiilivalikko. Muista kuitenkin, että valittavana on paljon reagoivia valikkolaajennuksia.
Kun olet asentanut ja aktivoinut laajennuksen, sinut ohjataan automaattisesti näyttöön, jossa sinua pyydetään hyväksymään joitain saman kehittäjän lisäsuojausominaisuuksia. Ohitamme ne.
Tämän jälkeen sinut ohjataan laajennuksen määritysnäyttöön. Ensimmäinen osa ylöspäin on Päävaihtoehdot -osio. Siellä sinun on yksinkertaisesti kytkettävä sekä vasen että oikea valikko pois päältä. Vuonna Näkyvyysasetukset alempana sinun on vaihdettava Ota käyttöön vain mobiililaitteissa vaihtaa kohtaan Päällä.
Alempana, vuonna Piilota alkuperäinen teemavalikko -osiossa, sinun on varmistettava, että laajennus on piilottanut kaikki valikon elementit.
Riippuen käyttämästäsi teemasta, saatat joutua käyttämään Etsi elementti etsi, jos jokin valikkoelementeistäsi on nimetty epätavallisesti eikä laajennus tunnista sitä. Tämä voi vaihdella teemasta toiseen, joten emme voi olla tarkempia, mutta useimmat teemat käyttävät tavanomaisia elementtejä.
Kun olet valmis, Tallenna muutoksetja vieraile verkkosivustollasi mobiililaitteella. Näet, että valikko ei tule näkyviin.
Mutta entä jos haluat vain toisen version mobiililaitteiden valikosta? Itse asiassa se on tämän laajennuksen ensisijainen tehtävä. Siinä tapauksessa sinun on luotava valikko verkkosivustosi mobiiliversiolle. Emme mene tässä uuden valikon luomisen yksityiskohtiin. Jos tarvitset apua valikon luomisessa, meillä on täydellinen opetusohjelma valikkojen lisäämisestä WordPressiin. Muista tarkistaa Vasen mobiilivalikko tai Oikea mobiilivalikko kun luot mobiilivalikkoa.
Käytämme kuitenkin tätä tilaa sanoaksemme, että mobiilivalikon tulisi olla mahdollisimman suppea, aina perusasioihin asti. Suosittelemme käyttämään valikon mobiiliversiossa vain perusnavigointivaihtoehtoja. Mobiilikäyttäjäsi käyttävät todennäköisemmin hakupalkkia, jos he etsivät tiettyä sivua.
Kun olet luonut ja tallentanut valikon, siirry kohtaan Mobiilivalikkovaihtoehdot WordPress-hallintapaneelista.
Täällä, Päävaihtoehdot -osiossa, sinun on valittava mobiilivalikko näyttöä varten. Olemme nimenneet omamme Mobiilivalikko, mutta voit nimetä omasi miten haluat. Voit myös ottaa käyttöön vasemman ja oikean valikon. Muista, että sinun on tarkistettava valikon näyttöpaikka valikon luontinäytössä.
Seuraavaksi sinulla on Näkyvyysasetukset -osio. Nämä säätelevät olosuhteita, joissa mobiilivalikko näkyy. Mobiilivalikon näyttäminen edellyttää, että se näkyy mobiililaitteissa.
Seuraavaksi vuonna Piilota alkuperäinen teemavalikko -osiossa voit valita, mitkä valikkoelementit piilotetaan mobiiliversiosta. Tämä on tehokas tapa luoda mobiiliversio valikosta, jos tiedät sen rakenteen. Yleisimmät valikkoelementit tarkistetaan oletusarvoisesti piilotettavaksi.
Alempana on joitain sekalaisia ja edistyneitä vaihtoehtoja, joiden avulla voit mukauttaa matkapuhelimen valikkoa entisestään. Emme mene tässä yksityiskohtiin, koska ne eivät liity mobiilivalikkojen näyttämiseen tai piilottamiseen.
Sinun tulee tehdä Tallenna muutokset kun olet määrittänyt valikon.
Ja mobiilivalikkomme, joka sisältää vain perustiedot, näkyy verkkosivustomme mobiiliversiossa. Alkuperäinen mobiilivalikkosi on piilotettu, ja uusi on sen tilalla.
Tiivistettynä
Kuten olemme osoittaneet, mobiilivalikoiden luominen, näyttäminen ja piilottaminen sekä vaihtoehtoisten valikkoversioiden luominen vie vain vähän työtä, ja olemassa on jopa laajennuksia, jotka voivat tehdä suurimman osan työstä puolestasi. Mitä tahansa verkkosivustoa käytätkin, suuri osa kävijöistäsi käyttää todennäköisesti mobiililaitteita. Vaikka kokonaisen vaihtoehtoisen version luominen verkkosivustostasi voi olla sinulle liian hankalaa, yhden pienen säädön tekeminen ei ole ollenkaan ongelmallista. Ei siis mitään syytä olla selviytymättä.
Tue työtämme ❤️
Jos pidit tästä artikkelista, harkitse tipin antamista, jotta voimme jatkaa laadukkaan sisällön julkaisemista.
