Slik endrer sidefeltet i WordPress

Nylig spurte en av våre lesere oss hvordan du endrer sidefrekvensen i et WordPress-tema. Vi får dette spørsmålet mye der brukerne vil endre sidebjelken fra venstre til høyre eller fra høyre til venstre. I denne artikkelen vil vi vise deg hvordan du endrer sidefrekvenssiden i WordPress.

Hvorfor endre sidefeltet i WordPress

Usability eksperter mener at folk skanner sider fra venstre til høyre. De anbefaler å sette det viktige innholdet til venstre slik at brukerne ser innholdet først. Dette kan imidlertid reverseres hvis nettstedet ditt er på et språk som er skrevet i høyre til venstre retning.

Mange WordPress-sider bruker den typiske bloggoppsettet med to kolonner. En for innholdet, og den andre kolonnen for sidebjelken.

Hvis du bare starter et nettsted, bør du velge et WordPress-tema som har sidebjelken på ønsket sted.

Mange temaer har muligheter til å bytte sidebjemsider fra temainnstillinger. Men hvis temaet ditt ikke har dette alternativet, må du endre sidebjemsider manuelt.

Når det er sagt, la oss ta en titt på hvordan du enkelt kan endre sidefeltet i WordPress ved å bruke litt CSS.

Endre sidefeltet i WordPress ved hjelp av CSS

Før du foretar endringer i temaet ditt, bør du først vurdere å lage et barnemne. Ved å bruke et barnemne, vil du kunne oppdatere ditt overordnede tema uten å miste endringene dine.

For det andre bør du alltid lage en sikkerhetskopi av WordPress-siden din når du gjør direkte endringer i ditt aktive WordPress-tema.

Du trenger en FTP-klient for å redigere temafilene dine. Se vår nybegynners veiledning om hvordan du bruker FTP til å laste opp filer til WordPress.

Koble til ditt WordPress-nettsted ved hjelp av FTP-klienten og gå til temamappen din. Det er vanligvis plassert på:

/ Yourwebsite / wp-content / themes / din-tema-mappen /

Nå må du laste ned og åpne temaets hoved stilarkfil i et vanlig tekstredigeringsprogram som Notisblokk. Denne filen kalles style.css, og den ligger i temaets rotkatalog.

I denne filen finner du CSS-klassen for sidebjelken. Det er vanligvis .sidebar. I dette eksemplet bruker vi standard WordPress-temaet Tjuefifteen som har denne CSS til å definere sidebjelke:

 .sidebar float: left; margin-høyre: -100%; maksimal bredde: 413px; stilling: relativ; bredde: 29,4118%;  

Som du kan se det flyter sidebar til venstre med en margin på -100% til høyre. Vi vil endre den til å flyte til høyre og margin-venstre slik:

 .sidebar float: right; margin-venstre: -100%; maksimal bredde: 413px; stilling: relativ; bredde: 29,4118%;  

Lagre endringene dine og last opp style.css-fil tilbake til nettstedet ditt ved hjelp av FTP-klient. Nå hvis du besøker nettstedet ditt, vil det se slik ut:

Det er fordi vi har flyttet sidebjelken, men vi flyttet ikke innholdsområdet. Tjuefem bruker denne CSS til å definere posisjonen til innholdsområdet.

 .nettstedinnhold display: block; flyte: venstre; margin-venstre: 29,4118%; bredde: 70.5882%;  

Vi endrer den for å flytte innhold til høyre. Som dette:

 .nettstedinnhold display: block; flyte: venstre; margin-høyre: 29,4118%; bredde: 70.5882%;  

Dette er hvordan nettstedet vårt så etter at du har brukt dette CSS.

Som du kan se at vi har byttet sider for både innhold og sidebar områder. Men det er fortsatt en hvit blokk til venstre.

Du vil komme over slike ting når du jobber med CSS. Det vil ta noen detektivarbeid for å finne ut hva som forårsaker det og hvordan du justerer det.

Bruk nettleserens 'Inspiser' -verktøy for å se på kildekoden. Pek musen til den berørte regionen i nettleseren, høyreklikk og velg Inspiser fra nettlesermenyen.

Når du beveger musen i kildekoden, vil du legge merke til områdene det påvirker fremhevet i live forhåndsvisning. I den høyre ruten vil du kunne se CSS brukt for det valgte elementet.

Vi fant ut at dette CSS i stilarket trenger justering.

 @media skjerm og (min bredde: 59.6875em) kropp: før bakgrunnsfarge: #fff; boks-skygge: 0 0 1px rgba (0, 0, 0, 0,15); innhold: ""; skjerm: blokk; høyde: 100%; Min høyde: 100%; posisjon: fast; topp: 0; venstre: 0; bredde: 29,4118%; z-indeks: 0; / * Fikser blinkende feil med rulle på Safari * / 

Denne CSS-koden legger til en tom innholdsblokk med 29,4118% bredde og 100% bredde til venstre øverst. Her er hvordan vi vil flytte den til høyre.

 @media skjerm og (min bredde: 59.6875em) kropp: før bakgrunnsfarge: #fff; boks-skygge: 0 0 1px rgba (0, 0, 0, 0,15); innhold: ""; skjerm: blokk; høyde: 100%; Min høyde: 100%; posisjon: fast; topp: 0; høyre: 0; bredde: 29,4118%; z-indeks: 0; / * Fikser blinkende feil med rulle på Safari * / 

Etter at du lagret og lastet opp stilarket tilbake til serveren, så så nettstedet vårt.

Arbeide med CSS kan være forvirrende for nybegynnere. Hvis du ikke vil gjøre all den manuelle koden, kan du prøve CSS Hero. Det lar deg redigere CSS uten å skrive noen kode, og det fungerer med alle WordPress-temaer.

Vi håper denne artikkelen hjalp deg med å endre sidefrekvensen i WordPress. Du kan også se vår liste over 12 WordPress sidebar-triks for å få maksimale resultater.

Hvis du likte denne artikkelen, vennligst abonner på vår YouTube Channel for WordPress-videoopplæringsprogrammer. Du kan også finne oss på Twitter og Facebook.