CategoryWordpress

[WordPress] Créer un thème enfant

Le fait de pouvoir créer un thème enfant sous WordPress a déjà été abordé par de nombreux blogueurs. L’information est facilement accessible sur la toile, y-compris en français. Il suffit de taper les mots-clés « wordpress theme enfant » dans Google pour s’en rendre compte.

Pourquoi alors publier un énième billet sur le sujet? Parce que j’ai moi-même récemment cherché à rapidement (à mon sens, un truc aussi simple ne doit pas me faire perdre trois heures de mon temps) mettre en place un thème enfant sous WordPress. Parce qu’au bout du troisième tutoriel passé à copier/coller des lignes de code laissées en exemple qui ne fonctionnaient pas et parce qu’après avoir mis bout-à-bout des informations glanées sur différents forums d’entraide j’ai finalement trouvé la solution à un problème qui ne devrait vraiment pas en être un, j’ai décidé de tout remettre à plat.

En d’autres termes: si vous n’avez jamais mis en place de thème enfant sous WordPress et que vous choisissez de passer par du code plutôt que par un plugin, vous pouvez continuer la lecture de cet article.

Utilité de la création d’un thème enfant sous WordPress

L’un des nombreux avantages à utiliser WordPress reste la force de production de sa communauté. Vous n’avez pas l’âme d’un graphiste? Vous pourrez choisir parmi une multitude de thèmes payants ou gratuits mis à disposition sur de nombreux sites, sur GitHub et pour certains même, directement depuis l’interface d’administration de WordPress.

Dans certains cas, le thème choisi peut ne pas correspondre tout-à-fait à vos attentes et vous allez chercher à agir sur son code source pour en modifier l’affichage, les fonctionnalités, etc… Il faut, à ce moment là, ne pas perdre de vue le fait que le développeur de votre thème peut également le faire évoluer de son côté pour corriger des bugs ou apporter lui aussi de nouvelles fonctionnalités. Vous serez notifié des possibles mises à jour en vous connectant à votre interface d’administration. Si vous avez modifié, de votre côté, les fichiers source du thème et que vous effectuez une mise à jour de ce dernier, vos modifications seront écrasées et vous perdrez le bénéfice de votre travail de personnalisation.

Effectuer vos modifications de code dans un thème enfant va notamment vous permettre:

  1. de bénéficier de toutes les fonctionnalités du thème que vous avez précédemment installé et activé (dit thème parent) sans jamais avoir à le modifier,
  2. d’isoler totalement vos développements spécifiques,
  3. de bénéficier des mises à jour du thème parent sans que celles-ci ne viennent écraser vos modifications et, ainsi, d’en conserver le bénéfice.

A l’exception du fichier functions.php, tous les fichiers surchargés (fichiers aux noms et aux fonctionnalités similaires dans les deux thèmes) dans votre thème enfant, prendront le dessus.

Cas pratique

Dans l’exemple qui va suivre, je choisis de partir du thème parent Wilson que vous pourrez ajouter à WordPress directement depuis l’interface d’administration.

Pour créer le thème enfant, nous allons ajouter un dossier wilson-child à la racine du dossier contenant l’ensemble des thèmes installés sur votre instance WordPress (wp-content/themes/).
Nous allons ensuite, à l’intérieur de ce nouveau dossier, créer 2 fichiers :

wp-content/themes/wilson-child/functions.php :

wp-content/themes/wilson-child/style.css :

  • Theme Name: Le nom de votre thème enfant
  • Theme URI: http://votre-site.com/url-de-votre-theme-enfant/
  • Description: Thème enfant basé sur {le thème parent}
  • Author: John DOE
  • Author URI: http://votre-site.com
  • Template: [le nom du dossier qui contient le thème parent]
  • Version: 1.0.0
  • License: GNU General Public License v2 or later
  • License URI: http://www.gnu.org/licenses/gpl-2.0.html
  • Tags: [les mots clés pour décrire votre thème enfant]
  • Text Domain: [theme-parent-child]

Il est également possible d’ajouter un screenshot…

Pour activer notre thème enfant…

Mmm, ok, mais on ne peut pas faire ça avec un plugin?

[Pastacode] Publier du code source en provenance de Pastebin dans un billet de blog

Pastebin est un service gratuit d’hébergement à vie de bouts de code.

Le bout de code suivant (http://pastebin.com/P97HHWpS) enregistré sous Pastebin peut être affiché dans le corps d’un billet de blog WordPress si le plugin Pastacode est installé. Dans l’éditeur en vue « Texte », utiliser la balise suivante :

[WordPress] Utiliser des sprites CSS avec le plug-in Quickfinder de WordPress pour obtenir un effet d’images survolées

Attention, sous Chrome il semble que le SPAN imbriqué (il contient nativement l’effet d’ombre appliqué au caractère issu de la police d’icônes – et duquel on se sert pour appliquer certaines propriétés CSS) soit supprimé par le parseur HTML !!! A rajouter en dur dans le template du bloc :

Avertissement : ce procédé est sale et ne vient en aucun cas enrichir des fonctionnalités existantes de WordPress.

Le code CSS ci-dessous apparaît en surcharge du code fourni par le plug-in. Sa présence empêchera l’utilisation native de Quickfinder sur les élements auxquels il sera appliqué.

Dans l’interface d’administration, ne charger aucune image et n’assigner aucune icône par shortcode.

Cette technique ne donne pas de bons résultats avec des pngs transparents. Pensez à mettre un fond de couleur en rapport avec votre fond de page dans vos sprites.

Le markup HTML et le code Javascript restent inchangés.

© 2020 FrontEndDeveloper

Theme by Anders NorénUp ↑