Communauté
Rejoignez la communauté Geekeries sur Google+ › Découvrez mag.geekeries.fr
Ergonomie

Personnaliser l’interface de WordPress 3.2

Publié par Valentin
Modifié le 8 novembre 2011 à 14:24.

Module de connexion

Tout d’abord, vous pouvez vous baser sur ma personnalisation personnelle à cette adresse. À mettre dans le dossier de votre thème WordPress. Pour mieux comprendre cette personnalisation, voici les éléments à personnaliser dans votre feuille de style.

/*  Personnsalisation HTML + Logo */
html {
	background:#F1F1F1!important;
}
h1 a {
	background:url(mon_image.png) 14px 17px no-repeat;
	width:280px;
	height:70px;
}
a {
	text-decoration:none;
}
/* Taille du bloc + message d'alerte/erreurs  */
#login {
	width:430px;
}
div.updated,.login .message {
	border:1px solid #E5E5E5;
	background:white;
	font-size:14px;
	color:#777;
}
/* Modification du bouton "Se connecter" */
.submit input {
	background: #444;
	color: white;
}
.submit input:hover {
	background: #EEE;
	color: #444;
}
.submit input:focus,.submit input:active {
	background: #444;
	color: white;
}
/* Liens */
#nav {
	color:#DEDEDE;
	float:right;
	margin:-5px;
}
.login #nav a {
	color:#7c8991;
}
.login #nav a:hover {
	color:#6f7a81;
}

L’administration de WordPress 3.2

Cette nouvelle interface change beaucoup de chose.Si vous aussi vous voulez simplement modifier quelques éléments tels que les boutons, les typographies utilisées et le style graphique des modules, vous pouvez vous appuyer sur une simple et rapide personnalisation à télécharger et à installer dans votre thème WordPress. Elle modifie :

  • La typographie « Georgia » dans les en-têtes des modules.
  • Un nouveau style de boutons (utilisant mon Framework CSS3 Buttons)
  • Un lissage de l’ensemble des modules (ombre, contour)

Appliquer les modifications

Une fois les feuilles de styles déposées dans le dossier de votre thème WordPress, il faut maintenant les connecter à l’administration WordPress pour exécuter les changements. Pour cela, ouvrez le fichier « functions.php » de votre thème et placez-y ces codes.

function gk_ui_wp32_login() {
	echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/ui_32_login.css"/>';
}
function gk_ui_wp32_admin() {
	echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/ui_32_admin.css"/>';
}
add_action('login_head', 'gk_ui_wp32_login');
add_action('admin_head', 'gk_ui_wp32_admin');

Bonus

Vous pouvez également modifier l’adresse du logo de connexion, présent sur la page de connexion. Pour cela, nous avons ce code (toujours dans functions.php)

function gk_url_login() {
       return 'http://www.geekeries.fr';
}
add_filter('login_headerurl', 'gk_url_login');
Partagez
l'Auteur