Hoe pas je de CSS van je WordPress-website aan? Ontdek het in dit artikel.

Welk WordPress-thema u ook kiest voor uw website, er zullen andere websites zijn die het zullen gebruiken. En zelfs ondanks de vele aanpassingsmogelijkheden die door velen worden aangeboden WordPress-thema's tegenwoordig kun je je website nog unieker maken.

voor vraiment Om het visuele aspect van uw WordPress-thema aan te raken, moet u verder gaan dan de standaardaanpassing die wordt geboden door de opties of instellingen van een WordPress-thema. Met CSS-aanpassing van uw WordPress-blog kunt u deuiterlijk van uw website om het echt uniek te maken.

In deze zelfstudie wordt gekeken naar de verschillende methoden die voor u beschikbaar zijn om uw website aan te passen met CSS, onderliggende thema's te maken en aan te passen, met behulp van ingebouwde WordPress Customizer-plug-ins en WordPress plugins van CSS.

Maar voordat u begint, neem de tijd om een ​​kijkje te nemen Hoe maak je een WordPress thema te installeren, Hoeveel plugins moet ik installeren op WordPress.

Ontdek dan samen onze lijst.

CSS: de basis en hoe WordPress ze gebruikt

Allereerst: CSS staat voor Cascading Style Sheets, wat niet duidelijker is dan het acroniem. Dus laten we het opsplitsen.

Een stylesheet is een document dat stijlen beschrijft (zoals lettertype, kleuren, enz..) om te worden gebruikt voor de presentatie van een ander document. In ons geval hebben we te maken met een stijl van de webpagina's.

Het onderdeeltrapsgewijzeVan de naam maakt deel uit van wat het echt krachtig maakt. Webpagina's kunnen worden ontworpen met meerdere stijlbladen, zoals een waterval, waarbij het onderste blad stijlen van een hoger niveau toevoegt of vervangt. Dit is belangrijk omdat de manier waarop u uw stijlen toevoegt, de oorspronkelijke wijzigingen overschrijft.

Hoe eenvoudig het ook klinkt, CSS kan worden gebruikt om vrijwel alles op een webpagina te wijzigen (inclusief lay-out, kleuren, lettertypen en zelfs animaties).

Leer hoe u uw meldingen kunt beheren door te ontdekken Hoe kan ik e-mailberichten op WordPress beheren

Meest WordPress-thema's gebruik een CSS-code die beschikbaar is in een bestand met de naam style.css. Als u dit bestand opent, ziet u een volledige lijst met stijlregels voor uw WordPress-thema. Wat je ook doet, wijzig dit bestand niet! De updates zullen uw wijzigingen overschrijven.

Er zijn verschillende manieren om een aangepaste CSS-code aan uw WordPress-thema, zodat uw wijzigingen een update van het WordPress-thema overleven.

Hoe u uw WordPress-website kunt aanpassen met CSS

Nu u beter begrijpt wat CSS is en hoe u dat moet doen WordPress-thema's Als u ze gebruikt, bekijken we de opties die u kunt gebruiken om uw WordPress-blog aan te passen, en bespreken we de voor- en nadelen van elke methode.

Aan het einde van ons werk kunt u bepalen welke methode overeenkomt met uw WordPress-thema.

Optie # 1: CSS aanpassen met een kindthema

Als u gebruik maken van un kind thema om uw CSS-code aan te passen, zullen updates van de thema's waar we het eerder over hadden geen probleem meer zijn. Een update van een WordPress-thema heeft invloed op het thema "ouder», De wijzigingen aan het thema van uw kind intact laten. Veel WordPress-thema-ontwikkelaars begrijpen het nut van een child-thema.

Ontdek Wanneer en hoe om WordPress installeren in een subdirectory

Het maken van een child-thema is vrij eenvoudig. Het bestaat uit het aanmaken van een map op uw webhosting die een bestand bevat style.css die het bovenliggende thema als een sjabloon weergeeft en een bestand importeert style.css van het hoofdthema (herinner je je de betekenis van 'cascading' style sheets?).

WordPress Codex heeft meer informatie over het maken van kindthema's.

Nadat je je child-thema hebt gemaakt en correct hebt geactiveerd, kun je beginnen met het aanpassen van je WordPress-thema. De snelste manier is om uw bestand te bewerken style.css, die op twee manieren toegankelijk is.

Bekijk dit artikel om te ontdekken Hoe u uw CSS-, HTML- en Javascript-bestanden comprimeert

