Kuinka piilottaa sivupalkki mobiililaitteille WordPressissä

11. huhtikuuta 2021 812 Näkymät

Jos luet tätä, olet luultavasti tajunnut, että sivupalkin käyttäminen mobiililaitteissa ei ole välttämätöntä. Tämä S-alue opettaa sinulle kuinka piilottaa sivupalkki mobiililaitteille WordPressissä.

Useimmissa WordPress-teemoissa, kun lisäät sivupalkki-widgetejä – jotka on tarkoitettu ensisijaisesti suuremmille näytöille – nämä sivupalkin widgetit näkyvät myös mobiililaitteissa.

Ensinnäkin mobiililaitteessa sivupalkki ei ole enää sivupalkki vaan enemmän alapalkki. Lisäksi mobiililaitteissa sivupalkit näkyvät pääviestin jälkeen, mikä kumoaa niiden tarkoituksen.

Lisäksi tarpeettomat sivupalkit mobiililaitteissa voivat hidastaa latausaikoja näissä laitteissa.

Joissakin WordPress-teemoissa voi olla mahdollisuus mukauttaa sivupalkkeja laitteiden mukaan. Jos teemasi tarjoaa tämän ominaisuuden, käytä sitä.

Jos teemasi ei kuitenkaan tarjoa tätä vaihtoehtoa, käytä tämän oppaan ohjeita piilottaaksesi sivupalkin mobiililaitteissa.

Jotkin tämän oppaan vaiheet edellyttävät CSS:n perustaitoja. Vaikka et tiedä CSS:stä ja tyylitaulukoista mitään, opastan sinut sen läpi – askel askeleelta.

Tässä on korkean tason vaiheet mobiililaitteiden sivupalkin piilottamiseksi WordPressissä:

Etsi teemasi sivupalkin div-tunnus
Lisää CSS, joka piilottaa sivupalkin mobiililaitteilta
Tyhjennä välimuisti ja testaa

Jos sinulla on kehittäjä- tai esityssivusto, suosittelen, että testaat nämä vaiheet kehittäjäsivustollasi ennen sen julkaisemista.

Selaa viestien aiheita

Etsi teemasi sivupalkin DIV-tunnus
Lisää WordPressiin CSS, joka piilottaa sivupalkin mobiililaitteille
Tyhjennä välimuisti ja testaa

Sivupalkin piilottaminen mobiililaitteille WordPressissä: vaihe 1 - Etsi teemasi sivupalkin DIV-tunnus

Sivupalkin piilottaminen mobiililaitteissa WordPressissä edellyttää lähinnä sivupalkin div:n muokkaamista CSS:llä. Div:n muokkaamiseen CSS:llä tarvitset kuitenkin div-tunnuksen.

Suorita tämä tehtävä PC- tai Mac-tietokoneella tai pöytäkoneella – EI mobiililaitteella.

Seuraa alla olevia ohjeita löytääksesi div-tunnuksen WordPress-verkkosivustossasi käyttämäsi teeman sivupalkin osalta:

Avaa viesti tai sivu Google Chromessa tai uudessa Microsoft Edge -selaimessa.
Napsauta sitten hiiren kakkospainikkeella mitä tahansa sivupalkin kohtaa ja valitse Tarkastaa .

Kuinka piilottaa sivupalkki mobiililaitteille WordPressissä: vaihe 1 - Etsi teemasi sivupalkin DIV-tunnus

Tarkasta-elementti avaa joitain koodeja sivun oikealla puolella. Tässä on yläosa (merkitty numerolla 1 alla olevassa kuvakaappauksessa). Siinä on myös alaosa (merkitty kuvakaappauksessa numerolla 2).

Alaosassa, Tyylit -välilehti valitaan oletusarvoisesti. Etsi sivupalkin div-tunnuksesi etsimällä elementtiä, jossa on sana sivupalkki. Jotkut teemat voivat käyttää vain sivupalkkia. Toiset voivat käyttää sivupalkkia tai pääsivupalkkia.

Huomaa tämä, koska se on teemasi sivupalkin div ID. Omani on sivupalkki. Kopioi tämä, koska tarvitset sitä seuraavassa vaiheessa.

Lisää WordPressiin CSS, joka piilottaa sivupalkin mobiililaitteille

Seuraava vaihe on lisätä tämä koodi WordPress-teeman CSS-lisäosioon. Tämä on koodi, joka piilottaa sivupalkit mobiililaitteille WordPressissä.

Lihavoin teemani sivupalkin div-tunnuksen. Sinun on muutettava tämä arvo teemasi sivupalkin div-tunnukseksi. Huomaa piste (.) ennen div-tunnusta. |_+_|

Lisää yllä oleva CSS-koodi teemaasi noudattamalla alla olevia ohjeita:

Kirjaudu sisään WordPress-sivustollesi järjestelmänvalvojana.
Sitten vasemmassa ruudussa leijuu yli Ulkomuoto ja valitse Mukauta .

Kun Mukauta-vaihtoehto avautuu, vieritä alas ja napsauta Ylimääräinen CSS .

Jos WordPress-teemasi ei tarjoa tätä vaihtoehtoa, avaa teemavaihtoehdot ja etsi paikka mukautetun CSS:n lisäämiseen.

Lopuksi kopioi, liitä ja muuta tämä koodi johonkin osioon – napsauta sitten yläosassa Julkaista .

Muista vaihtaa .sivupalkki sivupalkin div ID:hen viimeisestä osiosta. |_+_| Saattaa olla myös hyvä idea lisätä kommentti, joka kuvaa koodin toimintaa ja todennäköisesti sen lisäyspäivämäärää. Voit kopioida kommenttini ja muokata sitä haluamallasi tavalla. Mitä tahansa teetkin, ÄLÄ poista /* ja */ - Nämä ovat koodeja, jotka tekevät siitä, mikä on kommentin välissä, eivätkä ole osa CSS-koodia. |_+_|

Tyhjennä välimuisti ja testaa

Selvyyden vuoksi viimeinen osio piilotti mobiililaitteiden sivupalkin WordPressissä. Päätin kuitenkin lisätä tämän osion, koska jos käytät välimuistilaajennusta tai CDN:ää, sinun on tyhjennettävä välimuisti, jotta muutokset tulevat voimaan välittömästi.

Kun olet tyhjentänyt välimuistin välimuistilaajennuksessa ja/tai CDN:ssä, avaa verkkosivusto mobiililaitteella. Jos muutos ei heijastu heti, käytä Incognito (Chrome) tai Kahden kesken (Microsoft Edge).

Toivon, että pystyit piilottamaan mobiililaitteiden sivupalkin WordPress-sivustollasi tämän oppaan ohjeiden avulla.

Toivon myös, että opas oli hyödyllinen ja helppo ymmärtää? Jos opas oli mielestäsi hyödyllinen, napsauta Joo Oliko tämä viesti hyödyllinen? alla.

Voit myös antaa palautetta tämän sivun lopusta löytyvällä Vastaa -lomakkeella.

Lopuksi lisää WordPress-oppaita saat vierailemalla WordPressin ja verkkosivustojen ohjeet -sivullamme.