Hoe de zijbalkkant in WordPress te veranderen

Onlangs vroeg een van onze lezers ons hoe we de sidebar-kant in een WordPress-thema konden veranderen. We krijgen deze vraag veel waar gebruikers hun zijbalk van links naar rechts of van rechts naar links willen veranderen. In dit artikel laten we u zien hoe u de zijbalkzijde in WordPress kunt wijzigen.

Waarom de zijbalk wijzigen in WordPress

Usability-experts zijn van mening dat mensen pagina's van links naar rechts scannen. Ze raden aan om de belangrijke inhoud links neer te zetten, zodat gebruikers eerst de inhoud te zien krijgen. Dit kan echter worden teruggedraaid als uw site een taal heeft die is geschreven in de richting van rechts naar links.

Veel WordPress-sites gebruiken de typische bloglayout met twee kolommen. Eén voor de inhoud en de andere kolom voor de zijbalk.

Als u net een website begint, moet u een WordPress-thema selecteren met de zijbalk op de gewenste locatie.

Veel thema's hebben opties om zijbalkkanten van themainstellingen te veranderen. Als uw thema deze optie echter niet heeft, moet u de zijkanten van de zijbalk handmatig wijzigen.

Dit gezegd hebbende, laten we eens kijken hoe je de zijbalkzijde in WordPress gemakkelijk kunt veranderen met een beetje CSS.

Zijbalkzijde veranderen in WordPress met behulp van CSS

Voordat u wijzigingen in uw thema aanbrengt, moet u eerst overwegen een kindthema te maken. Door een kindthema te gebruiken, kunt u uw ouderthema updaten zonder uw wijzigingen te verliezen.

Ten tweede moet u altijd een back-up maken van uw WordPress-site wanneer u rechtstreeks wijzigingen aanbrengt in uw actieve WordPress-thema.

U hebt een FTP-client nodig om uw themabestanden te bewerken. Raadpleeg onze beginnershandleiding over het gebruik van FTP om bestanden naar WordPress te uploaden.

Maak verbinding met uw WordPress-site met behulp van de FTP-client en ga naar uw themamap. Het bevindt zich meestal op:

/ Yourwebsite / wp-content / themes / your-theme-map /

Nu moet je het belangrijkste stylesheetbestand van je thema downloaden en openen in een gewone teksteditor zoals Notepad. Dit bestand wordt genoemd style.css, en het bevindt zich in de hoofdmap van uw thema.

Zoek in dit bestand de CSS-klasse voor uw zijbalk. Het is meestal .zijbalk. In dit voorbeeld gebruiken we het standaard WordPress-thema Twenty Fifteen met deze CSS om de zijbalk te definiëren:

 .zijbalk float: links; marge-recht: -100%; maximale breedte: 413 px; positie: relatief; breedte: 29,4118%;  

Zoals je ziet zweeft het zijbalkje naar links met een marge van -100% naar rechts. We veranderen het om naar rechts te zweven en naar links te gaan:

 .zijbalk float: right; marge links: -100%; maximale breedte: 413 px; positie: relatief; breedte: 29,4118%;  

Sla uw wijzigingen op en upload style.css-bestand terug naar uw website met behulp van de FTP-client. Als u nu uw website bezoekt, ziet het er als volgt uit:

Dat komt omdat we de zijbalk hebben verplaatst, maar we hebben het inhoudsgebied niet verplaatst. Twenty Fifteen gebruikt deze CSS om de positie van het inhoudsgebied te bepalen.

 .site-inhoud weergave: blok; zweven: links; marge links: 29,4118%; breedte: 70,5882%;  

We zullen het veranderen om de inhoud naar rechts te verplaatsen. Zoals dit:

 .site-inhoud weergave: blok; zweven: links; margin-right: 29,4118%; breedte: 70,5882%;  

Dit is hoe onze website zorgde voor de toepassing van deze CSS.

Zoals u kunt zien, hebben we van kant geschakeld voor zowel content- als zijbalkgebieden. Er is echter nog steeds een wit blok aan de linkerkant.

Je zult zulke dingen tegenkomen wanneer je met CSS werkt. Het vergt wat speurwerk om erachter te komen wat dat veroorzaakt en hoe het aan te passen.

Gebruik het hulpprogramma 'Inspecteren' van uw browser om naar de broncode te kijken. Wijs met de muis naar het getroffen gebied in de browser, klik met de rechtermuisknop en selecteer Inspecteren in browsermenu.

Terwijl u met uw muis in de broncodeweergave beweegt, merkt u dat de gebieden die het beïnvloedt gemarkeerd zijn in de live preview. In het rechterdeelvenster ziet u de CSS die voor dat geselecteerde element is gebruikt.

We kwamen erachter dat deze CSS in ons stylesheet moet worden aangepast.

 @media-scherm en (min-breedte: 59.6875em) body: before background-colour: #fff; box-shadow: 0 0 1px rgba (0, 0, 0, 0.15); inhoud: ""; weergave: blok; hoogte: 100%; minimale hoogte: 100%; positie: vast; boven: 0; links: 0; breedte: 29,4118%; z-index: 0; / * Lost bugs op bij bladeren op Safari * / 

Deze CSS-code voegt een leeg inhoudsblok van 29,4118% breedte en 100% breedte toe aan de linkerbovenkant. Dit is hoe we het naar rechts zullen verplaatsen.

 @media-scherm en (min-breedte: 59.6875em) body: before background-colour: #fff; box-shadow: 0 0 1px rgba (0, 0, 0, 0.15); inhoud: ""; weergave: blok; hoogte: 100%; minimale hoogte: 100%; positie: vast; boven: 0; rechts: 0; breedte: 29,4118%; z-index: 0; / * Lost bugs op bij bladeren op Safari * / 

Na het opslaan en uploaden van het stylesheet terug naar de server, zag onze website er zo uit.

Werken met CSS kan verwarrend zijn voor beginners. Als je niet alle handmatige code wilt doen, probeer dan CSS Hero. Hiermee kun je CSS bewerken zonder een code te schrijven en het werkt met elk WordPress-thema.

We hopen dat dit artikel u heeft geholpen om de zijbalk in WordPress te wijzigen. Misschien wilt u ook onze lijst met 12 WordPress zijbalktrucs zien om maximale resultaten te krijgen.

Als je dit artikel leuk vond, meld je dan aan voor onze YouTube-video-tutorials over WordPress. U kunt ons ook vinden op Twitter en Facebook.