. WebdeZign
web design, intégration web et WordPress

les tribulations d’un thème-enfant sous la houlette de wp_enqueue … ^^

Voici donc l’article promis suite à mes déboires avec la nouvelle méthode préconisée par le Codex de WordPress.org dans le cadre de la création d’un thème-enfant (‘Child Theme’, en anglais) … Cette fois, ça tourne, mais j’y aurai passé ma journée du vendredi !

Je ne vais pas vous faire l’affront de vous présenter la méthode que mon prof WP nous avait indiquée pour créer un thème-enfant au début 2013, date de mes premiers pas sérieux avec WordPress (j’avais auparavant profité de plateformes de blogging puis touché à Dotclear) … J’en connais certains qui arrêteraient leur lecture sur-le-champ ^^

Donc, comme j’ai déjà eu l’occasion de le dire dans ma métaphore sur WP, notre CMS préféré est en évolution permanente* et rapide. Les débutants dans la personnalisation de thèmes sont confrontés très tôt à l’installation d’un thème-enfant et, dans les conseils qui leur sont donnés sur les RS (‘réseaux sociaux’), ils sont en général aiguillés soit vers la page de référence du Codex (en anglais), soit en direction de l’ancienne méthode qui consiste à importer le style.css du thème-parent dans la feuille de style vierge du thème-enfant, par la fonction @import url(‘…. style.css’);

Le HIC, dans tout cela, c’est que la page du Codex – qui préconise de NE PAS utiliser la fonction @import url() – donne une version erronée du code de remplacement à insérer dans un fichier functions.php du thème-enfant. Voyons cela de plus près !

wp-codex-child-themes

Faire un thème-enfant : LA VIEILLE méthode WordPress > @import url(‘…style.css’);

Si vous travaillez avec WordPress depuis plus d’une année ou deux, vous créez certainement vos thèmes-enfants grâce à cette méthode. Vous la connaissez donc très bien.

Cependant, à l’attention des débutants, voici en quoi elle consiste :

  • Créez un dossier parallèle au dossier du thème-parent que vous nommerez /mon-theme-child, sachant que /mon-theme est le répertoire du thème-parent
  • Créez dans ce dossier /mon-theme-child une feuille de style style.css dans laquelle vous insérez l’en-tête du fichier style.css du thème-parent
  • Le fichier style.css du thème-enfant doit être modifié ainsi : dans l’en-tête que vous venez de ‘coller’, vous renommez le thème sur la ligne Theme Name: mon-theme-child et vous insérez la ligne suivante > Template: mon-theme
    ATTENTION à ne pas mettre d’espace avant les double-points « : » !
  • Insérez en-dessous de l’en-tête de ce fichier CSS, comme première ligne ‘active’, la ligne suivante > @import url(‘/mon-theme/style.css’);
  • Enregistrez votre fichier style.css pour votre thème-enfant, connectez-vous à la console WP et demandez Apparence > Thèmes : votre thème-enfant est-il présent ? Activez-le.

Pour différentes raisons que je pourrai développer plus tard, cette méthode n’est plus préconisée par le Codex de WordPress. Elle doit être systématiquement remplacée par l’appel aux feuilles de styles via le fichier functions.php du thème-enfant.

La méthode CORRECTE (déc. 2014) pour créer un thème-enfant sous WordPress 4.0.1

Les premiers pas de la vieille méthode sont toujours valables : créer le dossier du thème-enfant, créer une feuille de style pour le thème-enfant, recopier l’en-tête du style.css du thème-parent et effectuer les deux modifications dans cette en-tête. Voir les 3 premiers points ci-dessus.

  • Pas de ligne @import url() dans ce fichier. Nous n’y toucherons dorénavant que pour y modifier le CSS du thème-parent ou en ajouter.
  • Créez dans le répertoire /mon-theme-child un fichier functions.php qui sur la première ligne ouvre la balise <?php
  • Ajoutez en commentaire /** … **/ l’en-tête que vous désirez et désignant les spécificités de ce fichier functions.php
  • En-dessous de l’en-tête, dès la 1ère ligne active de code, insérez ce code tel quel ! aucun besoin d’y modifier un paramètre, la fonction est nommée et définie, elle s’exécutera sans demander son reste.

 

function theme_child_scripts() {

	wp_enqueue_style('theme_child-style', get_template_directory_uri() . '/style.css', array(), '0.1', 'all');
	wp_enqueue_style('theme_child-style', get_stylesheet_uri());
}

add_action('wp_enqueue_scripts', 'theme_child_scripts');

Et c’est tout !

  • Revenez à votre navigateur, connectez-vous à votre tableau de bord WP et demandez Apparence > Thèmes : repérez votre thème-enfant et activez-le.
  • Pour vérifier rapidement que tout s’enchaîne correctement, ajouter une règle CSS ‘farfelue’ dans votre style.css encore vierge, par exemple une règle {p} à laquelle vous attribuez une ENORME :font-size: et admirez le résultat sur votre site WP équipé de votre thème-enfant. Si le corps de votre article ou de votre page vous saute aux yeux, c’est tout bon, vous avez réussi !

Tita, décembre 2014

* Il n’y a qu’une seule chose permanente en ce monde, c’est le changement !

Tita

Conceptrice & CEO chez Tita Créations
Passionnée de chevaux, de nature, d'écriture... et d'informatique, j'ai découvert cette dernière avec un tout premier modèle d'ordinateur portable : un SHARP écran cristaux liquides d'au moins 10kg ! ... 1988
Aujourd'hui, je donne libre cours à ma créativité dans les domaines du web design, de la gestion de projet et de la gestion de contenu.


Commentaires

  1. Par Tita

    Répondre

Commenter