WordPress: ajouter du css et js. Un mini plugin.

C’est un peu une manie, j’aime modifier mes outils: ma méthode pour me les approprier.
Par exemple, j’aime ajouter un peu de couleurs quand je cite quelque chose dans une langue, ou un peu de script par-ci par-là.

La documentation de WordPress est assez lisible (en anglais) pour créer son premier plugin (et bien sûr, le code du célèbre Hello Dolly sert de base pour tout comprendre).
Voici les quelques lignes de codes qui me permettent de facilement injecter de la css ou du javascript dans wordpress… et je ne rien perdre lors des mises à jour!

<?php
/**
 * @package fx-wp-tweaks
 * @version 0.1
 */
 
/*
Plugin Name: Fxp wp-tweaks
*/
if (!defined('FX_WP_TWEAKS_VERSION_CURRENT'))
define('FX_WP_TWEAKS_VERSION_CURRENT', '0.1');
     define('FX_WP_TWEAKS_PLUGIN_URL', plugin_dir_url( __FILE__ ) );
     define('FX_WP_TWEAKS_PLUGIN_DIR', plugin_dir_path( __FILE__ ) );
	 
	 
	 // Enqueue both, style and script
add_action( 'wp_enqueue_scripts', 'register_plugin_styles' );
add_action( 'wp_enqueue_scripts', 'register_plugin_scripts' );

/**
 * Register style sheet.
 */
function register_plugin_styles() {
	wp_register_style( 'fx-wp-tweaks', plugins_url( 'fx-wp-tweaks/css/fx-wp-tweaks.css' ) );
	wp_enqueue_style( 'fx-wp-tweaks' );
}
	
/**
 * Register js script.
 */
	function register_plugin_scripts() {
	wp_register_script( 'fx-wp-tweaks', plugins_url( 'fx-wp-tweaks/css/fx-wp-tweaks.js' ) );
	wp_enqueue_script( 'fx-wp-tweaks' );
}
	 
	 
?>

Le résultat, c’est l’ajout dans le code source de mes pages des deux lignes suivantes:

<link rel='stylesheet' id='fx-wp-tweaks-css'  href='https://www.fxparlant.net/wp-content/plugins/fx-wp-tweaks/css/fx-wp-tweaks.css?ver=4.9.2' type='text/css' media='all' />
<script type='text/javascript' src='https://www.fxparlant.net/wp-content/plugins/fx-wp-tweaks/css/fx-wp-tweaks.js?ver=4.9.2'></script>

Ressources

Partagez: