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 :
- Contenu de la page
- Image à la une
- Premier espace de widget de la page d’accueil
- 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 !
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 :
- Twenty twelve, le nouveau thème WordPress par défaut pour 2012
- A First Look at the Twenty Twelve WordPress Theme
- Twenty Twelve Theme: 5 Reasons Why You Should Take a Closer Look
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
bonjour, merci pour votre article
petite question : savez-vous comment centrer l’image à la une lorsque l’on utilise le Front Page Template ??
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;
}
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 !
Oui, ce thème est parfait pour s’initier ! Bonne chance !
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.
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 !
J’aime particulièrement ce thème de base de wordpress, épuré, simple, parfait pour du texte « brut » et quelques images.
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
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 !
Merci. Je cherchais à l’insérer dans les modèles de page… Pourquoi je veux faire compliqué des fois je me demande ???
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
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