WordPress – Personnaliser un thème ? Oui, avec un child theme

Cet article a 2 années. Il commence à dater, lisez-le donc en gardant son âge en tête ! Merci

Les thèmes WordPress sont de plus en plus courus par tous : débutants, blogueurs confirmés ou professionnels du web. Il est possible d’en obtenir gratuitement un peu partout sur la toile, pas toujours de bonne qualité, pas toujours très sécurisés, comme il est possible d’en obtenir de payants (je n’ai pas dit qu’ils étaient mieux). Dans tous les cas il est possible de les personnaliser.

Plusieurs solutions

Wild tweaking

La première, la moins propre, consiste à modifier directement les fichiers du thème, améliorer les portions de code des articles, des commmentaires, ou simplement de l’en-tête de votre document ou du fichier functions.php pour ajouter quelques morceaux de code trouvés sur la toile.
Soit. Mais sachez qu’en faisant cela, il ne vous sera plus possible de mettre à jour votre thème. (en tout cas pas automatiquement)

En effet, à l’instar des plugins, les thèmes sont versionnés et peuvent subir des mises à jour (amélioration de fonctionnalité, mise à jour de sécurité, etc.). S’il vous prenait l’envie de mettre à jour un thème modifié par vos soins, vos modifications seraient alors écrasées.

Cette solution de modification n’est donc possible que si vous êtes sûr de la sécurité du thème et uniquement si vous ne souhaitez pas effectuer de mise à jour. Autant vous dire que ce n’est donc pas la meilleure des solutions.

Child Theme

La seconde solution, de loin ma préférée : créer un thème enfant.
La création d’un thème enfant n’est pas très complexe et permet de bénéficier du thème parent tout en autorisant la modification de certains fichiers à partir du thème enfant.
Sa création se résume en quelques étapes seulement :

  1. Créer un dossier de thème
  2. Définir le thème de référence
  3. Modifier le thème à partir du thème enfant

Voyons cela en détail avec des exemples concrets.

Child theme « Little Twenty »

Nous allons créer un thème enfant à partir du thème Twenty Eleven, nous l’appellerons Little Twenty (ou LT)

Création du dossier de thème

Le dossier du thème enfant se met avec les autres dossiers dans wp-content/themes/. Créez un dossier nommé little-twenty.
Dans ce dossier, créez un fichier style.css avec comme contenu de base :

/*
Theme Name: Little Twenty
Description: Thème enfant de Twenty Eleven
Author: CreativeJuiz
Author URI: http://creativejuiz.com
Version: 1.0.0
Template: twentyeleven
*/

Ce morceau est relativement clair, la première ligne définit le nom visible de votre thème, la seconde une description, la troisième le nom de l’auteur, la quatrième son URL et la cinquième le numéro de version de votre thème enfant. Toutes ces lignes servent de descriptif qui s’affichera dans l’espace d’administration (Apparence > Thèmes), vous êtes relativement libres sur le contenu à renseigner.
Le morceau le plus important est le dernier qui est le « slug » du thème de référence, le thème parent. Ce slug correspond au nom du dossier du thème que l’on souhaite modifier, ici Twenty Eleven, qui porte comme nom de dossier « twentyeleven ».

Une fois que vous avez cela, vous avez créé votre Child Theme qui apparait déjà dans la liste des thèmes disponibles depuis votre back-office.

Apparition du thème enfant dans Apparance > Thèmes de l'espace d'admin

Vous pouvez d’ores et déjà l’activer, celui-ci va simplement adopter le comportement de son thème parent, puisque nous n’avons encore aucun fichier « template » dans notre dossier de thème.
Petit hic cependant, la feuille de styles du thème enfant remplace déjà celle du thème parent. Deux solutions s’offrent ici à vous : copier le contenu de style.css de TwentyEleven pour le coller dans votre CSS du thème LT, ou créer un import en CSS avec la règle suivante :

@import url("../twentyeleven/style.css");

À placer à la suite des quelques lignes vues précédemment.
Pour des raisons de performance je conseillerais plutôt la première solution (c’est à dire la copie du contenu de la feuille de styles du thème parent), qui vous permettra même de modifier la CSS en cas de besoin.

Modification des templates

Il vous est désormais possible d’éditer les portions du templates parent comme bon vous semble. Comment ? Simplement en copiant le fichier à modifier depuis le thème parent, et en le collant dans votre thème enfant.
Désormais les modifications à apporter se feront sur les fichiers que vous copierez depuis le thème parent.
Prenons un exemple.

