web-dev-qa-db-fra.com

Comprendre le thème enfant functions.php

J'ai réussi à créer un thème enfant pour le Emmet Lite template, en utilisant les informations fournies sur ici et ici

Le fichier CSS du thème enfant ressemble à ceci:

/*
Theme name: Emmet Child
Theme URI: http://www.example.com/
Description: This is a child of Emmet Lite theme
Author: Motopress
Author URI: http://www.getmotopress.com/
Template: emmet-lite
Version: 1.0
*/

/* Adjustments to the Emmet Lite template start here */

.top-header {
display: none;  
}

.site-header {
background-color: #FFC421;
}

J'ai d'abord ajouté la fonction @import, mais cela n'a pas fonctionné pour moi. Ce que j'ai lu, c'est que le css parent était chargé après l'enfant, donc le dernier gagne. Pour contrer cela, j'ai ajouté un functions.php à mon dossier enfant et supprimé le @import. Cela ressemble à 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 )
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

Donc, tout fonctionne correctement, les modifications/modifications que j'ai apportées à l'intérieur du style.css du dossier enfant sont correctement appliquées sur mon site Web.

Comprendre la situation:

Ma question est:

Le thème parent Emmet utilise des fichiers CSS appelés différemment de style.css. Les noms utilisés par ce modèle sont ...

  • emmet-style.min.css
  • emmet-style.css

(Ils sont situés dans le dossier du thème, chemin: emmet-lite/css/emmet-style.css)

Il comprend également un ensemble d'autres styles pour Woocommerce, Buddypress, Bootstrap, mais le seul fichier que j'utilise pour l'édition est emmet-style.min.css.

J'aimerais comprendre ce que je fais ici, même si cela fonctionne déjà. Je ne suis pas en PHP, donc si je comprends bien, cette ligne de code appelle un mauvais CSS mais fonctionne toujours?

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

Le style.css devrait être emmet-style.min.css ou est-ce toujours style.css quoi qu'il en soit? Je ne vois rien dans la documentation mentionnée lors du développement d'un functions.php qui mentionne la modification du chemin style.css en chemin CSS correct. Donc, j’ai probablement mal compris le PHP ici.

Quelqu'un peut-il m'aider à expliquer plus en profondeur ce qui se passe dans le functions.php pour les thèmes enfants et les chemins donnés?

phpcsschild-themewp-enqueue-style
3
WPasman

Ce que j’ai lu, c’est que le css parent a été chargé après l’enfant, donc le dernier gagne

Cela dépend de l'ordre dans lequel le développeur de thème charge les feuilles de style.

Normalement, WordPress charge en premier le functions.php du thème enfant, puis le functions.php du thème parent.

le thème Emmet parent utilise des fichiers CSS appelés différemment de Style.css

Oui. Le style.css dans le dossier racine du thème est uniquement nécessaire pour que WordPress identifie correctement le thème à partir de son en-tête.

style.css n'a pas besoin d'être mis en file d'attente si ne possède pas de propriétés CSS autres que l'en-tête de thème.

Nous pouvons utiliser n'importe quel autre nom pour les feuilles de style et les charger différemment, mais style.css avec en-tête de thème doit figurer dans le dossier racine pour être identifié en tant que thème par WordPress.

Normalement, certains développeurs de thèmes aiment organiser toutes les feuilles de style dans un dossier css, c'est également le cas du développeur de thèmes Emmet Lite.

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

vous n'avez pas besoin de mettre en file d'attente le style.css parent ci-dessus puisqu'il ne contient pas de règles CSS. C'est simplement un overhead.

Alors, comment ça marche maintenant?

Si nous examinons le thème functions.php du thème parent, nous pouvons constater qu'il charge les feuilles de style dans l'ordre suivant.

  • Bootstrap
  • Police géniale
  • Flex Slider
  • Style principal (/css/emmet-style.min.css)
  • ...
  • ...
  • Enfin, styleheet uri (qui signifie fondamentalement le style.css du thème actif)

Donc, ici, le thème parent charge d’abord le fichier /css/emmet-style.min.css requis, puis le style.css, il s’agit du style.css du thème actif. Dans votre cas, le style.css du thème enfant du cas. est déjà fait par le thème parent.

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

Chemins

3
bravokeyl