Formation WordPress avancé : Wordplate

Dans ce tutoriel je vous propose de découvrir Wordplate, un outil qui vous permet d'installer et de travailler avec Wordpress d'une manière plus organisée.

Le problème de Wordpress

Avant de découvrir Wordplate il est important d'identifier les problèmes que l'on rencontre avec l'installation basique de Wordpress. Wordpress est un CMS qui est avant tout pensé pour être simple à installer et à utiliser pour des personnes sans compétences particulières pour le développement.

• Tous les fichiers doivent être déposés à la racine du serveur web. Ce qui pose un problème de sécurité si on veut inclure des fichiers qui ne doivent pas être visible depuis le web.
• Le système de mise à jour automatique implique que PHP ait la capacité d'écrire ses propres fichiers PHP. Un plugin avec une faille permet donc à un attaquant de modifier des fichiers et d'amplifier les conséquences de l'attaque.
• Il n'est pas possible de versionner simplement un projet Wordpress et on se retrouve souvent à devoir versionner tout le core de Wordpress et les plugins pour éviter les problèmes et pouvoir travailler à plusieurs.

Qu'apporte Wordplate ?

Wordplate apporte une installation de Wordpress clef en main qui se base sur l'utilisation de Wordpress via Composer.

composer create-project wordplate/wordplate

Cette commande permet de créer la structure du projet et installer les différentes dépendances.

.env
/vendor
/resources
/public
  |--index.php
  |--/plugins
  |--/themes
  |--/wordpress

On remarque déjà que la structure est plus proche de celle que l'on a l'habitude de retrouver lors de l'installation d'un framework. Le dossier public sera donc la racine de votre serveur web et contiendra des sous dossiers pour les différents composants de Wordpress (plugins, themes, uploads, languages...). Le dossier wordpress quant à lui contiendra les fichiers du core et ne devra pas être versionné / modifié.
De la même manière la configuration de Wordpress va se faire au travers d'un fichier .env et des variables d'environnement (pour la production).

Wpackagist

En plus de la structure de projet, Wordplate préconfigure votre composer.json pour permettre l'utilisation de Wpackagist pour installer les plugin et les thèmes via composer. Cela peut sembler étrange au premier abord mais installer des plugins / thèmes Wordpress via un gestionnaire de paquets offre plusieurs avantages :

• Le versionning est simplifié car il n'est plus nécessaire de versionner les plugins car ils peuvent être téléchargé via Composer.
• Le travail à plusieurs est aussi simplifié car il est possible d'installer tous les plugins nécessaires au projet en une seule commande.
• Même si ce n'est pas forcément une bonne idée en terme de sécurité, il est possible via composer d'installer une version spécifique du plugin et de bloquer cette version pour éviter les mises à jours.

Pour installer un plugin il suffit donc de faire un composer require

composer require wpackagist-plugin/email-log

Puis de l'activer via le backoffice ou wp-cli.

Webpack et Mix

Par défaut, Wordplate intègre Laravel Mix qui permet de configurer plus simplement Webpack et de travailler avec différents pre-processeurs CSS et JavaScript. Les assets seront automatiquement compilés dans le dossier du thème et pourront être référencés automatiquement.

add_action('wp_enqueue_scripts', function () {
    wp_deregister_script('jquery');

    wp_enqueue_style('wordplate', mix('styles/app.css'));

    wp_register_script('wordplate', mix('scripts/app.js'), '', '', true);
    wp_enqueue_script('wordplate');
});

Autoloader de pluggins

Parfois, lorsque l'on crée un thème particulier, il y a une série de plugins qui sont nécessaires à son bon fonctionnement. Wordplate propose pour ce cas là un système d'autoloader qui reproduit le principe des Must Use Plugins.

composer require wordplate/autoloader

Une fois installé, il suffit de lister les plugins à activer par défaut (et à masquer du backoffice) dans le fichier composer.json avant de les installer.

"extra": {
    "installer-paths": {
        "public/mu-plugins/{$name}": [
            "type:wordpress-muplugin",
            "wpackagist-plugin/hide-updates",
        ]
    }
}