Créer un plugin WordPress d’ajout de fichiers CSS et JS

Ce plugin permettra d’intégrer des fichiers dans l’en-tête en utilisant le framework WordPress sans avoir à modifier les fichiers de thèmes ou à compter sur la possibilité d’intégrer du code personnalisé dans les paramètres du thème.

Nous allons donc créer ce plugin que nous appellerons « CSS/JS Perso« .

Préparation des fichiers du plugin

Nous allons commencer par préparer l’arborescence et les fichiers de notre plugin en local sur votre ordinateur avant d’installer notre plugin.

Créez les dossiers et fichiers suivants :

• Le fichier cssjsperso.css sera le fichier CSS intégré.
• Le fichier cssjsperso.js sera le fichier JS intégré.
• Le fichier cssjsperso.php sera le fichier de base de notre plugin.

Le fichier cssjsperso.php

Nous n’allons pas voir le contenu des fichiers CSS et JS, puisque vous mettrez bien ce que vous voulez dedans. Nous allons seulement nous occuper du fichier nécessaire pour notre plugin, le fichier cssjsperso.php.

Les premières lignes du fichier sont les métadonnées de notre plugin qui serviront principalement au gestionnaire de plugin de WordPress. Cela correspond aux informations qui seront visibles dans le gestionnaire des extensions.

• Plugin Name : le nom de notre plugin,
• Plugin URI : l’adresse du site éventuel où l’on peut trouver des informations sur le plugin,
• Description : une description courte du plugin,
• Version : le numéro de version du plugin,
• Author : l’auteur du plugin
• Author URI : l’adresse du site éventuel de l’auteur,
• Text Domain : le nom utilisé pour gérer la traduction du plugin. Nous n’allons pas nous en servir pour cet exemple.

<?php
/*
Plugin Name: CSS & JS Perso
Plugin URI: http://cssjsperso.net
Description: Ajout de fichiers CSS/JS personnalisés
Version: 1.0
Author: Julien Crego
Author URI: https://juliencrego.com
Text Domain: cssjsperso
*/

Les deux fonctions PHP ci-dessous permettent d’ajouter les fichiers que l’on souhaite. Vous pouvez utiliser l’une ou l’autre ou les deux en fonction de ce que vous souhaitez ajouter du CSS et/ou du JS.

Les fonctions wp_enqueue_style() et wp_enqueue_script() sont des fonctions de l’API WordPress. Elles permettent d’enregistrer les fichiers CSS ou JS dans la liste des fichiers que WordPress devra charger lors de la génération d’une page.

Ces deux fonctions marchent de la même manière.

Le premier paramètre  'cssjsperso'  doit être une chaine de caractère d’identification de la feuille de style ou du fichier js qui doit être unique pour l’ensemble des plugins de votre site.

Le second paramètre plugins_url('cssjsperso/css/cssjsperso.css') indique l’emplacement du fichier css (ou js) dans l’arborescence de WordPress. Cela doit donc bien correspondre à l’arborescence que nous avons créé pour notre plugin !

function cssjspersoCSS(){
    wp_enqueue_style('cssjsperso', plugins_url('cssjsperso/css/cssjsperso.css'));
}

function cssjspersoJS(){
    wp_enqueue_script('cssjsperso', plugins_url('cssjsperso/js/cssjsperso.js'));
}

Il faut maintenant demander à WordPress d’exécuter les deux fonctions que nous venons de créer. Pour cela, il faut utiliser ce que l’on appelle un « hook« .

Nous allons ajouter une condition qui vérifie que nous ne sommes pas sur la partie d’administration du site.

if(!is_admin()) {

}

Puis nous ajoutons les deux actions à utiliser avec la fonction add_action() de WordPress.

Le premier paramètres est le nom du hook à utiliser, ici c’est le même pour les deux types de fichier wp_enqueue_scripts.

Le second paramètre est le nom de la fonction qui doit être appelée.

