Wesdevelopment kenniscentrum
Het Includen van een custom stylesheet via wp_enqueue_script
![glasses-new-white glasses-new-white](https://wesdevelopment.nl/media/glasses-new-white.gif)
Bij Wesdevelopment, experts in op maat gemaakte WordPress websites, streven we ernaar om onze klanten de beste en meest efficiënte oplossingen te bieden. Een essentieel onderdeel van het optimaliseren van een WordPress website is het correct toevoegen van custom stylesheets. In deze gids leggen we uit hoe je een custom stylesheet kunt includen via wp_enqueue_script
, de voordelen van deze methode, en hoe je scripts kunt includen voor zowel de frontend als de backend.
Waarom wp_enqueue_script gebruiken?
Het gebruik van wp_enqueue_script
en wp_enqueue_style
in WordPress is een best practice om stylesheets en scripts toe te voegen. Hier zijn enkele voordelen:
- Conflictpreventie: Voorkomt conflicten met andere plugins of thema’s door afhankelijkheden correct te beheren.
- Versiebeheer: Zorgt ervoor dat de juiste versies van je stylesheets en scripts worden geladen.
- Conditioneel Laden: Je kunt stylesheets en scripts alleen laden wanneer ze nodig zijn, wat de laadtijd van je site verbetert.
Hoe een Custom Stylesheet Includen?
Stap 1: Open het functions.php bestand:
Ga naar “Weergave” > “Thema-editor” in je WordPress dashboard en open het functions.php
bestand van je actieve thema of child theme.
Stap 2: Voeg de wp_enqueue_style code toe
function wesdevelopment_enqueue_styles() {
wp_enqueue_style('custom-style', get_template_directory_uri() . '/css/custom-style.css', array(), '1.0', 'all');
}
add_action('wp_enqueue_scripts', 'wesdevelopment_enqueue_styles');
Script Includen voor de frontend
Wil je een script alleen voor de frontend toevoegen, dan gebruik je uitsluitend de wp_enqueue_scripts
hook:
function wesdevelopment_enqueue_frontend_styles() {
wp_enqueue_style('frontend-only-style', get_template_directory_uri() . '/css/frontend-only-style.css', array(), '1.0', 'all');
}
add_action('wp_enqueue_scripts', 'wesdevelopment_enqueue_frontend_styles');
Script Includen voor de backend
Voor het includen van een script alleen voor de backend, gebruik je de admin_enqueue_scripts
hook:
function wesdevelopment_enqueue_admin_styles() {
wp_enqueue_style('admin-only-style', get_template_directory_uri() . '/css/admin-only-style.css', array(), '1.0', 'all');
}
add_action('admin_enqueue_scripts', 'wesdevelopment_enqueue_admin_styles');
Script Includen voor zowel de frontend als backend
Soms wil je dat een script zowel aan de frontend als aan de backend wordt toegevoegd. Gebruik hiervoor het admin_enqueue_scripts
hook in combinatie met wp_enqueue_scripts
:
function wesdevelopment_enqueue_scripts() {
// Frontend scripts
wp_enqueue_style('frontend-style', get_template_directory_uri() . '/css/frontend-style.css', array(), '1.0', 'all');
wp_enqueue_script('frontend-script', get_template_directory_uri() . '/js/frontend-script.js', array('jquery'), '1.0', true);
// Backend scripts
if (is_admin()) {
wp_enqueue_style('admin-style', get_template_directory_uri() . '/css/admin-style.css', array(), '1.0', 'all');
wp_enqueue_script('admin-script', get_template_directory_uri() . '/js/admin-script.js', array('jquery'), '1.0', true);
}
}
add_action('wp_enqueue_scripts', 'wesdevelopment_enqueue_scripts');
add_action('admin_enqueue_scripts', 'wesdevelopment_enqueue_scripts');
Voordelen van deze werkwijze
Het gebruik van wp_enqueue_script
en wp_enqueue_style
biedt diverse voordelen:
- Betere Prestaties: Door scripts alleen te laden waar en wanneer ze nodig zijn, verbeter je de prestaties van je website.
- Schaalbaarheid: Het is eenvoudiger om je site uit te breiden en te onderhouden.
- Compatibiliteit: Zorgt voor een betere compatibiliteit met andere plugins en thema’s.
Conclusie
Het correct includen van custom stylesheets en scripts is cruciaal voor de prestaties en het onderhoud van je WordPress website. Bij Wesdevelopment begrijpen we het belang van deze technieken en helpen we je graag om je website naar een hoger niveau te tillen. Wil je meer weten over webontwikkeling en WordPress optimalisaties? Neem contact met ons op of bekijk onze andere kenniscentrum posts voor meer waardevolle tips en inzichten.