Copiez le fichier header.php du thème parent (TwentyEleven, pour rappel), puis collez-le dans votre thème enfant.
Vous avez maintenant dans votre dossier la feuille de style, et ce fichier header.php.
Ouvrez le fichier header.php pour édition et remplacez

<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>

par

<p id="site-description"><?php bloginfo( 'description' ); ?></p>

Le remplacement de h2 par p n’aura aucune incidence visuelle, par contre vous constaterez que le code a bel et bien changé.

Modifications des autres fichiers (images, JS, CSS, etc.)

Vous en avez fait l’expérience avec le fichier style.css : créer un fichier dans votre thème enfant qui porte le même nom qu’un fichier présent dans le thème parent vous permet de remplacer ce dernier.

Par exemple, vous souhaitez modifier le fichier images/search.png qui représente la loupe présente dans les champs de recherche du thème parent. Créez le dossier images dans LT, puis placez-y une image search.png. (prenez une icône sur le web pour effectuer le test, si ça vous dit)
L’autre possibilité aurait été d’écraser le style CSS appliqué à ce type de champ de formulaire, puisque cette image est placée en background-image.

Chacun des fichiers du thème parent est donc éditable de la sorte.

Ajout de templates, d’images, styles, etc.

L’ajout de template est possible : comme vous le feriez pour un thème parent, créer simplement votre template dans le thème enfant. En respectant la hiérarchie des templates de WordPress, vous pouvez par exemple créer une page spécifique pour l’auteur dont l’identifiant est 2 en créant le fichier author-2.php à la racine de votre thème.

L’ajout d’image se fait comme vous le feriez pour n’importe quel projet, créez votre image, dans n’importe quel dossier, puis appelez là dans votre thème (via CSS) ou dans votre code HTML.

Attention ! Lorsque vous cherchez à insérer une nouvelle image, le code suivant ne fonctionne plus :

<img src="<?php bloginfo('template_directory'); ?>/img/mon-image.jpg" />

En effet, la valeur « template_directory » de bloginfo() retourne le dossier du thème parent : http://domain.tld/wp-content/themes/twentyeleven
À la place, utilisez la fonction :

get_stylesheet_directory_uri();

Cette fonction retourne le dossier du thème enfant : http://domain.tld/wp-content/themes/little-twenty.

L’ajout de feuille de styles ou JavaScript se fait de la même manière que les images : nommez vos fichiers de la même manière que ceux du thème parent pour les écraser, ou chargez-en de nouveaux dans vos templates avec les fonctions wp_register_style() et wp_register_script(). Je vous laisse consulter la documentation pour plus de détails.

Les fichiers spéciaux

J’entends par fichiers spéciaux, les fichiers qui n’ont pas tout à fait le même comportement que les précédents.

Le fichier screenshot.png

Ce fichier permet d’afficher un aperçu du thème dans l’administration. C’est un fichier PNG de 300 pixels de large et 225 de hauteur.
Ce fichier n’est pas chargé depuis le thème parent, il vous faudra donc le créer pour votre thème enfant.

Le fichier functions.php

Le fichier functions.php ne fonctionne pas sur le principe des templates. En effet lorsque vous créez un fichier functions.php pour votre thème enfant, celui est chargé en premier, puis le même fichier du thème parent est chargé par la suite.
Les deux fichiers functions.php sont donc chargés l’un après l’autre, thème enfant, puis thème parent.

De cette logique découle une problématique que vous finirez par rencontrer : « Cannot redeclare function_name() (previously declared in […]) ».
En effet, PHP ne permet pas de déclarer deux fois une fonction portant le même nom, ce qui provoque une erreur.

Faisons un essai et analysons-le (attention, faites ça en local, on va créer un conflit) :

  • Dans votre child theme LT, créez le fichier functions.php
  • Entrez le code suivant, qui permet de redéfinir le nombre de mots de l’extrait d’article
    <?php 
    function twentyeleven_excerpt_length( $length ) {
    	return 50;
    }
    add_filter( 'excerpt_length', 'twentyeleven_excerpt_length' );
    ?>
  • Rechargez la page d’accueil du votre site, une erreur PHP apparait.

Nous venons de définir la fonction twentyeleven_excerpt_length, soit parce qu’on a accidentellement utilisé le même nom de fonction, soit parce qu’on voulait écraser l’effet de la fonction du thème parent. Sauf que cette fonction est déclarée deux fois par deux fichiers functions.php différents.
Voici ce qui se passe :

  1. le fichier functions.php de LT (le thème enfant) est lu
  2. twentyeleven_excerpt_length est déclarée pour la première fois
  3. le fichier functions.php de TwentyElevent (le thème parent) est lu
  4. twentyeleven_excerpt_length est déclarée pour la seconde fois
  5. PHP ne comprend pas : Paf ! Erreur !

