ThemeLocal - Des conseils de blog qui fonctionnent comme par magieThemeLocal - Des conseils de blog qui fonctionnent comme par magieThemeLocal - Des conseils de blog qui fonctionnent comme par magie
  • Blogging
  • WordPress
  • Email Marketing
  • SEO
  • Réseaux sociaux
  • More
    • Tutoriels
    • Shopify
    • Avis
    • Conseils
    • Sécurité
    • Logiciels et services
    • Génération de trafic
    • Guide du débutant
    • Showcase
Search
  • Politique de confidentialité
  • Politique de cookies
  • Contactez nous
© 2022 Themelocal. Tous les droits sont réservés.
En lisant: Couleurs de cellule de tableau personnalisées dans le panneau d’administration WordPress
Partager
Notification Montre plus
Aa
ThemeLocal - Des conseils de blog qui fonctionnent comme par magieThemeLocal - Des conseils de blog qui fonctionnent comme par magie
Aa
  • Blogging
  • WordPress
  • Email Marketing
  • SEO
  • Réseaux sociaux
  • More
Search
  • Blogging
  • WordPress
  • Email Marketing
  • SEO
  • Réseaux sociaux
  • More
    • Tutoriels
    • Shopify
    • Avis
    • Conseils
    • Sécurité
    • Logiciels et services
    • Génération de trafic
    • Guide du débutant
    • Showcase
Suivez-nous
  • Politique de confidentialité
  • Politique de cookies
  • Contactez nous
© 2022 Themelocal. Tous les droits sont réservés.
ThemeLocal - Des conseils de blog qui fonctionnent comme par magie > Blog > Tutoriels > Couleurs de cellule de tableau personnalisées dans le panneau d’administration WordPress
Tutoriels

Couleurs de cellule de tableau personnalisées dans le panneau d’administration WordPress

Dernière mise à jour: octobre 26, 2024 5:21 am
ThemeLocal il y a 2 ans 8 minutes lecture minimale
Partager
8 minutes lecture minimale
Couleurs de cellule de tableau personnalisees dans le panneau dadministration
Partager

J’ai toujours pensé qu’il serait intéressant de pouvoir changer la couleur de fond des lignes des publications en fonction de différents critères dans l’administration WordPress. J’ai donc cherché et trouvé des tutoriels pour le faire. Mais la mauvaise chose est que chaque tutoriel avait le même code, probablement un simple copier-coller. Et en plus, après quelques tests, j’ai vu que tous ces messages étaient incomplets. C’est pourquoi j’ai décidé d’approfondir un peu l’explication de la façon d’ajouter des couleurs d’arrière-plan spécifiques à la ligne des messages. Et pour ce faire, nous allons créer un nouveau plugin !

Contents
Étape 1 : Le pluginÉtape 2 : La classe principaleÉtape 3 : Styliser les messagesQu’en est-il des messages collants ?Télécharger le plugin

Étape 1 : Le plugin

Ok, alors commencez, nous devons créer un plugin, comme nous l’avons vu dans mes précédents messages, c’est la partie la plus simple. Créez un nouveau dossier dans wp-content/plugins et nommez-le « color-my-posts ». À l’intérieur, créez un nouveau fichier et appelez-le…. « color-my-posts.php » (ne pensez pas que je n’ai pas d’imagination !). Ouvrez ce fichier et ajoutez ce code :

<?php
/*
Plugin Name: Color My Posts
Plugin URL: http://remicorson.com/color-my-posts
Description: A little plugin to color post rows depending on the posts' status in the administration
Version: 0.1
Author: Remi Corson
Author URI: http://remicorson.com
Contributors: corsonr
tags: color, customization, administration, corsonr, remi corson
*/

Cela dit simplement à WordPress qu’il y a un nouveau plugin appelé « Color My Posts » dans son dossier de plugins. Maintenant, votre plugin, même s’il est vide, devrait être listé dans la liste des plugins sous le menu « Plugins ». Dans l’étape suivante, nous allons créer une classe simple pour instancier le plugin.

Étape 2 : La classe principale

Comme nous avons créé une classe dans mon tutoriel sur l’ajout d’attributs personnalisés aux menus WordPress, nous devons faire de même et créer une classe, voici comment procéder :

class rc_color_my_posts {

	/*--------------------------------------------*
	 * Constructor
	 *--------------------------------------------*/

	/**
	 * Initializes the plugin
	 */
	function __construct() {

		add_action('admin_footer', array( &$this,'rc_color_my_admin_posts') );

	} // end constructor

	function rc_color_my_admin_posts(){
		/* Be patient ! */
	}

}

