Depuis WordPress 2.8, le système de gestion de contenu intègre avec lui un système de personnalisation dynamique en toute transparence pour l’utilisateur. La fonction « body_class() » permet d’injecter des informations types liés à la page que vous consultez. À intégrer, principalement dans la balise « body » de votre thème WordPress, cette fonction permet tout simplement de styliser l’apparence de votre blog, selon l’emplacement des visiteurs.
Présentation de la fonction
[code]
<body < ?php body_class(); ?>>
[/code]
Une fonction plutôt simple à mettre en place, sans avoir de grandes connaisances dans le développement WordPress ou de la personnalisation via les feuilles de styles CSS. En effet, cette fonction ajoute alors des « class » au « corps » – body – de votre blog. Par la suite, vous pouvez ainsi personnaliser le style graphique de chaque page via votre feuille de style. Cette fonction doit être collée dans l’en-tête de votre blog, dans le fichier – header.php
Si vous le souhaitez, il est possible d’ajouter manuellement plusieurs nouveaux éléments dans cette balise. Pour cela, coller le code suivant en y ajoutant ce que vous souhaitez. Un simple espace entre les différents éléments suffit.
[code]
<body < ?php body_class('pizza'); ?>>
[/code]
Utilisation de la fonction
Passons à la personnalisation via les feuilles de styles. Le code généré par la fonction « body_class() » sur l’ensemble de vos pages est unique. Chaque contenu étant propre à une catégorie, un mot-clef ou un format d’article il est alors très simple de localiser un élément de le personnaliser. Dans notre exemple, voici le code généré.
[code]
<body class= »single single-post postid-14286 logged-in chrome »>
[/code]
Nous voulons alors personnaliser via la feuille de style l’affichage de l’article, mais uniquement l’article contenant l’identifiant « 14286 ».
[code]
.postid-14286 {
background-color: #EFEFEF;
font-size: 18px;
}
[/code]
Voici l’ensemble des éléments générés par la fonction « body_class()« .
rtl
home
blog
format
archive
date
search
paged
attachment
error404
single postid-(id)
page-id-(page_id)
attachmentid-(id)
attachment-(mime-type)
author
author-(utilisateur)
category
category-(slug)
tag
admin-bar
tag-(slug)
page-parent
page-child parent-pageid-(id)
page-template
page-template-(nom du modèle)
search-results
search-no-results
logged-in
custom-post-type-(nom)
paged-(numéro de page)
single-paged-(numéro de page)
page-paged-(numéro de page)
category-paged-(numéro de page)
tag-paged-(numéro de page)
date-paged-(numéro de page)
author-paged-(numéro de page)
search-paged-(numéro de page)
tax-(taxonomy name)
term-(term name)
Ajouter le navigateur utilisé
Ce bout de code nous viens directement de l’excellent blog de Nathan Rice. À coller dans le fichier – functions.php – de votre thème WordPress, elle vous permet d’ajouter de façon automatique le navigateur du visiteur dans la balise « body » de votre thème. Cela est vraiment efficace et sans grande difficulté, puisque par la suite, il est vous est alors possible de personnaliser votre blog selon le navigateur utilisé par vos visiteurs.
[code]
add_filter(‘body_class’,’browser_body_class’);
function browser_body_class($classes) {
global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;
if($is_lynx) $classes[] = ‘lynx’;
elseif($is_gecko) $classes[] = ‘gecko’;
elseif($is_opera) $classes[] = ‘opera’;
elseif($is_NS4) $classes[] = ‘ns4’;
elseif($is_safari) $classes[] = ‘safari’;
elseif($is_chrome) $classes[] = ‘chrome’;
elseif($is_IE) $classes[] = ‘ie’;
else $classes[] = ‘inconnu’;
if($is_iphone) $classes[] = ‘iphone’;
return $classes;
}
[/code]
Détecter les liens nofollow (SEO)
Cette simple astuce, nous viens du blog Shailan. Ce bout de code CSS – à coller dans votre feuille de style – affiche les liens contenant l’attribut « nofollow« , mais seulement pour les membres connectés.
[code]
.logged-in a[rel= »nofollow »] {
border: 1px dotted #F60;
}
[/code]
Publié à l'origine le : 18 février 2011 @ 18 h 43 min