Comment éviter ce problème ?

En utilisant la fonction function_exists() de PHP. En contrôlant si la fonction existe déjà, on peut déclarer conditionnellement une fonction.

<?php 
if ( !function_exists('twentyeleven_excerpt_length')) {
   function twentyeleven_excerpt_length( $length ) {
      return 50;
   }
   add_filter( 'excerpt_length', 'twentyeleven_excerpt_length' );
}
?>

« Si la fonction twentyeleven_excerpt_length n’existe pas, alors on la déclare. »

Ok pour le principe, mais c’est sur le thème parent qu’il faut faire cette manipulation, or on a dit précédemment qu’on s’interdisait à modifier sauvagement le thème parent.
On est bloqué ! Le thème parent est mal construit !

Il ne vous reste plus qu’à prévenir l’auteur du thème qu’il a mal pensé son code.

Cependant, WordPress prévoit quelque chose : chaque fonction créée et liée à un hook est considérée comme une « action » sur ce hook, il est donc possible de retirer ces actions.
Voici un code type qui reprend notre exemple précédent :

<?php
add_action('after_setup_theme','remove_parent_functions');
function remove_parent_functions() {
   remove_action('excerpt_length','twentyeleven_excerpt_length');
   add_action('excerpt_length','new_twentyeleven_excerpt_length');
}
 
function new_twentyeleven_excerpt_length($length){
   return 75;
}
add_filter('excerpt_length', 'new_twentyeleven_excerpt_length');

Il reste impossible d’utiliser le même nom de fonction, cependant nous avons supprimer l’action de la fonction initiale.
Cela reste un petit bidouillage malgré tout.
Merci à Julien et son article pour cette dernière astuce !

Développeurs de thème, pensez à contrôler l’existence des fonctions avant de les déclarer ! Merci.

Résumons en quelques points

Pour modifier un thème, vous devez dans l’idéal :

  • Créer un thème enfant
  • Écraser les templates, images, scripts et CSS en créant des fichiers de mêmes noms que le thème parent dans le dossier du thème enfant
  • Ajouter autant de templates, script, CSS ou images que je le souhaite, mais :
    • utiliser bloginfo('stylesheet_directory') pour appeler mes fichiers
    • Penser à utiliser wp_register_style() et wp_register_scripts()
  • Penser aux fichiers spéciaux
    • screenshot.png : pour ajouter un aperçu de votre thème au back-office
    • functions.php : les deux fichiers (thème parent et thème enfant) sont chargés

Pour ne pas avoir été beaucoup plus loin dans l’exploration des thèmes, je vais m’arrêter là, mais n’hésitez pas à apporter votre expertise ou toute information complémentaire afin de corriger ou compléter cet article.
Merci :)

Vous voulez encourager l'auteur ?

Don PayPalflattr this!

Laissez-moi un petit mail pour que je puisse vous remercier.