De eerste is om de editor in het WordPress-dashboard te gebruiken door op te klikken Uiterlijk> Editor. L 'editor geeft rechts een lijst met bestanden weer die beschikbaar zijn in het thema (Alleen populaire bestanden worden weergegeven). Jouw bestand style.css staat helemaal onderaan de lijst en klikt op de optie Stijlblad jouw bestand style.css zal opladen.

U kunt uw wijzigingen aan deze locatie toevoegen en de wijziging opslaan.

De andere manier om toegang te krijgen tot uw bestand style.css (degene die wij aanraden) is om door de bestanden in uw webhosting te bladeren via een FTP-client of een bestandsbeheerder. De onderliggende themamap die u heeft gemaakt, bevindt zich in de map ' wp-content> thema's« . U kunt een teksteditor gebruiken om het bestand te bewerken style.css.

Optie 2: pas de CSS aan vanuit de Customizer

Vanaf WordPress 4.7 kunnen gebruikers aangepaste CSS rechtstreeks vanuit het WordPress-beheergebied toevoegen. Het is supergemakkelijk en u zou uw wijzigingen kunnen zien met een realtime voorbeeldweergave.

Eerst moet je naar de pagina gaan Thema's »Aanpassen.

Hiermee wordt de interface voor het aanpassen van WordPress-thema's gestart.

U ziet de real-time preview van uw website aan de rechterkant met een heleboel opties in het linkerdeelvenster. Klik op het tabblad extra CSS in het linkerdeelvenster.

Het tabblad zal verschuiven om u een eenvoudig gebied te tonen waar u uw aangepaste CSS kunt toevoegen. Zodra u een geldige CSS-regel toevoegt, kunt u deze zien toepassen in het realtime voorbeeldvenster van uw website.

U kunt doorgaan met het toevoegen van aangepaste CSS-code, totdat u tevreden bent met hoe deze eruitziet op uw website. Vergeet niet op de " Opslaan en publiceren Bovenaan als je klaar bent.

Let op: Elke aangepaste CSS die u toevoegt met de Customizer, is alleen beschikbaar met dat specifieke WordPress-thema. Als u het met andere thema's wilt gebruiken, moet u met dezelfde methode kopiëren en in uw nieuwe thema plakken.

Optie # 3: CSS aanpassen met een plug-in

Het voordeel van het gebruik van een plug-in voor CSS-aanpassing is dat u de plug-in behoudt, zelfs als u een WordPress-themawijziging aanbrengt. Dit heeft zijn nadelen, aangezien stijlen niet goed kunnen worden weergegeven op alle WordPress-thema's.

Hier zijn enkele plugins:

1. Aangepaste CSS in Jetpack (gratis)

De WordPress plugin jetpack  is geïnstalleerd op meer dan een miljoen WordPress-websites, en waarschijnlijk ook die van jou. Het brengt functies beschikbaar op WordPress.com voor zelfgehoste websites, en biedt ook een module voor CSS-aanpassing.

Zodra de module is geactiveerd in het Jetpack-dashboard, zal een aangepaste CSS-editor beschikbaar zijn, waarmee u uw WordPress-thema kunt aanpassen zonder een child-thema te maken. U opent de editor door dit pad te volgen " Uiterlijk> CSS bewerken« .

2. Eenvoudige aangepaste CSS (gratis)

Als u een stand-alone optie wilt, Eenvoudige Custom CSS is een goede keuze. Deze gratis plug-in, gebruikt op meer dan 200.000-websites met een beoordeling van 4,9-sterren, zal u zeker helpen uw CSS WordPress-blog te personaliseren.

Deze plug-in vereist geen configuratie, u hoeft alleen de plug-in te installeren en te activeren. Om uw CSS-code te wijzigen, gaat u naar " Uiterlijk> Aangepaste CSS«  in het WordPress-dashboard. Pas uw CSS-wijzigingen toe in het tekstvak en sla uw instellingen op als het klaar is.

3. CSS Hero (vanaf $ 14 per jaar)

De laatste optie van de WordPress-plug-in die we vandaag bekijken, is een premium WordPress-plug-in genaamd CSS Hero. Van 14 $ per jaar voor één website kunt u met deze plug-in uw WordPress-thema aanpassen met een intuïtieve interface.

Ontworpen om het beste mee te werken tientallen compatibele WordPress-thema's , CSS Hero geeft u volledige controle over alle elementen van uw WordPress-thema. Voor thema's die niet op hun lijst staan, kunt u de Raketmodus om CSS Hero-aanpassing in te schakelen.

