Créer un css particulier pour chaque post wordpress

Pour créer un style particulier pour chaque article ou page dans wordpress, on peut bien sûr utiliser la méthode traditionnelle qui consiste simplement à cibler les bonnes classes css dans un fichier style.css. Mais on peut aussi avoir recours à différentes méthodes. En voici quelques unes

Methode 1:

Le principe est compliqué à trouver mais simple à comprendre : en gros on va crée un dossier dans notre arborescence qui va contenir plusieurs fichiers css. En fait dans la même lignée que tous les autres templates comme category-machin ou single-machin, on peut aussi bien attribuer un style-xxx à un page particulière, là ou xxx represente l’ID de la page en question.

Si je veux styliser les page ID84 et 34, j’aurais donc dans ce dossier deux fichiers style-84.css et style34.css

Le plus simple et de créer un modèle de page css, avec des attributs commun dans toutes les pages qu’on veut styliser, et ensuite de ne changer que la valeur des attributs.

Voici la fonction à insérer dans notre fichier functions.php:

function styleParPost() {
    global $post;
    if (is_single()) {
        $currentID = $post->ID;
        $serverfilepath = TEMPLATEPATH.'/css/style-'.$currentID.'.css';
        $publicfilepath = get_bloginfo('template_url');
        $publicfilepath .= '/css/style-'.$currentID.'.css';
        if (file_exists($serverfilepath)) {
            echo "<link rel='stylesheet' type='text/css' href='$publicfilepath' media='screen' />"."\n";
        }
    }
}
add_action('wp_head','styleParPost');

Methode 2 :

Voici une fonction qui permet d’éditer une meta box lors de la redaction d’un article dans la partie backoffice, dans laquelle on pourra directement insérer du css :

//Custom CSS Widget
add_action('admin_menu', 'custom_css_hooks');
add_action('save_post', 'save_custom_css');
add_action('wp_head','insert_custom_css');
function custom_css_hooks() {
	add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'post', 'normal', 'high');
	add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'page', 'normal', 'high');
}
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 '<textarea name="custom_css" id="custom_css" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_css',true).'</textarea>';
}
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);
}
function insert_custom_css() {
	if (is_page() || is_single()) {
		if (have_posts()) : while (have_posts()) : the_post();
			echo '<style type="text/css">'.get_post_meta(get_the_ID(), '_custom_css', true).'</style>';
		endwhile; endif;
		rewind_posts();
	}
}

Methode 3

On peut également faire une fonction qui permet la création d’un input dans la page d’édition d’un article, un peu comme dans la méthode précédente. Mais cette fois, on n’ajoute pas de css, mais on appelle un fichier en particulier.

add_action('admin_menu', 'digwp_custom_css_hooks'); 
add_action('save_post', 'digwp_save_custom_css'); 
add_action('wp_head','digwp_insert_custom_css'); 
function digwp_custom_css_hooks() { 
add_meta_box('custom_css', 'Name of custom CSS file', 'digwp_custom_css_input', 'post', 'normal', 'high'); 
add_meta_box('custom_css', 'Name of custom CSS file', 'digwp_custom_css_input', 'page', 'normal', 'high'); 
} 
function digwp_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).'" />'; 
} 
function digwp_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); 
} 
function digwp_insert_custom_css() { 
if (is_page() || 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(); 
} 
}

La même pour un input traitant le javascript

add_action('admin_menu', 'digwp_custom_js_hooks'); 
add_action('save_post', 'digwp_save_custom_js'); 
add_action('wp_head','digwp_insert_custom_js'); 
function digwp_custom_js_hooks() { 
add_meta_box('custom_js', 'Name of custom JavaScript file', 'digwp_custom_js_input', 'post', 'normal', 'high'); 
add_meta_box('custom_js', 'Name of custom JavaScript file', 'digwp_custom_js_input', 'page', 'normal', 'high'); 
} 
function digwp_custom_js_input() { 
global $post; 
echo '<input type="hidden" name="custom_js_noncename" id="custom_js_noncename" value="'.wp_create_nonce
('custom-js').'" />'; 
echo '<input type="text" name="custom_js" id="custom_js" style="width:100%;" 
value="'.get_post_meta($post->ID,'_custom_js',true).'" />'; 
} 
function digwp_save_custom_js($post_id) { 
if (!wp_verify_nonce($_POST['custom_js_noncename'], 'custom-js')) 
return $post_id; if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) 
return $post_id; $custom_js = $_POST['custom_js']; 
update_post_meta($post_id, '_custom_js', $custom_js); 
} 
function digwp_insert_custom_js() { 
if (is_page() || is_single()) { 
if (have_posts()) : while (have_posts()) : the_post(); 
$filename = get_post_meta(get_the_ID(), '_custom_js', true); 
if ($filename) { 
echo "<script type='text/javascript' src='" . get_bloginfo('template_url') . "/js/" . $filename . "' ></script>"; 
} 
endwhile; 
endif; 
rewind_posts(); 
} }

Et en backoffice on aura donc nos deux champs dans lesquels on pourra appeler un fichier css ou js particulier, qui s’appliquera à la page.

Voici donc trois petites méthodes originales pour modifier les articles ou les pages autrement.

06/03/2014 Mis à jour le 19/12/2019 Par Copier coller | Dans wordpress