Refonte d’un design de blog [Etude de cas]

Dernièrement, j’ai eu l’occasion de refondre le design d’un blog.

L’ensemble du travail fût un vrai plaisir : des premiers échanges avec le client, à la coopération avec la graphiste chargée de re-définir l’identité graphique, en passant par la réalisation à proprement parler. C’est suffisamment rare pour le souligner !

Tant et si bien que j’ai voulu vous présenter ce travail comme une étude de cas : les besoins, les solutions et les difficultés rencontrées.

Le sujet

Le blog qui a subi notre lifting est « Le Blog du Trading ».

Les besoins

Côté design

Notre client voulait : un design sobre, épuré et sérieux à l’image du sujet traité dans ses colonnes.

Loin de la vague « gagnez de l’argent », il associe le trading à un loisir passionnant, ayant pour « 2ème effet kiss-coll » la possibilité d’arrondir ses fins de mois. Pas question donc de carrosserie rutilante ni de liasses de billets!

Côté fonctionnalités

Après plusieurs échanges, nous avons cernés les besoins de notre client :

• un diaporama des articles en page d’accueil, complètement configurable en back-office
• une zone sociale qui regroupe à la fois les compteurs des réseaux sociaux et les liens vers chaque compte
• un pied de page pour y placer un « Disclaimer »
• diverses modifications dans les fonctionnalités existantes

Les choix effectués

Nous avons concocté un design à la fois sérieux et relaxant, a refait son logo et la bannière principale, autour du thème du trading.

Grâce au thème Mystique utilisé, notre client bénéficiait d’une grande liberté pour modifier son blog. Il m’a donc semblé logique de conserver cette base, afin que ce relooking ne soit pas synonyme d’une perte de liberté.

J’ai donc opté pour un thème enfant, qui viendrait par-dessus le thème actuel, pour transformer son apparence sans altérer ses fonctionnalités.

Le diaporama

Il me fallait un plugin suffisamment orienté « développeur » pour me donner la possibilité de modifier le code HTML et CSS, tout en étant aussi orienté « utilisateur », aussi qu’il puisse en changer les paramètres (vitesse, nombre de slides, transitions…).

Je savais dès le début qu’il me faudrait probablement opter pour un plugin premium : et c’est effectivement sur CodeCanyon que j’ai trouvé mon bonheur !

La zone sociale

La plus grosse difficulté est venu du plugin social. Il est en effet TRES difficile de trouver un plugin qui rassemble les compteurs des différents réseaux répandus en francophonie : nombre de fans Facebook, de followers Twitter, d’abonnés Youtube, les inscrits à Google+ et les suiveurs FeedBurners.

Initialement, nous avions inclu le nombre d’abonnés WordPress…avant de nous rendre compte qu’il ne s’agissait pas d’un réseau social !

J’ai bien dû tester une demi-douzaine de plugins sur la trentaine dont la description me semblait pertinente. Il faut dire qu’il y a de quoi perdre son latin, entre:

• les plugin de partage : pour qu’un visiteur partage à ses amis votre article
• les plugin d’abonnement : pour qu’un visiteur visite votre compte et s’y abonne
• les plugin de compteurs, qui sont de 2 types (sinon c’est pas drôle) : les compteurs du nombres d’abonnés à un réseau, et les compteurs du nombre de partage d’un article

Les rares fois où je trouvais un plugin qui affiche effectivement les compteurs relatifs aux comptes des réseaux sociaux, un réseau manquait toujours à l’appel !

Finalement, j’ai trouvé l’impossible.

Le disclaimer

Toute déclaration destinée à préciser ou de délimiter le champ des droits et des obligations qui peuvent être exercés et exécutés par les parties dans une relation légale. (wikipédia)

Sur un site web, il s’agit d’une zone de texte libre dans laquelle le webmaster peut communiquer. Côté technique, rien de plus simple : création d’une sidebar horizontale sous l’actuelle sidebar du pied-de-page.

En pratique, ce fût un sacré défi ! J’ai commencé à créer ma sidebar comme à mon habitude, mais celle-ci ne s’affichait pas. J’ai alors tout tenté pour résoudre ce problème…jusqu’à me rendre à l’évidence : on ne peut pas créer de sidebar supplémentaire avec le thème Mystique. Pourquoi ? Mystère…

Par contre, j’ai remarqué que Mystique mettait à disposition une sidebar spéciale, dans laquelle les widgets ne sont pas affichés à un endroit voulu, mais librement à l’aide d’un shortcode. Je pensais être arrivé aux bouts de mes peines. Mais non : impossible de faire afficher le moindre widget !

J’ai fini par coder en dur dans footer.php, à mon grand regret.

EDIT du 25/07/2013 : Merci à  V pour sa solution que je retransmets ici au propre.

Tout d’abord placez ce code dans le fichier functions.php de votre thème enfant :

// theme unique ID, used as theme option name, text domain for translations, and possibly other identifiers
// make sure there are no spaces in it if you're setting your own ID inside a child theme
defined('ATOM') or define('ATOM', get_stylesheet());

// the core; if you're reconfiguring Atom from a child theme, this line must be present as well
require_once TEMPLATEPATH.'/atom-core.php';

// and this function
if(!function_exists('atom')){
function atom(){
static $app;

if(!($app instanceof Atom))
$app = Atom::app();

return $app;
}
}

Ensuite, déclarer la sidebar, toujours dans le même fichier :

/* Ajout de la sidebar pour le disclaimer */
atom()->registerWidgetArea(array(
'id' => 'footer2',
'name' => atom()->t('Disclaimer'),
'description' => atom()->t('Active only if at least one of its widgets is visible to the current user. You can add between 1 and 6 widgets here (3 or 4 are optimal). They will adjust their size based on the widget count.'),
'before_widget' => '

',
'after_widget' => '

'
));

Et pour terminer, affichez la sidebar dans le template de votre choix (footer.php pour moi) :

<!--?php if(atom()->MenuExists('footer')): ?-->
<div class="nav nav-footer page-content"></div>
<pre>       <!--?php endif; ?-->

Avant/Après final

La page d’accueil

Vue d’un article