{"id":52,"date":"2026-09-15T19:48:29","date_gmt":"2026-09-15T17:48:29","guid":{"rendered":"https:\/\/site.triskel.ch\/web00\/?p=52"},"modified":"2026-09-15T20:00:06","modified_gmt":"2026-09-15T18:00:06","slug":"jour-2-elaboration-du-contenu","status":"publish","type":"post","link":"https:\/\/site.triskel.ch\/web00\/jour-2-elaboration-du-contenu\/","title":{"rendered":"Jour 2 &#8211; \u00c9laboration du contenu"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Pages, articles, Gutenberg et m\u00e9dias<\/p>\n\n\n\n<!--more-->\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">Votre site WordPress est configur\u00e9, vos extensions sont install\u00e9es. Il est temps de construire. Cette s\u00e9ance est celle o\u00f9 votre site commence \u00e0 ressembler \u00e0 quelque chose.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Avant de foncer dans l&rsquo;\u00e9diteur, nous allons poser les bases qui font la diff\u00e9rence entre un site bien structur\u00e9 et un site fouillis : comprendre la diff\u00e9rence entre&nbsp;<strong>pages et articles<\/strong>, organiser le contenu avec des&nbsp;<strong>cat\u00e9gories et des mots-cl\u00e9s<\/strong>, esquisser un&nbsp;<strong>wireframe<\/strong>&nbsp;sur papier, puis cr\u00e9er votre contenu avec l&rsquo;\u00e9diteur&nbsp;<strong>Gutenberg<\/strong>&nbsp;\u2014 le tout en g\u00e9rant vos&nbsp;<strong>images correctement<\/strong>&nbsp;d\u00e8s le d\u00e9part.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">1. Pages vs Articles \u2014 Ne pas confondre les deux<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">C&rsquo;est l&rsquo;erreur la plus fr\u00e9quente des d\u00e9butants WordPress : mettre le m\u00eame contenu en page ET en article, ou utiliser l&rsquo;un \u00e0 la place de l&rsquo;autre. Voici la distinction essentielle.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Les pages \u2014 pour le contenu statique<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Une&nbsp;<strong>page<\/strong>&nbsp;est un contenu permanent qui fait partie de la structure de votre site. Elle ne change pas (ou rarement) et n&rsquo;est g\u00e9n\u00e9ralement pas li\u00e9e \u00e0 une date ou \u00e0 un th\u00e8me.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Exemples typiques :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Accueil<\/li>\n\n\n\n<li>\u00c0 propos \/ Qui sommes-nous<\/li>\n\n\n\n<li>Services \/ Prestations<\/li>\n\n\n\n<li>Contact<\/li>\n\n\n\n<li>Mentions l\u00e9gales<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Les pages ne sont pas organis\u00e9es par cat\u00e9gories. Elles peuvent \u00eatre hi\u00e9rarchis\u00e9es (une page \u00ab M\u00e8re \u00bb avec des sous-pages \u00ab Filles \u00bb), mais elles n&rsquo;apparaissent pas dans votre fil d&rsquo;actualit\u00e9s.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Les articles \u2014 pour le contenu dynamique<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Un&nbsp;<strong>article<\/strong>&nbsp;est un contenu dat\u00e9, organis\u00e9 par th\u00e8me. C&rsquo;est le format naturel pour tout ce qui \u00e9volue dans le temps : actualit\u00e9s, billets de blog, recettes, critiques, \u00e9v\u00e9nements pass\u00e9s, etc.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Les articles sont class\u00e9s par&nbsp;<strong>cat\u00e9gories<\/strong>&nbsp;et&nbsp;<strong>mots-cl\u00e9s<\/strong>&nbsp;(\u00e9tiquettes). Ils apparaissent dans votre fil d&rsquo;articles, du plus r\u00e9cent au plus ancien. Ils sont id\u00e9aux pour le r\u00e9f\u00e9rencement naturel car ils signalent \u00e0 Google que votre site est actif et mis \u00e0 jour r\u00e9guli\u00e8rement.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Tableau comparatif<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th><\/th><th>Pages<\/th><th>Articles<\/th><\/tr><\/thead><tbody><tr><td>Type de contenu<\/td><td>Permanent<\/td><td>Dat\u00e9<\/td><\/tr><tr><td>Exemples<\/td><td>Accueil, Contact, Services<\/td><td>Actualit\u00e9s, Blog, Recettes<\/td><\/tr><tr><td>Cat\u00e9gories<\/td><td>Non<\/td><td>Oui<\/td><\/tr><tr><td>Ordre d&rsquo;affichage<\/td><td>Hi\u00e9rarchique<\/td><td>Chronologique (r\u00e9cent en premier)<\/td><\/tr><tr><td>Id\u00e9al pour<\/td><td>Structure du site<\/td><td>Contenu r\u00e9gulier<\/td><\/tr><tr><td>SEO<\/td><td>\u2705 Bon<\/td><td>\u2705\u2705 Tr\u00e8s bon (si r\u00e9gulier)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>R\u00e8gle simple :<\/strong>&nbsp;Si le contenu serait valable dans 2 ans sans modification \u2192&nbsp;<strong>Page<\/strong>. Si le contenu est li\u00e9 \u00e0 une date ou \u00e0 un sujet d&rsquo;actualit\u00e9 \u2192&nbsp;<strong>Article<\/strong>.<\/p>\n<\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">2. Wireframe \u2014 Dessiner avant de construire<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Avant de cr\u00e9er la moindre page dans WordPress, prenez une feuille de papier et dessinez l&rsquo;organisation de votre site. C&rsquo;est ce qu&rsquo;on appelle un&nbsp;<strong>wireframe<\/strong>&nbsp;\u2014 une esquisse simplifi\u00e9e de votre structure et de votre mise en page.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Pourquoi le wireframe vous fait gagner du temps<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Construire sans plan, c&rsquo;est l&rsquo;assurance de devoir tout refaire. Le wireframe vous oblige \u00e0 r\u00e9pondre \u00e0 trois questions fondamentales :<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Quelles pages mon site va-t-il contenir ?<\/strong>\u00a0(structure de navigation)<\/li>\n\n\n\n<li><strong>Qu&rsquo;est-ce que le visiteur voit en arrivant ?<\/strong>\u00a0(page d&rsquo;accueil)<\/li>\n\n\n\n<li><strong>Comment les pages sont-elles li\u00e9es entre elles ?<\/strong>\u00a0(arborescence)<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Une fois ces questions r\u00e9solues sur papier, la construction dans WordPress devient un exercice d&rsquo;ex\u00e9cution \u2014 vous savez exactement quoi cr\u00e9er et dans quel ordre.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Ce que doit contenir votre wireframe<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Pour cette formation, votre wireframe doit comporter au minimum :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>La\u00a0<strong>liste des pages<\/strong>\u00a0de votre site (minimum 3 : Accueil, une page de contenu, Contact)<\/li>\n\n\n\n<li>L&rsquo;<strong>arborescence<\/strong>\u00a0: quelles pages sont \u00ab m\u00e8res \u00bb et lesquelles sont des \u00ab filles \u00bb<\/li>\n\n\n\n<li>Un\u00a0<strong>croquis sommaire<\/strong>\u00a0de votre page d&rsquo;accueil : que voit le visiteur en premier ? (titre, image principale, boutons d&rsquo;appel \u00e0 l&rsquo;action\u2026)<\/li>\n\n\n\n<li>La\u00a0<strong>liste des cat\u00e9gories<\/strong>\u00a0si vous avez des articles : 3 \u00e0 7 maximum<\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">\ud83d\udca1&nbsp;<strong>Outil num\u00e9rique :<\/strong>&nbsp;Si vous pr\u00e9f\u00e9rez un outil digital,&nbsp;<a href=\"https:\/\/draw.io\/\">draw.io<\/a>&nbsp;est gratuit et id\u00e9al pour les arborescences. Mais pour d\u00e9marrer rapidement, papier et stylo font parfaitement l&rsquo;affaire.<\/p>\n<\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">3. La taxonomie \u2014 Cat\u00e9gories et mots-cl\u00e9s<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">La&nbsp;<strong>taxonomie<\/strong>&nbsp;est le syst\u00e8me de classification de vos articles. WordPress propose deux niveaux : les cat\u00e9gories (obligatoires) et les \u00e9tiquettes\/mots-cl\u00e9s (facultatifs).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Les cat\u00e9gories<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Les cat\u00e9gories sont les&nbsp;<strong>grandes familles<\/strong>&nbsp;dans lesquelles vous rangez vos articles. Elles structurent votre contenu et permettent aux visiteurs de naviguer par th\u00e8me.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>R\u00e8gle d&rsquo;or : entre 3 et 7 cat\u00e9gories maximum.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Trop de cat\u00e9gories = perte de sens + difficult\u00e9 pour le visiteur \u00e0 s&rsquo;orienter + mauvais signal pour Google.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Exemple pour un site d&rsquo;association sportive :<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Actualit\u00e9s<\/li>\n\n\n\n<li>R\u00e9sultats et classements<\/li>\n\n\n\n<li>Vie du club<\/li>\n\n\n\n<li>Partenaires<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Exemple pour un blog culinaire :<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Recettes sal\u00e9es<\/li>\n\n\n\n<li>Recettes sucr\u00e9es<\/li>\n\n\n\n<li>Conseils et techniques<\/li>\n\n\n\n<li>Restaurants et sorties<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Pour cr\u00e9er des cat\u00e9gories :&nbsp;<strong>Articles \u2192 Cat\u00e9gories \u2192 Ajouter une cat\u00e9gorie<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Chaque cat\u00e9gorie poss\u00e8de :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Un\u00a0<strong>nom<\/strong>\u00a0(ex. \u00ab Actualit\u00e9s \u00bb)<\/li>\n\n\n\n<li>Un\u00a0<strong>identifiant<\/strong>\u00a0g\u00e9n\u00e9r\u00e9 automatiquement, modifiable (ex.\u00a0<code>actualites<\/code>)<\/li>\n\n\n\n<li>Une\u00a0<strong>cat\u00e9gorie parente<\/strong>\u00a0optionnelle (pour cr\u00e9er des sous-cat\u00e9gories)<\/li>\n\n\n\n<li>Une\u00a0<strong>description<\/strong>\u00a0facultative (utile pour le SEO)<\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">\u26a0\ufe0f&nbsp;<strong>Attention :<\/strong>&nbsp;WordPress cr\u00e9e une cat\u00e9gorie par d\u00e9faut appel\u00e9e \u00ab Non class\u00e9 \u00bb. Renommez-la ou \u00e9vitez de l&rsquo;utiliser \u2014 elle indique \u00e0 Google que vous n&rsquo;avez pas organis\u00e9 votre contenu.<\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\">Les \u00e9tiquettes (mots-cl\u00e9s)<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Les \u00e9tiquettes sont des&nbsp;<strong>descripteurs fins<\/strong>, plus pr\u00e9cis que les cat\u00e9gories. Un article peut avoir plusieurs \u00e9tiquettes. Elles permettent de relier des articles qui partagent un point commun sans appartenir \u00e0 la m\u00eame cat\u00e9gorie.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Exemple :<\/strong>&nbsp;Un article dans la cat\u00e9gorie \u00ab Recettes sal\u00e9es \u00bb pourrait avoir les \u00e9tiquettes :&nbsp;<code>rapide<\/code>,&nbsp;<code>v\u00e9g\u00e9tarien<\/code>,&nbsp;<code>\u00e9t\u00e9<\/code>,&nbsp;<code>sans gluten<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Les \u00e9tiquettes sont&nbsp;<strong>facultatives<\/strong>. Si vous n&rsquo;avez pas de besoin pr\u00e9cis, n&rsquo;en cr\u00e9ez pas par d\u00e9faut \u2014 elles n&rsquo;apportent de valeur que si elles sont utilis\u00e9es avec coh\u00e9rence.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pour g\u00e9rer les \u00e9tiquettes :&nbsp;<strong>Articles \u2192 \u00c9tiquettes<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">R\u00e9sum\u00e9 : cat\u00e9gories vs \u00e9tiquettes<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th><\/th><th>Cat\u00e9gories<\/th><th>\u00c9tiquettes<\/th><\/tr><\/thead><tbody><tr><td>Nombre recommand\u00e9<\/td><td>3 \u00e0 7<\/td><td>Illimit\u00e9 (avec coh\u00e9rence)<\/td><\/tr><tr><td>Hi\u00e9rarchie possible<\/td><td>Oui (cat\u00e9gories m\u00e8res)<\/td><td>Non<\/td><\/tr><tr><td>Obligatoire<\/td><td>Oui (au moins 1 par article)<\/td><td>Non<\/td><\/tr><tr><td>R\u00f4le<\/td><td>Structure principale<\/td><td>Descripteurs fins<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">4. L&rsquo;\u00e9diteur Gutenberg<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Gutenberg est l&rsquo;\u00e9diteur de contenu de WordPress depuis la version 5.0 (2018). Il fonctionne par&nbsp;<strong>blocs<\/strong>&nbsp;: chaque \u00e9l\u00e9ment de votre page (titre, paragraphe, image, bouton\u2026) est un bloc ind\u00e9pendant que vous pouvez d\u00e9placer, dupliquer et personnaliser.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er une page ou un article<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Pour une page :\u00a0<strong>Pages \u2192 Ajouter<\/strong>\u00a0(ou\u00a0<strong>+ Nouveau \u2192 Page<\/strong>\u00a0dans la barre d&rsquo;administration)<\/li>\n\n\n\n<li>Pour un article :\u00a0<strong>Articles \u2192 Ajouter<\/strong>\u00a0(ou\u00a0<strong>+ Nouveau \u2192 Article<\/strong>)<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">L&rsquo;interface Gutenberg se compose de :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>La zone d&rsquo;\u00e9dition centrale<\/strong>\u00a0\u2014 votre contenu<\/li>\n\n\n\n<li><strong>La barre d&rsquo;outils sup\u00e9rieure<\/strong>\u00a0\u2014 actions globales (enregistrer, publier, pr\u00e9visualiser)<\/li>\n\n\n\n<li><strong>Le panneau lat\u00e9ral droit<\/strong>\u00a0\u2014 options du document (statut, image \u00e0 la une, cat\u00e9gories) et du bloc s\u00e9lectionn\u00e9 (couleur, espacement, typographie\u2026)<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Les 5 blocs essentiels<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\ud83c\udd70\ufe0f Bloc Paragraphe<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Le bloc de base. Chaque portion de texte est un bloc paragraphe. Pour l&rsquo;ajouter : cliquez sur le&nbsp;<strong>+<\/strong>&nbsp;dans la zone d&rsquo;\u00e9dition ou appuyez sur&nbsp;<strong>Entr\u00e9e<\/strong>&nbsp;apr\u00e8s un paragraphe existant.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Options utiles : taille du texte, gras, italique, couleur, lien.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\ud83d\udd24 Bloc Titre<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Structure votre contenu en niveaux (H2, H3, H4\u2026). En appuyant sur&nbsp;<code>\/<\/code>&nbsp;dans la zone d&rsquo;\u00e9dition et en tapant \u00ab titre \u00bb, vous l&rsquo;ins\u00e9rez rapidement.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">\ud83d\udca1&nbsp;<strong>Bonne pratique SEO :<\/strong>&nbsp;Chaque page ne doit avoir qu&rsquo;<strong>un seul titre H1<\/strong>&nbsp;(g\u00e9n\u00e9ralement le titre principal de l&rsquo;article\/page d\u00e9fini en haut). Utilisez des H2 pour les grandes sections, des H3 pour les sous-sections.<\/p>\n<\/blockquote>\n\n\n\n<h4 class=\"wp-block-heading\">\ud83d\uddbc\ufe0f Bloc Image<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Ins\u00e8re une image depuis votre m\u00e9diath\u00e8que ou depuis votre ordinateur. Une fois l&rsquo;image ins\u00e9r\u00e9e, renseignez toujours le&nbsp;<strong>texte alternatif (alt text)<\/strong>&nbsp;\u2014 c&rsquo;est essentiel pour l&rsquo;accessibilit\u00e9 et pour le r\u00e9f\u00e9rencement.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Options utiles : alignement, l\u00e9gende, lien vers l&rsquo;image ou vers une URL externe.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\ud83d\udcd0 Bloc Colonnes<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Divise votre contenu en 2, 3 ou 4 colonnes c\u00f4te \u00e0 c\u00f4te. Id\u00e9al pour les sections \u00ab Nos services \u00bb, \u00ab L&rsquo;\u00e9quipe \u00bb, ou toute mise en page comparative.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">\u26a0\ufe0f&nbsp;<strong>Attention sur mobile :<\/strong>&nbsp;Les colonnes s&#8217;empilent verticalement sur smartphone. V\u00e9rifiez toujours le rendu en mode responsive avant de publier.<\/p>\n<\/blockquote>\n\n\n\n<h4 class=\"wp-block-heading\">\ud83d\udd35 Bloc Bouton<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Cr\u00e9e un bouton cliquable avec un lien. Indispensable pour les appels \u00e0 l&rsquo;action : \u00ab Contactez-nous \u00bb, \u00ab En savoir plus \u00bb, \u00ab T\u00e9l\u00e9charger le document \u00bb.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Options utiles : couleur du bouton, couleur du texte, style (plein, contour), URL cible.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Raccourcis utiles dans Gutenberg<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Action<\/th><th>Raccourci<\/th><\/tr><\/thead><tbody><tr><td>Ins\u00e9rer un bloc<\/td><td><code>\/<\/code>&nbsp;(barre oblique) + d\u00e9but du nom du bloc<\/td><\/tr><tr><td>D\u00e9placer un bloc<\/td><td>Glisser-d\u00e9poser la poign\u00e9e (\u283f) \u00e0 gauche du bloc<\/td><\/tr><tr><td>Dupliquer un bloc<\/td><td>Clic droit \u2192 Dupliquer (ou&nbsp;<code>Ctrl+D<\/code>&nbsp;sur PC)<\/td><\/tr><tr><td>Supprimer un bloc<\/td><td><code>Backspace<\/code>&nbsp;quand le bloc est s\u00e9lectionn\u00e9 (sans curseur dans le texte)<\/td><\/tr><tr><td>Annuler<\/td><td><code>Ctrl+Z<\/code>&nbsp;(PC) \/&nbsp;<code>Cmd+Z<\/code>&nbsp;(Mac)<\/td><\/tr><tr><td>Enregistrer en brouillon<\/td><td><code>Ctrl+S<\/code>&nbsp;(PC) \/&nbsp;<code>Cmd+S<\/code>&nbsp;(Mac)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Structure d&rsquo;une page bien construite<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Pour la plupart des pages de votre site, adoptez cette structure de base :<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Titre de la page<\/strong>\u00a0(H1 \u2014 d\u00e9fini dans le champ titre en haut, pas dans un bloc)<\/li>\n\n\n\n<li><strong>Introduction<\/strong>\u00a0\u2014 2 \u00e0 3 phrases qui expliquent de quoi parle la page<\/li>\n\n\n\n<li><strong>Sections<\/strong>\u00a0organis\u00e9es avec des titres H2 et H3<\/li>\n\n\n\n<li><strong>Visuels<\/strong>\u00a0\u2014 au moins une image par section de contenu<\/li>\n\n\n\n<li><strong>Appel \u00e0 l&rsquo;action<\/strong>\u00a0\u2014 un bouton ou un lien vers la prochaine \u00e9tape logique (Contact, Inscription\u2026)<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">5. Les m\u00e9dias \u2014 G\u00e9rer et optimiser vos images<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">La m\u00e9diath\u00e8que WordPress centralise toutes les images, vid\u00e9os, PDFs et autres fichiers de votre site. Avant d&rsquo;y d\u00e9poser quoi que ce soit, il faut pr\u00e9parer vos fichiers correctement.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Optimiser avant d&rsquo;uploader \u2014 imp\u00e9ratif<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Une image non optimis\u00e9e peut peser 5 \u00e0 10 Mo. Chaque image lourde ralentit votre site, et Google p\u00e9nalise les sites lents dans ses r\u00e9sultats de recherche.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>L&rsquo;outil recommand\u00e9 :&nbsp;<a href=\"https:\/\/squoosh.app\/\">squoosh.app<\/a><\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Squoosh est gratuit, s&rsquo;utilise directement dans le navigateur (aucune installation), et permet de r\u00e9duire drastiquement le poids de vos images sans perte visible de qualit\u00e9.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Param\u00e8tres recommand\u00e9s dans Squoosh :<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Format :\u00a0<strong>WebP<\/strong>\u00a0(excellent ratio qualit\u00e9\/poids, support\u00e9 par tous les navigateurs modernes)<\/li>\n\n\n\n<li>Qualit\u00e9 :\u00a0<strong>75\u201385 %<\/strong>\u00a0(bon compromis qualit\u00e9\/poids)<\/li>\n\n\n\n<li>Dimensions : voir le tableau ci-dessous<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Dimensions recommand\u00e9es par usage<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Type d&rsquo;image<\/th><th>Largeur maximale recommand\u00e9e<\/th><th>Poids cible<\/th><\/tr><\/thead><tbody><tr><td>Image \u00e0 la une d&rsquo;article<\/td><td>1200 px<\/td><td>&lt; 200 Ko<\/td><\/tr><tr><td>Image de page d&rsquo;accueil (hero)<\/td><td>1600 px<\/td><td>&lt; 400 Ko<\/td><\/tr><tr><td>Image dans une colonne<\/td><td>800 px<\/td><td>&lt; 150 Ko<\/td><\/tr><tr><td>Logo<\/td><td>300 px<\/td><td>&lt; 30 Ko<\/td><\/tr><tr><td>Photo de l&rsquo;\u00e9quipe<\/td><td>600 px<\/td><td>&lt; 100 Ko<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">\ud83d\udca1&nbsp;<strong>R\u00e8gle pratique :<\/strong>&nbsp;La plupart des sites WordPress affichent leur contenu dans une colonne d&rsquo;environ 1200 px de large. Il est inutile d&rsquo;uploader des images plus grandes \u2014 WordPress les r\u00e9duit de toute fa\u00e7on, mais continue de stocker l&rsquo;original lourd.<\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\">Renseigner le texte alternatif (alt text)<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Chaque image que vous uploadez dans WordPress doit avoir un&nbsp;<strong>texte alternatif<\/strong>. C&rsquo;est une description textuelle de l&rsquo;image, utilis\u00e9e par :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Les\u00a0<strong>lecteurs d&rsquo;\u00e9cran<\/strong>\u00a0pour les visiteurs malvoyants<\/li>\n\n\n\n<li><strong>Google Images<\/strong>\u00a0pour indexer votre image<\/li>\n\n\n\n<li>Le navigateur, si l&rsquo;image ne se charge pas (il affiche le texte \u00e0 la place)<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Comment renseigner l&rsquo;alt text :<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Cliquez sur une image dans votre m\u00e9diath\u00e8que ou dans l&rsquo;\u00e9diteur<\/li>\n\n\n\n<li>Dans le panneau droit, remplissez le champ\u00a0<strong>Texte alternatif<\/strong><\/li>\n\n\n\n<li>D\u00e9crivez ce que montre l&rsquo;image en une phrase naturelle<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Bon exemple :<\/strong>&nbsp;<code>Portrait de Marie Durand, pr\u00e9sidente de l'Association XYZ<\/code><br><strong>Mauvais exemple :<\/strong>&nbsp;<code>IMG_2047<\/code>&nbsp;ou&nbsp;<code>photo-1<\/code>&nbsp;ou laisser vide<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Organiser la m\u00e9diath\u00e8que<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">WordPress ne permet pas de cr\u00e9er des dossiers dans la m\u00e9diath\u00e8que par d\u00e9faut. Pour un site avec peu d&rsquo;images (&lt; 50), ce n&rsquo;est pas un probl\u00e8me. Si vous pr\u00e9voyez beaucoup de m\u00e9dias, installez l&rsquo;extension&nbsp;<strong>FileBird<\/strong>&nbsp;(version gratuite disponible) pour organiser vos fichiers en dossiers.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">R\u00e9capitulatif \u2014 Ce que vous savez faire apr\u00e8s cette s\u00e9ance<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u00c0 l&rsquo;issue de cette deuxi\u00e8me s\u00e9ance, vous \u00eates capable de :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u2705 Distinguer pages et articles et choisir le bon type selon votre contenu<\/li>\n\n\n\n<li>\u2705 Dessiner un wireframe simple de votre site avant de construire<\/li>\n\n\n\n<li>\u2705 Cr\u00e9er une taxonomie coh\u00e9rente : 3 \u00e0 7 cat\u00e9gories et des \u00e9tiquettes pertinentes<\/li>\n\n\n\n<li>\u2705 Cr\u00e9er une page et un article avec l&rsquo;\u00e9diteur Gutenberg<\/li>\n\n\n\n<li>\u2705 Utiliser les 5 blocs essentiels : Paragraphe, Titre, Image, Colonnes, Bouton<\/li>\n\n\n\n<li>\u2705 Optimiser vos images avec squoosh.app avant de les uploader<\/li>\n\n\n\n<li>\u2705 Renseigner le texte alternatif pour chaque image<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Exercices de la s\u00e9ance<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">EX 2.1 \u2014 Wireframe sur papier (25 min)<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Sur une feuille de papier :<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Listez toutes les pages que contiendra votre site (minimum 3)<\/li>\n\n\n\n<li>Dessinez l&rsquo;arborescence : quelles pages sont au premier niveau ? Y a-t-il des sous-pages ?<\/li>\n\n\n\n<li>Esquissez votre page d&rsquo;accueil : que voit le visiteur en premier ?<\/li>\n\n\n\n<li>Listez vos cat\u00e9gories d&rsquo;articles (si votre site en pr\u00e9voit)<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Montrez votre wireframe au formateur avant de passer \u00e0 la suite.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">EX 2.2 \u2014 Cr\u00e9er la taxonomie (25 min)<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Allez dans\u00a0<strong>Articles \u2192 Cat\u00e9gories<\/strong><\/li>\n\n\n\n<li>Cr\u00e9ez vos 3 \u00e0 5 cat\u00e9gories (selon votre wireframe). Donnez un nom clair et une description courte \u00e0 chacune<\/li>\n\n\n\n<li>Renommez (ou supprimez) la cat\u00e9gorie par d\u00e9faut\u00a0<strong>Non class\u00e9<\/strong><\/li>\n\n\n\n<li>Si pertinent, cr\u00e9ez 3 \u00e0 5 \u00e9tiquettes dans\u00a0<strong>Articles \u2192 \u00c9tiquettes<\/strong><\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">EX 2.3 \u2014 Cr\u00e9er 2 pages statiques (20 min)<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Cr\u00e9ez deux pages en allant dans&nbsp;<strong>Pages \u2192 Ajouter<\/strong>&nbsp;:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Page 1 \u2014 Accueil<\/strong>&nbsp;: Utilisez au minimum les blocs suivants : un titre (H2), un paragraphe de pr\u00e9sentation, un bloc colonnes (2 colonnes), une image, un bouton \u00ab En savoir plus \u00bb.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Page 2 \u2014 \u00c0 propos ou Contact<\/strong>&nbsp;: Cr\u00e9ez une structure claire avec titre, texte et au minimum une image. Pour la page Contact, vous ajouterez un formulaire de contact \u00e0 la s\u00e9ance 4.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">\ud83d\udca1 Pour l&rsquo;instant, laissez les pages en&nbsp;<strong>Brouillon<\/strong>&nbsp;(ne publiez pas encore) \u2014 vous les publierez quand votre site sera complet.<\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\">EX 2.4 \u2014 Cr\u00e9er 2 articles (15 min)<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Allez dans&nbsp;<strong>Articles \u2192 Ajouter<\/strong>&nbsp;et cr\u00e9ez deux articles dans vos cat\u00e9gories :<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Article 1<\/strong>\u00a0: Titre accrocheur, paragraphe d&rsquo;introduction (3\u20134 phrases), une image optimis\u00e9e, cat\u00e9gorie assign\u00e9e<\/li>\n\n\n\n<li><strong>Article 2<\/strong>\u00a0: M\u00eame structure, cat\u00e9gorie diff\u00e9rente si possible<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Pour chaque article, renseignez aussi une&nbsp;<strong>image \u00e0 la une<\/strong>&nbsp;(panneau droit \u2192 Image \u00e0 la une).<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u00c0 la prochaine s\u00e9ance<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">La&nbsp;<strong>s\u00e9ance 3<\/strong>&nbsp;porte sur la navigation et la mise en page : vous cr\u00e9erez votre menu principal, configurerez la page d&rsquo;accueil statique, et commencerez \u00e0 travailler sur l&rsquo;apparence de votre site avec les menus et les widgets.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Pour pr\u00e9parer :<\/strong>&nbsp;regardez 2 ou 3 sites dans votre domaine que vous trouvez bien faits. Notez comment leur navigation est organis\u00e9e : combien d&rsquo;entr\u00e9es dans le menu ? Y a-t-il des sous-menus ? Quel est le premier message sur la page d&rsquo;accueil ?<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Formation WordPress \u2014 Roland Graber \u2014&nbsp;<a href=\"mailto:roland.graber@triskel.ch\">roland.graber@triskel.ch<\/a>&nbsp;\u2014 079 440 85 58<\/em><br><em>Cours priv\u00e9 : 120.- \/ heure via l&rsquo;UPL \u2014 Accompagnement professionnel :&nbsp;<a href=\"https:\/\/triskel.ch\/\">triskel.ch<\/a><\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Pages, articles, Gutenberg et m\u00e9dias<\/p>\n","protected":false},"author":1,"featured_media":53,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-52","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-formation"],"_links":{"self":[{"href":"https:\/\/site.triskel.ch\/web00\/wp-json\/wp\/v2\/posts\/52","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/site.triskel.ch\/web00\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/site.triskel.ch\/web00\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/site.triskel.ch\/web00\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/site.triskel.ch\/web00\/wp-json\/wp\/v2\/comments?post=52"}],"version-history":[{"count":1,"href":"https:\/\/site.triskel.ch\/web00\/wp-json\/wp\/v2\/posts\/52\/revisions"}],"predecessor-version":[{"id":54,"href":"https:\/\/site.triskel.ch\/web00\/wp-json\/wp\/v2\/posts\/52\/revisions\/54"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/site.triskel.ch\/web00\/wp-json\/wp\/v2\/media\/53"}],"wp:attachment":[{"href":"https:\/\/site.triskel.ch\/web00\/wp-json\/wp\/v2\/media?parent=52"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/site.triskel.ch\/web00\/wp-json\/wp\/v2\/categories?post=52"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/site.triskel.ch\/web00\/wp-json\/wp\/v2\/tags?post=52"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}