Er is meer dan één manier om aangepaste CSS-code toe te voegen aan een WordPress-blog.

Vandaag zal ik de sterke en zwakke punten van de twee verschillende methoden die ik u voorleg, uitleggen, zodat u de methode kunt kiezen die het beste bij u past.

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.

Hoe u de items kunt vinden die u wilt aanpassen

Als je eenmaal het deel van hebt geïsoleerd uw WordPress-thema dat u wilt wijzigen (bijvoorbeeld de titel van een artikel), moet u CSS-eigenschappen bepalen toegepast, zodat u de juiste wijzigingen kunt aanbrengen. Gelukkig is dit proces niet ingewikkeld.

De CSS gebruikt selectors om te bepalen welke elementen de verschillende specifieke veranderingen zullen ervaren. Gewoonlijk wordt dit gedaan door een " klasse "Van een element (of DOM-element). CSS kan echter ook worden gebruikt om de lay-out van een heel element (bijvoorbeeld de tag " ") of met behulp van de ID van de tag.

Gelukkig stellen populaire browsers ons in staat om met een paar klikken de verschillende selectors en declaraties te zien die op pagina-elementen worden toegepast. In Google Chrome hoeft u bijvoorbeeld alleen een specifiek deel van het document te markeren en vervolgens met de rechtermuisknop te klikken, zoals in het volgende voorbeeld.

blogpascher inspectie

Door te klikken op " Inspecteer het element In het vervolgkeuzemenu dat verschijnt, ziet u de HTML-code van de pagina in een nieuw venster met het geïnspecteerde item gemarkeerd in het venster aan de rechterkant (of lager). U kunt hieronder een voorbeeld te zien.

blogpascher-logo

De teksten van deze elementen (of attributen) Rood gemarkeerd toont u de verschillende specifieke stijlen die van toepassing zijn op het item dat u had gemarkeerd door de code te inspecteren.

Lees ook: Hoe maak je een drop down menu toevoegen met CSS in uw Visual Editor

Bijvoorbeeld het element " letter grootte Geeft aan dat het lettertype dat wordt weergegeven in het gemarkeerde item de grootte heeft van 13 pixels. De descriptors zijn omgeven door accolades en worden voorafgegaan door selectors. De naam van het bijbehorende stylesheet-bestand wordt rechts van de selectors weergegeven.

