Sådan skjuler du sidebjælke til mobile enheder i WordPress

11. april 2021 812 Visninger Sådan skjuler du sidebjælke til mobile enheder i WordPress

Hvis du læser dette, har du sikkert indset, at det ikke er nødvendigt at have en sidebar på mobile enheder. Denne S-zone lærer dig, hvordan du skjuler sidebjælken til mobil i WordPress.

For de fleste WordPress-temaer, når du tilføjer sidebar-widgets – primært beregnet til større skærme – vises disse sidebar-widgets også på mobile enheder.

I første omgang, på en mobilenhed, er en sidebar ikke længere en sidebar, men mere en bundbar. Ydermere, på mobile enheder, vises sidebjælker efter hovedindlægget - og besejrer formålet med at have dem.

Desuden kan unødvendige sidebjælker på mobile enheder bidrage til langsomme indlæsningstider på disse enheder.

Nogle WordPress-temaer kan have mulighed for at tilpasse sidebjælker efter enheder. Hvis dit tema tilbyder denne funktion, bedes du bruge den.

Men hvis dit tema ikke tilbyder denne mulighed, skal du bruge trinene i denne vejledning til at skjule sidebjælken på mobile enheder.

Nogle af trinene i denne guide kræver grundlæggende CSS-færdigheder. Men selvom du ikke ved noget om CSS og stylesheets, vil jeg guide dig igennem det – trin for trin.

Her er trinene på højt niveau til at skjule sidebjælken for mobile enheder i WordPress:

Find sidebjælkens div-id til dit tema
Tilføj CSS, der skjuler sidebjælken fra mobile enheder
Ryd cache og test

Hvis du har et udvikler- eller iscenesættelsessted, anbefaler jeg kraftigt, at du tester disse trin på dit udviklerwebsted, før du går live med det.

Gennemse indlægsemner

Find Sidebar DIV ID til dit tema
Tilføj CSS'en, der skjuler sidebjælken til mobile enheder i WordPress
Ryd cache og test

Sådan skjuler du sidebjælke til mobile enheder i WordPress: trin 1 - Find sidebjælken DIV-id til dit tema

At skjule sidebjælke på mobile enheder i WordPress involverer i det væsentlige at ændre sidebjælke-div med CSS. For at ændre div'en med CSS skal du dog bruge div-id'et.

Fuldfør denne opgave på en pc eller Mac bærbar eller stationær - IKKE på en mobilenhed.

Følg nedenstående trin for at finde div-id'et til sidebjælken for det tema, du bruger til dit WordPress-websted:

hvordan man bruger chromecast som anden skærm

Åbn et indlæg eller en side på Google Chrome eller den nye Microsoft Edge-browser.
Højreklik derefter hvor som helst på sidebjælken og vælg Inspicere .

Inspect-elementet åbner nogle koder til højre på siden. Dette har en øvre del (mærket 1 i skærmbilledet nedenfor). Den har også en nederste del (mærket 2 på skærmbilledet).

På den nederste del, den Stilarter fanen vælges som standard. For at finde dit sidebar div-id, skal du kigge efter et element med ordet sidebar. Nogle temaer bruger muligvis blot sidebjælken. Andre kan bruge sidebar-main eller main-sidebar.

Bemærk dette, da det er din temasidebjælke div ID. Min er sidebar. Kopier dette, da du skal bruge det i næste trin.

Tilføj CSS'en, der skjuler sidebjælken til mobile enheder i WordPress

Det næste trin er at tilføje denne kode til afsnittet Yderligere CSS i dit WordPress-tema. Dette er koden, der skjuler sidebjælker til mobile enheder i WordPress.

Jeg bolded sidebar div ID til mit tema. Du skal ændre denne værdi til sidebar div ID for dit tema. Bemærk prikken (.) før div-id'et. |_+_|

Følg nedenstående trin for at tilføje ovenstående CSS-kode til dit tema:

skift beskedlyd ios 10

Log ind på dit WordPress-websted som administrator.
Derefter, i venstre rude, svæve over Udseende og vælg Tilpas .

Når indstillingen Tilpas åbnes, skal du rulle ned og klikke Yderligere CSS .

Hvis dit WordPress-tema ikke tilbyder denne mulighed, skal du åbne temaindstillingerne og finde et sted at tilføje tilpasset CSS.

Til sidst skal du kopiere, indsætte og ændre denne kode i en af sektionerne - derefter på det øverste klik Offentliggøre .

Husk at skifte .sidebjælke til sidebar div ID fra sidste sektion. |_+_| Det kan også være en god idé at tilføje en kommentar, der beskriver, hvad koden gør, og sandsynligvis datoen den blev tilføjet. Du kan kopiere min kommentar og ændre den som du ønsker. Uanset hvad du gør, fjern ikke /* og */ – det er de koder, der gør, hvad der er imellem en kommentar og ikke en del af nogen CSS-kode. |_+_|

Ryd cache og test

For at være klar, skjulte det sidste afsnit effektivt sidebjælken til mobile enheder i WordPress. Jeg besluttede dog at tilføje denne sektion, fordi hvis du bruger et caching-plugin eller CDN, skal du rydde cachen for at ændringerne træder i kraft med det samme.

Når du har ryddet cachen i caching-plugin'et og/eller CDN'et, skal du åbne webstedet på en mobilenhed. Hvis ændringen ikke afspejles med det samme, brug Inkognito (Chrome) eller Privat (Microsoft Edge).

Jeg håber, du var i stand til at skjule sidebjælken til mobile enheder på dit WordPress-websted med trinene i denne vejledning.

Jeg håber også, at du fandt guiden nyttig og nem at forstå? Hvis du fandt vejledningen nyttig, så klik Ja til Var dette indlæg nyttigt? under.

Du kan også give din feedback med formularen Efterlad et svar i slutningen af denne side.

Endelig, for flere WordPress-guider, besøg vores WordPress & Websites How-Tos-side.