Hueman : la relève est arrivée !

Dernière mise à jour : mars 2018

Pour une documentation complète et à jour au sujet de Hueman, nous vous invitons à consulter le site internet officiel (en anglais) de l’éditeur de ce thème graphique.

Attention toutefois : certaines options de configuration évoquées dans cette documentation concernent des éléments que nous avons volontairement choisis de ne pas déployer sur Hypothèses et que vous ne retrouverez donc pas sur votre carnet.

Hypothèses propose en priorité à ses utilisateurs/rices les thèmes graphiques développés par les équipes de WordPress pour plus de pérennité, d’homogénéité et de souplesse à long terme pour la plateforme. Retrouvez l’ensemble des thèmes graphiques proposés dans la catégorie « Apparence » de la Maison des carnets.

Le thème graphique Hueman n’est pas développé par les équipes de WordPress, et à été ajouté sur Hypothèses pour proposer un remplaçant de qualité à un thème graphique obsolète qui a depuis été supprimé de la plateforme, Magazine Basic. Hueman a pour particularité principale de nombreuses options de personnalisation, plus poussées que celles des thèmes graphiques développés par les équipes de WordPress. C’est également le thème qui, sur Hypothèses, se rapproche le plus du format magazine.

Sommaire du billet :

• Une en-tête de carnet un peu particulière
• L’iconographie de vos billets
• Vos billets en diaporama
• Sélection des contenus à afficher en page d’accueil
• Deux colonnes pour vos billets
• Une navigation optimisée
• Placer vos widgets : l’embarras du choix
• Widgets : quelques nouveautés

Une en-tête de carnet un peu particulière

L’une des principales différences graphiques entre Hueman et les autres thèmes graphiques proposés sur Hypothèses réside au niveau de la zone d’en-tête du carnet.

Vous pouvez y ajouter :

• Un logo, depuis Apparence > Personnalisation > Design Général de Page > Identité du site. Cochez “Afficher un logo dans le haut de page” et sélectionnez un logo en dessous (taille recommandée : 250 par 100 pixels). A noter : la présence d’un logo désactive l’affichage du titre du carnet ;
• Une image d’en-tête depuis Apparence > Personnalisation > Design du Haut de Page > Image d’en-tête. Cochez “Afficher une image dans le haut de page” et sélectionnez une image en dessous (taille recommandée : 1380 × 280 pixels, format.jpg et résolution 96 DPI). Plusieurs images peuvent être chargées et changer aléatoirement si vous cliquez sur “En-têtes chargés aléatoires”. Vous pouvez choisir de cocher “Affichez votre logo, votre titre de site et votre slogan en haut de l’image d’en-tête” pour conserver ces éléments dans l’en-tête de votre carnet en plus de l’image d’en-tête ;
• Un widget d’annonce dans l’en-tête, depuis Apparence > Personnalisation > Design du Haut de Page > Widget d’annonce dans l’en-tête. Cochez “Afficher un widget dans l’en-tête.” et indiquez si vous souhaitez que ce widget s’affiche sur ordinateur, mobile, ou les deux. Puis dans Apparence > Personnalisation > Barres latérales et widgets > En-tête (à côté du logo / titre), cliquez sur “Ajouter un widget” pour déterminer celui que vous souhaitez ajouter à la zone.

La couleur et police du sous-titre de votre carnet (champ “slogan” dans Réglages > Général) n’est pas personnalisable avec le thème graphique Hueman. Si vous souhaitez utiliser une image d’en-tête dans des tons clairs sur laquelle le sous-titre en blanc n’apparaîtrait pas avec assez de contraste pour être lisible, il vous faudra peut être opter pour une image d’en-tête qui intègre le titre et sous-titre dans l’image, puis désactiver l’affichage de ces titre et sous titre en décochant “Affichez votre logo, votre titre de site et votre slogan en haut de l’image d’en-tête”.

L’iconographie de vos billets