// instantiate plugin's class
$GLOBALS['color_my_posts'] = new rc_color_my_posts();

Ici, nous créons une classe appelée « rc_color_my_posts qui contient un constructeur et une fonction appelée rc_color_my_admin_posts(). Dans le constructeur, nous accrochons la fonction rc_color_my_admin_posts() à admin_footer. Cela signifie que notre fonction sera prise en compte lors du chargement du pied de page d’administration. Il ne nous reste plus qu’à ajouter du code CSS à notre fonction. Ce code sera imprimé directement dans le code source des pages d’administration WordPress.

Étape 3 : Styliser les messages

Comme je l’ai déjà dit, tous les tutoriels sur le style de la ligne de publication dans l’administration WordPress que j’ai vus, nous traitons uniquement du statut de la publication. C’est vrai, vous pouvez styliser les messages ligne par statut, mais pas seulement. Pour ceux que ça intéresse, il y a une fonction appelée get_post_class() dans le /wp-includes/post-template.php fichier de base. Au cas où – Ne modifiez pas le code de ce fichier (du moins ni pour l’instant) !

Eh bien, cette fonction get_post_class() est géniale car c’est elle qui détermine les classes d’un article. Cette fonction est utilisée dans l’administration et dans le frontend. Voici comment ajouter du code CSS personnalisé pour chaque classe générée par get_post_class :

