Prise en main rapide du thème Themify et son constructeur de pages

Contenus Pages

La majorité des pages du site a été réalisée à l’aide du builder du thème, un constructeur de pages.

Pour réaliser une nouvelle page, vous pouvez (et je vous le recommande) partir d’une page déjà publiée. Depuis le bloc Themify Builder, cliquez sur importer le contenu d’une autre page.

J’ai utilisés des configurations précises pour chaque page, rien n’a été ajouté dans le premier bloc WordPress (l'éditeur natif), tout est géré grâce au builder situé dessous nommé Themify Custom Panel.

Themify Custom Panel

Vous avez plusieurs onglets différents, le premier a été modifié pour qu’un gabarit par défaut soit commun à toutes les pages. Celui qui nous intéresse est le dernier intitulé Themify builder, autrement dit le constructeur de pages de Themify.

Themify builder et contenus

Le constructeur dispose de plusieurs éléments, voici les plus utilisés, à savoir :

• Text : un contenu texte lambda
• Image : l’affichage de certaines images
• Counter : un décompte
• Button : les boutons d’appel à l’action (CTA)
• Link : l’affiche d’un lien avec, en arrière plan, une photo
• Slider : un diaporama
• Post : l’affichage des articles publiés
• Accordion : un accordéon de contenus (FAQ)

Prise en main rapide de WordPress

Généralités

Configuration

Commencez par configurer votre espace de travail. Vous avez une colonne de contenu principale et une autre à droite. Les affichages sont désactivables facilement et je vous encourage à le faire pour éviter d’avoir des blocs partout que vous n’avez surtout pas besoin d’utiliser.

Pour cela, allez en haut à droite dans Options de l’écran et décochez tout ce que nous n'avons pas abordé lors de la formation ou ce que vous ne comprenez pas.

Images

Pour les images, il vous faut passer par le bouton Ajouter un média.

Avant l’import dans WordPress

Mais avant ceci, assurez-vous que votre image ait un nom local correct. Par nom, j’entends le nom physique précédent l’extension.

Nom incorrect : IMAGE_3490.PNG

Ce nom ne me convient pas pour plusieurs raisons. D’une part, il ne permet pas d’identifier le contenu. D’autre part, il n’aide pas les moteurs de recherche à anticiper le contenu. Enfin, c’est impossible de s’en servir tel quel avec l’outil de recherche intégrée dans les médias, par exemple pour retrouver l'image qu'on souhaite utiliser sur un autre contenu.

Voici un exemple de nom physique correct.

Nom correct : cloud-collaboratif-mattermost.PNG

Le but est d’indiquer un nom qui soit explicite et évocateur pour tout le monde. Vous pouvez d’ailleurs tout à faire utiliser le slug (permalien) de l’article directement si vous n’avez qu’une seule image ou indiquer -1, -2, -X à la fin du nom dans le cas où il y a plusieurs images similaires et que vous ne souhaitez pas trop vous creuser la tête.

Cette étape du nom est à réaliser avant l’import directement sur votre ordinateur. C’est une modification locale avant que l’image soit téléversée sur le site et, autant vous le dire, cette étape est primordiale !

Importation dans WordPress

Ensuite, cliquez sur Ajouter un média. Vous choisissez ensuite sur votre ordinateur (Envoyer des fichiers) l’élément à incorporer puis, après téléversement, vous l’ajoutez en gardant cette configuration :

• Titre : le titre de l’article par défaut ou quelque chose de mieux si vous avez plusieurs images
• Légende : rien
• Texte alternatif : la même chose que le titre de l’image (c’est le texte qui sera lu par les navigateurs de non et mal voyants, un critère de visibilité pour les contenus qui est prendre en compte par les moteurs de recherche)
• Description : rien

Taille des images

Concernant la taille des images, il s’agit d’afficher une image qui fasse la taille du contenu généralement et, au clic s’il y a un intérêt à avoir l’image en grand, les utilisateurs pourront accéder à l’image en grande taille dans une lightbox.

Il y a donc plusieurs tailles utilisées sur le site actuellement mais vous pouvez utiliser le module Image pour indiquer une taille précise, l’outil se chargera de redimensionner l’original.

Un outil rognera chaque fois les images trop grandes (et réduira aussi leur poids pour améliorer la rapidité du site). Donc, si vous téléversez une image supérieure, pas de soucis : le site la mettra aux normes tout seul, ne perdez pas votre temps à faire du Paint. Indiquez juste un nom local propre et téléversez.

Image mise en avant

Il faut au minimum une image par article à indiquer dans l’onglet Image mise en avant. Cette image servira d’image d’illustration sur le site et sera l’image affichée sur les réseaux sociaux, elle doit donc être choisie avec soin.

Vidéos

Dans le cas de vidéo, récupérez l’URL (adresse web) de la vidéo et indiquez-là directement dans le contenu texte.

Le site convertira l’adresse en incorporant le lecteur adéquat (par exemple YouTube , Vimeo ou Dailymotion), ne passez pas par leur format embed.

Optimiser sa rédaction pour le SEO

Consultez la page dédiée Rédaction optimisée SEO pour mieux rédiger et optimiser le référencement naturel de vos contenus web.

• SEO

Contenus Pages

En fonction du thème utilisé, vous avez soit Divi soit Themify d'installé. Reportez-vous aux pages dédiées pour plus d'information sur leur particularité.

• Themify

Configuration

Depuis le listing des pages, on voit un classement particulier qui utilise l’ordre choisi.

Pour cela, j’ai classé les pages (0 étant l’ordre par défaut) pour avoir le même affichage que le menu principal (en ajoutant en premier la page d’accueil) pour finir par les pages annexes. Ce classement purement privé permet de mieux retrouver les éléments. Aussi, quand vous ajoutez une page, indiquez un numéro dans la case Ordre (Colonne de droite : Attributs de page).

Optimiser la rédaction pour le SEO

Titre

En règle générale, on met le mot clé en premier, par exemple « Journée Internationale des Droits de l'enfant : Tribune Le Monde ». Si c’est un article sans forcément de keyword, à vous de trouver une formule courte mais punchy.

L’idée est d’avoir dès le début de la lecture du titre les informations clés, sachant d’autre part que Google peut tronquer le titre s’il est trop long.

Dans le cas d’événements, d’articles récurrents ou de billets sur une thématique précise, je rajoute [Keyword] aussi histoire d’avoir un titre plus attractif.

Permalien (slug)

C’est à cette adresse web que sera affiché votre article.

Il faut absolument le nettoyer pour qu’il soit propre. En effet, il est formé automatiquement par WordPress lorsque vous indiquez un titre : il récupère tous les mots du titre, enlève les caractères accentués et exotiques ainsi que quelques mots inutiles, les combine avec – et valide l’ensemble.

Privilégiez les permaliens courts et sans mots inutiles (mots de liaison par exemple) tout en veillant à ne pas avoir un lhistoire mais histoire (les lettres apostrophes sont par défaut collées au mot suivant).

• Titre : Journée Internationale des Droits de l'enfant : Tribune Le Monde
• Slug automatique : journee-internationale-droits-de-lenfant-tribune-monde

Cela ne me convient pas, cela donne des titres à rallonge et plein de mots inutiles qui allongent encore plus le lien. Privilégiez les permaliens courts et sans mots inutiles (mots de liaison par exemple) tout en veillant à ne pas avoir un lhistoire mais histoire (les lettres apostrophes sont par défaut collées au mot suivant).

- Slug modifié : journee-internationale-droits-enfant-tribune-monde

Le permalien modifié indique seulement les informations majeures de l’article et cela vaut pour tous les articles.

Contenu

Pour ce qui est rédaction :

• Peu de gras et d’italique : à utiliser pour mettre en valeur certains éléments
• Pas de style (couleur, alignement, taille de typographie...) : on laisse le contenu tel quel sans chercher à rajouter de la couleur ou modifier les tailles de police. C’est via le CSS qu’on réalise ces choses. En fait, cela permet surtout de différencier contenant (WordPress) et contenu (rendu textuel) de sorte que, si on veut changer de design, tout se met à jour facilement et simplement.
• Vous pouvez utiliser l’ajout de lien (interne ou externe) dans le contenu ou encore les listes à puces.

Le reste, c’est une succession de mots.

Si votre contenu ne « rend pas bien » et qu’il s’affiche bizarrement, regardez dans le code généré (depuis l’interface WordPress, basculez sur Texte au lieu de Visuel) et vous verrez des balises. Les hX sont les titres, strong le gras, bold l’italique, a les liens. Tout le reste doit être supprimé. Vous avez deux possibilités :

• Coller votre contenu dans l'éditeur Texte qui permettra de récupérer le contenu textuel brut (sans style).
• Sélectionner tout votre conteu ([CTRL] + [A]) et cliquer sur la gomme. Pour voir la gomme, cliquez sur Ouvrir/Fermer la barre d'outils (ou faites [Shift] + [Alt] + [Z]) et sélectionnez la gomme (Nettoyer la mise en forme).

Pensez à plusieurs petites choses encore.

Liens

Il est fortement conseillé de faire des liens vers d’autres articles du site.

Pour cela, cliquez sur une partie du texte qui sera l’ancre du lien puis cliquez sur le bouton lien (Insérer/modifier un lien).

Une petite fenêtre s’ouvre, cliquez sur le rouage (Options du lien) pour accéder à une fenêtre plus complète et voir tous les contenus déjà publiés dans l’ordre antéchronologique (du plus récent au plus ancien). Vous avez d’ailleurs la possibilité de faire une recherche avec un mot clé parmi tous ces contenus.

Ne cochez pas la ligne Ouvrir le lien dans un nouvel onglet (aucun intérêt) et validez en cliquant sur Ajouter un lien.

Dans l’absolu, il est bon de placer ces liens au début du texte (dans les 2/3 premières phrases) si cela est pertinent pour que les moteurs de recherche les trouvent plus facilement. Cela permet aux robots d’indexation de trouver plus rapidement l’information.

Titres internes

Utilisez les titres pour structurer votre contenu et vous encourager à rédiger un peu plus. Un minimum de deux titres est généralement attendu par contenu.

D’ailleurs, il y a une logique dans les titres en web. Un titre sera toujours avant un sous-titre et un sous-titre secondaire ne pourra jamais être seul dans une page web (il faut avant un titre et un sous-titre).

Articles

Les articles sont un contenu chaud qui a quelques particularités.

Catégories

Chaque article doit avoir une et une seule catégorie.

Ces catégories servent à classer les articles et permettre de les retrouver dans des ensembles thématiques. Autant les définir en amont, ne pas avoir de catégorie fourre-tout et s’assurer qu’elles sont toutes pertinentes.

On pourra faire les ajustements après si jamais une catégorie devient obsolète.

Étiquettes

Anciennement tags, ces étiquettes fonctionnent comme un second classement en plus des catégories. Cet élément sert surtout à créer un autre classement qui transcende les catégories. Mais il faut garder en tête que chaque nouvelle étiquette crée une nouvelle page recensant tous les articles possédant cette étiquette, autant donc le faire avec pertinence.

Evitez si possible d'utiliser les étiquettes.

Balises Meta

Les balises Meta sont des éléments destinés aux moteurs de recherche pour mieux comprendre le contenu de votre site.

Meta title

Cette balise Meta title permet de définir un titre particulier plus parlant que Accueil ou Contact.

Pour le modifier, allez dans le bloc Yoast SEO depuis l'édition de votre contenu, en bas dans la colonne principale. Par défaut, le titre est souvent de la forme Titre de la page Séparateur Titre du site.

Vous êtes invité à le rendre plus SEO friendly, comprendre plus intéressant et pertinent.

• Meta title par défaut : Accueil - La bergerie de Piero et Mano
• Meta title modifiée : Fromages et Yaourts de brebis fermiers et bio dans le Rhône

Meta description

De la même manière, la balise Meta description permet de faire un résumé court de votre contenu. Ce résumé sera à indiquer dans le champ Méta description.

Écrivez jusqu’à ce que la couleur passe au vert un texte qui soit original (ne reprenez pas le début de votre article, c’est fait par défaut si la meta description est vide) et français. Cela permet surtout d’optimiser l’affichage dans les moteurs de recherche (le petit résumé affiché par les moteurs lors d'une recherche)et d’indiquer les mots clés.

• Meta description optimisée : Découvrez les yaourts et fromages bio fermiers de Piero et Mano, une ferme autonome à Sainte-Catherine (69) engagée dans l'économie locale.