Test de Twenty Twelve

Disponible depuis fin août sur la plateforme WordPress.com et bientôt proposé avec WordPress 3.5, voici un test complet du nouveau thème par défaut de WordPress.

 

Avec le template « homepage »

Quelles sont les différences ?

  • Pleinement « responsive » et optimisé pour tous supports
  • Propose un modèle de page « Front Page Template »
  • Pas de commentaire en page d’accueil
  • Abandon du modèle « Magazine » de Twenty Eleven
  • Optimisé pour l’affichage Retina
  • Pas d’image d’en-tête activé
  • Utilisation de la jolie police Open Sans depuis les « Google web fonts« 
  • Pas de page d’options

« Content is king » : la version 2012 du thème par défaut est résolument épurée et facile à utiliser. On est bien dans la tendance actuelle d’un web plus tourné vers l’efficacité, la standardisation et la portabilité plutôt que le graphisme. Les novices pourront s’affranchir des contraintes techniques pour publier du contenu.

La page d’accueil avec le modèle « Front Page Template »

Ce modèle permet de découper facilement le contenu en 4 espaces distincts :

  1. Contenu de la page
  2. Image à la une
  3. Premier espace de widget de la page d’accueil
  4. Deuxième espace de widget de la page d’accueil

Les 4 zones de la page d’accueil

Personnalisation du thème

Comme ses prédécesseurs, on peut facilement modifier la présentation. On a perdu (mais je ne le regrette pas) la possibilité de basculer sur fond noir et la possibilité de gérer l’emplacement de la colonne latérale (uniquement à droite). Ces 2 réglages permettent de s’affranchir d’une page d’option de thème et de se limiter aux réglages :

  • Titres
  • Couleurs du texte / du fond
  • Image d’en-tête, qui s’affiche sous le menu.
  • Image de fond avec réglages précis de l’affichage
  • Un seul menu disponible

La page de personnalisation du thème

Le thème avec une image d’en-tête

Un rendu esthétique soigné

Outre la police « Open Sans » déjà évoquée, de nombreux effets visuels sont présents de façon discrète : bouton de validation, ombrée autour des photos, format d’articles, vignette d’image…

Galerie d’images

Format d’article « aside »

Le rendu sur support mobile

Une adaptation classique du contenu : passage sur une colonne, redimensionnement automatiquement des images et menu accessible au clic sur le bouton dédié (effet « toogle »). Le site est également très esthétique en format petit écran.

Cliquez pour agrandir

Des améliorations ?

Personnellement je trouve dommage que l’image d’en-tête se positionne sous le menu. Je trouve cela ni pratique ni esthétique. Heureusement, c’est facile de modifier ce comportement : il suffit d’éditer le fichier header.php et de déplacer le bloc « header-image » (ligne 44 à 47) juste au dessus de la balise <nav> (ligne 37). Attention, les fichiers modifiés doivent impérativement être déplacés dans un thème enfant !!

Cliquez pour agrandir

 

Je trouve également dommage de ne plus tirer partie de la fonction « image à la une » (active en page d’accueil et pour les articles), mais pas pour remplacer l’en tête.

Enfin, le footer est réduit à sa plus simple expression. Juste un slogan WordPress. Est-ce provisoire ? Je trouve que ça manque à minima du copyright, slogan du site ainsi que dans l’espace de droite un second emplacement de menu, pour les liens secondaires (crédits, mentions légales…). Cela fera l’objet d’un prochain tutoriel chez Elephorm.

Enfin, peut-être avez-vous noté la présence d’un bouton d’action en page d’accueil. J’ai repris le code fourni, que j’ai dû un peu « bidouiller » pour qu’il s’affiche :

<a class="menu-toggle" style="display: inline; text-decoration: none;" href="#">En savoir plus</a>

Conclusion

Voilà un idéal pour débuter avec WordPress ou monter un site de présentation ou un blog rapidement. Ce thème va à l’essentiel tout en affichant un design minimaliste. Je me sens beaucoup plus à l’aise avec ce thème qu’avec TwentyEleven, qui affichait par exemple un gros bloc de commentaire en page d’accueil !
C’est également une bonne base de départ pour des personnalisations futures, mais ça c’est une autre histoire !

MAJ 28 sept. :
Je viens d’utiliser ce thème pour mon site wp-formation.com Avec assez peu de modification, j’ai mis à jour la présentation de mon offre formation. Regroupées dans un thème enfant, les principales personnalisations sont :

  • L’installation du plugin Shortcodes de Elegantthemes
  • Ajout d’une zone de widget dans l’en-tête pour insérer mon téléphone
  • Ajout d’un second menu dans le footer
  • Modification de l’affichage du footer : « Proudly powered by WordPress » remplacé par nom et slogan du site

Sources :

Aller plus loin :

Des thèmes enfants sont disponibles :

  • Twenty Plus Lite :
    Rajoute  : thème « noir », colonne latérale gauche ou droite, choix entre extrait et texte complet, trois colonnes de widgets en footer et la fonction « wp-PageNavi « 
  • Dark child theme :
    Texte blanc sur fond noir
  • Cogitate:
    A simple and readable WordPress theme
  • 2012C
    Rajoute des widgets en footer et slider, plus des boites colorées

 

 

13 Responses to “Test de Twenty Twelve”