Le thème graphique Hueman fait la part belle aux images mises en avant, qui s’affichent par défaut associées aux billets sur la page d’accueil, voire en diaporama (voir plus bas).

Les images mises en avant ne sont pas les illustrations intégrées dans le corps d’un billet mais bien les images sélectionnées dans la partie “Image mise en avant” en colonne de réglages, onglet “Document” de l’interface d’édition d’un billet. Vous avez alors le choix entre téléverser un nouveau fichier image depuis votre ordinateur ou choisir une image déjà présente dans la bibliothèque de médias de votre carnet (taille recommandée : 720 x 340 pixels, format .jpg et résolution 96 DPI).

À l’instar du bloc “Lire la suite…”, qu’il est bon d’inclure dans chacun de vos billets, gardez en tête que le fait d’attribuer des images mises en avant à vos billets est également une très bonne pratique, que nous vous conseillons de mettre place. Cela vous évitera un travail parfois fastidieux, si vous décidez de changer de thème graphique et d’opter pour un thème exploitant fortement les images mises en avant (comme c’est le cas pour Hueman).

Le thème graphique Hueman permet de choisir si l’image mise en avant doit être affichée également sur la page du billet ou non (le réglage se trouve dans Personnalisation > Design du corps de page > Réglages d’un article).

Petite précision : le fait de définir une image mise en avant ne vous empêche pas, bien évidemment, d’inclure par ailleurs dans votre billet autant d’images que vous le souhaitez pour l’illustrer.

Vos billets en diaporama sur la page d’accueil

Un des éléments-phares du thème graphique Hueman est la possibilité d’afficher un diaporama de billets en page d’accueil. Cette fonctionnalité s’active dans Apparence > Personnalisation > Contenu de la page d’accueil, en cochant “Articles mis en avant en haut de votre site”. Plus d’options apparaissent alors, dont :

• Le diaporama affiche un nombre de billets paramétrable dans “Article(s) mis en avant ;
• Les billets automatiquement mis en avant sont les derniers publiés dans une catégorie que vous déterminez dans “Sélectionnez une catégorie à mettre en avant”. Vous pouvez par exemple créer une catégorie spécialement pour cette fonctionnalité (appelée “Une” dans l’exemple) depuis Articles > Catégories notamment ;
• Pour que les billets défilent automatiquement sous forme de diaporama, il faut cliquer sur “Animer vos articles mis en avant avec un diaporama” et choisir une vitesse de défilement (5000 est une vitesse raisonnable). A noter : cliquer sur les flèches de défilement du diaporama le met sur pause.

Afin que l’affichage de ces images soit optimal en mode diaporama (et si vous utilisez les réglages par défaut concernant la largeur de votre carnet), nous vous conseillons d’utiliser sur vos billets des images à la Une d’une taille égale à 720 x 340 pixels. Si vous utilisez des images plus petites, elles seront agrandies et donc pixelisées. Si vous utilisez des images plus grandes, les fichiers correspondants seront inutilement lourds et ralentiront l’affichage de votre carnet pour vos lecteurs. Tentez à minima de respecter cette homothétie car Hueman recadrera quoi qu’il arrive vos images à 720 x 340 pixels.

Sélection des contenus à afficher en page d’accueil

Il est possible grâce à ce thème graphique de choisir de n’afficher que les billets de certaines catégories sur la page d’accueil du carnet, plutôt que l’ensemble des billets dernièrement publiés. Pour cela, dans Apparence > Personnaliser > Contenu de la page d’accueil, entrez le nom des catégories desquelles vous souhaitez afficher les billets en page d’accueil dans le champ “Ajouter un filtre de catégories à la page d’accueil”. Si ce champ est vide, ce seront tous les billets, toutes catégories confondues, qui seront affichés en page d’accueil.

Dans Personnalisation > Design du corps de page > Réglages d’un article, il est par ailleurs possible de cacher l’affichage de la date de publication et des catégories associées aux billets sur les pages web du carnet, notamment la page d’accueil.

Deux colonnes pour vos billets