Le dernier paramètre 15, nous permet de définir la priorité de chargement du fichier. Nous mettons une valeur élevée pour faire en sorte que les fichiers se chargent après les styles du thème ce qui nous permettra de les surcharger.

if(!is_admin()){
     add_action('wp_enqueue_scripts', 'cssjspersoCSS',15);
     add_action('wp_enqueue_scripts', 'cssjspersoJS',15);
}

Charger les CSS dans l’éditeur

Pour améliorer notre plugin, il serait intéressant que les CSS additionnels soient chargés dans l’éditeur WYSIWYG de WordPress. Nous pourrons ainsi avoir un aperçu lorsque l’on appliquera nos styles personnalisés.

if(!is_admin()) {
     add_action('wp_enqueue_scripts', 'cssjspersoCSS',15);
     add_action('wp_enqueue_scripts', 'cssjspersoJS',15);
} else {
    /* Si on est dans la partie Administration, on lance la fonction */    
    add_action( 'init', 'cssjspersoEditor' );
}

/* Ajout de la feuille de style pour l'éditeur */
function cssjspersoEditor() {
     add_editor_style(plugins_url('cssjsperso/css/cssjsperso.css'));
}

Le fichier complet

<?php
/*
Plugin Name: CSS & JS Perso
Plugin URI: https://juliencrego.com
Description: Ajout de fichiers CSS/JS personnalisés
Version: 1.0
Author: Julien Crego
Author URI: https://juliencrego.com
Text Domain: cssjsperso
*/
if(!is_admin()){
    add_action('wp_enqueue_scripts', 'cssjspersoCSS',15);
    add_action('wp_enqueue_scripts', 'cssjspersoJS',15);
} else {
    add_action( 'init', 'cssjspersoEditor' );
}
function cssjspersoCSS(){
    wp_enqueue_style('cssjsperso', plugins_url('cssjsperso/css/cssjsperso.css'));
}
function cssjspersoJS(){
    wp_enqueue_script('cssjsperso', plugins_url('cssjsperso/js/cssjsperso.js'));
}
function cssjspersoEditor() {
    add_editor_style(plugins_url('cssjsperso/css/cssjsperso.css'));
}

Voici le même code organisé avec une class PHP.

<?php
/*
Plugin Name: CSS & JS Perso
Plugin URI: https://juliencrego.com
Description: Ajout de fichiers CSS/JS personnalisés
Version: 1.0
Author: Julien Crego
Author URI: https://juliencrego.com
Text Domain: cssjsperso
*/
new CssJsPerso();

class CssJsPerso {
    function __construct() {
        if(!is_admin()){
            add_action('wp_enqueue_scripts', array($this, 'cssjspersoCSS'),15);
            add_action('wp_enqueue_scripts', array($this, 'cssjspersoJS'),15);
        } else {
            add_action('init', array($this,'cssjspersoEditor') );
        }
    }
    function cssjspersoCSS(){
        wp_enqueue_style('cssjsperso', plugins_url('cssjsperso/css/cssjsperso.css'));
    }
    function cssjspersoJS(){
        wp_enqueue_script('cssjsperso', plugins_url('cssjsperso/js/cssjsperso.js'));
    }
    function cssjspersoEditor() {
        add_editor_style(plugins_url('cssjsperso/css/cssjsperso.css'));
    }
}

Installation du plugin

Il suffit maintenant d’installer le plugin. Pour ça deux méthodes :

1. Vous vous connectez à votre site en FTP et vous placez le dossier de votre plugin dans le dossier wp-content/plugins.
2. Vous compressez votre plugin au format .zip et vous utilisez l’interface d’installation des extensions de WordPress.

C’est terminé, vous n’avez plus qu’à activer le plugin sur WordPress.

Références WordPress Codex

• add_action()
• add_editor_style()
• is_admin()
• plugins_url()
• wp_enqueue_style()
• wp_enqueue_script()

Sauf mention contraire*, l'article Créer un plugin WordPress d’ajout de fichiers CSS et JS et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International

Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.

* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.