WordPress, Administration, Personnalisation – Personnaliser l’administration de WordPress à l’aide de plugins


Si vous êtes amené à utiliser WordPress pour le compte d’un client, il vous faudra certainement personnaliser l’outil d’administration, cela peut aussi faire parti d’une démarche personnel afin de personnaliser plus encore votre thème dans sa partie “front” comme dans sa partie “back”.

On va voir la chose en 2 temps :

  1. Comment ajouter un logo différent sur la page de login sous WordPress car c’est finalement la premiere chose que sera amené à voir toute personne cherchant à se loguer à l’outil WP.
  2. Ajouter un widget en top position sur le “dashboard” ou tableau de bord de WordPress, sachant que là aussi c’est un des tous premiers écrans que voit l’utilisateur.

Les tests ont été sur la dernière version de WordPress, la 3.3

Modifier la page de login via un plugin

On va voir à l’aide d’un plugin comment modifier la page de login. L’activation du plugin aura comme conséquence de placer un logo en lieu et place du logo WP sur la page de login, de changé le lien sur ce même logo, en permettant de retourner sur la page d’accueil du login ainsi que le alt message. Nous sommes servi du logo 3WDOC, notre web application de création d’histoire interactives et enrichies disponible sur www.3wdoc.com

Le plugin se nomme he3adminsettings, il comprend un répertoire css et un répertoire images.

 
	<?php
	/*
	Plugin Name: he3adminsettings
	Plugin URI: http://www.hecube.net
	Description: enable to change the login page
	Version: 1.0.0
	Author: bruno@hecube.net
	Author URI: http://www.hecube.net
	License: GPLv2
 
		Copyright (c) 2011 hecube.net (http://hecube.net)
		he3adminsettings is released under the GNU General Public License (GPL)
		http://www.gnu.org/licenses/gpl-2.0.txt
 
	*/
 
	/* Change the CSS for the admin */
		function he3_custom_admin_head() {
			echo "n";
	        	echo '<link rel="stylesheet" type="text/css" href="' .plugins_url('css/he3wpadmin.css', __FILE__). '">';
	echo "n";
		}//EOF
		add_action('admin_head', 'he3_custom_admin_head');
 
 
		function he3_custom_login_page() {
			echo "n";
	    	echo '<link rel="stylesheet" type="text/css" href="' .plugins_url('css/he3wploginpage.css', __FILE__). '">';
			echo "n";
		}//EOF
		add_action('login_head', 'he3_custom_login_page');
 
		function he3_custom_login_page_site_url (){
				return home_url();  // The url
		}//EOF
			add_filter('login_headerurl', 'he3_custom_login_page_site_url');
 
 
		function he3_custom_login_page_site_url_title (){
			return "The alt msg on the logo"; // The alt msg
		}//EOF
		add_filter('login_headertitle', 'he3_custom_login_page_site_url_title');
 
 
	?>

Les deux CSS du repertoire css, he3wploginpage.css et he3wpadmin.css

he3wploginpage.css

	/* he3wploginpage.css */
	html,
	body {
		height:100%;
	/*	background-image: url(../images/bg_night_hunter.png);*/
		/*background-image: url(../images/bgsite.jpg);*/
	}
 
	#login {
		-webkit-border-radius:5px;
		-khtml-border-radius:5px;
		-moz-border-radius:5px;
		border-radius:5px;
		-webkit-box-shadow:rgba(200,200,200,0.7) 0 4px 10px -1px;
		-khtml-box-shadow:rgba(200,200,200,0.7) 0 4px 10px -1px;
		-moz-box-shadow:rgba(200,200,200,0.7) 0 4px 10px -1px;
		box-shadow:rgba(200,200,200,0.7) 0 4px 10px -1px;
		padding-bottom:20px;
	}
 
	#loginform,
	#lostpasswordform,
	#registerform {
		-khtml-box-shadow:none;
		-webkit-box-shadow:none;
		-moz-box-shadow:none;
		box-shadow:none;
		-webkit-border-radius:0;
		-khtml-border-radius:0;
		-moz-border-radius:0;
		border-radius:0;
		border:none;
		background:transparent;
		margin:0;
	}
 
	#login h1 a {
		/*background:transparent;*/
		background-image: url(../images/logo-login.png) !important;
	}
 
	#login h1 a {
		width:312px;
		height:91px;
		margin-left:7px;
		border-radius:3px;
		margin-bottom:10px;
	}
 
	.message {
		color:#000;
		width:275px;
	}

he3wpadmin.css

 
	/* he3wpadmin.css */
	#header-logo { 
		background-image: url(../images/logo-admin.png) !important;
		width:45px;
		height:21px; 
		}

Activation des 2 plugins
Wordpress, Administration, Personnalisation - Personnaliser l'administration de WordPress à l'aide de plugins

Le résultat de he3adminsettings
Wordpress, Administration, Personnalisation - Personnaliser l'administration de WordPress à l'aide de plugins

Insérer un widget sur la tableau de bord

Par défaut, ce widget de tableau de bord s’affichera tout en haut à moins que l’utilisateur ne réorganise ses widgets. Ce wigdet n’affiche pour le moment qu’un texte bateau, libre à vous de l’agrémenter de plus d’éléments.

Le résultat de he3dashboardwidget
Wordpress, Administration, Personnalisation - Personnaliser l'administration de WordPress à l'aide de plugins

Le code source du plugin he3dashboardwidget

	<?php
	/*
	Plugin Name: he3dashboardwidget
	Plugin URI: http://hecube.net
	Description: Add a dashboard widget on top position
	Version: 1.0
	Author: Bruno Flaven
	Author URI: http://hecube.net
	License: GPL2
	*/
	/*
	http://codex.wordpress.org/Dashboard_Widgets_API
	http://theme.it/an-in-depth-look-at-the-dashboard-widgets-api/
	*/
 
	// Create the function to output the contents of our Dashboard Widget
 
	function example_dashboard_widget_function() {
		// Display whatever it is you want to show
		echo "Hello World, I'm a great Dashboard Widget";
	} 
 
 
	function example_add_dashboard_widgets () {
		wp_add_dashboard_widget('example_dashboard_widget', 'Example Dashboard Widget', 'example_dashboard_widget_function');
 
		// Globalize the metaboxes array, this holds all the widgets for wp-admin
		global $wp_meta_boxes;
 
		// Get the regular dashboard widgets array 
		// (which has our new widget already but at the end)
 
		$normal_dashboard = $wp_meta_boxes['dashboard']['normal']['core'];
 
		// Backup and delete our new dashbaord widget from the end of the array
 
		$example_widget_backup = array('example_dashboard_widget' => $normal_dashboard['example_dashboard_widget']);
		unset($normal_dashboard['example_dashboard_widget']);
 
		// Merge the two arrays together so our widget is at the beginning
 
		$sorted_dashboard = array_merge($example_widget_backup, $normal_dashboard);
 
		// Save the sorted array back into the original metaboxes 
 
		$wp_meta_boxes['dashboard']['normal']['core'] = $sorted_dashboard;
	}
 
	// Hook into the 'wp_dashboard_setup' action to register our other functions
 
	add_action('wp_dashboard_setup', 'example_add_dashboard_widgets' );
 
 
	?>

Les plugins de gestion des accès utilisateur

Il existe un florilège de plugins permettant de contrôler les accès des utilisateurs à votre site sous WP notamment dans certains cas de contrôler jusqu’aux widgets que l’utilisateur est susceptible de voir.
En voici quelques-uns, notamment l’excellent Advanced Access Manager.

En savoir plus