Dans un esprit magazine, Hueman propose par défaut une présentation des extraits de billets en deux colonnes, sous forme de vignettes, sur la page d’accueil et lors de la navigation par catégories. Les vignettes rectangulaires des images à la Une associées aux billets ont une dimension de 520 x 245 pixels. Si vous utilisez la mise en avant par diaporama, cependant, prévoyez des images à la Une de 720 x 340 pixels.

Si vous préférez une mise en page plus classique, en une seule colonne (comme sur notre carnet Anthology), vous pouvez cocher la case “Afficher vos articles de blog en mode standard.” dans Apparence > Personnalisation > Contenu de la page d’accueil. Vous pouvez choisir d’afficher les billets en entier ou sous forme d’extrait sur la page d’accueil. Les images à la Une seront alors placées à gauche de chaque billet sous forme de vignettes carrées de 320 x 320 pixels. Si vous utilisez la mise en avant par diaporama, cependant, prévoyez des images à la Une de 720 x 340 pixels.

Privilégiez toujours un format .jpg et une résolution de 96 DPI pour des images plus légères.

Une navigation optimisée

Navigation entre billets

Hueman propose deux fonctionnalités intéressantes, permettant à vos lecteurs de naviguer entre vos billets.

Dans Apparence > Personnalisation > Design du corps de page > Réglages d’un article, vous pouvez choisir d’afficher automatiquement des liens vers des billets similaires en bas des pages des billets. La similarité peut être définie par la même catégorie, ou les mêmes mots-clés. Gardez cependant en tête que ces suggestions sont aléatoires, qu’elles soient réalisées sur la base des catégories ou des mots-clefs.

Vous pouvez également choisir, toujours dans Apparence > Personnalisation > Design du corps de page > Réglages d’un article, d’afficher dans les pages de billets une navigation vers les articles précédents et suivants, sous le contenu ou dans les barres de widgets latérales si celles-ci sont activées.

Trois emplacements de menus

Afin de rendre la consultation de votre carnet la plus simple et la plus agréable possible, Hueman possède un autre atout : la possibilité d’inclure dans votre carnet trois menus de navigation distincts, dans lesquels vous pourrez agencer vos catégories de billets et vos pages comme vous le souhaitez. Vous pourrez également y inclure des liens vers des ressources externes. Comme pour tous les thèmes proposés sur Hypothèses, les menus de navigation se configurent via le menu Apparence > Menus.

Si vous possédez déjà un carnet pour lequel vous avez créé un ou plusieurs menus et que vous basculez vers Hueman, vos menus seront conservés, mais il vous faudra les positionner correctement, en choisissant pour chacun d’eux l’un des emplacements proposés par Hueman :

• Placer votre menu en “Barre haute” (1) le positionnera juste au-dessus de votre en-tête de carnet et en-dessous de la barre d’OpenEdition. Cet emplacement de menu offre une fonction de recherche sur votre carnet (en cliquant sur la loupe à droite de la barre de menu) et présente l’avantage de permettre au menu que vous choisirez de rester toujours à l’écran lorsque vous ferez défiler votre page vers le bas. Vos lecteurs auront ainsi toujours accès à ce menu, même s’ils consultent les billets les plus anciens de votre page d’accueil. Des réglages plus poussés de ce menu se trouvent dans Apparence > Personnalisation > Design du Haut de Page > Menus d’en-tête.
• La position “En-tête” (2) placera votre menu en-dessous de votre en-tête et au-dessus de votre diaporama ou liste d’articles.
• La position “Pied de page” (3), enfin, fera apparaître votre menu au-dessus du pied de page de votre carnet.

Il existe également un emplacement de menu “Mobile” dont la description se suffit à elle-même : “Vous pouvez définir un menu spécifique pour les appareils mobiles. S’il n’est pas défini, le thème utilisera le menu assigné à la barre haute ou à l’en-tête.”

Placer vos widgets : l’embarras du choix

