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

Welk WordPress-thema je ook kiest voor je website, andere websites zullen het ook gebruiken. En zelfs met de talloze aanpassingsmogelijkheden die veel WordPress-thema's tegenwoordig bieden, kun je je website nog unieker maken.

voor vraiment Om het uiterlijk van je WordPress-thema echt te verbeteren, moet je verder gaan dan de standaard aanpassingsmogelijkheden die de thema-opties en -instellingen bieden. Door de CSS van je WordPress-blog aan te passen, kun je het uiterlijk veranderen en het echt uniek maken.

In deze tutorial bekijken we de verschillende methoden die beschikbaar zijn om uw website aan te passen met CSS, het maken en aanpassen van child-thema's, het gebruiken van ingebouwde WordPress Customizer-plug-ins en WordPress CSS-plug-ins.

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 betekent Cascading Style Sheetswat al net zo onduidelijk is als het acroniem. Dus we gaan het even uitleggen.

Een stylesheet is een document dat stijlen beschrijft (zoals lettertype, kleuren, enz..) te gebruiken voor de presentatie van een ander document. In ons geval gaat het om een ​​webpagina-stijl.

Het onderdeeltrapsgewijzeDe naam zelf draagt ​​bij aan de kracht ervan. Webpagina's kunnen worden ontworpen met meerdere stylesheets, als een soort waterval, waarbij de stylesheet op een lager niveau de stijlen van een stylesheet op een hoger niveau aanvult of overschrijft. Dit is belangrijk omdat de manier waarop je stijlen toevoegt, de oorspronkelijke wijzigingen overschrijft.

Hoewel het misschien simpel lijkt, kan CSS worden gebruikt om vrijwel elk aspect van een webpagina aan te passen.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

De meeste WordPress-thema's gebruiken 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 ​​toe te voegen. 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 je beter begrijpt wat CSS is en hoe WordPress-thema's het gebruiken, gaan we kijken naar de opties die je kunt gebruiken om je 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 het beste bij uw WordPress-thema past.

Optie # 1: CSS aanpassen met een kindthema

Als u gebruik maken van un kind thema Om je CSS-code aan te passen, zijn de eerder besproken thema-updates geen probleem meer. Een WordPress-thema-update heeft invloed op het thema.ouderDe wijzigingen in je child theme blijven intact. Veel WordPress-themaontwikkelaars begrijpen het nut van een child theme.

Ontdek Wanneer en hoe om WordPress installeren in een subdirectory

Het maken van een child theme is vrij eenvoudig. Het houdt in dat je een map op je webhosting aanmaakt met daarin een bestand. 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 Bevat meer informatie over het maken van subthema's.

Zodra je je child theme hebt aangemaakt en succesvol hebt geactiveerd, kun je je WordPress-thema gaan aanpassen. De snelste manier om dit te doen is door het themabestand 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 methode houdt in dat je de editor in het WordPress-dashboard gebruikt door te klikken op 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 zal helemaal onderaan de lijst staan, en door op de optie te klikken Stijlblad jouw bestand style.css zal opladen.

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

Een 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 map van het child theme die je hebt aangemaakt, 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 plugin voor CSS-aanpassing is dat je de plugin behoudt, zelfs als je van WordPress-thema verandert. Dit heeft echter ook nadelen, omdat de stijlen mogelijk niet correct worden weergegeven in 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, waarschijnlijk ook op die van jou. Het biedt functies die beschikbaar zijn op WordPress.com voor zelfgehoste websites, en biedt ook een module voor CSS-aanpassing.

Zodra de module is geactiveerd in het Jetpack-dashboard, is er een aangepaste CSS-editor beschikbaar waarmee u uw WordPress-thema kunt aanpassen zonder een child-thema te hoeven maken. U kunt de editor openen via dit pad: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 plugin vereist geen configuratie; installeer en activeer hem gewoon. Om je CSS-code te bewerken, ga je naar "Uiterlijk> Aangepaste CSS" Ga naar het WordPress-dashboard. Pas je CSS-wijzigingen toe in het tekstveld en sla vervolgens je instellingen op.

3. CSS Hero (vanaf $ 14 per jaar)

De laatste WordPress-plugin die we vandaag bekijken is een premium WordPress-plugin 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 maakt het overbodig om CSS-syntaxis te begrijpen door de interactie met code te vereenvoudigen via een gebruiksvriendelijke interface. Dit geldt ook voor animaties en overgangen. Je kunt je wijzigingen bovendien in realtime 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 je weet dat content belangrijk is, wil je natuurlijk toch dat je website zich onderscheidt van de rest, zelfs als je een populair WordPress-thema gebruikt. Met CSS kun je het ontwerp van je website volledig aanpassen en uniek maken.

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 WordPress-plug-ins gebruiken om een ​​moderne look te geven en de grip 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 u hiermee uw campagne kunt verbeteren en uw winst kunt maximaliseren. Deze AdSense WordPress-plugin beschikt ook over een unieke functie genaamd achtergrondadvertenties. Hiermee kunt u advertenties als achtergrond bij uw content weergeven.

Plus, omdat het compatibel is met plug-ins zoals WPBakery et Slider RevolutionJe kunt je advertenties weergeven als sliders of ze overal op je website plaatsen.

Downloaden | demonstratie | web hosting

2. WP Media File Manager

WP Media File Manager is een WordPress-plugin waarmee je je mediabibliotheek eenvoudig in een hiërarchische structuur kunt organiseren met behulp van drag-and-drop-functionaliteit. Het is een van de krachtigste bestandsbeheerplugins op CodeCanyon. Je hoeft zelfs geen mappen meer handmatig aan te maken.

Met deze WordPress-plugin kunt u duizenden bestanden van de bestandsbeheerder van uw pc naar uw website uploaden door automatisch de bronmapstructuur te kopiëren. Als u hetzelfde bestand in verschillende mappen wilt hebben, beschikt u nu over een volwaardige mediabibliotheek die deze functionaliteit biedt.

Zeg vaarwel tegen problemen met het downloaden van specifieke bestandstypen; u hoeft nu alleen nog maar deze WordPress-plugin te installeren en deze helpt u bij het beheren van uw bestanden.

Downloaden | demonstratie | web hosting

3. Held Menu

Hero Menu is een WordPress megamenu-plugin. Hoewel het geen bijzonder heroïsche functies biedt, levert het wel alle benodigde functionaliteiten voor slechts $19. Net als Mega Main Menu is het een aanbevolen product op CodeCanyon en heeft het tot nu toe bijna 4500 verkopen.

In het gedeelte met functies zul je snel merken dat het vrij eenvoudig is om een ​​te maken. megamenu. Het proces duurt slechts enkele stappen. Maar bovendien zult u merken dat de plug-in compatibel is met WooCommerceHet biedt een responsief ontwerp en een 'drag and drop'-interface voor het maken van menu's.

De menubouwer verbetert de gebruiksvriendelijkheid van de plugin en vereenvoudigt het werk voor de koper aanzienlijk. De integratie met de gebruikersinterface is ook uitstekend en werkt naadloos samen met andere plugins.

Downloaden | demonstratie | web hosting

Aanbevolen bronnen

Ontdek andere aanbevolen hulpmiddelen die u kunnen helpen bij het maken 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 was alles 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.

...