Onlangs vroeg een van onze lezers ons hoe we de zijbalkkant van een WordPress-thema konden wijzigen?
We krijgen deze vraag meestal van gebruikers die de locatie van hun zijbalk van links naar rechts of van rechts naar links willen wijzigen.
In deze zelfstudie laten we u zien hoe u de locatie van de zijbalk op WordPress kunt wijzigen.
Maar eerder, als je WordPress nog nooit hebt geïnstalleerd, ontdek je Hoe maak je een WordPress blog 7 stappen te installeren et Hoe te vinden, installeren en activeren van een WordPress theme op uw blog
Ga dan terug naar waarom we hier zijn.
Waarom de locatie van de zijbalk op WordPress wijzigen?
Bruikbaarheidsexperts geloven dat mensen pagina's van links naar rechts scannen. Ze raden aan om belangrijke inhoud aan de linkerkant te plaatsen, zodat gebruikers deze inhoud als eerste zien. Dit kan echter worden teruggedraaid als uw website in een RTL-taal is (rechts aan de linkerkant).
Zoek uit of moet uw WordPress-blog zijbalken hebben
Veel WordPress-websites gebruiken de typische bloglay-out met twee kolommen. Een voor de inhoud en de andere kolom voor de zijbalk.
Als u nieuw bent bij websites, moet u een WordPress-thema selecteren met een zijbalk op de gewenste locatie.
Veel WordPress-thema's bieden opties om de zijbalkzijde in de zijbalkinstellingen te wijzigen. Als uw WordPress-thema deze optie echter niet heeft, moet u de zijbalkzijde handmatig wijzigen. Ga verder door te ontdekken hoe de zijbalk op WordPress te verwijderen
Dat gezegd hebbende, laten we eens kijken naar de methode die u moet gebruiken om de zijbalk van WordPress gemakkelijk te wijzigen met behulp van CSS.
De zijbalk wijzigen met CSS
Voordat u wijzigingen aanbrengt in uw WordPress-thema, moet u eerst het een kindthema maken. Door een kindthema te gebruiken, kunt u uw ouderthema bijwerken zonder uw wijzigingen te verliezen.
Ontdek Hoe maak je een ander sidebar voor elk item op WordPress display
Ten tweede moet u altijd een back-up maken van uw WordPress-website wanneer u realtime wijzigingen aanbrengt in uw actieve thema.
U hebt een FTP-client nodig om de WordPress-themabestanden te bewerken. Raadpleeg het handleiding over het gebruik van FTP.
Log in op uw WordPress-website met behulp van de FTP-client en navigeer naar de themamap. Het bevindt zich meestal op:
/ Yoursite / wp-content / themes / your-theme-map /
Nu moet u het hoofdstijlbladbestand van uw WordPress-thema downloaden en openen in een teksteditor zoals Kladblok. Dit bestand heet style.css, en het bevindt zich in de hoofdmap van uw WordPress-thema.
Ontdek hoe WordPress-bestanden en mappen te beheren
Zoek in dit bestand de CSS-klasse van uw zijbalk. Over het algemeen is deze klasse " sidebar ". In dit voorbeeld gebruiken we het standaard WordPress-thema " twintig vijftien Wie heeft deze les voor de zijbalk:
.sidebar {float: links; marge-rechts: -100%; max-breedte: 413px; positie: relatief; breedte: 29.4118%; }
Zoals u ziet, zweeft de zijbalk naar links met een marge van -100%. We zullen de vlotter naar rechts veranderen:
.sidebar {float: rechts; marge-links: -100%; max-breedte: 413px; positie: relatief; breedte: 29.4118%; }
Sla uw wijzigingen op en upload het style.css-bestand naar uw website met behulp van een FTP-client. Als u nu uw website bezoekt, ziet deze er als volgt uit:
We hebben inderdaad de zijbalk verplaatst, maar we hebben het inhoudsgebied niet verplaatst. " twintig Vijftien Gebruikt deze CSS om de positie van het inhoudsgebied te definiëren.
.site-content {display: block; zweven: links; marge-links: 29.4118%; breedte: 70.5882%; }
We zullen het veranderen om de inhoud naar rechts te verplaatsen. Als volgt:
.site-content {display: block; zweven: links; marge-rechts: 29.4118%; breedte: 70.5882%; }
Zo ziet uw website eruit na het toepassen van deze CSS-code.
Zoals u kunt zien, hebben we de locatie van het inhoudsgebied en de zijbalk gewijzigd. Er is echter nog steeds een wit blok aan de linkerkant.
Ga verder door te ontdekken hoe WordPress-bestanden en mappen te beheren
U zult deze fouten vaak tegenkomen bij het werken met CSS. Er is wat speurwerk nodig om te begrijpen wat dit veroorzaakt en hoe dit te verhelpen.
Gebruik de "Inspector" -tool van uw browser om de broncode te bekijken. Wijs met uw muis naar het getroffen gebied in de browser, klik met de rechtermuisknop en selecteer "Inspector" in het browsermenu.
Terwijl u met uw muis door de broncodeweergave beweegt, ziet u de gebieden die het beïnvloedt gemarkeerd in het live voorbeeld. In het rechterdeelvenster kunt u de CSS zien die voor dat geselecteerde element is gebruikt.
Ontdek onze 5 WordPress plug-ins om CSS op uw blog visueel te bewerken
De CSS die overeenkomt met het gemarkeerde item moet dus opnieuw worden aangepast.
@media-scherm en (min-width: 59.6875em) {body: before {background-color: #fff; box-schaduw: 0 0 1px rgba (0, 0, 0, 0.15); blij: ""; weergave: blok; hoogte: 100%; min-hoogte: 100%; positie: vast; boven: 0; links: 0; breedte: 29.4118%; z-index: 0; / * Corrigeert knipperende bug met scrollen in Safari * /}
Deze CSS-code voegt linksboven een leeg blok van 29,4118% breedte en een breedte van 100% toe. Hier is hoe we het naar rechts gaan verplaatsen.
@media-scherm en (min-width: 59.6875em) {body: before {background-color: #fff; box-schaduw: 0 0 1px rgba (0, 0, 0, 0.15); blij: ""; weergave: blok; hoogte: 100%; min-hoogte: 100%; positie: vast; boven: 0; rechts: 0; breedte: 29.4118%; z-index: 0; / * Corrigeert knipperende bug met scrollen in Safari * /}
Na het opslaan en uploaden van de stylesheet naar de server, is dit hoe uw website eruit zal zien.
Werken met CSS kan voor beginners verwarrend zijn. Als u niet al het handmatige werk wilt doen, kunt u het proberen WordPress CSS Hero-plug-in. Hiermee kunt u CSS bewerken zonder code te schrijven, en het werkt met elk WordPress-thema.
Ontdek ook enkele premium WordPress-plug-ins
U kunt andere gebruiken WordPress plugins om een moderne uitstraling te geven en de afhandeling van uw blog of website te optimaliseren.
We bieden je hier enkele premium WordPress-plug-ins die je daarbij kunnen helpen.
1. Zxeion
Zxeion is een krachtige WordPress Plugin premium verantwoordelijk voor het verbeteren van de beveiliging van uw website. Deze plug-in bevat een verzameling beveiligings- en beveiligingstools die uw website beschermen tegen mogelijke aanvallen.
Het realtime beveiligingssysteem helpt u om bedreigingen voor uw website te identificeren en te blokkeren, zonder dat u iets hoeft te doen.
Ontdek ook onze 7 plug-ins om uw zijbalken op WordPress te stimuleren
De kenmerken zijn: realtime bescherming, uitstekende klantenondersteuning, regelmatige updates, IP-adresblokkering, uitstekende documentatie, moderne en professionele interface, toegewijde klantenondersteuning en meer
Downloaden | demonstratie | web hosting
2. Slaido
Slaido is een WordPress Plugin premium waarmee u kunt kiezen uit bijna 320 responsieve slider-sjablonen en er een met slechts een paar klikken in uw website kunt importeren. Het is een compleet pakket sjablonen, perfect voor Slider Revolution. Je zult het dus eerst moeten installeren om hiervan volledig gebruik te kunnen maken WordPress Plugin
De belangrijkste kenmerken zijn: een responsieve lay-out van de schuifregelaars, het gemak van het importeren of exporteren van schuifregelaars, regelmatige updates, klantenondersteuning 24/7 beschikbaar, vloeiende en zeer coole animaties, de beschikbaarheid van videohandleidingen voor een snelle start, ondersteuning voor Google Fonts en nog veel meer.
Downloaden | demonstratie | web hosting
3. Neem contact met ons op Formulier
Contactformulier is een premium responsieve WordPress-plug-in en een eenvoudige tool, maar rijk aan aanpassingsopties waarmee u een duidelijk en bemoedigend formulier kunt weergeven waarop uw bezoekers contact met u kunnen opnemen door hun bericht achter te laten.
U kunt de benodigde velden definiëren, de beste lay-out van de velden kiezen en deze volledig aanpassen om uw klanten of bezoekers aan te moedigen hun suggesties of berichten achter te laten.
We nodigen u ook uit om te lezen: 10 WordPress plug-ins om een restaurantwebsite te maken en beheren
Stel gewoon het e-mailadres in waar u de berichten wilt ontvangen en gebruik dit om uw bedrijf in de meest winstgevende richting te laten groeien.
Downloaden | demonstratie | web hosting
Aanbevolen bronnen
Lees meer over andere aanbevolen bronnen om u te helpen bij het bouwen en beheren van uw website.
- Hoe de inlog-URL van uw WordPress-blog te vinden
- Hoe maak je een superheldzone met geanimeerde tekst
- Hoe de CSS van uw WordPress-website aan te passen
- Hoe kan ik categorieën toe te voegen aan het menu van uw WordPress blog
Conclusie
Hier! Dat is het voor deze tutorial. We hopen dat het je helpt om de zijbalk van je WordPress-blog te wijzigen. Aarzel niet om deel dit artikel met je vrienden op je favoriete sociale netwerken.
U kunt echter ook onze ressources, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie.
Als u suggesties of opmerkingen heeft, laat ze dan achter in onze rubriek commentaires.
...
