Nylig spurte en av våre lesere oss hvordan vi kan endre sidefeltet til et WordPress-tema?
Vi får vanligvis dette spørsmålet fra brukere som ønsker å endre plasseringen til sidepanelen fra venstre til høyre eller fra høyre til venstre.
I denne opplæringen vil vi vise deg hvordan du endrer plasseringen av sidefeltet på WordPress.
Men før, hvis du aldri har installert WordPress Discover Hvordan installere en WordPress blogg 7 trinn et Hvordan finne, installere og aktivere en WordPress tema på bloggen din
Så tilbake til hvorfor vi er her.
Hvorfor endre plasseringen av sidefeltet på WordPress?
Brukervennlige eksperter mener at folk skanner sider fra venstre til høyre. De anbefaler å legge viktig innhold til venstre slik at brukerne ser dette innholdet først. Dette kan imidlertid reverseres hvis nettstedet ditt er på et RTL-språk (høyre på venstre side).
Finn ut om bør WordPress-bloggen din ha sidefelt
Mange WordPress-nettsteder bruker det typiske bloggoppsettet med to kolonner. Den ene for innholdet, og den andre kolonnen for sidefeltet.
Hvis du er ukjent med nettsteder, bør du velge et WordPress-tema som har en sidefelt på ønsket sted.
mange WordPress-temaer tilbyr alternativer for å endre sidefeltsiden i sidefeltinnstillingene. Imidlertid, hvis WordPress-temaet ikke har dette alternativet, må du endre sidefeltet manuelt. Gå lenger ved å oppdage hvordan du fjerner sidefeltet på WordPress
Når det er sagt, la oss ta en titt på metoden du trenger å bruke for å enkelt endre sidefeltsiden av WordPress ved å bruke CSS.
Endre sidefeltet med CSS
Før du gjør noen endringer i WordPress-temaet, bør du først vurdere skape et barnetema. Ved å bruke et barn-tema, vil du kunne oppdatere foreldertemaet uten å miste endringene.
Oppdag Hvordan vise en annen sidebar for hvert element på WordPress
For det andre bør du alltid opprette en sikkerhetskopi av WordPress-nettstedet ditt når du gjør endringer i sanntid til det aktive temaet.
Du trenger en FTP-klient for å redigere WordPress-temafilene. Rådfør deg med veiledning om hvordan du bruker FTP.
Logg deg på WordPress-nettstedet ditt ved hjelp av FTP-klienten og naviger til temamappen. Det ligger vanligvis på:
/ Ditt / wp-content / themes / din-tema-mappen /
Nå må du laste ned og åpne hovedformatfilen til WordPress-temaet ditt i en tekstredigerer som Notisblokk. Denne filen heter style.css, og det er i rotkatalogen for ditt WordPress-tema.
Oppdag hvordan du administrerer WordPress filer og mapper
I denne filen finner du CSS-klassen på sidefeltet. Generelt er denne klassen " sidebar ". I dette eksemplet bruker vi standard WordPress-temaet " tjue femten Hvem har denne klassen for sidefeltet:
.sidebar {float: left; margin-høyre: -100%; maks bredde: 413px; stilling: relativ; bredde: 29.4118%; }
Som du kan se sidefeltet flyter til venstre med en margin på -100%. Vi endrer flottøren til høyre:
.sidebar {float: høyre; margin-venstre: -100%; maks bredde: 413px; stilling: relativ; bredde: 29.4118%; }
Lagre endringene dine og last opp filen style.css til nettstedet ditt ved hjelp av en FTP-klient. Hvis du nå besøker nettstedet ditt, vil det se slik ut:
Vi flyttet riktignok sidefeltet, men vi flyttet ikke innholdsområdet. " Twenty Fifteen Bruker denne CSS for å definere plasseringen til innholdsområdet.
.site-content {display: block; flyte: venstre; margin-left: 29.4118%; bredde: 70.5882%; }
Vi vil endre det for å flytte innholdet til høyre. Som følger:
.site-content {display: block; flyte: venstre; margin-høyre: 29.4118%; bredde: 70.5882%; }
Slik ser nettstedet ditt ut etter bruk av denne CSS-koden.
Som du ser endret vi plasseringen av innholdsområdet og sidefeltet. Imidlertid er det fortsatt en hvit blokk på venstre side.
Gå videre ved å oppdage hvordan du administrerer WordPress filer og mapper
Du vil ofte støte på disse feilene når du jobber med CSS. Det vil ta noe detektivarbeid for å forstå hva som forårsaker dette, og hvordan du kan fikse det.
Bruk nettleserens "Inspector" -verktøy for å se kildekoden. Pek musen mot det berørte området i nettleseren, høyreklikk og velg "Inspector" fra nettlesermenyen.
Når du beveger musen rundt kildekodevisningen, vil du legge merke til områdene det påvirker, uthevet i direkte forhåndsvisning. I høyre rute vil du kunne se CSS som brukes for det valgte elementet.
Oppdag vår 5 WordPress plugins for å redigere CSS på bloggen din
Så CSS som tilsvarer det uthevede elementet må omjusteres.
@media-skjerm og (min-bredde: 59.6875em) {body: før {bakgrunn-farge: #fff; boksskygge: 0 0 1px rgba (0, 0, 0, 0.15); innhold: ""; skjerm: blokkering; høyde: 100%; min-høyde: 100%; stilling: fast; øverst: 0; til venstre: 0; bredde: 29.4118%; z-indeks: 0; / * Løsner blinkende feil med rulling på Safari * /}
Denne CSS-koden legger til en tom blokk med 29,4118% bredde og en bredde på 100% øverst til venstre. Slik skal vi flytte den til høyre.
@media-skjerm og (min-bredde: 59.6875em) {body: før {bakgrunn-farge: #fff; boksskygge: 0 0 1px rgba (0, 0, 0, 0.15); innhold: ""; skjerm: blokkering; høyde: 100%; min-høyde: 100%; stilling: fast; øverst: 0; til høyre: 0; bredde: 29.4118%; z-indeks: 0; / * Løsner blinkende feil med rulling på Safari * /}
Etter at du har lagret og lastet opp stilarket til serveren, vil nettstedet ditt se ut.
Å jobbe med CSS kan være forvirrende for nybegynnere. Hvis du ikke vil gjøre alt det manuelle arbeidet, kan du prøve WordPress CSS Hero-plugin. Det lar deg redigere CSS uten å skrive kode, og det fungerer med alle WordPress-temaer.
Oppdag også noen premium WordPress-plugins
Du kan bruke andre WordPress plugins for å gi et moderne utseende og for å optimalisere håndteringen av bloggen eller nettsiden din.
Vi tilbyr deg her noen premium WordPress-plugins som vil hjelpe deg å gjøre det.
1. Zxeion
Zxeion er en kraftig WordPress Plugin premium ansvarlig for å forbedre sikkerheten til nettstedet ditt. Dette pluginet inneholder en samling beskyttelses- og sikkerhetsverktøy som vil beskytte nettstedet ditt mot mulige angrep.
Dets sanntidsbeskyttelsessystem vil hjelpe deg med å identifisere trusler mot nettstedet ditt og blokkere dem, uten at du trenger å gjøre noe.
Oppdag også vår 7 plugins for å øke sidefeltene på WordPress
Funksjonene er: sanntidsbeskyttelse, utmerket kundesupport, regelmessige oppdateringer, IP-adresseblokkering, utmerket dokumentasjon, moderne og profesjonelt grensesnitt, dedikert kundesupport og andre
2. Slaido
Slaido er en WordPress Plugin premium som lar deg velge mellom nesten 320 responsive skyvemaler og importere en av dem til nettstedet ditt med bare noen få klikk. Det er en komplett pakke med maler, perfekt for Slider Revolution. Så du må installere det først for å bruke dette fullt ut WordPress Plugin
Hovedfunksjonene er: et responsivt oppsett av glidebryterne, enkel import eller eksport av glidebrytere, regelmessige oppdateringer, kundesupport tilgjengelig 24/7, flytende og veldig kule animasjoner, tilgjengeligheten av videoopplæring for en rask start, støtte for Google Fonts og mange flere.
3. Kontakt oss skjema
Contact Us Form er et premium responsivt WordPress-plugin-program og et enkelt verktøy, men rikt på tilpasningsalternativer som lar deg vise et tydelig og oppmuntrende skjema der besøkende kan kontakte deg ved å legge igjen meldingen.
Du vil kunne definere de nødvendige feltene, velge den beste utformingen av feltene og tilpasse dem helt for å oppmuntre kundene eller besøkende til å legge igjen forslagene eller meldingene sine.
Vi inviterer deg også til å lese: 10 WordPress plugins for å opprette og administrere en restaurant nettside
Bare sett opp e-postadressen der du vil motta meldingene, og bruk den til å utvide virksomheten din i den mest lønnsomme retningen.
Anbefalte ressurser
Finn ut om andre anbefalte ressurser for å hjelpe deg med å bygge og administrere nettstedet ditt.
- Hvordan finne påloggingsadressen til WordPress-bloggen din
- Slik lager du en superheltsone med animert tekst
- Slik tilpasser du CSS på ditt WordPress-nettsted
- Hvordan legge til kategorier til menyen for din WordPress blog
konklusjonen
Det! Det er det for denne opplæringen. Vi håper det hjelper deg med å endre sidefeltet til WordPress-bloggen din. Føl deg fri til å del denne artikkelen med vennene dine på dine favoritt sosiale nettverk.
Du vil imidlertid også kunne konsultere våre ressources, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder, ved å konsultere vår guide om WordPress blog oppretting.
Hvis du har forslag eller kommentarer, kan du la dem ligge i seksjonen vår commentaires.
...