Hueman propose trois zones distinctes dans lesquelles vous pouvez insérer des widgets : deux colonnes latérales à positionner à votre convenance, de part et d’autre de la colonne centrale où sont affichés les billets, ainsi qu’une zone en pied de page, pouvant elle-même accueillir jusqu’à quatre colonnes de widgets.

Chaque zone de widgets peut être activée indépendamment des autres sur l’ensemble du carnet ou sur chaque type de page en particulier.

• Pour gérer les zones de widgets, rendez-vous dans Apparence > Personnalisation > Barres latérales et widgets > Créer et gérer les zones de widgets.
• Dans Apparence > Personnalisation > Design du corps de page > Disposition des colonnes pour le contenu principal, vous pouvez déterminer la position des colonnes latérales de widgets sur chaque type de page (une colonne ou deux, de quels côtés se placent ces colonnes).

Voici les différents types de page :

• Accueil : page d’accueil ;
• Unique : les colonnes de widgets que vous associerez à cet emplacement seront visibles sur la page d’un billet ;
• Archive : les colonnes de widgets associées à cet emplacement seront affichées lorsque vos lecteurs chercheront des billets par date de publication dans votre carnet ;
• Archive – Catégorie : la dénomination de cette section peut être trompeuse. Il s’agit bien ici de sélectionner des colonnes de widgets qui seront visibles lorsque vous afficherez telle ou telle catégorie de billets ;
• Rechercher : il s’agit de la page affichant les résultats des recherches effectuées sur votre carnet ;
• Erreur404 : cette maquette correspond à toutes les pages qui renverraient une erreur sur votre carnet. Par exemple, si vous diffusez un lien qui s’avère erroné, les utilisateurs tomberont sur une page affichant une erreur. Il peut alors être pratique de configurer les colonnes de widgets de cette page de manière à fournir aux utilisateurs en question des informations utiles pour les aider à naviguer dans votre carnet et à retrouver le contenu qu’ils cherchaient initialement ;
• Page par défaut : les colonnes de widgets associées à cet emplacement s’afficheront partout sur votre carnet, à l’exception des emplacements ci-dessus, si vous leur avez affecté des colonnes de widgets spécifiques.

Indépendamment de ces réglages généraux, il vous est également possible de sélectionner, pour chaque billet, une ou deux colonnes de widgets et de définir un agencement spécifique (“Layout”), via le choix de “Post Options”, qui apparaissent en cliquant sur le menu trois points en haut à droite de l’interface d’édition > Options > Cocher “Post Options”.

Les textes “Suivre” et “Plus” des en-têtes de colonnes de widgets latérales sont personnalisables dans Personnalisation > Design du corps de page > Colonnes latérales.

A côté de “Suivre”, vous avez la possibilité d’afficher des icônes qui envoie votre lectorat vers vos réseaux sociaux. Vous pouvez configurer ceci depuis Apparence > Personnalisation > Design Général de Page > Réseaux sociaux.

Si vous souhaitez que ces en-têtes ne soient pas affichés sur vos colonnes de widgets, décochez “Boites en haut des colonnes latérales” dans Apparence > Personnalisation > Design du corps de page > Colonnes latérales.

Une fois vos différentes zones de widgets paramétrées, il est temps de choisir les widgets que vous souhaitez y afficher. Pour cela, il vous suffit de vous rendre, comme pour n’importe quel thème graphique, dans le menu Apparence > Widgets. À gauche, vous  trouverez tous les widgets disponibles, que vous pourrez faire glisser vers les différents emplacements visibles à droite. Ces emplacements correspondent à vos différentes colonnes de widgets et aux zones de widgets de votre pied de page.

Widgets : quelques nouveautés

Le thème graphique Hueman embarque quelques widgets qui lui sont propres et que vous pouvez trouver dans Apparence > Widgets avec les autres widgets non propres à un thème graphique.

“Articles Hueman”

