Passer à Twenty Fourteen

Mise à jour 10 octobre 2014 : Vous pouvez maintenant modifier les couleurs du thème.

Comme Delphine Cavallo vous l’expliquait dans le dernier billet de la Maison des Carnets, les carnets d’Hypothèses ont besoin de changer de look. Nous avons choisi de vous proposer quatre thèmes développés par l’équipe de WordPress pour plus de pérennité, d’homogénéité et de souplesse à long terme pour la plateforme.

Ces quatre nouveaux thèmes sont responsive design, c’est-à-dire que leur affichage s’adapte à la taille et au type de votre écran, ce qui est un avantage considérable, notamment pour la lecture sur les smartphones et tablettes.

Les nouveaux thèmes sont :

Certains carnetiers ont déjà adopté Twenty Fourteen sur leur carnet. Voici deux exemples :

Parmi ces quatre nouveaux thèmes, Twenty Fourteen est celui qui se rapproche le plus d’une présentation magazine avec son diaporama et sa grille de billets. Vous pourrez ainsi mettre en avant, sur la page d’accueil de votre carnet, les billets qui vous semblent les plus importants. Ce thème est aussi le plus graphique des thèmes proposés par la plateforme. C’est un atout si vous avez le temps de choisir des illustrations, mais cela peut vite être chronophage, notamment pour un carnetier gérant seul son carnet : le thème peut  alors très vite perdre de son intérêt graphique.

twenty-fourteen-grille
Si vous préférez utiliser votre temps de carnetier à d’autres activités que gérer l’aspect graphique de votre carnet, nous vous conseillons d’opter pour les thèmes Twenty Eleven et Twenty Twelve, plus sobres.

Vous pouvez également lire le billet de Karim Hammou pour vous faire une idée de la prise en main et de la configuration de Twenty Fourteen.

Les aspects généraux

Première configuration, le bandeau. Si vous venez de changer de thème, vous serez peut être déçu : le bandeau que vous utilisiez avec le thème précédent n’est pas repris par défaut.

Il faut donc retourner dans le menu « Apparence > En-tête » puis, soit choisir un nouveau bandeau en cliquant sur « choisir un fichier » (cf. encadré rouge, image 1), soit reprendre une image déjà utilisée dans le carnet (par exemple un ancien bandeau) en cliquant sur « choose image » (cf. encadré vert, image 1). Comme pour chaque image publiée sur votre carnet, vérifiez avant de publier votre bandeau que vous avez bien les droits nécessaires pour ce faire, et renseignez les crédits de cette image dans la page « Crédits » de votre carnet.

ajouter-bandeau

Image 1

Les menus

Par défaut,  ce thème utilise un seul menu composé des différentes pages et sous-pages de votre carnet. Il est situé en haut, juste en dessous du bandeau. Les éléments du menu sont alignés à droite.

menu

Création d’un menu

On peut aussi choisir de personnaliser ce menu. Pour cela, rendez-vous dans le menu « Apparence > Menus ».

Commencez par nommer votre menu dans le champ « Nom du menu » puis cliquez sur « Créer un menu ». Vous pouvez ensuite choisir dans la colonne de gauche les pages, les catégories mais aussi les liens que vous voulez ajouter au menu. Vous pouvez changer l’ordre et/ou créer des sous-menus déroulants en utilisant un simple glisser/déposer. N’oubliez pas de cliquer sur « Enregistrer le menu » à chaque modification.

Une fois votre menu créé, allez dans l’onglet « Manage locations ». Vous pouvez y assigner l’affichage de votre menu à l’une des deux zones disponibles : « Menu haut principal » et « Menu secondaire dans la barre latérale de gauche ».

La zone « Menu haut principal » correspond à celle juste en dessous du bandeau de votre carnet (encadré rouge, image 2) tandis que  le « Menu secondaire dans la barre latérale de gauche » (encadré vert, image 2) se positionnera sur le côté gauche de votre carnet.

2menus

Image 2

La mise en avant sur la page d’accueil

C’est évidemment le principal atout du thème Twenty Fourteen : pouvoir mettre en avant graphiquement plusieurs billets sur la page d’accueil de son carnet. Mais, comme nous l’évoquions plus haut, cette possibilité est chronophage et, utilisée trop rapidement, elle peut vite rendre votre carnet peu agréable visuellement. Ces précautions d’usage évoquées, passons à la mise en place.

diaporama

Le principe est simple : si un billet est indexé avec un certain mot-clé (par défaut, le mot-clé « featured »), il sera mis en avant sur la page d’accueil.

Par défaut, le mode de mise en valeur est la grille. Pour choisir entre présentation en grille et diaporama, il faut utiliser le menu « Apparence > Customize ». Cela permet d’accéder à une configuration plus précise du thème. À gauche se trouve un menu de configuration. À droite, on peut visualiser directement les effets des changements de configuration sur la page d’accueil du carnet.

Si l’on développe le menu « Contenu mis en avant » , il est possible de choisir entre « Grille » ou « Diaporama ».  Le champ « Nom du mot-clé » permet de définir le mot-clé qui sera utilisé pour mettre en avant un billet (par défaut donc, « featured »).

Une fois ces paramètres réglés, les derniers billets indexés avec le mot-clé choisi seront automatiquement dans la zone de valorisation de votre carnet (« Grille » ou « Diaporama »).
Il faut noter que ses billets n’apparaîtront alors plus dans le fil général des billets publiés sur votre carnet. Pour les y inclure à nouveau et les supprimer du diaporama ou de la grille des billets à la une, il suffira de supprimer le mot-clé « featured » (ou celui que vous aurez choisi) pour chacun des billets concernés.

Il ne reste plus qu’à illustrer les billets pour ne pas afficher une page d’accueil terne. Pour cela, il faut aller dans la page d’édition de chaque billet mis en avant, et de lui attribuer une » image à la une » en cliquant sur « Mettre une image à la une » (voir  encadré rouge, image 3).

image-une

Image 3

Pour que l’affichage soit optimal, il faut faire attention à la taille de l’image que vous allez utiliser.

entete-billet
Si vous utilisez l’option « Grille », cette image doit idéalement avoir une taille de 672 sur 372 pixels. Si c’est l’option « Diaporama » que vous avez choisie, elle devra être de 1038 sur 192 pixels pour que l’affichage soit correct. Karim Hammou vous propose un petit récapitulatif visuel des différentes tailles d’images utilisées par Twenty Fourteen pour les « images à la une » :

Les trois tailles auxquelles sont utilisées les « Images à la une » dans Twenty Fourteen - (Karim Hammou, Creative Commons by-nc-nd)

Les trois tailles auxquelles sont utilisées les « Images à la une » dans Twenty Fourteen – (Karim Hammou, Creative Commons by-nc-nd)

Les Widgets

Twenty Fourteen utilise 3 zones de Widgets :

  • Une barre latérale principale (à gauche) (encadrée en rouge sur les captures d’écrans ci-dessous) ;
  • Une barre latérale à droite, nommée étonnamment « Contenu de la barre latérale » dans l’espace (encadrée en vert sur les captures d’écrans ci-dessous)
  • Une « zone de widgets en pied de page » (encadrée en bleu sur les captures d’écrans ci-dessous)

widgets-lateraux-publicwidgets-pdp-public

widgets-prives
En changeant de thème, les widgets que vous utilisiez avant seront désactivés.  Mais ne vous inquiétez pas, vous n’aurez pas à refaire toutes la configuration de ces widgets : ils apparaîtront dans une zone de « Widgets désactivés ». Vous n’aurez plus qu’à les glisser-déposer dans les barres latérales et le pied de page pour les réactiver.

Changement des couleurs sur Twenty Fourteen

Depuis le 10 octobre 2014, vous pouvez changer les couleurs utilisées dans Twenty Fourteen. Ça se passe dans le menu Apparence > Customize > Couleurs.

  • Accent Color correspond à la couleur des liens et des menus sélectionnés (en rouge dans l’image ci-dessous)
  • Contrast Color correspond à la colonne des widgets et aux vignettes des billets mis en avant (en noir dans l’image ci-dessous)
  • Couleur d’arrière-plan correspond enfin à la couleur de remplissage à droite si le lecteur à un écran large (en orange dans l’image ci-dessous).

Capture d'écran de 2014-10-10 12:19:30

 

Voilà, maintenant vous avez toutes les informations utiles pour passer à Twenty Fourteen. Si vous avez des questions, n’hésitez pas à les poser en commentaires ici même ou sur la liste de discussion des carnetiers.

Bonne configuration à tous !

Photo d’illustration : Fourteen par Mark Gaw,  publiée en licence Creative Commons by-nc


Vous aimerez aussi...