web-dev-qa-db-fra.com

Comment configurer un thème enfant sans utiliser @import

J'ai toujours utilisé @import pour les CSS dans mon thème enfant, ce qui, à mon avis, est une mauvaise pratique.

Quelle est la meilleure façon de configurer un thème pour enfants à l'avenir? La dernière solution sur le codex wordpress semble vraiment complexe/très déroutant?

Il doit y avoir un moyen de faire une mise en file d'attente relativement simple dans le functions.php de mon thème enfant?

Toute aide serait géniale. Je me sens complètement perdu/inutile d'essayer de trouver une information succincte à ce sujet.

Emilie

child-themewp-enqueue-style
3
The Chewy

Le code qui se trouve dans codex pour la mise en file d'attente du style du thème parent au lieu d'utiliser @import, n'est pas bien commenté, je vais donc le commenter davantage, vous avez donc ceci:

<?php
function my_theme_enqueue_styles() {
    $parent_style = 'parent-style';
    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')
            );
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');
?>

1.- ligne:

$parent_style = 'parent-style';

c'est littéralement un nom de chaîne que vous donnez à la feuille de style du thème, ce sera le $handle de la feuille de style que vous mettez en file d'attente, ce peut être ce que vous voulez, par exemple 'divi-style', dans la HTML il sera utilisé comme le ID comme ceci <link rel="stylesheet" id="divi-style" ...

2.- ligne:

wp_enqueue_style($parent_style, get_template_directory_uri() . '/style.css');

en enregistrant la feuille de style et en la mettant en file d'attente, lors de son inscription, il utilisera le nom du premier paramètre. Dans ce cas, il s'agira de 'parent-style'. Il utilisera également get_template_directory_uri() pour obtenir le chemin d'accès à la feuille de style parent theme.

3.- ligne:

wp_enqueue_style('child-style', 
            get_stylesheet_directory_uri() . '/style.css', 
            array($parent_style), 
            wp_get_theme()->get('Version')
            );

ceci enregistre et met en file d'attente la feuille de style du thème enfant (la feuille de style du thème actuel), il s'agit de la procédure habituelle pour un thème, chaque paramètre étant déjà expliqué ici , pour l'exemple:

  • 'child-style' - c'est le nom de cette feuille de style le $handle

  • get_stylesheet_directory_uri() . '/style.css' - il s'agit du chemin d'accès au fichier de feuille de style.

  • array($parent_style) - il s'agit du tableau de feuilles de style que nous devons exécuter avant que notre feuille de style ne puisse pas être insérée, c'est pourquoi nous les nommons avec un $handle; dans ce cas, nous avons besoin de la feuille de style parent à exécuter en premier (c'est une dépendance)

  • wp_get_theme()->get('Version') - ceci est la version numérique qui se trouvera à la fin de la feuille de style URL comme ceci /style.css?ver=1.0, ceci est destiné à la mise en cache, la norme consiste à mettre à jour la version pour que le dernier fichier soit chargé et non une version en cache, vous ne voulez pas changer ce nombre dans tous les fichiers où vous l'utilisez, non? utilisez donc wp_get_theme()->get('Version') pour obtenir la version qui se trouve dans votre fichier style.css (et non la version parente).


donc si vous voulez la version reprise, ce sera comme ceci:

<?php

function my_theme_enqueue_styles() {
    //load the parent stylesheet
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    //load the child stylesheet but after the parent stylesheet
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'parent-style' ));

}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>
2
David Lee

Je pense que c'est le code spécifique que vous recherchez, vous pouvez le trouver dans le Codex WordPress Comment créer un thème pour enfants

<?php
function my_theme_enqueue_styles() {
  // This is the parent style handle name. Recommended to leave as it is.
  $parent_style = 'parent-style';

  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')
  );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

Crédits va à WordPress Codex.

3
Den Isahac