For nylig spurgte en af ​​vores læsere os, hvordan man ændrer sidebjælkesiden af ​​et WordPress-tema?

Vi får normalt dette spørgsmål fra brugere, der ønsker at ændre placeringen af ​​deres sidebjælke fra venstre til højre eller fra højre til venstre.

I denne tutorial vil vi vise dig, hvordan du ændrer placeringen af ​​sidebjælken på WordPress.

Men før, hvis du aldrig har installeret WordPress-opdagelse Sådan installeres en WordPress blog 7 trin et Hvordan at finde, installere og aktivere et WordPress tema på din blog 

Så tilbage til, hvorfor vi er her.

Sådan ændres sidebjælkens placering på wordpress e1568058176266

Hvorfor ændre placeringen af ​​sidepanelet på WordPress?

Usability-eksperter mener, at folk scanner sider fra venstre til højre. De anbefaler at placere vigtigt indhold til venstre, så brugerne først ser dette indhold. Dette kan dog vendes, hvis dit websted er på et RTL-sprog (højre til venstre).

Find ud af om skulle din WordPress-blog have sidebjælker

Mange WordPress-websteder bruger det typiske bloglayout med to kolonner. Den ene til indholdet og den anden kolonne til sidepanelet.

typisk indholdsdemo WordPress sidebar

Hvis du er ny på websteder, skal du vælge et WordPress-tema, der har en sidefelt på dit foretrukne websted.

mange WordPress-temaer tilbyder muligheder for at ændre sidebjælkesiden i sidebjælkeindstillingerne. Men hvis dit WordPress-tema ikke har denne mulighed, skal du ændre sidebjælkesiden manuelt. Gå længere ved at opdage hvordan man fjerner sidepanelet på WordPress

Når det er sagt, lad os se på den metode, du skal bruge til let at ændre sidebjælkesiden af ​​WordPress ved hjælp af CSS.

Ændring af sidebjælken med CSS

Før du foretager ændringer i dit WordPress-tema, skal du først overveje oprette et barn tema. Ved at bruge et underordnetema vil du være i stand til at opdatere dit overordnede tema uden at miste dine ændringer.

Oplev Hvordan til at vise et andet sidepanel for hvert punkt på WordPress

For det andet skal du altid oprette en sikkerhedskopi af dit WordPress-websted, når du foretager ændringer i realtid til dit aktive tema.

Du skal bruge en FTP-klient til at redigere WordPress-temafiler. Konsulter vejlede om, hvordan man bruger FTP.

Log ind på dit WordPress-websted ved hjælp af FTP-klienten og naviger til temamappen. Det er normalt placeret på:

 / YourSite / wp-content / temaer / din-tema-mappe / 

Nu skal du downloade og åbne hovedformatarkfilen for dit WordPress-tema i en teksteditor som Notesblok. Denne fil kaldes style.css, og det er i rodmappen for dit WordPress-tema.

Oplev hvordan man administrerer WordPress-filer og -mapper

I denne fil finder du CSS-klassen på din sidebjælke. Generelt er denne klasse " sidebar ". I dette eksempel bruger vi standard WordPress-temaet " tyve femten Hvem har denne klasse til sidebjælken:

.sidebar {float: left; margin-højre: -100%; max-bredde: 413px; position: relativ; bredde: 29.4118%; }

Som du kan se, sidebjælken svæver til venstre med en margen på -100%. Vi ændrer flyderen til højre:

.sidebar {float: højre; margin-left: -100%; max-bredde: 413px; position: relativ; bredde: 29.4118%; }

Gem dine ændringer, og upload filen style.css til dit websted ved hjælp af en FTP-klient. Hvis du nu besøger dit websted, vil det se sådan ud:

demo hjemmeside ændre sidelinjen

Faktisk flyttede vi sidebjælken, men vi flyttede ikke indholdsområdet. " Tyve Fifteen Bruger denne CSS til at definere placeringen af ​​indholdsområdet.

.site-indhold {display: blok; flyde: venstre; margin-left: 29.4118%; bredde: 70.5882%; }

Vi ændrer det for at flytte indholdet til højre. Som følger:

.site-indhold {display: blok; flyde: venstre; margin-right: 29.4118%; bredde: 70.5882%; }

Sådan ser dit websted ud, når du har anvendt denne CSS-kode.

ny præsentation flyttet sidebar hjemmeside

Som du kan se ændrede vi placeringen af ​​indholdsområdet og sidebjælken. Der er dog stadig en hvid blok til venstre.

Gå videre ved at opdage hvordan man administrerer WordPress-filer og -mapper

Du vil ofte støde på disse fejl, når du arbejder med CSS. Det vil kræve noget detektivarbejde for at forstå, hvad der forårsager dette, og hvordan man løser det.

Brug din browsers "Inspector" -værktøj til at se kildekoden. Peg musen mod det berørte område i browseren, højreklik og vælg "Inspektør" i browsermenuen.

inspicere browser værktøj

