Hoe een WordPress thema aan te passen met CSS
wanneer u wilt leren hoe u een WordPress thema aan te passen met CSS, een van de eerste dingen die je moet weten is hoe je bestanden te bewerken binnen het thema zelf.
het proces voor het bewerken van themabestanden is effectief hetzelfde, of u nu op zoek bent naar CSS of HTML aan te passen, en in eerdere tutorials in deze serie hebben we dit proces al behandeld, met het doel om HTML te wijzigen.
Dus om te voorkomen dat loopvlakvernieuwing dezelfde grond, een kijkje nemen bij “het Bewerken van HTML-code in een WordPress Theme” en “Hoe Installeer ik WordPress Lokaal Met XAMPP” om meer te leren over:
- Het bewerken van bestanden door middel van de thema-editor
- het Downloaden en uploaden van bestanden via FTP of externe verbinding
- Waarom u zou moeten overwegen het maken van uw wijzigingen binnen een child theme
- Bewerken offline via XAMPP
Met de methoden van het bewerken van de thema bestanden al onder, in deze tutorial zullen we blijven gericht op het bewerken van css in WordPress door te leren over deze onderwerpen:
- hoe aangepaste CSS toe te voegen via de theme customizer
- hoe de stylesheet(s) te identificeren een thema gebruikt
- hoe te identificeren welke CSS moet worden gewijzigd, en waar, om een specifiek deel van een thema aan te passen
Opmerking: Dit artikel gaat ervan uit dat u een basiskennis van CSS hebt, maar niet noodzakelijkerwijs over hoe CSS in WordPress te bewerken.
Premium WordPress thema ’s en Plugins
voordat we beginnen, vergeet niet dat je de duizenden WordPress thema’ s op ThemeForest en WordPress plugins op CodeCanyon kunt verkennen. Koop deze hoogwaardige WordPress thema ‘ s en plugins en het verbeteren van uw website ervaring voor u en uw bezoekers.
CSS bewerken in het WordPress Theme Customizer
WordPress heeft een speciaal gebied waarin u uw eigen CSS-code kunt toevoegen. Deze code zal worden geladen op het juiste moment om ervoor te zorgen dat het overschrijft de standaard styling van het thema, en met behulp van deze aanpak maakt geen directe wijzigingen aan thema-bestanden.
In de linker zijbalk menu van uw WordPress admin panel, ga naar Uiterlijk > Aanpassen:
Dit zal u het thema aanpassing gebied, waar u kunt klikken op het menu-item Extra CSS:
EEN groot veld zal verschijnen, waarin u kunt toevoegen aangepaste CSS-je wilt:
Sla uw wijzigingen op door op de blauwe knop Publiceren te klikken boven aan de linkerzijbalk als u klaar bent met het toevoegen van aangepaste code.
hoe de stijlbladen van een thema te identificeren
Als u het Additonale CSS-gebied niet wilt gebruiken in de Theme Customizer, en in plaats daarvan de CSS-thema ‘ s direct wilt bewerken, moet u een manier vinden om uit te vinden welke bestanden een thema daadwerkelijk gebruikt voor het stylen.
in de meeste gevallen gebruiken thema ‘ s de standaardstructuur voor WordPress en hebben ze een bestand met de naam “style.css ” in de hoofdmap van het thema. In feite is dit een essentieel thema bestand, zodat u het altijd in elk thema zal vinden.
echter wanneer u het opent voor het bewerken kunt u vinden dat het leeg is van code, en de ontwikkelaar is het laden van styling van elders in het thema. Of, je kan zelfs vinden dat ze worden geladen in meerdere stylesheet bestanden.
er zijn twee manieren om te controleren welke stijlbladen door een thema worden gebruikt.
Inspectiekop Code
de eerste methode is het inspecteren van de <head> code van het thema. U kunt dit doen door ergens met de rechtermuisknop op de pagina te klikken en de bron van de pagina weergeven te kiezen en vervolgens de <head>...</head> – tags te zoeken.
tussen deze tags, zoek naar <link> elementen die ook rel='stylesheet'hebben. Kijk dan om te zien welke van die komen uit de directory van uw thema. De URL ‘ s van de stylesheets zullen u vertellen waar in het thema structuur om ze te vinden.
merk op dat als u een plugin gebruikt die alle stylesheets van uw site in één bestand combineert en verkleint, deze techniek niet zal werken, omdat u alleen de URL van dat ene bestand ziet. In plaats daarvan, gebruik techniek twee, het controleren van de functies bestand.
controle van het Functiebestand
wanneer een thema een stylesheet gebruikt, moet het WordPress vertellen welk bestand het wil gebruiken, via een functie genaamd wp_enqueue_style(). Zo kunnen we precies zien welke stylesheet (s) het thema laadt door het vinden van het gebruik van deze functie.
elk thema heeft een bestand met de naam “functions.php ” zich in de root directory. Gebruik van de wp_enqueue_style() functie is typisch in dit bestand, dus open het en begin te zoeken naar de functienaam.
wanneer u instanties van de functie wp_enqueue_style() zoekt, zoekt u tussen de haakjes naar de tweede parameter, dat wil zeggen het stukje tekst na de eerste komma. Die tekst toont je de locatie van het stylesheet. Bijvoorbeeld:
wp_enqueue_style('main-style', get_template_directory_uri() . '/css/mainstyle.css');
in de bovenstaande code is de tweede parameter:
get_template_directory_uri() . '/css/mainstyle.css')
dit vertelt ons dat het stylesheet zich in een submap thema bevindt met de naam “css”, en dat de bestandsnaam “mainstyle” is.css”.
hoe te bepalen welke CSS gewijzigd moet worden
Als u eenmaal weet hoe u aan themacss kunt toevoegen of bewerken, is het volgende wat u moet leren hoe u kunt achterhalen welke code u eigenlijk moet wijzigen.
de beste manier om dit te doen is het gebruik van de developer tools in uw browser, idealiter Chrome of Firefox vanwege de kwaliteit van hun tools.
stel dat u bijvoorbeeld de lettergrootte van uw posttitels wilt wijzigen. Klik met de rechtermuisknop op een van de post titels en selecteer de optie inspecteren:
dit opent het paneel ontwikkelaarstools. Zoek in het tabblad Stijlen naar een eigenschap font-size.
als u er geen ziet, kan de browser u een ouder-of dochterelement tonen, dus probeer in het tabblad elementen op nabijgelegen elementen te klikken totdat u een element vindt dat de vorm van de tekst van de posttitel nauwkeurig markeert en een eigenschap font-size heeft:
Probeer nu op het tabblad Stijlen de waarde voor de eigenschap font-size te wijzigen. Als u de tekst grootte te wijzigen in het browservenster Weet je dat je de juiste CSS gevonden.
om te weten te komen waar in het stylesheet deze CSS zich bevindt, kijk dan rechtsboven op de plaats waar u zojuist de waarde font-size hebt bewerkt. Je zou een bestandsnaam moeten zien, dan een dubbele punt, dan een getal.
de bestandsnaam geeft aan in welk stylesheet de code zich bevindt, en het nummer na de dubbele punt geeft aan op welke regel je die code zult vinden. Bijvoorbeeld, de afbeelding hierboven toont code uit de ” stijl.CSS ” bestand op lijn 4054. Als u het thema stylesheet direct bewerkt, kunt u het nu openen, naar het regelnummer in kwestie gaan en de CSS wijzigen.
als u in het extra CSS-veld van de Theme Customizer werkt, of binnen een dochterthema, moet u ook dezelfde selector als de originele CSS richten, zodat u deze kunt overschrijven met uw eigen styling.
terug in de browser ontwikkeltools, zoek naar de selector die boven de eigenschap font-size staat die u zojuist hebt gewijzigd. Het is aan de linkerkant van het stylesheet-bestand en de regelnummerspecificatie die we net bekeken hebben.
kopieer die hele selector en plak het in je aangepaste code, gebruik het dan om je gewijzigde font-size waarde correct te richten.
Controleer altijd op ingekochte thema-opties
voordat u de moeite neemt om CSS aan te passen, controleer altijd in de Theme Customizer op Opties die de ontwikkelaar mogelijk al in het thema heeft gebakken.
thema ‘ s hebben vaak vrij uitgebreide aanpassingsopties die geen aangepaste code vereisen. Dus, voordat u een CSS bewerkt, kunt u uzelf veel tijd besparen door te zien of er al een drukknop manier is om de verandering die u nodig hebt aan te brengen.
stap voor stap aanpassen van een WordPress thema
nu we hebben gesproken over het aanpassen van CSS en HTML van een WordPress thema, voelt u zich misschien een beetje onzeker over waar te beginnen. Dus laten we de dingen neerknippen tot een basislijst van stappen om te volgen:
- Check de Theme Customizer om te zien of er al een optie beschikbaar die kan faciliteren van de verandering die je wilt maken
- Als dat niet, en moet u een aantal eenvoudige custom CSS, gebruik maken van de Extra CSS-veld in de Theme Customizer
- Als u nodig hebt om meer uitgebreide aanpassingen in HTML of CSS, overweeg dan om ze binnen een child theme
- maak kleine wijzigingen direct naar het thema gebruik de WordPress gebouwd thema-editor
- Voor meer diepgaande wijzigingen rechtstreeks op een thema, gebruik een FTP een verbinding op afstand, of werk volledig offline met XAMPP
- als u uw bewerkingsmethode hebt geselecteerd, identificeert u de stijlbladen van het thema door de
<head>– code van uw site te inspecteren of door te kijken in de “functies van het thema.php ” voor het gebruik van dewp_enqueue_style()functie - Zoek de specifieke regels van CSS die u moet aanpassen, en de bijbehorende selectors, door gebruik te maken van de inspecteer functie van Chrome of Firefox ontwikkelaarstools
als je in al het bovenstaande graaft en vertrouwd raakt, begin je te zien hoe aanpasbaar WordPress is.
voordat je het Weet, maak je je eigen volledig originele kinderthema ‘ s en creëer je eigen ontwerpen.
en het gebeurt gewoon dat het leren van “hoe maak je een kind thema in WordPress” is de volgende tutorial komt in deze serie. Blijf kijken!