CSS Hero neemt de noodzaak weg om CSS-syntaxis te begrijpen door de interactie met code via een interface te vereenvoudigen, en dit geldt voor animaties en overgangen. U kunt ook in realtime een voorbeeld van uw wijzigingen bekijken en terugkeren naar een eerdere versie.

Ontdek Hoe opmerkingen van het ene artikel naar het andere op WordPress te verplaatsen

Als je de CSS van je WordPress-blog volledig wilt veranderen, maar geen CSS wilt leren, is CSS Hero een geweldige optie om je website aan te passen, vooral als je een van hun WordPress-thema's gebruikt.

Hoewel u weet dat inhoud belangrijk is, wilt u dat uw website zich onderscheidt van de massa, zelfs als u een populair WordPress-thema gebruikt. Met CSS kunt u het ontwerp van uw website aanpassen, zodat deze volledig uniek is.

Ga verder door te ontdekken Hoe om gebruikers in staat om bepaalde pagina's te bewerken

Er zijn dus verschillende manieren om de CSS van uw WordPress-thema aan te passen:

1. een kinderthema.
2. de Customizer.
3. een CSS-plugin.

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. Adning Advertising

WP PRO Advertising System is een plug-in voor WordPress-advertentiebeheer, die 18 strategische locaties biedt om u te helpen advertenties op uw website weer te geven. Het heeft ook een gedetailleerd gedeelte met statistieken waaruit u de prestaties van elke advertentie kunt zien.

Deze functie is cruciaal omdat het u helpt uw ​​campagne te verbeteren en uw winst te maximaliseren. Deze WordPress Adsense-plug-in wordt ook geleverd met een unieke functie die achtergrondadvertenties wordt genoemd. Hiermee kunt u advertenties weergeven als achtergrond voor uw inhoud.

Plus, omdat het compatibel is met plug-ins zoals WPBakery et Slider Revolution, kunt u uw advertenties weergeven in de vorm van schuifregelaars of ze overal op uw website plaatsen.

Downloaden | demonstratie | web hosting

2. WP Media File Manager

WP Media File Manager is een WordPress-plug-in die het gemakkelijk maakt om de mediabibliotheek in een vorm van hiërarchie te organiseren met behulp van de Drag and Drop-functionaliteit. Het is een van de WordPress plugins de krachtigste bestandsbeheerder op CodeCanyon. U hoeft niet eens handmatig mappen te maken.

Met deze WordPress-plug-in kunt u duizenden bestanden van de bestandsbeheerder van uw pc naar de website uploaden door automatisch de hiërarchie van de bronmap te kopiëren. Als u hetzelfde bestand in verschillende mappen wilt hebben, weet dan dat u nu een echte mediabibliotheek heeft die deze functionaliteit biedt.

Zeg vaarwel tegen problemen met het downloaden van specifieke bestandstypen, nu hoef je alleen maar deze WordPress-plug-in te installeren en deze je te laten helpen bij het beheren van je bestanden.

Downloaden | demonstratie | web hosting

3. Held Menu

Hero Menu is een megamenu WordPress-plug-in. En hoewel het niet veel heroïsch doet, heeft het wel alle noodzakelijke functies voor slechts $ 19. Een beetje zoals Mega Main Menu, het is een plug-in die ook producten bevat die op CodeCanyon voorkomen en die momenteel bijna 4500 verkopen op zijn naam heeft staan.

In het gedeelte met functies zult u snel merken dat het vrij eenvoudig is om een megamenu. Het proces duurt slechts enkele stappen. Maar bovendien zult u merken dat de plug-in compatibel is met WooCommerce, biedt een responsief ontwerp en een "slepen en neerzetten" -interface om de menu's te maken.

De menu-bouwer verbetert het gebruik van de plug-in en vereenvoudigt het werk van de koper aanzienlijk. UI-integratie is ook een geweldige klus en de UI gedraagt ​​zich perfect met andere plug-ins.

Downloaden | demonstratie | web hosting

Aanbevolen bronnen

Lees meer over andere aanbevolen bronnen om u te helpen bij het bouwen en beheren van uw website.

• Een formulier beveiligen met een wachtwoord in WordPress
• Hoe maak je mooie overgangen van pagina's op WordPress te creëren
• Hoe de WordPress REST API te gebruiken
• Hoe uw WordPress-website aan Telegram te koppelen
• Hoe WordPress in een paar stappen schoon te maken

Conclusie

Hier! Dat is het voor deze tutorial. We hopen dat deze tutorial je heeft laten zien hoe je de CSS van je WordPress-website kunt aanpassen. Aarzel niet om deel 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.

...