[WordPress] Charger une CSS ou un script pour un billet particulier


Un bon webdesigner est un webdesigner qui crée des sites rapides. Et pour cela, l’une des première chose à faire est de réduire au maximum la taille des ressources à charger.
C’est la cas des images, des scripts JS et des feuilles styles notamment.

Ajouter une feuille de styles ou un script est un jeu d’enfant avec le CMS WordPress, en utilisant la fonction wp_register_script. Mais le problème, c’est que ceux-ci sont chargés systématiquement, quelle que soit la page (ou presque avec l’utilisation des is_home, is_single, et consorts).

L’astuce qui suit permet de charger proprement une ressource pour un ou plusieurs billets donnés, choisis par l’utilisateur.

L’idée est d’ajouter à l’interface de saisie, des champs permettant de définir le noms des ressources à charger.

 

// appel d'un hook lorsqu'on affiche l'interface de saisie
add_action('admin_menu', 'custom_css_hooks');

// le hook créé un champ
function custom_css_hooks() {
	add_meta_box('custom_css', 'Name of custom CSS file', 'custom_css_input', 'post', 'normal', 'high');

}
//on définit ici le contenu du champ de la meta-box
// s'il a déjà été définit, on récupère sa valeur
function custom_css_input() {
	global $post;
	echo '<input type="hidden" name="custom_css_noncename" id="custom_css_noncename" value="'.wp_create_nonce('custom-css').'" />';
	echo '<input type="text" name="custom_css" id="custom_css" style="width:100%;" value="'.get_post_meta($post->ID,'_custom_css',true).'" />';
}

Ensuite, il faut sauvegarder la valeur passée dans ce champ

add_action('save_post', 'save_custom_css');

// on sauvegarde la valeur dans le champ personnalisé _custom_css
function save_custom_css($post_id) {
	if (!wp_verify_nonce($_POST['custom_css_noncename'], 'custom-css')) return $post_id;
	if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
	$custom_css = $_POST['custom_css'];
	update_post_meta($post_id, '_custom_css', $custom_css);
}

Enfin, il faut ajouter le code HTML pour charger la feuille CSS lors de l’affichage d’un billet/

add_action('wp_head','insert_custom_css');
function insert_custom_css() {
	if (is_single()) {
		if (have_posts()) : while (have_posts()) : the_post();
		  $filename = get_post_meta(get_the_ID(), '_custom_css', true);
		  if ($filename) {
			echo "<link rel='stylesheet' type='text/css' href='" . get_bloginfo('template_url') . "/css/" . $filename . "' />";
          }
		endwhile; endif;
		rewind_posts();
	}
}

Il vous suffit de placer vos css dans le répertoire /css de votre thème et d’utiliser son nom dans le champ et le tour est joué.

Très pratique pour ajouter des styles particuliers, peu utilisés, sans charger tout systématiquement. Par exemple, pour faire la démonstration de code CSS.

L’idée fonctionne également avec les JS. Il faut un peu adapter le code PHP précédent.

via