function rc_color_my_admin_posts(){
 ?>
 <style>
 /* Color by post Status */
 .status-draft { background: #ffffe0 !important;}
 .status-future { background: #E9F2D3 !important;}
 .status-publish {}
 .status-pending { background: #D3E4ED !important;}
 .status-private { background: #FFECE6 !important;}
 .post-password-required { background: #ff9894 !important;}
/* Color by author data */
 .author-self {}
 .author-other {}
/* Color by post format */
 .format-aside {}
 .format-gallery {}
 .format-link {}
 .format-image {}
 .format-quote {}
 .format-status {}
 .format-video {}
 .format-audio {}
 .format-chat {}
 .format-standard {}
/* Color by post category (change blog by the category slug) */
 .category-blog {}
/* Color by custom post type (change xxxxx by the custom post type slug) */
 .xxxxx {}
 .type-xxxxx {}
/* Color by post ID (change xxxxx by the post ID) */
 .post-xxxxx {}
/* Color by post tag (change xxxxx by the tag slug) */
 .tag-xxxxx {}
/* Color hAtom compliance */
 .hentry {}
</style>
 <?php
 }

Comme ce code n’est pas compliqué, j’ai ajouté des commentaires dans le code lui-même. Donc, en gros, pour styliser les lignes par :

  • Statut de la publication, utilisez .status-xxx où xxx est le statut de la publication
  • Auteur, utilisez .author-self pour cibler les articles que vous avez écrits et .author-other pour les articles écrits par d’autres auteurs
  • Format de publication, utilisez .format-xxx où xxx est le format de publication
  • Catégorie de poste, utilisez .category-xxx où xxx est le slug de catégorie, vous pouvez cibler autant de catégories que vous le souhaitez
  • Type de poste, utilisez .xxx ou .type-xxx où xxx est le slug de type post, vous pouvez cibler autant de CPT que vous le souhaitez
  • Identifiant de la publication, utilisez .post-xxx où xxx est l’ID de la publication, vous pouvez cibler autant de publications que vous le souhaitez
  • Étiquette de publication, utilisez .tag-xxx, où xxx est le slug de balise, vous pouvez cibler autant de balises que vous le souhaitez
  • .hentry est utilisé pour cibler hAtom conformité

Je n’ai pas défini de couleurs pour toutes les classes, mais vous pouvez le faire vous-même et personnaliser le plugin pour qu’il ressemble à ce que vous voulez vraiment.

Qu’en est-il des messages collants ?

Lorsque je travaillais sur ce petit plugin, j’ai remarqué qu’il n’y avait pas de classe ajoutée aux messages collants. Enfin, au moins dans l’administration. Je suis donc allé à nouveau dans le fichier post-template.php et j’ai vu qu’il y avait une classe .sticky ajoutée au post collant mais seulement si is_home() && !is_paged()… pourquoi ? C’est vraiment étrange. C’est la raison pour laquelle j’ai créé un billet sur la piste principale de WordPress pour le mentionner. Pour ceux qui veulent vraiment pouvoir styliser les messages collants dans l’administrateur, ajoutez simplement ce code à la fonction get_post_class() même si je recommande de ne jamais modifier les fichiers principaux de WordPress :

// sticky for Sticky Posts in administration
if ( is_sticky($post->ID) && is_admin() )
$classes[] = 'post-sticky';

Télécharger le plugin

Pour ceux qui souhaitent utiliser le plugin directement hors de la boîte sans avoir à le créer vous-même, j’ai ajouté le plugin au référentiel, simplement Cliquez ici pour le télécharger.

Vous pourriez aussi aimer

Comment déplacer une note dans un dossier dans l’application Notes sur iPhone et iPad

Empêchez les autres d’utiliser vos photos Instagram dans les invites IA : voici comment procéder

Comment activer le mode lecteur dans Safari pour toutes les pages Web

Comment copier toutes les URL dans les onglets ouverts sur Safari

Ce réglage de la sélection musicale dans iOS 26.4 vous fera gagner beaucoup de temps

MARQUÉ: cellule, couleurs, dadministration, dans, panneau, personnalisées, tableau, WordPress
Partagez cet article
Facebook Twitter Pinterest Whatsapp Whatsapp
Partager
Qu-est-ce que tu penses?
Aimer0
Triste0
Heureux0
Somnolent0
Fâché0
Sans commentaires0
Clin d-œil0
Article précédent Comment ajouter un mega menu sur votre site WordPress etape Comment ajouter un méga menu sur votre site WordPress (étape par étape)
Article suivant 1639692061 Ajout dattributs personnalises aux menus WordPress Ajout d’attributs personnalisés aux menus WordPress
Laissez un commentaire

Laisser un commentaire Annuler la réponse

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Poste populaire

1784012438 Comment installer la version beta publique diOS 27 sur votre
Comment installer la version bêta publique d’iOS 27 sur votre iPhone
Comment
1784192434 Comment installer la version beta publique de macOS 27 Golden
Comment installer la version bêta publique de macOS 27 Golden Gate
Comment
iOS 27 : accédez au nouvel écran de récupération iPhone
Comment
Comment partager des rappels sur iPhone avec vos amis et
Comment partager des rappels sur iPhone avec vos amis et votre famille
Comment
Comment utiliser les options dappel FaceTime pour refuser et accepter
Comment utiliser les options d’appel FaceTime pour refuser et accepter de nouveaux appels
Comment
1784152840 Comment deplacer une note dans un dossier dans lapplication Notes
Comment déplacer une note dans un dossier dans l’application Notes sur iPhone et iPad
Comment

También podría gustarte

1784152840 Comment deplacer une note dans un dossier dans lapplication Notes
Comment

Comment déplacer une note dans un dossier dans l’application Notes sur iPhone et iPad

il y a 3 jours 3 minutes lecture minimale
1783620035 Empechez les autres dutiliser vos photos Instagram dans les invites
Comment

Empêchez les autres d’utiliser vos photos Instagram dans les invites IA : voici comment procéder

il y a 1 semaine 3 minutes lecture minimale
1780955111 Comment activer le mode lecteur dans Safari pour toutes les
Comment

Comment activer le mode lecteur dans Safari pour toutes les pages Web

il y a 1 mois 3 minutes lecture minimale
Comment copier toutes les URL dans les onglets ouverts sur
Comment

Comment copier toutes les URL dans les onglets ouverts sur Safari

il y a 2 mois 3 minutes lecture minimale
1775243707 Ce reglage de la selection musicale dans iOS 264 vous
Comment

Ce réglage de la sélection musicale dans iOS 26.4 vous fera gagner beaucoup de temps

il y a 4 mois 3 minutes lecture minimale
1775062829 Arretez votre iPhone de supprimer laudio de fond dans les
Comment

Arrêtez votre iPhone de supprimer l’audio de fond dans les vidéos

il y a 4 mois 2 minutes lecture minimale
1773870422 Comment verrouiller les onglets prives avec Face ID dans Safari
Comment

Comment verrouiller les onglets privés avec Face ID dans Safari

il y a 4 mois 3 minutes lecture minimale
1773363633 Comment utiliser le balisage pour inserer un dessin dans un
Comment

Comment utiliser le balisage pour insérer un dessin dans un e-mail sur iPhone

il y a 4 mois 2 minutes lecture minimale
Montre plus
ThemeLocal - Des conseils de blog qui fonctionnent comme par magieThemeLocal - Des conseils de blog qui fonctionnent comme par magie
Suivez-nous
© 2022 Themelocal. Tous les droits sont réservés.
  • Politique de confidentialité
  • Politique de cookies
  • Contactez nous
Welcome Back!

Sign in to your account

Mot de passe perdu?