Rétrospective
Depuis mes débuts dans le développement web en 2008, j’ai découvert et testé un grand nombre d’outils de développement, que ce soit des logiciels de codage, des modules ou des packages.
Il faut imaginer que mes premiers sites personnels étaient construits grâce à l’application Bloc Note, conçue pour du traitement de texte et non pas du développement ; chaque ligne devait être entièrement codée et cela sans vérification d’erreur.
Lorsque j’ai développé mon activité d’indépendant, le logiciel Coda m’a accompagné de nombreuses années. Son principal intérêt réside dans la personnalisation de l’espace de travail, ainsi que la possibilité d’installer des modules qui permettent d’augmenter la productivité (auto-suggestion, compilateurs, etc…). Désormais, j’utilise Atom, un éditeur open-source avec de nombreux modules disponibles.
Au fur et à mesure de mon activité de développeur, je me suis intéressé à différents packages (Yarn et NPM), qui eux, permettent d’installer les librairies de codes permettant de développer plus rapidement.
Tous ces éléments (modules, packages) m’ont aisément permis d’améliorer ma productivité, mais aussi de favoriser la collaboration au travers d’un code très structuré et d’outils tels que GIT pour le versionning.
Concernant WordPress
Le Codex, véritable encyclopédie, propose des sections sur le développement de thèmes ainsi que les standards de développement. Cependant, je trouve qu’il manque de standards clairs et qu’elle permet donc une interprétation relativement large.
Sur l’organisation d’un thème et de bonnes pratiques, comme le développement orienté objet. Un thème pourra ainsi être développé avec des inclusions de php, des partials, ou non. Si l’on regarde certains thème open-source ou premium, il est facile de se rendre compte de ces différences.
Standards de développement de thèmes
Que nous manque-t-il donc pour résoudre cette problématique?
- Une structure de développement moderne
- La possibilité de réutiliser du code (ne pas réinventer la roue)
- Un optimisation des ressources (images, scripts, typographie,…)
Il existe plusieurs frameworks de développement de thèmes WordPress, j’en ai retenu trois, car ils répondent aux besoins exprimés :
- Timber : framework orienté objet et le système de templating Twig
- Themosis : framework orienté objet qui offre le choix entre le système de templating Twig et Blade
- Roots : framework orienté objet et le système de templating Blade
Chez Apptitude, nous utilisons Roots, car ce framework est complété d’un boilerplate et de la gestion d’environnement (serveur) qui fournit entre autre un serveur local très rapidement.
Il est aussi très facile de collaborer sur un projet, car les fichiers de configurations sont versionnés et partagés via GIT ; ainsi, un collègue rejoignant le projet pourra le démarrer en un minimum de temps.
Roots est divisé en trois projets : Trellis, Bedrock et Sage.
Trellis
La création de serveur de développement est automatisée grâce à Vagrant (logiciel open-source pour la création et la configuration des environnements de développement virtuel). Pour une installation locale, il est nécessaire d’avoir installé Virtualbox et Vagrant au préalable.
Bedrock
Je parlais de structure plus haut, elle est ici apportée en séparant les configurations pour les différents environnements, le coeur de WordPress et l’application (thème et plugins) par rapport à une installation traditionnelle.
La gestion des environnements est très pratique, car elle permet de faciliter le déploiement de site et le testing. Composer permet de gérer l’installation de WordPress, des plugins, et d’autres packages bien utiles.
Sage
Ce thème est lui aussi structuré d’une manière moderne (orienté objet), il sépare les vues (Templates de pages) et la logique, via des controllers.
Lors du démarrage d’un projet, il est possible de choisir entre plusieurs frameworks CSS, comme Bootstrap, Foundation …
Webpack s’occupe de la compilation des ressources (Images, Javascript, SCSS) et permet le live reload. Un linter SCSS et Javascript sont installés par défaut et permettent d’améliorer grandement la qualité du code créé. Le thème est bien intégré avec ACF et permet de travailler rapidement avec ce plugin.
Sage utilise le système de templating Blade, qui est tiré de Laravel, un framework PHP qui permet de développer des applications robustes. Si l’on compare le template page.php entre Underscores (Un thème de base) et Sage, on peut vite se rendre compte du bénéfice de la structure apportée par Sage.
Page.php dans Underscore
<?php /** * The template for displaying all pages * * This is the template that displays all pages by default. * Please note that this is the WordPress construct of pages * and that other 'pages' on your WordPress site may use a * different template. * * @link https://developer.wordpress.org/themes/basics/template-hierarchy/ * * @package Lorem */ get_header(); ?> <div id="primary" class="content-area"> <main id="main" class="site-main"> <?php while ( have_posts() ) : the_post(); get_template_part( 'template-parts/content', 'page' ); // If comments are open or we have at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) : comments_template(); endif; endwhile; // End of the loop. ?> </main><!-- #main --> </div><!-- #primary --> <?php get_sidebar(); get_footer();
Page.blade.php dans Sage
@extends('layouts.app')
@section('content')
@while(have_posts()) @php the_post() @endphp
@include('partials.page-header')
@include('partials.content-page')
@endwhile
@endsection
Dans cet exemple, on peut voir que le template blade est beaucoup plus court, une extension du layout de base (code suivant) permet de réutiliser facilement ou de modifier la structure HTML de la page.
Le Appels et Fonctions PHP de base, comme @while, @include sont définis par la syntaxe de Blade.
App.blade.php dans Sage
<!doctype html>
<html {!! get_language_attributes() !!}>
@include('partials.head')
<body @php body_class() @endphp>
@php do_action('get_header') @endphp
@include('partials.header')
<div class="wrap container" role="document">
<div class="content">
<main class="main">
@yield('content')
</main>
@if (App\display_sidebar())
<aside class="sidebar">
@include('partials.sidebar')
</aside>
@endif
</div>
</div>
@php do_action('get_footer') @endphp
@include('partials.footer')
@php wp_footer() @endphp
</body>
</html>
Blade introduit aussi la notion de composants. Imaginons une boîte d’alerte simple, elle pourrait être utilisée sur plusieurs pages et dans différents contextes.
Deux variables ont été créées pour permettre de remplir ces zones avec le contenu de notre choix en fonction du contexte.
<div class="alert alert-danger">
<div class="alert-title">{{ $title }}</div>
$message
</div>
L’appel de ce composant (localisé dans le dossier resources/views/partials du thème) dans un partial pourra être effectué de la manière suivante :
@component('partials.alert', [
'title' => 'Titre de mon choix',
'message' => 'Mon message'
])
@endcomponent
Il sera possible par la suite de retourner les valeurs dynamiquement via un contrôleur, si l’on souhaite aller plus loin.
Performances
Grâce à la compilation des ressources, la base de Sage est très optimisée. Il va de soit qu’il faudra respecter les bonnes pratiques de développement et d’optimisation de site lors du développement du thème, je recommande l’outil GTmetrix, qui donne un bon nombre de commentaires constructifs et de bonnes explications. Couplé à un plugin de cache tel que WP Rocket, W3 Total Cache ou autre, le temps de chargement de votre site pourra être très rapide.
Pour aller plus loin, je vous invite à consulter la documentation de Roots et de créer votre premier thème, si vous avez peu d’expérience avec le développement orienté objet, il est fortement recommandé de se former avant de partir avec Sage pour comprendre les concepts qui y sont utilisés et aborder ce framework plus facilement.
Grâce à la structuration du code de Sage, je pense que cela peut apporter beaucoup de structure à vos thèmes et vous permettre de gagner encore plus en productivité et en qualité de code, ce qui est bon pour vous et vos clients.