51 commentaires et 3 trackbacks sur “WordPress – Personnaliser un thème ? Oui, avec un child theme”

  1. Julien dit :
    4 octobre 2012

    Salut,
    Ton tutoriel est clair et rapide à lire. Merci. En revanche pour le path, parfois bloginfo ne fonctionne pas. Pour l’avoir testé : get_stylesheet_directory_uri() fonctionnne tout le temps.

    • Geoffrey dit :
      4 octobre 2012

      Effectivement maintenant que tu le dis j’ai déjà rencontré ce problème avec bloginfo().
      Impossible de me souvenir pourquoi cela ne fonctionnait pas, tu as un contexte précis de ton côté ?
      Puis de toute manière bloginfo() est une sorte d’alias de l’autre, autant utiliser la plus directe.
      Merci, je complète l’article :)

      • 8 août 2014

        Bonjour, j’ai lu votre article qui est très bien fait et très utile, merci.

        Je rencontre un petit « soucis » et j’espère que vous pourrez m’aider. Tout se passe bien, j’ai bien créé mon thème enfant et tout fonctionne à merveille cependant lorsque je modifie un des fichiers css qui se trouve exactement dans le même dossier que celui de mon thème parent (même chemin), la modification de se fait pas du tout sur le site. Merci d’avance pour votre aide

        • Geoffrey dit :
          8 août 2014

          Bonjour,

          Tout dépend de la manière dont le thème parent utilise ou charge cette feuille de styles.

          Il faut que vous regardiez le code source de votre site ou simplement le fichier style.css du thème parent.

          A priori c’est la CSS du thème parent qui est utilisée.

          Bon courage.

  2. Stef dit :
    4 octobre 2012

    Superbe

  3. Julien dit :
    4 octobre 2012

    @geoffrey : cela vient de la manière dont est installé ton thème WordPress (ex: dans un sous-dossier et non à la racine). Du coup tous les bloginfo() autres du même genre provoqueront des 404 car renvoyant vers URLs inexistantes.

  4. Geoffrey dit :
    4 octobre 2012

    @Julien : il me semblait que c’était un autre cas que celui-ci, mais impossible de remettre la main dessus.

    @Stef : merci :)

  5. Rémy dit :
    8 octobre 2012

    Tu conseilles d’utiliser function_exists sur toutes les fonctions de functions.php ?

    • Geoffrey dit :
      9 octobre 2012

      Salut salut.
      Désolé, ton commentaire était passé dans les indésirables :/

      Dans un contexte où tu ne gères pas personnellement la mise à jour de ton thème et où des modifications risquent d’être nécessaires : oui.
      Si c’est dans un cadre que tu maitrises (modifications, mise à jour du thème), ce n’est pas nécessaire.

  6. Julien dit :
    10 octobre 2012

    @geoffrey: le multisite peut-être. De toute manière pour ma part je préfère utiliser ce qui marche quoiqu’il arrive.

  7. Semahan dit :
    26 novembre 2012

    Bon tuto, clair et bien expliqué.
    J’ai cependant un souci avec le fichier header.php
    Les modifications que je fais dans celui qui se trouve dans mon dossier enfant ne sont pas prises en compte. Que je supprime ou modifie un élément, cela ne marche pas. Je n’utilise pas twentyten mais gamepress, est-ce que cela veut dire que ce thème n’est pas paramétré pour accepter d’autres fichiers enfants que functions.php et style.css ?
    Merci :)

    • Geoffrey dit :
      26 novembre 2012

      Bonjour et merci :)
      Normalement la technique du thème enfant fonctionne avec tous les thèmes.
      Le seul problème que je connaisse qu’il est possible de rencontrer se trouve sur le fichier functions.php.
      Le dossier du thème enfant se trouve bien en dehors du thème en cours de modification ? Il doit se trouver « à côté » du dossier du thème parent.

  8. Jonathan dit :
    18 décembre 2012

    Salut Geoffrey,

    J’ai bien compris l’utilisation d’un thème enfant mais ma question porte plus jusqu’à quel point peut on utiliser un childthème ?

    Si je modifie la css,,rajoute du js, le function et quelques templates header,footer,single ou rajoute des templates de pages, est ce que cela ne va pas trop alourdir les perfs de mon site, ou est ce qu’il ne vaudrait pas plutôt pour ce genre de cas, coder son propre thème ?

    Merci à toi

    • Geoffrey dit :
      18 décembre 2012

      Hello Jonathan,

      C’est une excellente question, et je me la pose souvent.
      Tout dépend de ton besoin en fait. Si tu souhaites continuer à bénéficier des améliorations de ton thème de base (acheté ou téléchargé gratuitement) et coder tes petites améliorations perso, le child theme est fait pour ça.
      Si tu as l’intention de juste utiliser le thème de base comme thème de démarrage pour éviter d’avoir besoin de réinventer la roue, tu édites le thème directement pour l’adapter à tes besoins.
      Puis si tu as besoin de quelque chose d’hyper léger ou très spécifique, tu composes de A à Z ton thème.
      À toi de voir en fait, je n’ai pas d’autres règles que celles-là, et ce n’est que ma manière de voir les choses :)
      Bonne continuation !

  9. 18 décembre 2012

    @jonathan & @geoffrey:

    En réalité, si il y a bien un poids supplémentaire quoiqu’il arrive avec les child thèmes puisque WordPress doit regarder à deux endroits pour chaque template.

    Ça devient lourd aussi si tu utilises le @import pour garder la CSS d’origine en support dans le CSS de l’enfant. La solution pour cela consisterait à charger les deux CSS via le header et d’éviter le @import.

    Maintenant les thèmes enfants sont faits pour faciliter la maintenance et les changements mineurs. Ça prend son sens pour les thèmes ultra populaires comme Twenty Twelve ou les framework de type Boilerplate qui sont constamment mis à jour.

    Si les changements sont très importants, s’il s’agit d’écraser toutes les fonctions ou presque du parent et que le parent est mis à jour une fois toutes les 2ans, c’est de la pure perte de temps, autant partir directement sur un framework.

    Pour le thème de A à Z attention à bien savoir ce que l’on fait, notamment en matière de sécurité, ne pas rajouter des bouts de code PHP récupérer par ci par là.

    > the WordPress way sinon rien ;)

  10. Geoffrey dit :
    18 décembre 2012

    @Julien : Ah oui pardon je n’ai pas répondu complètement à la question du poids ou des perfs. Merci d’avoir pris le temps de préciser :)

    Même au sein d’un thème il y a des bonnes pratiques à avoir pour le nommage des fichiers PHP pour éviter de donner trop de boulot à WordPress dans le parcours des templates.

    Il y aurait tout un livre à écrire sur le sujet de l’optimisation et des bonnes pratiques sur WordPress.

    Autrement pour le @import oui il vaut mieux éviter, je le précise d’ailleurs dans l’article :)

  11. 18 décembre 2012

    @geoffrey: avec plaisir :) mais oui tu avais précisé dans l’article. C’était juste pour étayer mon propos, à savoir que l’on utilise pas les child thèmes pour gagner en perf.

  12. jonathan dit :
    18 décembre 2012

    @Geoffrey & @Julien

    Merci à vous deux pour le complément d’info, donc j’en conclue pour ma part qu’il vaut mieux que je parte d’un nouveau thème.

    @Julien

    Tu as parlé des frameworks, tu as des conseils sur des derniers ;)

  13. Pit Dessin dit :
    21 mars 2013

    Tombe à pis cet article.
    Le php n’est pas mon fort cependant, va falloir que je m’y plonge sérieusement un de ces quatre.

  14. Mirleft dit :
    25 mars 2013

    Merci pour le tutu je suis débutant mais c’est grâce à vous je m’avance merci mille fois bonne nuit et faites de bon rêve

  15. 1 avril 2013

    Salut,

    Pour l’écrasement des fonctions du parent, cela n’est pas nécessaire si le thémeur a bien utilisé des function_exists() poru la déclaration de ses fonctions.
    J’ajoute que la plupart de nos snippets peuvent être qualifiées de bidouillages.

  16. 23 avril 2013

    Bonjour,

    Très bon article, j’ai même appris deux trois choses, notamment au niveau de la fonction « after_setup_theme ».

    Par contre, j’ai une question :

    Il est possible d’initialiser des fonctions dans le fichier « fonction.php » et de les utiliser dans le thème après.

    Perso, j’ai une préférence pour orienter mon code sous forme d’objet dans le fichier « fonction.php ». En gros, je créer une classe !

    Instancier cet objet dans le fichier « fonction.php » n’est pas un problème et ça fonctionne parfaitement. Par contre, à partir du moment que je stocke l’instance dans une variable, il n’est pas possible de l’appeler dans le rendu visuel du thème.

    La seule solution que j’ai trouvé pour le moment, c’est d’appeler les méthodes en static.

    Quelqu’un serait-il pourquoi, il n’est pas possible d’utiliser l’instance directement ?

    Bien cordialement

    • Geoffrey dit :
      4 mai 2013

      Bonjour,

      Désolé mais ton commentaire était passé en indésirable.

      Pour ton problème je crois qu’il faut simplement passer ta variable en global.
      Ou alors je n’ai pas bien saisi le problème :)
      Bon week-end.

  17. Ben dit :
    1 juillet 2013

    Bonjour,

    Tous les articles que je vois au sujet des thèmes enfants, parlent des fichiers à la racine du thème.

    Mais si je veux modifier le fichier / layouts/page.php (pour enlever la date par exemple).

    Si j’ai bien compris, je dois créer un dossier /layouts dans mon theme enfant, puis y copier le fichier page.php et le modifier en conséquence.
    Cela devrait avoir pour effet d’écraser le page.php du thème parent.

    Or ça ne fonctionne pas chez moi, qu’est-ce que j’ai pas compris ?

    • Geoffrey dit :
      1 juillet 2013

      Bonjour Ben,
      C’est bien l’effet attendu, et c’est bien comme cela qu’il faut faire.

      Plusieurs réponses :

      • Tu n’as pas créé correctement ton thème enfant
      • Il n’est pas activé dans la gestion de tes thèmes
      • La modification n’est en fait pas apportée sur le bon fichier

      Ne sachant pas concrètement quel est l’objectif final de ta modification, je ne peux pas t’assurer que tu modifies le bon fichier, ou que tu n’as pas fait une erreur ailleurs.
      Bonne continuation :)

  18. pako dit :
    12 août 2013

    Bonjour Geoffrey,
    J’ai lu la personnalisation du thème avec beaucoup d’intérêt et je t’en remercie. Pourrais tu m’indiquer si l’on peut avoir plusieurs thèmes sur le même site de façon à avoir la présentation du Twentyten sur certaines pages et une présentation faisant appel à un autre thème sur d’autres (tableau de présentation de base de donnée spécifique) ?
    Merci d’ores et déjà pour tes indications.

    • Geoffrey dit :
      12 août 2013

      Bonjour,
      Navré mais je ne me suis jamais posé la question.
      Je ne sais absolument pas si c’est faisable.

      Je viens juste de trouver ceci : http://wordpress.org/plugins/theme-switcher/ mais le plugin n’est plus maintenu.
      Il faudrait que j’approfondisse les recherches mais j’avoue ne pas avoir beaucoup de temps en ce moment :/
      Bon courage !

  19. Zouz dit :
    4 septembre 2013

    Bonjour,
    Merci pour votre tuto ! Je suis en train de m’entrainer en local mais je rencontre un petit soucis avec mon thème (Virtue) : il existe plusieurs fichiers css dans ce thème (le style.css à la racine du thème et virtue.css qui est situé dans un sous dossier appellé CSS). Quand je modifie un style situé à l’origine de la feuille de style virtue.css, les modifications ne semblent pas marcher (j’ai fait mes modifications dans le style.css du thème enfant dans un premier temps, puis j’ai finalement créé un virtue.css dans le thème enfant mais la non plus ça ne fonctionne pas). Comment cela se passe t-il quand il y a plusieurs fichiers CSS dans un thème ?
    Merci pour votre aide !

    • Geoffrey dit :
      5 septembre 2013

      Bonjour,

      Il y a plusieurs problèmes qui peuvent intervenir :

      • la style.css du thème parent fait des @import des autres CSS. Dans ce cas il va falloir copier/coller le contenu de cette feuille dans celle de votre thème enfant et supprimer ou adapter les appels aux autres CSS
      • les autres CSS sont appelées depuis le fichier functions.php du thème parent. Celui-ci n’étant pas écrasé directement il va falloir agir selon les possibilités du thème parent (présence ou non de fonctions function_exists() pour vérifier si la fonction est déjà déclarée)
      • les autres CSS sont incluses autrement : il faut écraser les templates concernés en utilisant ensuite le chemin relatif au thème courant comme mentionné dans l’article.

      Concrètement il faut chercher où et comment sont appelées les autres feuilles de style :)
      Il est possible que vos modifications sur le thème enfant ne soient simplement pas prise en compte car les CSS ne sont jamais incluse dans votre thème ou écrasée par un autre appel.

      Bon courage.

  20. Zouz dit :
    5 septembre 2013

    Merci beaucoup c’est parfaitement clair ! Je n’ai plus qu’à plancher la-dessus ;)
    Bonne journée !

    • Ellen92 dit :
      15 décembre 2013

      Salut,

      as-tu trouvé la solution ? Si oui, ça m’intéresse !!!

      Bonne journée.

  21. Manhattan dit :
    7 janvier 2014

    Bonsoir,

    Je comprends la logique des thèmes enfants et pourtant je ne vois pas bien ce que je perdrais ultérieurement dans le cas inverse.

    Dans le cas d’un site d’une 10aine de pages déjà construit pour lequel je veux : rendre une page dynamique avec custom post type (par ex des réalisations) et adjoindre un blog, il me parait plus simple de découper mes pages existantes en y intégrant les fonctions wp nécessaires (header, footer, page1, page2, index.php…) , de dupliquer ds mon thème le fichier functions.php et le dossier inc du dernier thème wp en vue (14), et je me contente de single.php, sidebar.php et searchform.php pour le blog.
    Pour résumer, j’ai l’impression qu’il est plus simple de ne prendre que ce dont j’ai besoin que de chercher à enlever tout ce dont je n’ai pas l’utilité :)
    Qu’est ce que je n’ai pas compris et qu’est ce que je gagnerais avec un child theme ?

    • Geoffrey dit :
      9 janvier 2014

      Bonsoir,

      En effet ça dépend des connaissances que l’on a de WordPress et des besoins sur un thème en particulier.

      Lorsque je trouve par miracle un thème qui correspond à peu près à mes besoins, je préfère le dupliquer et faire les modifications dedans en partant du principe que je ne souhaite pas les mises à jour. Mais je fais cela en considérant les tenants et aboutissants.

      Mon article traite du cas où il y a besoin d’un simple gabarit en plus, ou de petites choses en moins, tout en préservant la possibilité de bénéficier des mises à jour du thème.
      Par exemple, il n’y a pas longtemps c’est arrivé sur les thème ElegantThemes : Nick a mis à jour certains thèmes en y intégrant du responsive. C’est une fonctionnalité intéressante qui ne devrait pas rentrer en conflit avec mes modifications sur mon child theme, mais qui serait catastrophique si j’avais édité mon thème à la va-vite, car mes modifs seraient écrasées, ou j’accepterai de ne pas faire la mise à jour…

      Tout dépend du besoin donc. Je ne propose là que la bonne doution pour ne pas bloquer l’évolution des mises à jour d’un thème.

      Bonne soirée et merci pour ton intervention.

      • Manhattan dit :
        18 janvier 2014

        Ok. Je viens de comprendre les méthodes qui me faisaient défaut et de faire un gros pas en avant en décortiquant quelques thèmes « starter » (inpixelitrust blank theme et underscores). Les 2 regorgent de ressources et je n’ai pas fini leur étude !
        Il me fallait juste commencer à mettre les mains sous le moteur de « véhicules » ayant fait leurs preuves plutôt que de toujours vouloir faire du from scratch :)

        Merci ^^

      • Calipsye dit :
        6 juin 2014

        Mais dans ce cas là (je rebondis sur cette discussion ^^), si on prend juste ce qui nous intéresse et qu’on ne fait pas les mises à jour, n’y a-t-il pas un risque niveau sécurité?

  22. 2 mars 2014

    Bonjour !
    Avant tout chose, merci pour ce petit tuto ! :)
    C’est très clair et j’ai pu créer mon thème enfant. Seulement, j’ai été obligé de remettre le thème parent car certaines fonctionnalités avaient disparu du thème enfant : la loupe (fonction de recherche) qui était dans le menu du thème parent, par exemple, ou encore les flèches permettant de naviguer sur les deux sliders de la page d’accueil.

    J’utilise le thème Vantage (j’ai par ailleurs commencé mon site ce matin, c’est donc normal que rien ne soit fini et qu’il n’y ait aucun contenu).

    Je te remercie par avance pour ton aide, si tu veux bien m’en apporter !
    Cordialement,
    Maël.

    • Geoffrey dit :
      2 mars 2014

      Bonjour,
      Ton site web semble fonctionner, j’imagine que tu as trouvé la solution ;)
      Bonne continuation.

      • 2 mars 2014

        Bonsoir !
        A vrai dire, absolument pas, j’ai simplement remis le thème parent…
        Je ne sais pas trop quoi faire, du coup.
        Bien cordialement :)

        • Geoffrey dit :
          2 mars 2014

          Il faut prêter attention au 404 présentes dans votre console pour relever les fichiers manquants et bien utiliser la fonction get_stylesheet_directory_uri(); quand c’est possible pour la déclaration des ressources (images, CSS et JS).
          Je ne connais pas ce thème, mais peut-être que le fichier functions.php est mal codé. N’oubliez pas que ce fichier est chargé en plus de votre fichier functions.php.

          Voilà, je vous donne des indices, sans connaître le vrai problème.

          Bonne soirée.

          • 19 mars 2014

            Bonjour ! :)
            Avec un léger retard, je vous réponds. En fait, est-il obligé de reproduire le fichier functions.php dans le thème enfant ? Si mon thème enfant ne contient aucun fichier functions.php, que se passe-t-il ? Car je n’en avais créé aucun.

            A vrai dire, je ne compte pas modifier ce fichier, et il est très probable, en effet, que ce soit la cause de mon bug. Du coup, sauriez-vous m’indiquer comment faire ? :)
            Un énorme merci d’avance !
            Bonne journée :)

          • 19 mars 2014

            Je me suis permis de vous faire une petite vidéo pour que vous voyiez peut-être mieux d’où vient le problème ! :)
            http://screencast.com/t/ja58zYD49R
            Encore merci si vous acceptez de me filer un mini coup de main ><

          • Geoffrey dit :
            19 mars 2014

            Bonjour Maël,

            C’est bien la première fois qu’on me fait un screencast pour me présenter un problème :) Merci.
            Concernant les différentes images qui manquent, je pense que ça vient plus simplement de la manière dont elles sont déclarées dans la ou les CSS.
            Par exemple, si je copie l’intégralité de la CSS dans ma feuille de thème enfant, les appels aux images vont se faire depuis le nouvel emplacement, donc si je ne copie pas les images également dans le thème enfant, ça va me donner une erreur 404. D’ailleurs, peux-tu regarder avec Firebug ou ton outil de debug (F12) si dans l’onglet Console tu as des 404 qui apparaissent ?

            Bonne soirée.

          • 20 mars 2014

            Bonjour Geoffrey ! :)
            Un énorme merci pour ton aide, j’ai pu résoudre la plupart de mes problèmes grâce à ça ! J’ai simplement déplacé tous les fichiers images du thème parent vers le thème enfant :)
            A priori du coup, le souci semble réglé ! Encore merci ! (Au passage, je n’ai pas compris la dernière partie de ta réponse, mais du coup j’ai pas eu besoin de m’en servir, haha !)

            Je me permets juste de te poser une question : est-il normal, lorsque j’ouvre l’éditeur pour mon thème enfant, que le fichier style.css soit complètement vide, alors que, si je l’édite depuis le FTP, il comporte bel et bien tous les éléments du thème parent ?
            Encore merci pour ton aide !
            Maël.

          • Geoffrey dit :
            20 mars 2014

            Hello,
            Ravis d’avoir pu t’aider.
            Hélas non ce bug d’éditeur vide ne me dit rien… à moins qu’il y ai un souci sur les droits de lecture (CHMOD) mais ça m’étonnerait.

            Pour la dernière partie de mon message, il s’agissait juste d’une méthode pour vérifier s’il manque des images à l’appel depuis la feuille de style (ça provoque des 404 qui s’affichent dans la console de développement de ton navigateur).
            Bonne journée

          • 20 mars 2014

            Hello !
            D’accord, merci de ta réponse !
            Comment faire pour vérifier les droits d’édition Chmod ? Quel nombre doit s’afficher pour que tout fonctionne correctement ? :)

            Bonne soirée et bonne nuit ! :)

          • 20 mars 2014

            Si cela peut t’aider, voici ce que mon client FTP (filezilla) affiche pour le fichier style.css :
            - à la colonne droits d’accès, il affiche « -rw-r–r– »
            - à la colonne propriétaire, il affiche « 48 48″

            En espérant que je ne me suis pas trompé quant aux infos à te fournir !

          • Geoffrey dit :
            21 mars 2014

            Hello,
            Je crois que cette page peut t’aider :
            http://codex.wordpress.org/Changing_File_Permissions

            Tu peux faire un clic-droit sur le fichier et « Changer les permissions ». Je crois que 755 est suffisant, mais je lis des topics ou 777 est parfois nécessaire.
            Bon courage ;)

          • 24 mars 2014

            Hello,
            Encore une fois, merci pour ton aide !

            Malgré le fait que j’aie chmodé en 777 le fichier style.css de mon thème enfant, ça n’a malheureusement rien changé…
            Par conséquent, j’ai posté un message dans le forum de support anglais pour Wp, en espérant qu’on pourra m’aider par là-bas :) Histoire de ne pas non plus trop t’embêter ! ;)

            Passe une bonne semaine, et encore merci,
            Maël.

          • Geoffrey dit :
            24 mars 2014

            Bizarre. Je ne vois pas ce qui pourrait bloquer. Tiens-nous informés si tu obtiens une réponse. Merci :)

          • 24 mars 2014

            Eh bien… Peut-être qu’ajouter le contenu de l’autre fichier css manuellement, en passant par Filezilla n’était pas la bonne solution, et que j’aurais du faire un copier/coller avec l’éditeur de thèmes directement ?
            A part ça, je ne vois pas ce qui pourrait poser problème, moi non plus… Peut-être un plugin ?

  23. Stephane dit :
    27 juillet 2014

    Bonsoir Je trouve votre cours super bien fais mais j’ai opté pour la modification d’un thème (Point) tous va bien jusque-là .
    je voulais que tu m’aide à modifier le style d’affichage des articles j’aimerais qu’il s’affiche pas comme dans un blog mais cote à cote sur cette exemple si vous me le permettez bien sure http://www.maliweb.net.
    merci

Laisser un commentaire

Certains codes HTML ne sont pas échappés automatiquement. Pour afficher du code dans votre commentaire, merci d'échapper vos chevrons en utilisant "&lt;" et "&gt;" en lieu et place de "<"" et ">".

Il est difficile de proposer un support pour tous les articles de ce blog. En ne fournissant pas un moyen de consulter votre code bogué, vous vous assurez de ne pas avoir de réponse adaptée. Utilisez CodePen.io à défaut d'une page web.

Les sites qui en parlent

 
Le studio web