Wesdevelopment kenniscentrum

Het Includen van een custom stylesheet via wp_enqueue_script

glasses-new-white

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:

  1. Betere Prestaties: Door scripts alleen te laden waar en wanneer ze nodig zijn, verbeter je de prestaties van je website.
  2. Schaalbaarheid: Het is eenvoudiger om je site uit te breiden en te onderhouden.
  3. 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.