Laad CSS optimaal in het WordPress Child Theme

Als je een child-thema gebruikt in WordPress, wil je er zeker van zijn dat je CSS optimaal laadt. Onjuist geïntegreerde stylesheets kunnen leiden tot prestatieproblemen of ontbrekende stijlen . Hier leest u hoe u uw CSS efficiënt kunt integreren in het child-thema.

1. De juiste methode: CSS laden met `wp_enqueue_style()`

De aanbevolen manier om CSS in een WordPress-child-thema te laden, is door de wp_enqueue_style(). Dit zorgt ervoor dat stijlen correct en in de juiste volgorde worden geladen.

Stappen voor een optimale integratie:

Open het functions.phpbestand van uw child-thema.
Voeg de volgende code toe:

function my_child_theme_styles() {
    // Parent-Theme-CSS laden
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');

    // Child-Theme-CSS laden
    wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'), wp_get_theme()->get('Version'));
}
add_action('wp_enqueue_scripts', 'my_child_theme_styles');

Uitleg van de code:

wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
→ Laadt de style.css van het hoofdthema.
wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'), wp_get_theme()->get('Version'));
→ Hiermee laadt u de style.css van het child-thema en zorgt u ervoor dat deze na het hoofdthema wordt geladen.
wp_get_theme()->get('Version') Zorgt ervoor dat altijd de huidige themaversie wordt gebruikt om cachingproblemen te voorkomen.

2. Alternatieve methode: vermijd CSS met @import

In het verleden werd CSS vaak opgenomen @import in het style.css child-thema:

@import url("../parent-theme/style.css");

Waarom is dit problematisch?

Het kan de laadtijd van pagina’s vertragen.
WordPress beveelt deze methode niet langer aan.

Gebruiken is wp_enqueue_style() de betere oplossing!

3. Laad extra stylesheets (indien nodig)

Als u meer stylesheets wilt toevoegen (bijvoorbeeld voor aangepaste aanpassingen of externe stijlen), kunt u deze eenvoudig toevoegen:

function my_child_extra_styles() {
    wp_enqueue_style('extra-style', get_stylesheet_directory_uri() . '/extra-style.css', array('child-style'), '1.0.0');
}
add_action('wp_enqueue_scripts', 'my_child_extra_styles');

Hier wordt het bestand extra-style.css ook geladen na dat style.css van het child-thema.

4. CSS alleen laden op bepaalde pagina’s of voorwaarden

Als je alleen CSS wilt laden op bepaalde pagina’s of onder bepaalde voorwaarden, kun je gebruik maken van WordPress functies:

function my_custom_page_styles() {
    if (is_page('kontakt')) { // Nur auf der Kontaktseite laden
        wp_enqueue_style('contact-style', get_stylesheet_directory_uri() . '/contact.css');
    }
}
add_action('wp_enqueue_scripts', 'my_custom_page_styles');

Overige voorwaarden:

is_front_page() → Alleen op de startpagina
is_single() → Alleen op postsites
is_category('news') → Alleen in een specifieke categorie

Laad 5. CSS voor het WordPress-beheergebied (optioneel)

Als u uw eigen stijlen wilt toevoegen in het beheergebied:

function my_admin_styles() {
    wp_enqueue_style('admin-style', get_stylesheet_directory_uri() . '/admin.css');
}
add_action('admin_enqueue_scripts', 'my_admin_styles');

Resultaat

Beste methode: Gebruik wp_enqueue_style()om CSS correct en efficiënt te laden.
@import vermijden omdat het de prestaties negatief beïnvloedt.
Indien nodigwp_enqueue_style() kunnen extra stylesheets worden geladen.
CSS om alleen de vereiste stijlen voor bepaalde pagina’s op te nemen.

Met deze optimalisaties zorgt je child-thema voor een snelle laadtijd en een betere onderhoudbaarheid!