J’ai récemment mis à disposition sur Github le résultat de mon travail pour créer un thème WordPress qui peut servir de framework ou de thème parent pour la création d’un nouveau thème. Cet article a pour but d’expliquer pourquoi, et ce qu’il peut aussi vous apporter.

Pourquoi un autre starter thème et pourquoi Racine ?

Bien entendu, il existe déjà de nombreux thèmes “starter” (Underscores par exemple), ou autres frameworks, qui permettent d’accélérer le développement de nouveaux thèmes ou sites WordPress. Ce n’est pas une nouveauté, et Racine ne révolutionne probablement pas ce petit monde. Mais, pour mes projets, j’avais besoin d’avoir une base prête, solide, et surtout que je connaisse par cœur afin de ne pas avoir à me demander “pourquoi il  y a ça ici ?” ou “à quoi sert cette fonction ?”.

Prendre en main le code de quelqu’un d’autre, même si celui-ci est le meilleur du monde, nécessite toujours un temps d’adaptation, et quitte à devoir prendre du temps, j’ai estimé préférable de le consacrer à améliorer mes compétences et créer une solution adaptée à mes besoins les plus réguliers.

C’est ainsi que j’ai développé mon propre thème de base, et comme j’aime partager ce que je fais avec la communauté, je l’ai mis en ligne, non sans avoir réfléchi à un nom. Après plusieurs idées type squelette, chassis, et toutes les variantes possibles en anglais, c’est Racine qui est restée : le mot représente à la fois le concept de base de développement, mais aussi l’origine francophone du thème.

Qu’est-ce que propose Racine ?

La genèse du thème c’est bien, mais vous vous demandez sans doute ce que ce thème contient d’intéressant. Voici une liste non exhaustive :

  • Les templates nécessaires pour afficher les différents contenus possibles du site (page d’accueil, article, page, archives, 404, formulaire de recherche et résultats de recherche, barre latérale, commentaires…)
  • Les fonctionnalités proposées par le “core” de WordPress : en-tête et fond personnalisés, menus, widgets, images à la une…
  • Un exemple d’utilisation du customizer (possibilité de changer la couleur des liens)
  • Le code nécessaire pour l’affichage du fil d’ariane fourni par WordPress SEO
  • Une traduction complète en français (le thème est en anglais de base)
  • L’intégration de KNACSS, le framework CSS de Raphael Goetter, et de styles de base pour les classes de WordPress (type alignleft, wp-caption…)
  • Un fichier JS et quelques styles pour gérer l’affichage du menu principal suivant le support (passage d’un menu en ligne à un menu “hamburger”)

Racine passe les tests proposés par Theme Check, qui correspondent aux standards et bonnes pratiques de développement de thème WordPress. Cela vous assure une base saine si vous souhaitez l’utiliser pour vos projets.

Comment l’utiliser ?

Il est possible d’utiliser Racine de deux façons, suivant vos préférences et vos besoins :

  • En tant que thème parent : c’est d’ailleurs le thème parent pour le thème de mon site actuel. Le fichier functions.php contient les vérifications nécessaires pour qu’il soit possible de surcharger les fonctions existantes.
  • En tant que “base de travail” : vous modifiez directement ses fichiers, en supprimant ce qui ne sera pas utile pour votre projet. J’utilise cette méthode lorsqu’il y a trop de différences entre la base et les besoin du projet.

Évolution du thème

Je ferai évoluer Racine en fonction des évolutions de WordPress, si de nouvelles fonctionnalités à intégrer au thème se présentent, et pour effectuer des corrections ou des améliorations (je pense à la compatibilité par défaut avec WP-Pagenavi par exemple).

Mon autre perspective, qui est aussi un questionnement, est sur le style par défaut à donner au thème. Actuellement, le style est extrêmement minimaliste, il n’y a quasiment aucune mise en page intégrée. Mais je serais intéressé par des points de vue extérieur : préférez-vous que cela reste en l’état, pour éviter d’avoir à supprimer des styles, ou avoir une mise en page qui pourrait être considérée comme minimum (positionnement des articles et de la barre latérale par exemple) ?

Exemple de page avec le thème Racine
Un exemple de page avec Racine

Je suis bien entendu ouvert et intéressé par tout autre retour que vous pourrez faire si vous testez ou utilisez Racine !

Thème WordPress Racine sur Github

Rejoindre la conversation

6 commentaires

  1. Bonjour
    Merci pour cette ressource. Vous indiquez que votre site actuel est basé sur ce starter. Cependant, il y a effet de yoyo du menu en mode responsive quand on clique sur l’icône menu (Chrome 38, FF 32, Safari 5, IE 11). Mais vous l’avez peut-être déjà identifié ?

  2. C’est exact, mais c’était un problème uniquement si on redimensionne la fenêtre du navigateur (un peu de javascript mal placé). J’en ai profité pour le corriger

  3. Bonne initiative !
    Je préfère de loin une bonne base, légère, à customiser qu’un thème avec des options à rallonge.
    J’essaye racine la prochaine fois que je démarre un thème responsive, merci !

  4. Bonne initiative !
    Mais, attention aux abus de langages… Ne parlons pas trop vite de “framework” car ça n’en est pas un.
    Il y a une énorme différence entre un “starter thème” et un “framework”. Un abus de langage qui arrive trop souvent au niveau de WordPress.

    Petite remarque concernant le starter lui-même, dommage qu’il ne soit pas en objet. L’évolution et la maintenabilité du code en serait amélioré.

  5. Oui effectivement, c’est un abus de langage. Disons que c’est plutôt une “base de travail”. Par contre, je serais curieux de voir ce que de l’OOP pourrait vraiment apporter pour un thème comme celui-ci

  6. Si le thème reste tel quel, ça n’apporterait pas grand chose. On est qu’avec 200 lignes de codes (“inc” inclus). Mais, dans l’optique qu’il puisse évoluer, il y aurait forcément un intérêt.

    L’objet restera plus lisible et organisé que le procédural. A condition de le faire bien – évidement – , c’est comme tout! Mieux vaut un code procédural bien monté que de l’objet mal utilisé (il n’y a rien de pire).

    Ici, pour faire court, tu peux enlever tous tes “functions_exist”. Tu regroupes tes hooks, … Et tu regroupes les différentes configurations dans des propriétés adéquates.

Laisser un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.