Nous avons créé un plugin vide dans l’étape 1 de cette série d’articles intitulée Créer un plugin de fonctionnalités. Nous allons maintenant attaquer la première fonctionnalité de cette extension : nous allons ajouter une feuille de style qui s’appliquera à notre site. Je vais également en profiter pour charger quelques nouvelles polices de caractère.
Que voulons-nous faire ?
Nous avons une « enveloppe » de plugin. Un fichier php qui, lorsqu’il est activé, ajoute du texte au pied de page du tableau de bord WordPress.
Je souhaite qu’il charge une feuille de style spécifique, par exemple ‘test.css’ pour ce site https://knowledge.parcours-performance.com/. Je veux aussi qu’il charge deux polices google fonts.
Quels tests me permettront de savoir que j’ai réussi ?
J’aurai réussi si en regardant le code source de https://knowledge.parcours-performance.com/, je vois, dans la section <head> quelque chose qui ressemble à :
link rel="stylesheet" id="body-font-css" href="//fonts.googleapis.com/css?family=Open+Sans%3A400%2C400italic%2C700%2C700italic&subset=latin%2Cgreek-ext%2Ccyrillic%2Clatin-ext%2Cgreek%2Ccyrillic-ext%2Cvietnamese&ver=4.0.1" type="text/css" media="all">
Charger une nouvelle feuille de style
Que faut-il faire pour demander à wordpress de charger une feuille de style ?
En gros, il faut dire à WordPress : « référence la feuille de style test.css et charge la lorsque tu charge une page de mon site ».
Il faut utiliser les fonctions wp_register_style() puis, pour mettre dans la file, wp_enqueue_style(). Selon le Codex WordPress,les formats utilisés seront :
wp_register_style( $handle, $src, $deps, $ver, $media ); wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
$handle : un nom pour cette feuille de style, un identifiant unique, par exemple ald_knowledge_style.
$src : l’adresse (l’URL) de notre feuille de style. (ici https://knowledge.parcours-performance.com/wp-content/plugins/ald-functions-knowledge-PP/css/test.css)
Je laisse $deps et $ver vides. Je laisse aussi $media vide, mais je note que c’est le moyen de définir à quel type de média s’adresse la feuille de style que l’on charge. SI je voulais créer une feuille de style pour l’impression (un de mes projets), je mettrais ici ‘print‘, alors que là, la valeur par défaut sera 'all'.
$in_footer permet de dire si on veut que le chargement se fasse seulement au moment du chargement du pied de page pour l’internaute. Par défaut, cette option est ‘false’. On laisse comme ça.
Trouver le bon moyen de coder l’adresse de notre feuille de style
Si j’écrivais manuellement l’adresse complète de la feuille de style visée, mon extension ne fonctionnerait que si le site s’appelle https://knowledge.parcours-performance.com. C’est pourquoi il ne faut jamais écrire ‘en dur’ les adresses. Les adresses doivent toujours être relatives.
trouver l’adresse relative de notre feuille de style
Il faut trouver comment faire pour que WordPress aille chercher l’adresse réelle du plugin puis y ajoute la localisation du répertoire dans le plugin et le nom du fichier recherché.
Nous devons donc indiquer https://knowledge.parcours-performance.com/wp-content/plugins/ald-functions-knowledge-PP en relatif, et y ajouter ‘css/test.css’, avec un sans un ‘/’ devant.
C’est là que la fonctionnalité créé dans l’article précédent de cette série, ajouter du texte dans le pied de page WordPress, va nous être fantastiquement utile !
A priori, l’url du plugin s’obtient avec plugin_dir_path( __FILE__ ), mais je ne sais pas si cet élément se termine par ‘/’ ou pas. Je vais donc dans mon plugin, et je modifie la ligne créé dans l’étape précédente :
$new = ' Mon nouveau texte' ;
devient :
$new = plugin_dir_path(__FILE__) ;
Je regarde dans le pied de page de mon tableau de bord WordPress et je vois que le texte affiché est /home/parcoursz/knowledge/wp-content/plugins/ald-functions-knowledge-PP/. J’en déduis donc que plugin_dir_path( __FILE__ ) ne conviendra pas car il sert à identifier des chemins en ‘interne’ (dans le serveur qui contient WordPress).
J’essaie
$new = plugins_url( 'css/test.css', __FILE__ ) ;
et mon pied de page affiche https://knowledge.parcours-performance.com/wp-content/plugins/ald-functions-knowledge-PP/css/test.css. C’est exactement ce que je veux !
Je sais donc maintenant qu’il faudra ce que j’utilise pour indiquer le lien vers la feuille de style à enregistrer.
Le code pour charger une feuille de style
Voilà le code mis dans mon plugin.
/*****************************************
* enqueue css, javascript, fonts
*****************************************/
// enqueue test.css
if (! function_exists('ald_enqueue_scripts') ){
function ald_enqueue_scripts() {
wp_register_style(
'ald_knowledge_style',
plugin_dir_path( __FILE__ ) . "css/test.css" ,
array(),
null,
'all' // no media type
);
wp_register_style(
'font_awesome_css',
plugin_dir_path( __FILE__ ) . "css/font-awesome.css" ,
array(),
null,
'all' // no media type
);
wp_enqueue_style( 'ald_knowledge_style' ) ;
wp_enqueue_style( 'font_awesome_css' ) ;
}
}
// see http://code.tutsplus.com/tutorials/loading-css-into-wordpress-the-right-way--cms-20402
add_action( 'wp_enqueue_scripts', 'ald_enqueue_scripts' ); // to enqueue in the website front end
Est-ce que ça fonctionne ?
Pour le savoir, je vais sur le site et je regarde son code source. et c’est bon, en ligne 38, je vois
<link rel='stylesheet' id='ald_knowledge_style-css' href='https://knowledge.parcours-performance.com/home/parcoursz/knowledge/wp-content/plugins/ald-functions-knowledge-PP/css/test.css' type='text/css' media='all' />
J’ai donc réussi cette étape !
Ajouter des polices de caractères
Là, c’est plus simple puisque l’adresse des polices sera sur un site extérieur. On indiquera donc l’adresse en valeur absolue.
Je vais voir dans les polices google ce qui me plait. Je choisis Nova round. Je clique sur « quick use » et je vois qu’il faut que le <head> de mon site contienne :
<link href='http://fonts.googleapis.com/css?family=Nova+Round' rel='stylesheet' type='text/css'>
tandis que mon css devra contenir :
font-family: 'Nova Round', cursive;
Dans mon plugin, dans la fonction ald_enqueue_scripts() précédente, j’ajoute :
// enqueue fonts wp_enqueue_style( 'google-nova-round', 'http://fonts.googleapis.com/css?family=Nova+Round' );
Pour vérifier que ça fonctionne, je fais comme pour la feuille de style, je vais sur le site et je regarde le code source. En ligne 40, je repère :
<link rel='stylesheet' id='google-nova-round-css' href='http://fonts.googleapis.com/css?family=Nova+Round&ver=4.0.1' type='text/css' media='all' />
Conclusion :
Notre plugin nous permet donc de charger une nouvelle feuille de style et une nouvelle police. Le prochain article de cette série Créer un plugin de fonctionnalités concernera la création de shortcodes.
