Prestashop 1.7 : créer un thème enfant (child theme)

Un child theme est d’origine une fonctionnalité connue sous WordPress, qui permet de modifier un thème tout en conservant de manière fiable les mises à jour. Mettre à jour son site internet lorsque l’on a modifié le thème en direct fait souvent peur, et pour cause : toutes les modifications effectuées seront à remettre en place, rendant considérable le travail pour une mise à jour normalement simple.

L’intérêt d’un child theme est également tout autre : vous disposerez de moyens afin d’augmenter les fonctionnalités natives de votre thème parent, comme des boost SEO, des correctifs adaptés à votre activité, etc.

Il est en conséquence important de créer un child theme ce dès la conception de votre site, pour améliorer la stabilité de votre boutique, gérez réellement votre mise en page, et être en mesure de l’adapter si le besoin s’en ressent.

Voici donc, en quelques étapes, comment créer un child theme, comment l’optimiser avec un exemple simple, et comment le modifier dans le but d’une utilisation sur une autre boutique avec un autre thème parent.

Vous trouverez en fin de cet article un thème enfant pour le thème parent Classic suivant l’optimisation réalisée dans ce tutoriel, vous n’aurez qu’à simplement y ajouter des favicons (étape expliquée un peu plus bas).

1/ Création d’un child theme & installation

Il n’y a que peu de fichiers à créer pour concevoir un child theme sous Prestashop 1.7. Pour faire les choses proprement, utilisons a minima deux outils :

• Photoshop ou Gimp
• un éditeur de code, comme Atom, Sublime Text, ou Vim pour les plus aguerris

Création du fichier theme.yml

Créez un fichier nommé theme.yml et enregistrez-le dans un répertoire parent-child, où « parent » est le nom du thème parent. Cela vous aidera à rapidement repérer le thème parent selon le nom de son enfant.

A l’intérieur, il va falloir ajouter les informations nécessaires à Prestashop pour qu’il puisse comprendre qui est le parent, de manière à fonctionner sans erreur et en récupérant les fonctionnalités de ce parent. Je vais dans l’exemple me base sur le thème Classic, mais il est évident que vous pouvez utiliser le thème parent de votre choix, quel qu’il soit.

Voici le code à ajouter :

parent: classic
name: classic-child
display_name: Classic theme by Team Ever
version: 1.0.0
assets:
 use_parent_assets: true

Vous devrez donc personnaliser ce thème enfant selon le parent que vous aurez choisi.

Installation du child theme

Afin de mettre en place votre thème enfant, rendez-vous via FileZilla (ou tout autre logiciel) dans le répertoire /themes de votre site Prestashop 1.7.

Uploadez le répertoire classic-child, et une fois effectué, rendez-vous directement dans l’onglet « Apparence » puis « Thème et logo » de votre backoffice. Le thème enfant ressortira automatiquement, vous n’avez qu’à demander à l’utiiser pour que celui-ci soit en place.

Il est préférable de créer le thème enfant ce dès la conception du site, de manière à ce que si des éléments ou des modules bougent durant l’installation du thème enfant, vous ne perdiez pas de temps à tout remettre en place.

Le cas échéant, n’hésitez pas à faire un tour complet sur votre boutique afin de corriger ces éléments.

2/ Boost d’un outil natif : les favicons

Le thème enfant est en place, nous allons l’utiliser, de manière à ce que vous puissiez en percevoir les possibilités et l’intérêt.

Un des exemples que je trouve le plus parlant à ce sujet (et que je mets systématiquement en place) est celui des favicons. Il faut savoir qu’il existe une foultitude de favicons selon le type d’appareil, notamment pour Apple. Ne pas les mettre en place peut selon l’appareil générer de mini pages 404, car le favicon recherché n’existe pas sur votre thème.

Prestashop nativement n’inclus pas la totalité de ces favicons, et je n’ai vu que très peu de thèmes payants incorporer cela, raison pour laquelle nous allons les ajouter.

Pour rappel, l’ajout des favicons via un child theme fait partie des petits correctifs listés sur cet article, afin de ne plus avoir les favicons qui disparaissent après une mise à jour mineure de Prestashop 1.7.

Téléchargement des favicons

Rendez-vous sur ce site : https://www.favicon-generator.org/. Il vous sera demandé d’envoyer une image au format jpg ou png, et vous pourrez télécharger une archive zip contenant plusieurs images.

Placez ces images dans un nouveau répertoire de votre thème enfant. Soyons cohérents, comme nous souhaitons utiliser les variables smarty de Prestashop 1.7, il faut ranger ces favicons dans /themes/classic-child/assets/img.

