Τα στυλ του child theme στο WordPress δεν φορτώνουν

Το style.css του child theme σας δεν φορτώνει επειδή το WordPress δεν το κάνει enqueue για εσάς. Το stylesheet του child theme πρέπει να καταχωρηθεί χειροκίνητα στο functions.php του child theme, και αυτό το enqueue σχεδόν πάντα έχει ένα από δύο σφάλματα: είτε λείπει εντελώς, είτε φορτώνει χωρίς να δηλώνει το parent stylesheet ως εξάρτηση, οπότε οι κανόνες σας καταλήγουν σε λάθος σημείο στο cascade και παρακάμπτονται. Διορθώστε το enqueue και τα στυλ επιστρέφουν. Το παλιό κόλπο με το @import που πιθανότατα αντιγράψατε από κάποιο tutorial του 2013 είναι η λάθος λύση.

Γιατί συμβαίνει

Ένα κλασικό child theme αποτελείται από δύο υποχρεωτικά αρχεία: ένα style.css με ένα header block που ονομάζει το parent, και ένα functions.php. Η γραμμή Template: στο header λέει στο WordPress από ποιο parent θα κληρονομήσει τα templates. Αυτό είναι το μόνο πράγμα που κάνει αυτόματα το WordPress. Διαβάζει το header, ρυθμίζει το template fallback, και σταματάει. Ποτέ δεν κάνει enqueue το child style.css σας στο front end.

Το parent theme, από την άλλη, κάνει enqueue το δικό του stylesheet από το δικό του functions.php, συνδεδεμένο στο wp_enqueue_scripts. Το functions.php του child σας τρέχει πρώτο, μετά του parent, και μετά ενεργοποιείται ό,τι υπάρχει σε αυτό το hook. Αν το child σας δεν καλέσει ποτέ wp_enqueue_style για το δικό του αρχείο, ο browser δεν το ζητάει ποτέ. Η σελίδα μοιάζει με το σκέτο parent theme επειδή ακριβώς αυτό είναι.

Η δεύτερη αστοχία είναι πιο δυσδιάκριτη. Κάνετε enqueue το child stylesheet, φορτώνει, αλλά τα overrides σας δεν κάνουν τίποτα. Αυτό είναι πρόβλημα σειράς φόρτωσης. Όταν δύο κανόνες έχουν ίση specificity, κερδίζει αυτός που φορτώνει τελευταίος. Αν το child CSS σας φορτώνει πριν από το parent, το parent κερδίζει σε κάθε ισοπαλία. Ο πίνακας εξαρτήσεων στο wp_enqueue_style είναι αυτός που επιβάλλει τη σειρά.

Ακόμα ένα πράγμα που οι περισσότεροι κάνουν λάθος: το get_template_directory_uri() δείχνει στον φάκελο του parent theme, ενώ το get_stylesheet_directory_uri() δείχνει στον φάκελο του ενεργού (child) theme. Αν τα μπερδέψετε, κάνετε enqueue το style.css του parent για δεύτερη φορά και δεν αγγίζετε ποτέ αυτό του child.

Η διόρθωση, με τη σειρά

Πρώτα, επιβεβαιώστε τι φορτώνει πραγματικά. Ανοίξτε τη χαλασμένη σελίδα, δείτε τον κώδικα προέλευσης (view source), και αναζητήστε το όνομα του φακέλου του child theme σας. Το WordPress αποδίδει τα enqueued στυλ ως <link id="handle-css" href="..."> — το id είναι το handle σας συν -css. Αν το child style.css σας δεν είναι καθόλου στο <head>, το enqueue δεν τρέχει. Αν είναι εκεί αλλά τα στυλ δεν εφαρμόζονται, είναι πρόβλημα εξάρτησης/σειράς. Αυτός ο ένας έλεγχος σας λέει ποιο από τα δύο σφάλματα έχετε.

Δεύτερο, βρείτε το πραγματικό handle του parent. Τα περισσότερα σύγχρονα themes (Astra, GeneratePress, τα Twenty-* themes) κάνουν ήδη enqueue το δικό τους stylesheet κάτω από ένα συγκεκριμένο handle — astra-theme-css, generate-style-css, twenty-twenty-four-style, και ούτω καθεξής. Χρειάζεστε αυτό ακριβώς το string. Κάντε grep στο parent theme, ή διαβάστε το από το <link id="...-css"> στο view source (αφαιρέστε το -css στο τέλος).

Τρίτο, γράψτε το enqueue. Για τη συνηθισμένη περίπτωση όπου το parent φορτώνει ήδη το δικό του stylesheet, δεν ξανακάνετε enqueue το parent. Κάνετε enqueue μόνο το child, και βάζετε το handle του parent ως εξάρτηση ώστε το δικό σας να φορτώνει μετά από αυτό:

<?php
add_action( 'wp_enqueue_scripts', 'child_enqueue_styles', 20 );

function child_enqueue_styles() {
    wp_enqueue_style(
        'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( 'astra-theme-css' ), // <-- the parent's REAL handle
        wp_get_theme()->get( 'Version' )
    );
}

Αν το parent theme δεν κάνει enqueue το δικό του stylesheet (κάποια παλαιότερα ή μινιμαλιστικά themes βασίζονται στο @import), τότε κάντε enqueue και τα δύο, και κάντε το child να εξαρτάται από το parent:

<?php
add_action( 'wp_enqueue_scripts', 'child_enqueue_styles' );

function child_enqueue_styles() {
    wp_enqueue_style(
        'parent-style',
        get_template_directory_uri() . '/style.css'
    );
    wp_enqueue_style(
        'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( 'parent-style' ),
        wp_get_theme()->get( 'Version' )
    );
}

Το όρισμα wp_get_theme()->get('Version') είναι ο cache-buster σας. Αυξήστε τη γραμμή Version: στο header του style.css του child και οι browsers ξανακατεβάζουν το αρχείο. Παραλείψτε το και θα επεξεργάζεστε το CSS ορκιζόμενοι ότι τίποτα δεν αλλάζει, ενώ απλώς είναι cached.

Αν το functions.php έχει syntax error, όλο το αρχείο πεθαίνει σιωπηλά και κανένα από τα enqueues σας δεν τρέχει — αυτό εμφανίζεται ακριβώς σαν «τα στυλ δεν φορτώνουν». Ενεργοποιήστε το WP_DEBUG, ή επικολλήστε το debug.log σας στον WordPress error log decoder μας για να εντοπίσετε γρήγορα το fatal.

Τι να μην κάνετε

Μη χρησιμοποιείτε @import. Η συμβουλή της εποχής του Codex ήταν να βάλετε @import url("../parenttheme/style.css"); στην κορυφή του style.css του child. Δουλεύει, αλλά είναι αργό — ο browser δεν μπορεί να ξεκινήσει να κατεβάζει το parent CSS μέχρι να αναλύσει το child CSS, οπότε τα δύο requests τρέχουν σειριακά αντί για παράλληλα. Το ίδιο το handbook του WordPress το αποτρέπει εδώ και χρόνια. Αν το tutorial σας σας είπε να το κάνετε αυτό, αυτό το tutorial είναι ο λόγος που τα στυλ σας κολλάνε.

Μη γράφετε hardcoded το handle 'parent-style' και μην κάνετε enqueue το parent αρχείο στα τυφλά. Το γνωστό snippet του Codex κάνει ακριβώς αυτό, και είναι λάθος για οποιοδήποτε theme που καταχωρεί ήδη το stylesheet του κάτω από διαφορετικό handle. Καταλήγετε να φορτώνετε το parent CSS δύο φορές και η εξάρτησή σας δείχνει σε ένα handle που μπορεί να μην υπάρχει.

Μην καλείτε το wp_enqueue_style στο top level του functions.php. Πρέπει να τρέχει μέσα σε μια function συνδεδεμένη στο wp_enqueue_scripts. Αν καλεστεί πολύ νωρίς, δεν κάνει τίποτα.

Μην αντιγράφετε ολόκληρο το functions.php του parent μέσα στο child. Φορτώνουν και τα δύο· του child τρέχει πρώτο. Η αντιγραφή προκαλεί διπλές δηλώσεις function και fatal error.

Μια επιφύλαξη: όλα αυτά αφορούν τα κλασικά (PHP-template) themes. Αν το parent σας είναι block theme, το styling ρέει κυρίως μέσω του theme.json και του Site Editor, και τα overrides του style.css συμπεριφέρονται διαφορετικά — εκεί θα ήμουν πιο επιφυλακτικός και θα το δοκίμαζα άμεσα αντί να υποθέσω ότι αυτό το enqueue είναι η λύση.

Ακόμα κολλημένοι;

Επιβεβαιώστε ότι η γραμμή Template: στο header του style.css του child ταιριάζει ακριβώς με το όνομα του φακέλου του parent, με ευαισθησία σε πεζά/κεφαλαία — όχι με το εμφανιζόμενο όνομα του parent. Μετά ξαναελέγξτε το view source: το handle υπάρχει, φορτώνει μετά το parent, το version query string έχει αυξηθεί. Αν το <link> είναι εκεί, φορτώνει τελευταίο, και το CSS ακόμα δεν εφαρμόζεται, τότε δεν είναι πια πρόβλημα enqueue — είναι specificity, και η διόρθωση μετακινείται μέσα στους ίδιους τους κανόνες.