Når du bevæger musen rundt i kildekodevisningen, vil du bemærke de områder, den påvirker, fremhævet i live preview. I højre rude kan du se CSS, der bruges til det valgte element.

Opdag vores 5 WordPress plugins til visuelt redigere CSS på din blog

Så CSS, der svarer til det fremhævede emne, skal justeres igen.

@media-skærm og (min. bredde: 59.6875em) {body: før {baggrund-farve: #fff; kasseskygge: 0 0 1px rgba (0, 0, 0, 0.15); indhold: ""; display: blokering; højde: 100%; min. højde: 100%; position: fast; øverst: 0; venstre: 0; bredde: 29.4118%; z-indeks: 0; / * Retter blinkende fejl med rulle på Safari * /}

Denne CSS-kode tilføjer en tom blok med 29,4118% bredde og en bredde på 100% øverst til venstre. Her er, hvordan vi flytter det til højre.

@media-skærm og (min. bredde: 59.6875em) {body: før {baggrund-farve: #fff; kasseskygge: 0 0 1px rgba (0, 0, 0, 0.15); indhold: ""; display: blokering; højde: 100%; min. højde: 100%; position: fast; øverst: 0; højre: 0; bredde: 29.4118%; z-indeks: 0; / * Retter blinkende fejl med rulle på Safari * /}

Efter at have gemt og uploadet typografiarket til serveren, ser dit websted sådan ud.

nyt udseende hjemmeside sidebjælken til højre

At arbejde med CSS kan være forvirrende for begyndere. Hvis du ikke ønsker at udføre alt det manuelle arbejde, kan du prøve WordPress CSS Hero plugin. Det giver dig mulighed for at redigere CSS uden at skrive kode, og det fungerer med alle WordPress-temaer.

Oplev også nogle premium WordPress-plugins  

Du kan bruge andet WordPress plugins for at give et moderne udtryk og for at optimere håndteringen af ​​din blog eller hjemmeside.

Vi tilbyder dig her nogle premium WordPress-plugins, der hjælper dig med det.

1. Zxeion

Zxeion er en kraftfuld WordPress plugin premium ansvarlig for at forbedre sikkerheden på dit websted. Dette plugin indeholder en samling af beskyttelses- og sikkerhedsværktøjer, der vil beskytte din hjemmeside mod mulige angreb.Zxeion wordpress-plugins beskytter webstedet mod malware-virusangreb

Dets realtidsbeskyttelsessystem hjælper dig med at identificere trusler mod dit websted og blokere dem, uden at du behøver at gøre noget.

Oplev også vores 7 plugins for at øge dine sider på WordPress

Dens funktioner er: realtidsbeskyttelse, fremragende kundesupport, regelmæssige opdateringer, IP-adresseblokker, fremragende dokumentation, moderne og professionel grænseflade, dedikeret kundesupport og andre

Downloade | demo | Web-hosting

2. Slaido 

Slaido er en WordPress plugin premium, som giver dig mulighed for at vælge mellem næsten 320 responsive skyder-skabeloner og importere en af ​​dem til din hjemmeside med blot et par klik. Det er en komplet pakke skabeloner, perfekt til Slider revolution. Så du bliver nødt til at installere det først for fuldt ud at bruge dette WordPress pluginSlaido skabelonpakke til skyderen revolution wordpress

Dens hovedfunktioner er: et responsivt layout af dets skydere, let at importere eller eksportere skyderen, regelmæssige opdateringer, kundesupport tilgængelig 24/7, flydende og meget seje animationer, tilgængeligheden af video tutorials til en hurtig start, support til Google Fonts og mange flere.

Downloade | demo | Web-hosting

3. Kontakt os formular

Kontakt os-formularen er et premium responsivt WordPress-plugin og et simpelt værktøj, men rig på tilpasningsmuligheder, der giver dig mulighed for at vise en klar og opmuntrende formular, som dine besøgende kan kontakte dig ved at efterlade deres besked.

Kontakt os formular wordpress kontaktformular plugin

Du vil være i stand til at definere de nødvendige felter, vælge det bedste layout af felterne og tilpasse det helt for at opmuntre dine kunder eller besøgende til at forlade deres forslag eller meddelelser.

Vi inviterer dig også til at læse: 10 WordPress plugins til at oprette og administrere en restaurant hjemmeside

Bare konfigurer den e-mail-adresse, hvor du vil modtage meddelelserne, og brug den til at vokse din virksomhed i den mest rentable retning.

Downloade | demo | Web-hosting

Anbefalede ressourcer

Find ud af om andre anbefalede ressourcer, der hjælper dig med at opbygge og administrere dit websted.

Konklusion

Der! Det er det til denne tutorial. Vi håber, det hjælper dig med at ændre sidebjælkesiden af ​​din WordPress-blog. du er velkommen til del denne artikel med dine venner på dine foretrukne sociale netværk

Du vil dog også kunne konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse.

Hvis du har forslag eller bemærkninger, skal du lade dem stå i vores afsnit kommentarer.

...