Thème enfant WordPress pour html5blank

Publié par Jean-Michel le

J’ai tellement de mal à mettre en place un thème enfant du thème html5blank. Au point où je fais une nouvelle installation du thème parent et que je repars de zéro – et que j’écris ce post au fur et à mesure ! Fondamentalement, lors de la création de l’enfant, je dois maintenant charger mon /css/main.cssfichier personnalisé – et il ne l’a pas ! La description du processus de configuration suit :

J’ai déposé un dossier html5blank fraîchement téléchargé dans /themes/ et je l’ai activé. Après cela, j’ai créé un autre dossier dans /themes/ appelé « html5blank-child ». Dans ce cadre, j’ai créé un nouveau style.css et functions.php vierges.

Dans style.css j’ai ce qui suit :

/*
 Theme Name:   HTML5 Blank Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  HTML5 Blank Child Theme
 Author:       My Name
 Author URI:   http://myportfolio.com
 Template:     html5blank
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  html5blank-child
*/

Et dans functions.php j’ai :

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>

Avec tout cela fait, j’active mon thème enfant. Avec tout cela fait, tout semble toujours fonctionner. Comme j’ai créé des modèles statiques du site Web, je dépose mes dossiers ‘img’, ‘css’, ‘font’ et ‘js’ dans le fichier html5blank-child.

Lire également:  Wordpress : Comment puis-je détecter des relations hiérarchiques au-delà des enfants (petit-enfant, arrière-petit-enfant, etc.) ?

Maintenant, mon fichier CSS « réel » a un chemin de : html5blank-child/css/main.css

J’ai besoin de charger ce fichier. On m’a dit d’ajuster mon chemin CSS functions.php à : /css/main.css … mais il ne chargera pas du tout le fichier. J’ai aussi essayé d’utiliser get_stylesheet_directory_uri()au lieu de get_template_directory_uri()comme conseillé par quelqu’un d’autre mais pas de chance!

Lire également:  Wordpress : Afficher tous les messages sur un multisite vingt-treize

La raison pour laquelle j’ai documenté le processus comme celui-ci est que la dernière fois que j’en suis arrivé à ce point, si j’allais accéder à l’administrateur WordPress en l’utilisant http://localhost:8888/websitename/admin, il ne redirigerait pas wp-admincomme il le fait normalement. De plus, lorsque je suis allé enregistrer un message, j’ai une page vierge. Heureusement, cela ne se produit pas cette fois, donc je suppose que c’est un bon (meilleur) début, mais maintenant je dois charger mes fichiers.

Lire également:  Wordpress : Comment puis-je déployer un morceau de code avec une seule ligne de PHP ?

J’espère que quelqu’un peut aider! 🙂

Solution n°1 trouvée

Vous devez d’abord importer le style.css du thème principal dans le style.css du thème enfant.

Utilisez @import pour importer le fichier CSS en premier.

Supprimez également le style parent de functions.php du thème enfant, puis incluez votre html5blank-child/css/main.css comme suit,

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'child-main', get_stylesheet_directory_uri() . '/css/main.css' );
}

Solution n°2 trouvée

Chargez d’abord le style.css des thèmes parents, puis chargez le CSS de vos thèmes enfants comme ceci :

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-main', get_stylesheet_directory_uri() . '/css/main.css', array('parent-style') );
}
Catégories : Wordpress

Jean-Michel

Jean-Michel est en charge de la partie blog du site. Il met en place la stratégie de contenu et répond aux questions fréquentes sur Wordpress.

0 commentaire

Laisser un commentaire

Avatar placeholder

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *