hetzij als het maken van uw eigen WordPress thema, een kind-thema van zijn ouder of het bewerken van een thema, zult u de noodzaak om uw eigen CSS aangepaste stylesheet toe te voegen tegenkomen. Hoogstwaarschijnlijk wilt u ook een aantal stijlen van het standaardthema stylesheet overschrijven.
er zijn verschillende manieren om uw eigen stijlen toe te voegen en/of standaard stijlen te overschrijven. Dus wat is de beste manier om het te doen? Ontwikkelaars zullen het eens is door het creëren van uw eigen CSS-bestanden en insluiten ze in het WordPress thema waaraan u werkt.
manieren om aangepaste CSS-code toe te voegen aan WordPress thema ‘ s
we zullen het niet hebben over afgeschreven manieren om CSS-stijlen toe te voegen aan HTML-elementen, of het toevoegen van <stijl> blokken. Tegenwoordig, deze methoden worden verlaten door ontwikkelaars. Ook, ze zijn niet SEO vriendelijk, dat is een belangrijk probleem om de zorg over tegenwoordig.
we zullen niet eens voorstellen om het originele CSS-stylesheet van het thema te bewerken(meestal stijl.css), of het toevoegen van aangepaste code. Dit bestand is vaak erg groot en moeilijk te beheren. Elke kleine typefout of syntaxfout erin kan ervoor zorgen dat de hele site crasht.
In dit artikel laten we u zien hoe u een aangepaste CSS-bestand te maken en insluiten in een WordPress thema.
er zijn verschillende methoden om aangepaste CSS-code toe te voegen aan WordPress-thema ‘ s. Wat is de beste praktijk?
aangepaste stylesheet-bestanden toevoegen aan WordPress thema ‘ s met behulp van wp_register_style() en wp_enqueue_style()
de eerste stap van aangepaste CSS-bestanden insluiten naar WordPress is het toevoegen van bestanden aan uw thema. Ofwel met behulp van een FTP-client of uw cPanels File manager zoek uw thema map en open het. Nu kunt u ofwel een nieuw bestand en de naam in bijvoorbeeld aangepaste maken.css of upload het css-bestand van uw computer. In het geval dat u meer dan één CSS-bestand toe te voegen aan uw WP thema herhaal deze stap.
Als u deze stap correct hebt voltooid, ziet u uw aangepaste CSS-bestand of-bestanden in uw WordPress installatie thema-editor.
linking custom css files the site ‘ s head section
Nu u uw custom css-bestanden aan uw wp-themamap hebt toegevoegd, is het tijd om de bestanden te koppelen aan de sectie <head> van uw site. Op deze manier kan de site uw aangepaste stijlen toe te passen op zijn elementen.
u kunt eenvoudig een <link> element toevoegen aan de sectie <head> van uw site, bij voorkeur vlak voor het sluiten van de tag </head>. Op deze manier aangepaste CSS stijlen Laden laatste en overschrijven standaard stijlen. De sectie <head> van uw site bevindt zich meestal in de header van uw themamap.php-bestand en is toegankelijk via de WordPress Theme editor.
hier is een voorbeeld van het element wanneer uw site zich in de map “test-site” in de rootmap van uw server bevindt, wordt uw themamap “test-theme” genoemd en uw CSS-bestand “custom”.css”:
<link rel="stylesheet" href="/test-site/wp-content/themes/test-theme/custom.css" type="text/css" media="all">deze eenvoudige oplossing zal prima werken, maar het is niet de beste praktijk van het insluiten van CSS-bestanden in WordPress sites.
het insluiten van een CSS-bestand in WordPress met behulp van wp_register_style() en wp_enqueue_style() functies
de aanbevolen praktijk om aangepaste CSS-bestanden in te sluiten op uw WordPress site is door het registreren van uw stylesheet in de functies van uw WP thema.php bestand met behulp van wp_register_style () en wp_enqueue_style () functies. Op deze manier uw CSS-bestanden worden geladen op het moment dat wp_head actie wordt geactiveerd. Uw stylesheet wordt direct na het standaard stylesheet van het thema geplaatst. en kunt u overschrijven standaard stijlen.
het eerste wat u moet doen is de functies van uw thema lokaliseren.php bestand. Het is gelegen in de WordPress Theme editor. U kunt het ook doen met behulp van FTP of cPanels File Manager. Als u werkt aan een kind-thema, bewerken child-themes functies bestand, niet de ouder-thema een. Op deze manier voorkomt u het verliezen van uw aangepaste code bij het bijwerken van het bovenliggende thema. Scroll naar beneden naar de onderkant van functies.php en voeg het volgende codefragment toe:
function additional_stylesheets() {wp_register_style( 'custom', get_template_directory_uri().'/custom.css' );wp_enqueue_style( 'custom' );}add_action( 'wp_enqueue_scripts', 'additional_stylesheets' );pas het fragment aan: in het bovenstaande voorbeeld hebben we de registratiefunctie “additional_stylesheets” genoemd en een CSS-bestand met de naam “custom” geregistreerd.css”, eerder geüpload in onze themamap. U kunt de functie een naam geven zoals u wilt en de functienaam vervangen in de bovenste en onderste rij van de snipet. Als uw stylesheet-bestand een andere naam heeft dan aangepast.CSS vervang het woord aangepast in de snipet met uw eigen bestandsnaam.
Als u alles correct hebt gedaan, kunt u beginnen met het schrijven van uw eigen CSS-code in uw stylesheet. U zult merken dat uw stijlen van invloed zijn op de site als u wijzigingen op te slaan en herladen van de pagina. Vergeet niet om de cache van uw browser schoon te maken bij het vernieuwen van de pagina.
meerdere aangepaste stylesheet CSS-bestanden in functies insluiten.php met behulp van wp_register_style () en wp_enqueue_style ()
voordat u meerdere CSS-bestanden toe te voegen aan uw WP-thema, rekening houden met dat het veroorzaakt meer server verzoeken wanneer de site wordt geladen, wat de laadsnelheid van uw site beïnvloedt. Probeer zo min mogelijk stylesheets te gebruiken.
stel nu dat u een apart stylesheet-bestand hebt voor bureaubladstijlen met de naam custom.css en een tweede stylesheet bestand met de naam responsive.css voor mobiele apparaten. Het inbedden van beide stylesheets in uw functies.php-bestand is eenvoudig en vereist een kleine wijziging van het enkele bestand fragment hierboven weergegeven:
function additional_stylesheets() {wp_register_style( 'custom', get_template_directory_uri().'/custom.css' );wp_register_style( 'responsive', get_template_directory_uri().'/responsive.css' );// register another file herewp_enqueue_style( 'custom' );wp_enqueue_style( 'responsive' );// enqueue another file here}add_action( 'wp_enqueue_scripts', 'additional_stylesheets' );wijzig de bestandsnamen overeenkomstig uw situatie als u het fragment van een enkel bestand aanpast.
meer over wp_register_style() en wp_enqueue_style() functies
om meer te weten te komen over het gebruik van wp_register_style () en wp_enqueue_style () functies om stylesheets te registreren, bezoek de speciale WP Codex pagina.