Il permet à votre lectorat de consulter, en un coup d’œil, certains billets publiés sur votre carnet. Vous pouvez lui attribuer un titre, choisir d’afficher ou non les images à la Une des billets (“Show thumbnails”.), le nombre de billets à présenter (“Items to show”), ainsi que définir, via le menu déroulant “Category”, si vous souhaitez que ces billets fassent partie d’une catégorie spécifique ou si vous préférez qu’il s’agisse des billets publiés sur votre carnet, sans distinction (en sélectionnant “All”). Le menu “Order by” vous permet de définir si vous souhaitez que les billets soient affichés en fonction de leur date de publication, du nombre de commentaire qui leur est associé ou bien de manière aléatoire. Le menu “Posts from” vous permet quant à lui de choisir si les billets affichés doivent avoir été publiés dans une période de temps donnée. Enfin, vous pouvez afficher ou non les informations relatives aux catégories et à la date de publication de vos billets, en cochant ou en décochant les cases “Show categories” et “Show dates”.

“Vidéos Hueman”

Il offre la possibilité d’afficher très simplement une vidéo sur votre carnet, en entrant soit son URL¹. Innovant à l’époque où ce widget avait été implémenté par les développeurs de Hueman, il fait maintenant doublon avec le widget “Vidéos” natif de WordPress.

“Onglets dynamiques Hueman”

Il se compose de un à quatre onglets :

• l’onglet “Recent Posts” vous permet d’afficher les billets les plus récents publiés sur votre carnet. En cochant la case “Show thumbnails”, vous afficherez en plus l’image à la Une associée à chaque billet, le cas échéant. Vous pouvez choisir le nombre de billets à afficher en remplissant le champ “Items to show”. Le menu déroulant “Category” vous permet de choisir si les billets affichés seront les derniers publiés sur le carnet, toutes catégories confondues (en choisissant “All”), ou bien si vous préférez afficher les billets associés à une catégorie donnée. Cocher ou décocher la case “Enable recent posts” vous permet d’afficher ou de masquer cet onglet du widget AlxTabs
• l’onglet “Most Popular” vous permet quant à lui d’afficher les billets les plus “populaires” de votre carnet. Cette sélection est réalisée sur la base du nombre de commentaires associés à chaque billet. Les réglages de cet onglet sont similaires à ceux de l’onglet “Recent Posts”. Vous avez également la possibilité d’afficher ou de masquer cet onglet en cochant ou en décochant la case “Enable most popular posts”
• l’onglet “Recent Comments”, que vous pouvez également masquer en décochant la case “Enable recent comments”, présente les commentaires les plus récents présents sur votre carnet. Vous pouvez afficher ou non l’image de profil des auteurs de ces commentaires en cochant ou en décochant la case “Show avatars”. Il vous est également possible de choisir le nombre de commentaires à afficher via le champ “Items to show”
• le dernier onglet, “Tag”, affiche les mots-clés associés aux différents billets publiés sur votre carnet. Vous pouvez masquer cet onglet en décochant la case “Enable tags”

La section “Tab Order” vous permet de ré-ordonner les quatre onglets en leur attribuant un chiffre compris entre 1 et 4, celui numéroté 1 étant celui qui s’affichera en premier.

La section “Tab Infos”, enfin, vous permet d’autoriser ou non l’affichage des catégories et des dates de publication des billets présents dans les onglets “Recent Posts” et “Most Popular”.

Vous avez désormais les clefs en mains pour bien démarrer avec Hueman. En cas de question concernant ce thème, si vous ne trouvez pas la réponse dans ce billet, n’hésitez pas à faites appel à la communauté des carnetiers sur le forum d’entraide, qui saura à coup sûr vous aider dans la prise en main et l’utilisation de votre carnet.

Image à la une : The New Cadillac Square par Thomas Hawk sous licence Creative Commons BY-NC

1. il faut donc que cette vidéo soit déjà stockée en ligne. Nous vous invitons pour ce faire à passer par un hébergeur tiers, la capacité d’accueil offerte par Hypothèses pour ce type de média étant très limitée [↩]

---

---