Nyligen frågade en av våra läsare oss hur man ändrar sidofältet av ett WordPress-tema?
Vi får vanligtvis denna fråga från användare som vill ändra platsen för sin sidofält från vänster till höger eller från höger till vänster.
I den här tutorialen kommer vi att visa dig hur du ändrar platsen för sidofältet på WordPress.
Men tidigare, om du aldrig har installerat WordPress-upptäckt Hur man installerar en Wordpress-blogg 7 steg et Hur man hittar, installera och aktivera en Wordpress tema på din blogg
Tillbaka till varför vi är här.
Varför ändra platsen för sidofältet på WordPress?
Användarexperter tror att människor skannar sidor från vänster till höger. De rekommenderar att du placerar viktigt innehåll till vänster så att användarna först ser innehållet. Detta kan dock vändas om din webbplats är på ett RTL-språk (höger till vänster).
Ta reda på om bör din WordPress-blogg ha sidofält
Många WordPress-webbplatser använder den typiska blogglayouten med två kolumner. En för innehållet och den andra kolumnen för sidofältet.
Om du är ny på webbplatser bör du välja ett WordPress-tema som har en sidofält på din önskade plats.
många WordPress-teman erbjuder alternativ för att ändra sidofältssidan i sidofältsinställningarna. Om ditt WordPress-tema inte har det här alternativet måste du dock ändra sidofältet manuellt. Gå längre genom att upptäcka hur man tar bort sidofältet på WordPress
Som sagt, låt oss ta en titt på metoden du behöver använda för att enkelt ändra sidofältets sida av WordPress med hjälp av CSS.
Ändra sidofältet med CSS
Innan du gör några ändringar i ditt WordPress-tema bör du först överväga skapa ett barntema. Genom att använda ett barntema kan du uppdatera ditt föräldertema utan att förlora dina ändringar.
Upptäck Hur man visa en annan sidofältet för varje punkt på Wordpress
För det andra bör du alltid skapa en säkerhetskopia av din WordPress-webbplats när du gör realtidsändringar av ditt aktiva tema.
Du behöver en FTP-klient för att redigera WordPress-temafiler. Konsultera guide om hur man använder FTP.
Logga in på din WordPress-webbplats med FTP-klienten och navigera till temamappen. Det är vanligtvis beläget på:
/ DinWebbplats / wp-content / themes / din-theme-mapp /
Nu måste du ladda ner och öppna huvudformatfilen för ditt WordPress-tema i en textredigerare som Anteckningar. Den här filen heter style.css, och det finns i rotkatalogen för ditt WordPress-tema.
Upptäck hur man hanterar WordPress-filer och -mappar
I den här filen hittar du CSS-klassen på din sidofält. I allmänhet är denna klass " sidebar ". I det här exemplet använder vi standard WordPress-tema " tjugo femton Vem har denna klass för sidofältet:
.sidebar {float: left; marginal-höger: -100%; max-bredd: 413px; position: relativ; bredd: 29.4118%; }
Som du kan se sidofältet flyter till vänster med en marginal på -100%. Vi kommer att ändra flottören till höger:
.sidebar {float: höger; marginal-vänster: -100%; max-bredd: 413px; position: relativ; bredd: 29.4118%; }
Spara dina ändringar och ladda upp filen style.css till din webbplats med en FTP-klient. Om du besöker din webbplats så ser den ut så här:
Vi har faktiskt flyttat sidofältet, men vi rörde inte innehållsområdet. " Tjugo Femton Använder denna CSS för att definiera innehållet i innehållsområdet.
.site-content {display: block; flyta: vänster; marginal-vänster: 29.4118%; bredd: 70.5882%; }
Vi kommer att ändra det för att flytta innehållet till höger. Följande:
.site-content {display: block; flyta: vänster; marginal-höger: 29.4118%; bredd: 70.5882%; }
Så här ser din webbplats ut efter att du har använt denna CSS-kod.
Som ni kan se ändrade vi platsen för innehållsområdet och sidofältet. Men det finns fortfarande ett vitt kvarter till vänster.
Gå längre genom att upptäcka hur man hanterar WordPress-filer och -mappar
Du kommer ofta att stöta på dessa fel när du arbetar med CSS. Det kommer att krävas lite detektivarbete för att förstå vad som orsakar detta och hur man fixar det.
Använd webbläsarens "Inspektör" -verktyg för att titta på källkoden. Rikta musen mot det drabbade området i webbläsaren, högerklicka och välj "Inspektör" i webbläsarens meny.
När du flyttar musen runt källkodsvyn kommer du att märka de områden det påverkar markeras i liveförhandsgranskningen. I den högra rutan kommer du att kunna se CSS som används för det valda elementet.
Upptäck vårt 5 WordPress plugins för att visuellt redigera CSS på din blogg
Så CSS som motsvarar det markerade objektet måste justeras om.
@media skärm och (min-bredd: 59.6875em) {body: före {bakgrund-färg: #fff; box-skugga: 0 0 1px rgba (0, 0, 0, 0.15); innehåll: ""; display: block; höjd: 100%; min-höjd: 100%; position: fast; överst: 0; vänster: 0; bredd: 29.4118%; z-index: 0; / * Fixar blinkande fel med rullning på Safari * /}
Denna CSS-kod lägger till ett tomt block med 29,4118% bredd och en bredd av 100% längst upp till vänster. Så här ska vi flytta den till höger.
@media skärm och (min-bredd: 59.6875em) {body: före {bakgrund-färg: #fff; box-skugga: 0 0 1px rgba (0, 0, 0, 0.15); innehåll: ""; display: block; höjd: 100%; min-höjd: 100%; position: fast; överst: 0; höger: 0; bredd: 29.4118%; z-index: 0; / * Fixar blinkande fel med rullning på Safari * /}
Efter att du har sparat och laddat upp stilarket till servern, så ser din webbplats ut.
Att arbeta med CSS kan vara förvirrande för nybörjare. Om du inte vill göra allt manuellt arbete kan du prova WordPress CSS Hero-plugin. Det låter dig redigera CSS utan att skriva kod, och det fungerar med alla WordPress-teman.
Upptäck också några premium WordPress-plugins
Du kan använda andra Wordpress plugins för att ge ett modernt utseende och för att optimera hanteringen av din blogg eller hemsida.
Vi erbjuder dig här några premium WordPress-plugins som hjälper dig att göra det.
1. Zxeion
Zxeion är en kraftfull Wordpress plugin premium ansvarig för att förbättra säkerheten på din webbplats. Detta plugin innehåller en samling skydds- och säkerhetsverktyg som skyddar din webbplats mot eventuella attacker.
Dess realtidsskyddssystem hjälper dig att identifiera hot mot din webbplats och blockera dem, utan att du behöver göra något.
Upptäck också vår 7 plugins för att öka dina sidfält på WordPress
Dess funktioner är: realtidsskydd, utmärkt kundsupport, regelbundna uppdateringar, IP-adressblockerare, utmärkt dokumentation, modernt och professionellt gränssnitt, dedikerad kundsupport och andra
Ladda ner | demo | webbhotell
2. Slaido
Slaido är en Wordpress plugin premium som låter dig välja mellan nästan 320 responsiva reglagemallar och importera en av dem till din webbplats med bara några klick. Det är ett komplett paket med mallar, perfekt för Slider Revolution. Så du måste installera den först för att kunna använda den fullt ut Wordpress plugin
Dess huvudfunktioner är: en lyhörd layout av dess skjutreglage, enkel att importera eller exportera skjutreglage, regelbundna uppdateringar, tillgänglig kundsupport dygnet runt, flytande och väldigt coola animationer, tillgängligheten av videohandledning för en snabb start, stöd för Google Fonts och många fler.
Ladda ner | demo | webbhotell
3. Kontakta oss formulär
Contact Us Form är ett förstklassigt WordPress-tillägg och ett enkelt verktyg men rikt på anpassningsalternativ som gör att du kan visa en tydlig och uppmuntrande form som dina besökare kan kontakta dig genom att lämna sitt meddelande.
Du kommer att kunna definiera nödvändiga fält, välja den bästa layouten för fälten och anpassa dem helt för att uppmuntra dina kunder eller besökare att lämna sina förslag eller meddelanden.
Vi inbjuder dig också att läsa: 10 WordPress plugins för att skapa och hantera en restaurangwebbplats
Ställ bara in e-postadressen där du vill ta emot meddelandena och använd den för att växa ditt företag i den mest lönsamma riktningen.
Ladda ner | demo | webbhotell
Rekommenderade resurser
Ta reda på om andra rekommenderade resurser som hjälper dig att bygga och hantera din webbplats.
- Så hittar du inloggningsadressen för din WordPress-blogg
- Hur man skapar en superhjältezon med animerad text
- Hur du anpassar CSS på din WordPress-webbplats
- Hur man lägger till kategorier för menyn för din Wordpress blogg
Slutsats
Där! Det är det för denna handledning. Vi hoppas att det hjälper dig att ändra sidofältet på din WordPress-blogg. Känn dig fri att dela den här artikeln med dina vänner på dina favorit sociala nätverk.
Du kommer dock också att kunna konsultera vår medel, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande.
Om du har förslag eller kommentarer, lämna dem i vårt avsnitt commentaires.
.
