Hvordan skjule sidefelt for mobile enheter i WordPress

11. april 2021 812 Visninger Hvordan skjule sidefelt for mobile enheter i WordPress

Hvis du leser dette, har du sannsynligvis innsett at det ikke er nødvendig å ha en sidefelt på mobile enheter. Denne S-sonen lærer deg hvordan du skjuler sidefeltet for mobil i WordPress.

For de fleste WordPress-temaer, når du legger til sidefelt-widgeter – primært beregnet på større skjermer – vises disse sidebar-widgetene også på mobile enheter.

I første omgang, på en mobilenhet, er en sidefelt ikke lenger en sidefelt, men mer en bunnlinje. Videre, på mobile enheter, vises sidefelter etter hovedinnlegget - og beseirer hensikten med å ha dem.

Dessuten kan det å ha unødvendige sidefelt på mobile enheter bidra til trege lastetider på disse enhetene.

Noen WordPress-temaer kan ha muligheten til å tilpasse sidefelt etter enheter. Hvis temaet ditt tilbyr denne funksjonen, vennligst bruk den.

Men hvis temaet ditt ikke tilbyr dette alternativet, bruk trinnene i denne veiledningen for å skjule sidefeltet på mobile enheter.

Noen av trinnene i denne veiledningen krever grunnleggende CSS-ferdigheter. Men selv om du ikke kan noe om CSS og stilark, vil jeg lede deg gjennom det – steg for steg.

Her er trinnene på høyt nivå for å skjule sidefelt for mobile enheter i WordPress:

Finn sidefeltets div-ID for temaet ditt
Legg til CSS som skjuler sidefeltet fra mobile enheter
Tøm buffer og test

Hvis du har et utvikler- eller iscenesettelsessted, anbefaler jeg på det sterkeste at du tester disse trinnene på utviklernettstedet ditt før du går live med det.

Bla gjennom innleggsemner

Finn sidepanelets DIV-ID for temaet ditt
Legg til CSS som skjuler sidefelt for mobile enheter i WordPress
Tøm buffer og test

Slik skjuler du sidepanel for mobile enheter i WordPress: trinn 1 - Finn sidepanelets DIV-ID for temaet ditt

Å skjule sidefelt på mobile enheter i WordPress innebærer i hovedsak å endre sidefelt-div med CSS. Men for å endre div med CSS, trenger du div-ID.

Fullfør denne oppgaven på en PC eller Mac bærbar eller stasjonær - IKKE på en mobil enhet.

Følg trinnene nedenfor for å finne div-ID-en for sidefeltet til temaet du bruker for WordPress-nettstedet ditt:

Åpne et innlegg eller en side på Google Chrome eller den nye Microsoft Edge-nettleseren.
Høyreklikk deretter hvor som helst på sidefeltet og velg Undersøke .

Inspiser-elementet vil åpne noen koder til høyre på siden. Denne har en øvre del (merket 1 i skjermbildet nedenfor). Den har også en nedre del (merket 2 på skjermbildet).

På den nedre delen Stiler fanen velges som standard. For å finne sidefeltets div-ID, se etter et element med ordet sidefelt. Noen temaer kan ganske enkelt bruke sidefelt. Andre kan bruke sidebar-main eller main-sidebar.

Legg merke til dette siden det er din temasidepanel-div-ID. Min er sidefelt. Kopier dette ettersom du trenger det i neste trinn.

Legg til CSS som skjuler sidefelt for mobile enheter i WordPress

Det neste trinnet er å legge til denne koden i tilleggs-CSS-delen av WordPress-temaet ditt. Dette er koden som skjuler sidefelt for mobile enheter i WordPress.

Jeg stanget sidebar div ID for temaet mitt. Du må endre denne verdien til sidefeltets div-ID for temaet ditt. Legg merke til prikken (.) før div-ID. |_+_|

Følg trinnene nedenfor for å legge til CSS-koden ovenfor til temaet ditt:

Logg på WordPress-siden din som administrator.
Deretter, i venstre rute, sveve over Utseende og velg Tilpass .

Når Tilpass-alternativet åpnes, blar du ned og klikker Ekstra CSS .

Hvis WordPress-temaet ditt ikke tilbyr dette alternativet, åpner du temaalternativene og finner et sted å legge til tilpasset CSS.

Til slutt, kopier, lim inn og endre denne koden i en av seksjonene – og klikk deretter på det øverste publisere .

Husk å endre .sidefelt til sidefeltet div ID fra den siste delen. |_+_| Det kan også være en god idé å legge til en kommentar som beskriver hva koden gjør og sannsynligvis datoen den ble lagt til. Du kan kopiere kommentaren min og endre den som du ønsker. Uansett hva du gjør, IKKE fjern /* og */ – dette er kodene som gjør det som er mellom en kommentar og ikke en del av noen CSS-kode. |_+_|

Tøm buffer og test

For å være tydelig, skjulte den siste delen effektivt sidefeltet for mobile enheter i WordPress. Jeg bestemte meg imidlertid for å legge til denne delen fordi hvis du bruker en caching-plugin eller CDN, må du tømme hurtigbufferen for at endringene skal tre i kraft umiddelbart.

Etter å ha tømt cachen i caching-plugin og/eller CDN, åpner du nettstedet på en mobilenhet. Hvis endringen ikke gjenspeiles umiddelbart, bruk Inkognito (Chrome) eller InPrivate (Microsoft Edge).

Jeg håper du var i stand til å skjule sidefeltet for mobile enheter på WordPress-nettstedet ditt med trinnene i denne veiledningen.

Jeg håper også du syntes veiledningen var nyttig og lett å forstå? Hvis du synes veiledningen var nyttig, klikk Ja til Var dette innlegget nyttig? under.

Du kan også gi tilbakemelding ved å legge igjen et svar-skjemaet på slutten av denne siden.

Til slutt, for flere WordPress-guider, besøk vår WordPress- og nettsteds veiledning-side.