Tout est bon ? Nous avons quasiment terminé.

Le site Favicon Generator vous fournit un code HTML à mettre en place sur votre site, mais par souci de « propreté » et pour demeurer « Prestashopien », nous allons préciser depuis le thème enfant l’emplacement des images que nous venons de charger. Il va donc falloir modifier un fichier du thème parent.

Copie du fichier parent et modification

Récupérez depuis votre thème parent le fichier /themes/classic/templates/_partials/head.tpl, ou depuis le répertoire de votre thème parent, selon celui que vous avez choisi.

Copiez-le en respectant très exactement la même arborescence dans votre thème enfant, ce qui donne /themes/classic-child/templates/_partials/head.tpl/

Vous avez à présent la main sur le fichier ! Editez-le, il est temps d’y ajouter des lignes de code pour les favicons.

Repérez le bloc contenant le favicon de votre site, celui-ci devrait démarrer par la balise {block name=’head_icons’} et avoir une balise fermante {/block}.

Le code dans le thème Classic est celui-ci :

{block name='head_icons'}
  <link rel="icon" type="image/vnd.microsoft.icon" href="{$shop.favicon}?{$shop.favicon_update_time}">
  <link rel="shortcut icon" type="image/x-icon" href="{$shop.favicon}?{$shop.favicon_update_time}">
{/block}

Remplacez-le par celui-là :

{block name='head_icons'}
<link rel="apple-touch-icon" sizes="57x57" href="{$urls.img_url}apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="{$urls.img_url}apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="{$urls.img_url}apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="{$urls.img_url}apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="{$urls.img_url}apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="{$urls.img_url}apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="{$urls.img_url}apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="{$urls.img_url}apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="{$urls.img_url}apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="{$urls.img_url}android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="{$urls.img_url}favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="{$urls.img_url}favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="{$urls.img_url}favicon-16x16.png">
<link rel="manifest" href="{$urls.img_url}manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="{$urls.img_url}ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
{/block}

Où en réalité, la variable $urls.img_url fait référence au répertoire /assets/img de votre thème enfant.

Sauvegardez, et videz le cache de votre Prestashop. Vous disposez à présent de favicons améliorés !

3/ Dupliquer un child theme vers autre thème parent

Bien évidemment, l’idée serait de pouvoir refaire cette manipulation en nous basant sur de l’existant, afin de gagner du temps.

Nous savons à présent ce qu’il faut paramétrer, ce qui va nous permettre de dupliquer le child theme pour l’installer sur une autre boutique, avec un tout autre thème parent.

Dans mon cas, je vais utiliser le thème Panda en parent (excellent thème au demeurant, mais que je modifie malgré tout pour des besoins de SEO notamment).

Je renvoie donc le thème enfant classic-child dans le répertoire /themes de mon site, ce juste après avoir installé le thème Panda, pour faire les choses dans l’ordre.

Je renomme d’emblée le répertoire classic-child en panda-child, et j’édite le fichier theme.yml pour remplacer les noms par ceux du nouveau parent. Ce qui me donne donc :

parent: panda
name: panda-child
display_name: Panda theme by Team Ever
version: 1.0.0
assets:
 use_parent_assets: true

Reste le souci du fichier head.tpl, qui n’est plus du tout le bon, et la regénération des favicons (puisque bien évidemment, le site n’est plus le même).

Donc, dans l’ordre, je commence par vider le répertoire /themes/panda-child/assets/img de tout média, et je renvoie ceux récupérés et à jour depuis le générateur de favicons.

Je récupère ensuite le fichier /themes/panda/templates/_partials/head.tpl, que je modifie selon mes besoins après l’avoir mis en remplacement de celui déjà présent dans mon child.

J’active mon thème depuis le back-office de Prestashop, et par réflexe, je vide le cache du site. C’est terminé !

Par souci de professionnalisme, et au cas où j’aurais à utiliser un child theme utilisant le même thème parent, je l’ajoute à ma bibliothèque, au cas où.

Un module de création de thème enfant Prestashop 1.7

Suite à de nombreuses demandes depuis cet article, nous avons développé un module qui vous pose les bases d’un thème enfant sur votre boutique Prestashop.

Il est très simple d’utilisation : sélectionnez votre thème parent, optez ou non pour l’utilisation des assets du parent, et validez. Si le thème enfant n’existe pas, le module vous le créera automatiquement, vous n’aurez plus qu’à le gérer depuis « Apparence » puis « Thème et logo ».

Il est aussi simple… qu’il est gratuit !

Prestashop : module de création de thème enfant

Sources thème enfant Classic 

classic-child

 Imprimer