Zodra u deze informatie in gedachten heeft, wordt het wijzigen van de stijl eenvoudig. Als u bijvoorbeeld het lettertype wilt wijzigen van 13px in 14px, zoekt u gewoon naar uw stylesheetbestand, de selector die overeenkomt met die van het gemarkeerde item. Het is over het algemeen in deze vorm: (« # .block-plugin-inhoud informatie"). U kunt vervolgens de verschillende waarden van de attributen wijzigen.

U kunt hetzelfde doen in Firefox, markeer gewoon een specifiek deel van de pagina, klik met de rechtermuisknop op het item en selecteer ' Inspecteer het element In het menu dat verschijnt.

Hoe WordPress en CSS samen werken

Het is een feit dat de WordPress-thema's worden anders gemaakt. Houd er dus rekening mee dat uw WordPress theme mogelijk niet 100% voldoen aan wat u in de volgende secties leest.

Dat gezegd hebbende, is het meer dan waarschijnlijk dat de CSS die wordt gebruikt op uw WordPress-blog zich bevindt in een bestand met de naam ' style.css " Dit is de algemene naam voor een stylesheet voor elk type website, niet alleen WordPress.

Zie ook: Hoe u de grootte van Gravatar-afbeeldingen op WordPress kunt wijzigen

Nu is het tijd om de verschillende bewerkingsprocessen te doorlopen.

Methode # 1: het stijlbestand van uw WordPress-thema bewerken

Er zijn twee manieren om toegang te krijgen tot het style.css-bestand van uw thema.

De eerste is om het te doen vanaf uw WordPress-dashboard. Selecteer in het menu aan de linkerkant het menu " Apparence "En dan" uitgever .

menu-editor-in-picture-edge

Als u eenmaal op de editorpagina bent, ziet u een lijst met bestanden op een verticale balk aan de rechterkant van de pagina. Blader door de lijst met bestanden. U ziet een bestand met de naam " stylesheet style.css Onderaan de pagina.

Als u op de naam van dit bestand klikt, wordt het geladen en in het midden in de editor weergegeven. U kunt dit scherm gebruiken om het bestand te bewerken.

menu-wordpress-editor-in-code

De andere manier om de stylesheet te vinden, is door het besturingssysteem van uw hostingprovider te bladeren en het bestand te zoeken in de WordPress theme (met behulp van een FTP-client). De exacte locatie is afhankelijk van uw hostingprovider. In het onderstaande voorbeeld is de websitenaam (in ons geval thecare) Is een map in de map public_html.

Aangezien WordPress is geïnstalleerd, kunt u de map wp-content zien in "thecare". De submap wp-content is een andere map met de naam " wp-thema's", waar alle WordPress-thema's zijn geïnstalleerd.

Vanaf deze website gebruikt een thema genaamd " Nieuwsbrief », Het stijlbestand« style.css Bevindt zich in de map ' Parent Nieuwsbrief .

Nieuwsbrief ouder-map-800x401

Methode # 2: een plug-in gebruiken om CSS te wijzigen

Misschien wel de handigste manier om de CSS van uw WordPress-blog te bewerken, is het gebruik van een plug-in.

Een van de belangrijkste voordelen van het gebruik van een plug-in is vergelijkbaar met die van onderliggende thema's. Ja u werkt het WordPress-thema bij, worden uw wijzigingen niet overschreven, aangezien ze afzonderlijk worden opgeslagen en niet tussen de themabestanden. Het andere voordeel is natuurlijk dat u geen child-thema hoeft te maken.

Hier zijn enkele premium plug-ins die u ook kunt gebruiken om de CSS-code van uw WordPress theme :

1. Geel potlood: visuele CSS-stijleditor

Yellow Pencil is een visuele stijleditor die u met elk thema kunt gebruiken om uw website binnen enkele minuten te personaliseren (lettertypen, kleuren, animaties en meer…).YellowPencil Visual CSS Style Editor WordPress plug-in

Ce WordPress Plugin premium maakt CSS-stijlen door achtergrond terwijl je met de kleuren speelt alsof het een spel is.Het is ontworpen voor zowel beginners als ervaren gebruikers.

Ontdek ook onze 5-plug-ins WordPress om meldingen te tonen

Er is geen codeerkennis vereist. echter, de WordPress Plugin heeft een goede CSS-editor voor degenen die graag coderen. U kunt met deze editor live coderen en uw CSS aanpassen.

Downloaden | demonstratie | web hosting

2. Aangepaste JS en CSS voor Gutenberg

Le WordPress Plugin premium aangepaste JS en CSS voor Gutenberg kunt u een onbeperkt aantal aangepaste stijlen toevoegen aan de WYSIWYG-editor voor uw WordPress-berichten en -pagina's. Het is volledig compatibel met de Gutenberg-versie van WordPress.

Aangepaste JS en CSS voor Gutenberg WordPress plug-in

U kunt eenvoudig een nieuwe stijl maken met een eenvoudig te gebruiken CSS-editor. Deze WordPress-plug-in breidt de functies van uit aangepaste velden van uw website en geeft u de mogelijkheid om uw aangepaste velden aan te passen met een dynamische en krachtige personalisatiemodule. en de functionaliteit van realtime voorbeeld van deze WordPress-plug-in maakt het zeer comfortabel en gebruiksvriendelijk.

Downloaden | demonstratie | web hosting

3. CSS SiteOrigin

Het is verreweg de WordPress-plug-in die de meeste opties in deze lijst biedt. Het meest verbazingwekkende aan dat laatste is dat het gratis is. Deze WordPress-plug-in is de enige die niet in de customizer kan worden gevonden.

SiteOrigin CSS - WordPress-plug-in

Na het installeren en activeren van de plug-in, moet u naar de volgende locatie navigeren “ Uiterlijk> Aangepaste CSS Om toegang te krijgen tot de CSS-editie van de plug-in. Op deze pagina ziet u een teksteditor die geen realtime preview biedt. 

Lees ook ons ​​artikel over 10 WordPress plug-ins om de verkoop van uw website te stimuleren

Om toegang te krijgen tot de laatste, moet u op een van de twee knoppen klikken die aan de linkerkant verschijnen, net boven de editor. De knop met een oogpictogram roept een visuele CSS-code-editor op die liefhebbers zullen waarderen. Het pictogram met de extensiepijlen zal een teksteditor weergeven die beheersing van CSS-codes impliceert.

Downloaden | demonstratie | web hosting

4. Eenvoudige Custom CSS

Eenvoudige Custom CSS is een van de meest populaire plug-ins.

Eenvoudige aangepaste CSS - WordPress-plug-in WordPress.org

Ontdek ook onze Hoe u uw blog snel kunt maken: beheer van CSS- en JS-bestanden.

Het is meer dan 100 keer geïnstalleerd en heeft een waardering van vijf sterren gekregen.

Downloaden | demonstratie | web hosting

5. WP toevoegen Custom CSS

WP Voeg aangepaste CSS toe is een plug-in waarmee u dat kunt doen de lay-out van een WordPress-blog wijzigen hele of alleen individuele artikelen. Dit is een geweldige optie als u op zoek bent naar flexibiliteit bij het aanpassen van items.

wp-add-maat

De plug-in is meer dan 10.000 keer gedownload en heeft momenteel een waardering van 4,3 sterren.

Downloaden | demonstratie | web hosting

6. Thema Junkie Custom CSS

Als u op zoek bent naar een oplossing die een live preview van uw wijzigingen biedt, kunt u overwegen om Thema Junkie Aangepaste CSS

thema-junkie-css

Deze oplossing voegt een aangepaste CSS-manager toe aan uw dashboard, waar u uw eigen stijlen kunt toevoegen. Het biedt ook een alternatief voor met een kindthema.

Downloaden | demonstratie | web hosting

Andere aanbevolen bronnen

We nodigen u ook uit om de onderstaande bronnen te raadplegen om verder te gaan in de greep en controle van uw website en blog.

Conclusie

Alstublieft! Dat is alles voor deze tutorial, ik hoop dat het je lukt om aangepaste CSS-code toe te voegen aan je WordPress-blog op twee manieren, als je die hebt commentaires of suggesties, aarzel dan niet om ons te vertellen in de sectie die hiervoor is gereserveerd.

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 of die op Divi: het beste WordPress-thema aller tijden.

Als je dit artikel leuk vond, naarzel niet om deel op uw favoriete sociale netwerken

...