Communauté
Rejoignez la communauté Geekeries sur Google+ › Découvrez mag.geekeries.fr
Zoom sur la barre d’administration « Admin Bar » de WordPress !

Zoom sur la barre d’administration « Admin Bar » de WordPress !

Publié par Valentin dans WordPress
Modifié le 28 mai 2011 à 13:36.


Depuis WordPress 3.1, une barre d’administration y est intégrée. Elle permet à l’administration, mais également aux utilisateurs connectés de votre blog, d’accéder rapidement à certains contenus de l’administration, tel que l’ajout de contenu rapide par exemple. Il est possible de la désactiver, pour chacun d’entre nous, via les préférences de votre profil. Il est ainsi possible d’afficher la barre ou non sur l’ensemble des pages ou seulement dans l’administration WordPress. Il est possible de la personnaliser et de l’améliorer via les extensions ou des bouts de codes.

Les extensions

Logged Out Admin Bar est une extension vous permettant d’afficher la barre d’administration sans être connecté. Vos visiteurs peuvent alors visualiser cette nouvelle barre, situé sur le haut de vos pages et peuvent se connecter ou s’enregistrer rapidement.

Admin Bar Minimiser permet tout simplement de minimiser la barre d’administration de WordPress 3.1. Un simple bouton « Cacher » apparait pour minimiser la barre. Pour revenir, un clic sur le bouton « Afficher » suffit. Vraiment simple, mais efficace, cela permet d’économiser quelques pixel.

Stick Admin Bar To Bottom est une extension vous permettant de placer la barre d’administration sur le bas de vos pages. Par défaut, la barre est situé – de façon fix – sur le haut de page de votre blog.

Admin Bar ID Menu est une extension qui ajoute l’identifiant unique de vos pages et articles sur le lien d’édition de la barre d’administration. Cela peut éventuellement service et fait gagner quelques secondes.

WP Custom Admin Bar est une extension complète et permet de configurer l’affichage générale de cette nouvelle barre. En effet, il est possible de définir l’affichage selon les rôles, de la personnaliser (CSS) et de la masquer selon des pages précises.

Debug Bar est une extension dédiée aux développeurs. Elle ajoute un nouveau lien « Debug » à droite de la barre d’administration pour ainsi ouvrir une boite de dialogue contenant les données (functions, arguments et fichiers) PHP/SQL et les possibles erreurs.

PerS Fade Away WordPress Admin Bar est l’extension permettant d’ajouter un effet de transparence au défilement d’une de vos pages. La barre est ainsi masquée et garantie une bonne navigation tout en gardant les fonctionnalités de la barre actives.

Jetpack WordPress ajoute également les statistiques de votre blog dans la barre d’administration de WordPress 3.1. Cela permet en coup de d’oeil de voir l’évolution journalière.

Présentation de l’Admin Bar

Nous allons maintenant voir comment cette barre fonctionne. Très simple d’utilisation – comme toutes les fonctions de WordPress – le coeur de cette barre d’administration nous permet de faire deux choses assez basiques. On peu ajouter et supprimer des éléments. La personnalisation de la feuille de style CSS est également possible, mais cela ne sera pas traitée dans ce « Zoom ».

Tout d’abord, regardons la fonction hiérarchique « add_menus » proposée par WordPress. On retient principalement les différents à la fin de chaque ligne. Cela permet de définir un ordre logique aux liens de la barre. Cela nous permet également de désactiver chacune de ces actions.

function add_menus() {
	add_action( 'admin_bar_menu', 'wp_admin_bar_my_account_menu', 10 );
	add_action( 'admin_bar_menu', 'wp_admin_bar_my_sites_menu', 20 );
	add_action( 'admin_bar_menu', 'wp_admin_bar_edit_menu', 30 );
	add_action( 'admin_bar_menu', 'wp_admin_bar_shortlink_menu', 80 );
	add_action( 'admin_bar_menu', 'wp_admin_bar_updates_menu', 70 );
	if ( !is_network_admin() && !is_user_admin() ) {
		add_action( 'admin_bar_menu', 'wp_admin_bar_new_content_menu', 40 );
		add_action( 'admin_bar_menu', 'wp_admin_bar_comments_menu', 50 );
		add_action( 'admin_bar_menu', 'wp_admin_bar_appearance_menu', 60 );
	}
	do_action( 'add_admin_bar_menus' );
}

Modification du fichier « functions.php »

Tout d’abord, ouvrez le fichier « functions.php » de votre thème WordPress. Nous allons créer notre fonction pour améliorer la barre d’administration comme nous le voulons en ajoutant et supprimant des éléments. Cette fonction permet de dicter ce que l’on souhaite. Collez ce bout de code dans votre fichier. Entre cette fonction, on y placera par la suite les données.

function Gk_Bar() {
}

Supprimer un élément de l’Admin Bar

Nous venons de voir les différents liens possibles que WordPress affiche, selon le rang de l’utilisateur connecté. Vous souhaitez peut-être supprimer un élément d’une extension ou un éléments par défaut tel que les commentaires ou le bouton apparence. Pour l’élément par défaut, rien de bien compliquer. Pour supprimer le lien « Apparence », « Commentaire » et « Article » (création de contenu), il vous suffit de coller ce bout de code dans notre fonction.

remove_action( 'admin_bar_menu', 'wp_admin_bar_comments_menu', 50 );
remove_action( 'admin_bar_menu', 'wp_admin_bar_appearance_menu', 60 );
remove_action( 'admin_bar_menu', 'wp_admin_bar_new_content_menu', 40 );

