Où l’on apprend comment écrire une extension simple pour se faciliter la vie au quotidien sur WordPress.

J’inaugure aujourd’hui une série d’articles, à la longueur et la périodicité totalement imprévisibles, sur quelques techniques utiles aux utilisateurs de WordPress.

Ceux-là se reconnaîtront sans soucis, pour les autres, il faut savoir que WordPress est la plateforme qui se cache derrière Chic & Geek ainsi que des millions d’autres sites autour du web. Histoire de mettre un peu la charrue avant les boeufs, afin qu’ils se reposent un peu, je vais commencer par un petit truc que j’ai appris à faire hier matin, lorsque j’ai écrit mon premier plug-in.

Le problème à résoudre était le suivant:

Je souhaitais effectuer des modifications dans la feuille de style CSS utilisée dans l’affichage des pages d’administration de WordPress (WP dans la suite) de façon à optimiser la page de saisie/édition des articles par rapport  à quelques décisions que nous avons prises, Anne et moi, sur la prochaine nouvelle version de Chic & Geek (oups, mince, j’ai vendu la mèche…. 😉 )

Or, si dans WP il est extrêmement facile et courant de modifier l’apparence des pages d’un site visibles par les visiteurs, à l’aide de thèmes, de templates ou de modifications sur les CSS, ça l’est un peu moins dans le section d’administration.

Je me suis rendu compte rapidement qu’éditer la feuille de style utilisée dans ces pages (/wp-admin/css/wp-admin.css) n’était pas une solution idéale, ce fichier faisant partie du coeur de WP et pas d’un thème, il est susceptible d’être remplacé à la première mise à jour, m’obligeant ainsi à surveiller et le cas échéant à refaire mes modifications à chaque fois.

Après quelques recherches Google et quelques lectures dans le Codex WP, je suis arrivé à la conclusion, qu’il fallait se lancer et écrire enfin mon premier plug-in tout simple.

(Les plugins sont des extensions que l’on peut ajouter à une installation WP pour la modifier, lui ajouter ou retirer des fonctions, etc…)

L’objectif de ce plugin étant juste d’appeler, dans les entêtes des pages de l’administration de WP, une nouvelle feuille de style dans laquelle je pourrais faire tranquillement mes modifications.

Pour commencer, après avoir décidé d’appeler ce plug-in « candg-admin-theme » il a fallu créer quelques éléments:

• Un dossier nommé « candg-admin-theme »
• Dans ce dossier un fichier nommé « candg-admin-theme.php » (il est impératif que le script principal du plug-in porte le même nom que le dossier dans lequel il est situé).
• Toujours dans ce dossier, la feuille de style CSS, nommée ici « candg-admin.css »

Ensuite, il faut commencer le fichier candg-admin-theme.php par l’entête obligatoire pour tout plug-in WP:

Ces premières lignes parlent d’elles-mêmes. Il s’âgit des informations que WP affichera dans le gestionnaire d’extensions, permettant de les identifier les unes des autres.

Il faut ensuite ajouter à ce fichier la fonction qui va effectuer la tâche souhaitée, ici ajouter à l’entête des pages d’admin un appel vers notre feuille de style maison.

Ce que nous voulons, c’est donc ajouter une ligne comme ça:

<link rel="stylesheet" type="text/css"

href="https://chicandgeek.com/wp-content/plugins/candg-admin-theme/candg-admin.css" />

Pour cela, nous allons écrire la fonction suivante:

function candg_admin_css() {

$url = get_option('siteurl');

$url = $url . '/wp-content/plugins/candg-admin-theme/candg-admin.css';

echo '<link rel="stylesheet" type="text/css" href="' . $url . '" />

';

}

Cette fonction, que j’ai nommé ici « candg_admin_css » effectue 3 tâches simples:

• Elle stocke dans la variable $url l’adresse du site (ici http://chicandgeek.com) de sorte que le plugin fonctionne sur toute installation de WP sans avoir besoin de le modifier.
• Elle ajoute ensuite à la fin de l’url du site, le chemin vers la feuille de style personnalisée, ici « /wp-content/plugins/candg-admin-theme/candg-admin.css » (/wp-content/plugins/ étant le dossier dans lequel se trouvent obligatoirement toutes les extensions).
• Elle écrit ensuite donc la ligne de code nécessaire pour lier la feuille de style.

Une fois ceci en place, il nous reste à dire à WP quand exécuter ce plug-in. Nous souhaitons que la feuille de style soit appelée dans l’entête des pages d’admin. WordPress nous propose toute une liste de « hooks » (crochets en anglais), c’est à dire d’endroits possibles de son execution pour accrocher une fonction additionnelle (voir la liste ici).

Pour les besoins de notre extensions, nous allons nous accrocher sur « admin_head » qui exécutera notre code dans l’entête des pages de l’administration.

Nous allons donc compléter notre script par:

add_action('admin_head', 'candg_admin_css');

qui ne pourraît être plus claire, demandant d’exécuter la fonction candg_admin_css dans admin_head.

Et voilà, les jeux sont faits, notre plug-in se présente dès lors de la façon suivante:

Dernière étape, il faut télécharger notre dossier candg_admin_theme dans le dossier /wp-content/plugins de notre installation WP, puis aller sur l’interface d’administration, dans la section « Extensions », localiser notre nouveau plug-in dans la liste et cliquer sur « Activer » et voilà:

Désormais, tout changement dans la feuille de style candg-admin.css, située dans le dossier du plug-in sera repercuté dans l’interface d’admin.

Dans ce cas précis par exemple, je souhaitais augmenter la hauteur de la fenêtre de sélection de la rubrique d’un article, de 200 à 235 pixels afin que la liste complète des rubriques de Chic & Geek y soit visible sans besoin de faire défiler verticalement la liste. Voici donc le contenu de cette feuille de style à l’heure actuelle:

Le changement est ici certes minime, juste une petite question de confort en plus pour Anne et moi, mais maintenant que ce plug-in est en place, toute modification que nous souhaiterions dans l’aspect visuel de l’interface d’administration devient simple, et surtout, sera préservée au fil des mises à jour, et sera reproductible en quelques instants sur tout autre site WP, juste en installant l’extension.

Paolo