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 »

 

Voir la démonstration en ligne Téléchargez le thème

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”

  1. pyfrombzh 11 octobre 2012 at 16 h 31 min #

    bonjour, merci pour votre article
    petite question : savez-vous comment centrer l’image à la une lorsque l’on utilise le Front Page Template ??

  2. Gd6d 12 octobre 2012 at 0 h 19 min #

    La structure de la page est prévu pour gérer 2 colonnes. Cela nécessite donc de modifier le code.
    Il faut insérer une image à la une de 960px, ne pas insérer de texte et rajouter cette instruction dans le css
    .entry-page-image {
    width: 100% !important;
    }

  3. Sébastien MARTIN 17 octobre 2012 at 0 h 01 min #

    Merci Olivier, pour ces précisions (et aussi pour ton DVD qui m’a été fort utile !!! ;) )

    Ce nouveau thème TWENTY TWELVE est en effet très agréable. Je vais travailler avec un public scolaire dessus, afin de créer un site pour ma classe !

  4. Gd6d 17 octobre 2012 at 0 h 22 min #

    Oui, ce thème est parfait pour s’initier ! Bonne chance !

  5. Benoit 19 octobre 2012 at 10 h 15 min #

    Bonjour,

    Excellent site.

    Juste pour une petite aide. Je n’arrive pas à utiliser la fonction more. Je l’insère mais cela n’affiche pas « lire la suite » une fois la publication effectuée.

    Un code à ajouter quelque part ?

    Merci.

  6. Gd6d 19 octobre 2012 at 10 h 36 min #

    Bonjour. Cette fonction peut ne pas fonctionner avec certains thèmes. Normalement ça sert à couper un article à un endroit précis lors de l’affichage de tous les articles.
    Regardez l’exemple ici :
    http://twenty-twelve.gd6d.fr/blog-2/

    Si vous voulez découper un article long en plusieurs pages, c’est la fonction « < !–nextpage–> » qu’il faut utiliser, comme ici :
    http://twenty-twelve.gd6d.fr/layout-test/

    Bonne chance !

  7. Guillaume 28 décembre 2012 at 8 h 44 min #

    J’aime particulièrement ce thème de base de wordpress, épuré, simple, parfait pour du texte « brut » et quelques images.

  8. sam 7 janvier 2013 at 0 h 54 min #

    Bonjour Olivier,
    Je ne sais pas où insérer le code que vous proposez concernant le bouton « En savoir plus » de la page d’accueil.
    Merci

  9. Gd6d 7 janvier 2013 at 1 h 08 min #

    Le bouton « en savoir plus » s’insère à la fin du contenu de la page d’accueil. A sa droite, c’est l’image à la une et en dessous les 2 widgets de la page d’accueil.
    Bonne chance !

  10. sam 7 janvier 2013 at 1 h 58 min #

    Merci. Je cherchais à l’insérer dans les modèles de page… Pourquoi je veux faire compliqué des fois je me demande ???

  11. Dhulst 14 février 2013 at 15 h 05 min #

    Bonjour,
    je suis en train de créer un blog (destiné à la formation pour les étudiants post-bac) et j’aimerais pouvoir changer l’image de l’en-tête selon les pages du menu (chaque page doit avoir sa propre image en-tête). J’ai d’abord essayé avec Academica, mais ça ne marche pas. Avec le thème « Chateau », je n’ai pu changer l’en-tête que sur 2 pages.
    Comment faut-il procéder et quel thème utiliser?
    Merci d’avance pour votre aide

  12. Gd6d 14 février 2013 at 15 h 35 min #

    Bonjour. Ce n’est pas trop le thème qu’il faut chercher, mais il faut plutôt changer le fonctionnement de l’en-tête (header.php) en y intégrant la possibilité d’insérer une image à la une
    http://codex.wordpress.org/Post_Thumbnails

    Ou alors le thème « Twenty Eleven » le permet je crois…

    Bonne chance

Trackbacks/Pingbacks

  1. Remplacer image à la une par diaporama en page accueil TwentyTwelve - 28 novembre 2012

    […] Voilà une petite astuce pour rajouter un petit diaporama en page d’accueil d’un site internet WordPress avec l’excellent thème TwentyTwelve. […]

Laisser un commentaire