L’extension WordPress SEO ajoute par exemple un bouton contenant des liens rapides. Inutile ou non, il est possible de le supprimer. Pour cela et toujours dans notre fonction « Gk_Bar », collez cette simple ligne à la suite des deux précédentes. Pour supprimer efficacement un lien d’une extension, vous devez obligatoirement connaître son autorité (95) et on identifiant (wpseo_admin_bar_menu).

remove_action( 'admin_bar_menu', 'wpseo_admin_bar_menu', 95 );

Ajouter des éléments à l’Admin Bar

Il est certes très facile de supprimer un élément. Pour en ajouter, c’est autre chose. Nous allons créer une nouvelle fonction pour épurer et différencier nos deux fonctions. Nous allons la placer au-dessus de notre fonction « Gk_Bar » pour une meilleure organisation. Collez simplement ce bout de code, toujours dans le fichier functions.php de votre thème, au-dessus de la fonction « Gk_Bar« . Cette nouvelle fonction « Gk_MenuBar » nous permet maintenant d’ajouter n’importe quel lien, via de simples fonctions hiérarchiques que nous allons étudier. Ces fonctions seront placées à la place de l’espace blanc présent dans la fonction « Gk_MenuBar ».

function Gk_MenuBar() {
	global $wp_admin_bar;
}

Pour commencer, nous allons ajouter un simple bouton contenant le lien de votre compte Twitter par exemple. Nous verrons par la suite qu’il est possible de créer plusieurs niveaux. C’est assez facile en fait. Un onglet « Réseaux » peut se faire contenant les liens de vos différents réseaux sociaux. Pour cela, coller le code suivant dans notre fonction « Gk_MenuBar« .

$wp_admin_bar->add_menu( array(
	'id' => 'twitter-compte',
	'title' => __('Suivez-moi sur Twitter'),
	'href' => ('twitter.com/geekeriesfr')
		)
	);
  • id est l’identifiant unique du bouton
  • title étant le titre du bouton
  • href étant le lien de votre réseau

Nous allons maintenant créer un bouton de création de contenus rapide. Dans la première partie de notre dossier nous avons vu comment supprimer un élément de l’Admin Bar. Nous avions supprimés le lien de création de contenu, pour le modifier comme nous le voulons. Ce nouveau bouton contiendra plusieurs niveaux via le paramètre « parent« . Tout d’abord, il faut créer le bouton « Écrire » :

	$wp_admin_bar->add_menu( array(
	'id' => 'contenu',
	'title' => __( 'Écrire' ),
	'href' => admin_url( 'post-new.php?post_type=post' )
		)
	);

Nous avons maintenant un bouton « Écrire » dans notre barre d’administration. Rien de bien nouveau, mais voyons comment y ajouter un menu déroulant, selon vos besoins. Collez à la suite ces éléments – à modifier selon vos besoins – pour créer notre menu.

	$wp_admin_bar->add_menu( array(
	'parent' => 'contenu',
	'id' => 'decouvertes',
	'title' => __('Une découverte'),
	'href' => admin_url('post-new.php?post_type=decouvertes')
		)
	);
	$wp_admin_bar->add_menu( array(
	'parent' => 'contenu',
	'id' => 'hacks',
	'title' => __('Un code source'),
	'href' => admin_url('post-new.php?post_type=snippet')
		)
	);
	$wp_admin_bar->add_menu( array(
	'parent' => 'contenu',
	'id' => 'liens',
	'title' => __('Un lien'),
	'href' => admin_url('post-new.php?post_type=liens')
		)
	);

L’ajout des actions

Pour finir, nous devons ordonner à WordPress d’exécuter ces dernières actions. Pour cela, il vous suffit de coller ces deux dernières lignes de le fichier « functions.php » de votre thème. Précisez bien évidemment le nom des fonctions.

add_action('admin_bar_menu', 'Gk_MenuBar', 40 );
add_action('add_admin_bar_menus', 'Gk_Bar');

Vue d’ensemble

Voici un aperçu d’une barre d’administration, personnalisée au minimum. Vous devriez normalement avoir le même résultat si vous avez bien suivi les étapes de cet article. Dans le cas contraire, merci de le signaler !

function Gk_MenuBar() {
	global $wp_admin_bar;
	$wp_admin_bar->add_menu( array(
	'id' => 'contenu',
	'title' => __( 'Écrire' ),
	'href' => admin_url( 'post-new.php?post_type=post' )
		)
	);
	$wp_admin_bar->add_menu( array(
	'parent' => 'contenu',
	'id' => 'decouvertes',
	'title' => __('Une découverte'),
	'href' => admin_url('post-new.php?post_type=decouvertes')
		)
	);
	$wp_admin_bar->add_menu( array(
	'parent' => 'contenu',
	'id' => 'hacks',
	'title' => __('Un code source'),
	'href' => admin_url('post-new.php?post_type=snippet')
		)
	);
	$wp_admin_bar->add_menu( array(
	'parent' => 'contenu',
	'id' => 'liens',
	'title' => __('Un lien'),
	'href' => admin_url('post-new.php?post_type=liens')
		)
	);
	$wp_admin_bar->add_menu( array(
	'id' => 'twitter-compte',
	'title' => __('Suivez-moi sur Twitter'),
	'href' => ('twitter.com/geekeriesfr')
		)
	);
}
function Gk_Bar() {
	remove_action( 'admin_bar_menu', 'wp_admin_bar_new_content_menu', 40 );
	remove_action( 'admin_bar_menu', 'wp_admin_bar_comments_menu', 50 );
	remove_action( 'admin_bar_menu', 'wp_admin_bar_appearance_menu', 60 );
	remove_action( 'admin_bar_menu', 'wpseo_admin_bar_menu', 95 );
}
add_action( 'admin_bar_menu', 'Gk_MenuBar', 40 );
add_action('add_admin_bar_menus', 'Gk_Bar');