Carica CSS in modo ottimale nel tema child di WordPress

Se stai utilizzando un tema child in WordPress, ti consigliamo di assicurarti che il tuo CSS si carichi in modo ottimale. I fogli di stile integrati in modo errato possono portare a problemi di prestazioni o alla mancanza di stili . Ecco come integrare in modo efficiente il tuo CSS nel tema child.

1. Il metodo giusto: caricare i CSS con `wp_enqueue_style()`

Il modo consigliato per caricare i CSS in un tema child di WordPress è utilizzare il wp_enqueue_style()file . In questo modo si garantisce che gli stili vengano caricati correttamente e nell’ordine corretto.

Passaggi per un’integrazione ottimale:

Apri il functions.phpfile del tuo tema figlio.
Aggiungere il codice seguente:

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');

Spiegazione del codice:

wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
→ Carica il style.css del tema principale.
wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'), wp_get_theme()->get('Version'));
→ Carica il style.css del tema figlio e garantisce che venga caricato dopo il tema principale.
wp_get_theme()->get('Version') Garantisce che la versione corrente del tema venga sempre utilizzata per evitare problemi di memorizzazione nella cache.

2. Metodo alternativo: evitare i CSS con @import

In passato, i CSS erano spesso inclusi @import nel style.css tema child:

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

Perché questo è problematico?

Può rallentare il tempo di caricamento della pagina.
WordPress non raccomanda più questo metodo.

L’uso è wp_enqueue_style() la soluzione migliore!

3. Caricare fogli di stile aggiuntivi (se necessario)

Se si desidera aggiungere più fogli di stile (ad esempio per personalizzazioni personalizzate o stili esterni), è possibile aggiungerli facilmente:

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');

Qui, il file extra-style.css viene caricato anche dopo quello style.css del tema figlio.

4. CSS caricare solo su determinate pagine o condizioni

Se vuoi caricare i CSS solo su determinate pagine o in determinate condizioni, puoi utilizzare le funzionalità di WordPress:

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');

Altre condizioni:

is_front_page() → Solo sulla home page
is_single() → Solo sui siti di posta
is_category('news') → Solo in una categoria specifica

Carica 5. CSS per l’area di amministrazione di WordPress (opzionale)

Se vuoi aggiungere i tuoi stili nell’area di amministrazione:

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

Risultato

Metodo migliore: Utilizzare wp_enqueue_style()per caricare i CSS in modo corretto ed efficiente.
@import evitare in quanto influisce negativamente sulle prestazioni.
Se necessario,wp_enqueue_style() è possibile caricare fogli di stile aggiuntivi.
CSS per includere solo gli stili richiesti per determinate pagine.

Con queste ottimizzazioni, il tuo tema child garantisce un tempo di caricamento rapido e una migliore manutenibilità!