{"id":65,"date":"2026-09-22T02:00:00","date_gmt":"2026-09-22T00:00:00","guid":{"rendered":"https:\/\/site.triskel.ch\/web00\/?p=65"},"modified":"2026-09-15T20:07:47","modified_gmt":"2026-09-15T18:07:47","slug":"jour-3-themes-et-navigation","status":"publish","type":"post","link":"https:\/\/site.triskel.ch\/web00\/jour-3-themes-et-navigation\/","title":{"rendered":"Jour 3 &#8211; Th\u00e8mes et navigation"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Choisir son th\u00e8me et structurer son site<\/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 contenu est pr\u00eat. Il est temps de d\u00e9cider comment votre site va&nbsp;<em>ressembler<\/em>&nbsp;et comment les visiteurs vont&nbsp;<em>s&rsquo;y d\u00e9placer<\/em>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Cette s\u00e9ance commence par une question fondamentale que beaucoup de d\u00e9butants ignorent compl\u00e8tement :&nbsp;<strong>quel type de th\u00e8me choisir ?<\/strong>&nbsp;Ce choix conditionne tout \u2014 la fa\u00e7on dont vous personnalisez l&rsquo;apparence, la fa\u00e7on dont vous cr\u00e9ez les menus, et m\u00eame l&rsquo;interface dans laquelle vous allez travailler au quotidien. Nous verrons ensuite comment construire un menu de navigation efficace, configurer une vraie page d&rsquo;accueil et cr\u00e9er des liens internes.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">1. Les deux familles de th\u00e8mes WordPress<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">WordPress a travers\u00e9 une r\u00e9volution depuis 2022. Aujourd&rsquo;hui, il existe deux types de th\u00e8mes radicalement diff\u00e9rents dans leur fonctionnement \u2014 et il est essentiel de savoir dans lequel vous vous trouvez.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Les th\u00e8mes classiques \u2014 personnalisation via le Customizer<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Les th\u00e8mes classiques (aussi appel\u00e9s th\u00e8mes \u00ab traditionnels \u00bb) existent depuis les origines de WordPress. Ils utilisent le&nbsp;<strong>Customizer<\/strong>&nbsp;\u2014 un panneau de personnalisation accessible via&nbsp;<strong>Apparence \u2192 Personnaliser<\/strong>&nbsp;\u2014 pour modifier les couleurs, les typographies, la mise en page, le header et le footer.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ces th\u00e8mes fonctionnent avec Gutenberg pour le contenu des pages, mais le reste de l&rsquo;apparence du site (parties communes : header, footer, sidebar\u2026) est g\u00e9r\u00e9 s\u00e9par\u00e9ment, hors de l&rsquo;\u00e9diteur de contenu.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Exemples de th\u00e8mes classiques :<\/strong>&nbsp;GeneratePress, Astra, Neve, OceanWP.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Points forts :<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Interface famili\u00e8re et intuitive pour les d\u00e9butants<\/li>\n\n\n\n<li>Customizer visuel avec aper\u00e7u en temps r\u00e9el<\/li>\n\n\n\n<li>Tr\u00e8s nombreux th\u00e8mes disponibles, souvent tr\u00e8s document\u00e9s<\/li>\n\n\n\n<li>Contr\u00f4le structur\u00e9 des param\u00e8tres via des options d\u00e9di\u00e9es<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Points d&rsquo;attention :<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Deux interfaces distinctes \u00e0 apprendre (Customizer + Gutenberg)<\/li>\n\n\n\n<li>Header et footer ne sont pas \u00e9ditables dans Gutenberg<\/li>\n\n\n\n<li>Personnalisation avanc\u00e9e souvent r\u00e9serv\u00e9e aux versions premium<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Les th\u00e8mes de blocs \u2014 \u00e9dition compl\u00e8te du site (Full Site Editing)<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Les th\u00e8mes de blocs sont apparus avec WordPress 5.9 (d\u00e9but 2022) et repr\u00e9sentent l&rsquo;avenir officiel de la plateforme. Ils activent le&nbsp;<strong>Full Site Editing (FSE)<\/strong>&nbsp;\u2014 l&rsquo;\u00e9dition compl\u00e8te du site \u2014 qui permet de modifier&nbsp;<em>tout<\/em>&nbsp;le site (header, footer, pages, mod\u00e8les de pages) directement depuis l&rsquo;\u00e9diteur Gutenberg, avec des blocs.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Il n&rsquo;y a plus de Customizer. Tout se passe dans&nbsp;<strong>Apparence \u2192 \u00c9diteur<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Exemples de th\u00e8mes de blocs :<\/strong>&nbsp;Twenty Twenty-Two, Twenty Twenty-Three, Twenty Twenty-Four,&nbsp;<strong>Twenty Twenty-Five<\/strong>, Blocksy, Ollie.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Points forts :<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Une seule interface pour tout le site (contenu + apparence)<\/li>\n\n\n\n<li>Libert\u00e9 de mise en page totale gr\u00e2ce aux blocs<\/li>\n\n\n\n<li>Performances excellentes (th\u00e8mes souvent tr\u00e8s l\u00e9gers)<\/li>\n\n\n\n<li>Direction officielle de WordPress \u2014 l&rsquo;avenir de la plateforme<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Points d&rsquo;attention :<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Courbe d&rsquo;apprentissage plus raide, surtout si Gutenberg est encore nouveau<\/li>\n\n\n\n<li>L&rsquo;\u00e9diteur de site peut d\u00e9router au premier abord<\/li>\n\n\n\n<li>Moins de documentation grand public que certains th\u00e8mes classiques \u00e9tablis<\/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\">2. Comparaison \u2014 Twenty Twenty-Five vs GeneratePress<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Pour illustrer concr\u00e8tement la diff\u00e9rence entre les deux familles, voici une comparaison entre les deux th\u00e8mes utilis\u00e9s dans cette formation.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Twenty Twenty-Five \u2014 th\u00e8me de blocs officiel<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Twenty Twenty-Five est le th\u00e8me par d\u00e9faut livr\u00e9 avec WordPress depuis fin 2024. Con\u00e7u par l&rsquo;\u00e9quipe officielle de WordPress, c&rsquo;est un th\u00e8me de blocs \u00e9pur\u00e9 qui tire pleinement parti du Full Site Editing. Il est livr\u00e9 avec plusieurs&nbsp;<strong>styles de site<\/strong>&nbsp;(combinaisons de couleurs et de typographies pr\u00e9d\u00e9finies) que vous pouvez appliquer en un clic.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ce que vous faites avec Twenty Twenty-Five :<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Modifiez le header et le footer dans l&rsquo;\u00e9diteur de site (<strong>Apparence \u2192 \u00c9diteur \u2192 Mod\u00e8les<\/strong>)<\/li>\n\n\n\n<li>Changez la palette de couleurs globale et la typographie dans\u00a0<strong>\u00c9diteur \u2192 Styles<\/strong><\/li>\n\n\n\n<li>Cr\u00e9ez et modifiez des mod\u00e8les de pages (accueil, article, archive\u2026)<\/li>\n\n\n\n<li>Utilisez les\u00a0<strong>Parties de mod\u00e8le<\/strong>\u00a0pour r\u00e9utiliser des blocs communs sur plusieurs pages<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">GeneratePress \u2014 th\u00e8me classique de r\u00e9f\u00e9rence<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">GeneratePress est l&rsquo;un des th\u00e8mes classiques les plus respect\u00e9s de l&rsquo;\u00e9cosyst\u00e8me WordPress. Ultra-l\u00e9ger (&lt; 30 Ko), enti\u00e8rement personnalisable via le Customizer, utilis\u00e9 par des centaines de milliers de sites dans le monde.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ce que vous faites avec GeneratePress :<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Personnalisez toute l&rsquo;apparence via\u00a0<strong>Apparence \u2192 Personnaliser<\/strong>\u00a0avec aper\u00e7u en temps r\u00e9el<\/li>\n\n\n\n<li>Configurez couleurs, typographies, header, footer et mise en page dans des panneaux d\u00e9di\u00e9s<\/li>\n\n\n\n<li>Avec GP Premium : contr\u00f4le avanc\u00e9 des espacements, sections en pleine largeur, hooks<\/li>\n<\/ul>\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>Crit\u00e8re<\/th><th>Twenty Twenty-Five<\/th><th>GeneratePress<\/th><\/tr><\/thead><tbody><tr><td><strong>Type<\/strong><\/td><td>Th\u00e8me de blocs (FSE)<\/td><td>Th\u00e8me classique<\/td><\/tr><tr><td><strong>Interface de personnalisation<\/strong><\/td><td>\u00c9diteur de site (Gutenberg)<\/td><td>Customizer<\/td><\/tr><tr><td><strong>Header\/Footer dans Gutenberg<\/strong><\/td><td>\u2705 Oui<\/td><td>\u274c Non<\/td><\/tr><tr><td><strong>Styles pr\u00e9d\u00e9finis<\/strong><\/td><td>\u2705 Oui (plusieurs variantes)<\/td><td>\u274c \u00c0 configurer manuellement<\/td><\/tr><tr><td><strong>Courbe d&rsquo;apprentissage<\/strong><\/td><td>Mod\u00e9r\u00e9e \u00e0 \u00e9lev\u00e9e<\/td><td>Faible \u00e0 mod\u00e9r\u00e9e<\/td><\/tr><tr><td><strong>Version gratuite<\/strong><\/td><td>\u2705 Compl\u00e8te<\/td><td>\u2705 Tr\u00e8s compl\u00e8te<\/td><\/tr><tr><td><strong>Version premium<\/strong><\/td><td>Non<\/td><td>GP Premium (~60 USD\/an)<\/td><\/tr><tr><td><strong>Performance<\/strong><\/td><td>\u2b50\u2b50\u2b50\u2b50\u2b50<\/td><td>\u2b50\u2b50\u2b50\u2b50\u2b50<\/td><\/tr><tr><td><strong>Id\u00e9al pour<\/strong><\/td><td>WordPress moderne, sites \u00e9pur\u00e9s<\/td><td>Sites structur\u00e9s, gestion clients<\/td><\/tr><tr><td><strong>Futur-proof<\/strong><\/td><td>\u2705 Direction officielle WP<\/td><td>\u2705 S&rsquo;adapte progressivement au FSE<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Lequel choisir ?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Il n&rsquo;y a pas de r\u00e9ponse universelle \u2014 tout d\u00e9pend de votre profil et de votre projet.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Choisissez Twenty Twenty-Five si :<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Vous voulez apprendre WordPress tel qu&rsquo;il \u00e9volue officiellement<\/li>\n\n\n\n<li>Votre projet est un site vitrine, blog ou portfolio relativement simple<\/li>\n\n\n\n<li>Vous \u00eates \u00e0 l&rsquo;aise avec Gutenberg et souhaitez aller plus loin<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Choisissez GeneratePress si :<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Vous avez besoin d&rsquo;un contr\u00f4le pr\u00e9cis et d&rsquo;une grande stabilit\u00e9<\/li>\n\n\n\n<li>Vous g\u00e9rez ou pr\u00e9voyez de g\u00e9rer des sites pour des clients<\/li>\n\n\n\n<li>Vous pr\u00e9f\u00e9rez une interface de personnalisation structur\u00e9e et pr\u00e9visible<\/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>Dans cette formation :<\/strong>&nbsp;nous travaillons avec&nbsp;<strong>Twenty Twenty-Five<\/strong>&nbsp;pour couvrir l&rsquo;approche moderne du Full Site Editing. Deux articles d\u00e9di\u00e9s approfondissent chaque th\u00e8me s\u00e9par\u00e9ment :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ud83d\udcc4\u00a0<strong>Module 3B<\/strong>\u00a0\u2014 \u00c9dition compl\u00e8te du site avec Twenty Twenty-Five<\/li>\n\n\n\n<li>\ud83d\udcc4\u00a0<strong>Module 3C<\/strong>\u00a0\u2014 Installation et personnalisation de GeneratePress<\/li>\n<\/ul>\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. Installer et activer un th\u00e8me<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Quelle que soit la famille choisie, la proc\u00e9dure d&rsquo;installation est identique.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Depuis le r\u00e9pertoire officiel WordPress (th\u00e8mes gratuits) :<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Apparence \u2192 Th\u00e8mes \u2192 Ajouter<\/strong><\/li>\n\n\n\n<li>Recherchez le th\u00e8me par son nom (ou filtrez par\u00a0<strong>Th\u00e8mes de blocs<\/strong>\u00a0pour voir uniquement les th\u00e8mes FSE)<\/li>\n\n\n\n<li>Survolez \u2192\u00a0<strong>Installer<\/strong>\u00a0\u2192\u00a0<strong>Activer<\/strong><\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Depuis un fichier .zip (th\u00e8me premium) :<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Apparence \u2192 Th\u00e8mes \u2192 Ajouter \u2192 T\u00e9l\u00e9verser un th\u00e8me<\/strong><\/li>\n\n\n\n<li>S\u00e9lectionnez le fichier\u00a0<code>.zip<\/code>\u00a0\u2192\u00a0<strong>Installer maintenant<\/strong>\u00a0\u2192\u00a0<strong>Activer<\/strong><\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Comment savoir quel type de th\u00e8me est actif :<\/strong><br>Allez dans&nbsp;<strong>Apparence<\/strong>. Si vous voyez&nbsp;<strong>\u00c9diteur<\/strong>&nbsp;dans le menu \u2192 th\u00e8me de blocs. Si vous voyez&nbsp;<strong>Personnaliser<\/strong>&nbsp;\u2192 th\u00e8me classique.<\/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 Ne gardez qu&rsquo;un seul th\u00e8me actif et supprimez les th\u00e8mes inutilis\u00e9s. Chaque th\u00e8me inactif repr\u00e9sente du code suppl\u00e9mentaire sur le serveur et une surface de faille potentielle s&rsquo;il n&rsquo;est pas mis \u00e0 jour.<\/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\">4. Les menus de navigation<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">La cr\u00e9ation des menus diff\u00e8re selon le type de th\u00e8me actif. Le r\u00e9sultat final est identique \u2014 mais le chemin est diff\u00e9rent.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Avec un th\u00e8me classique (ex. GeneratePress)<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Apparence \u2192 Menus<\/strong>&nbsp;:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Cr\u00e9er un menu<\/strong>, donnez-lui un nom (ex. \u00ab Menu principal \u00bb)<\/li>\n\n\n\n<li>Cochez l&#8217;emplacement\u00a0<strong>Navigation principale<\/strong>\u00a0\u2192\u00a0<strong>Enregistrer le menu<\/strong><\/li>\n\n\n\n<li>Ajoutez pages, cat\u00e9gories ou liens personnalis\u00e9s depuis le panneau gauche<\/li>\n\n\n\n<li>R\u00e9organisez par glisser-d\u00e9poser \u2014 faites glisser l\u00e9g\u00e8rement \u00e0 droite pour cr\u00e9er un sous-menu<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Avec un th\u00e8me de blocs (ex. Twenty Twenty-Five)<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Les menus classiques n&rsquo;existent plus \u2014 ils sont remplac\u00e9s par le&nbsp;<strong>bloc Navigation<\/strong>, \u00e9dit\u00e9 directement dans l&rsquo;\u00e9diteur de site :<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Apparence \u2192 \u00c9diteur \u2192 Mod\u00e8les \u2192 En-t\u00eate (Header)<\/strong><\/li>\n\n\n\n<li>Cliquez sur le bloc Navigation<\/li>\n\n\n\n<li>Utilisez le\u00a0<strong>+<\/strong>\u00a0pour ajouter des liens (pages, URL, cat\u00e9gories\u2026)<\/li>\n\n\n\n<li>Imbriquez un \u00e9l\u00e9ment sous un autre pour cr\u00e9er un sous-menu<\/li>\n\n\n\n<li><strong>Enregistrez<\/strong><\/li>\n<\/ol>\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 Dans les th\u00e8mes de blocs, le bloc Navigation peut \u00eatre plac\u00e9 n&rsquo;importe o\u00f9 sur le site \u2014 pas seulement dans le header. Vous pouvez en avoir plusieurs (menu principal en header, menu secondaire en footer).<\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\">Bonnes pratiques communes<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>4 \u00e0 6 entr\u00e9es<\/strong>\u00a0au premier niveau \u2014 au-del\u00e0, le visiteur est submerg\u00e9<\/li>\n\n\n\n<li><strong>Noms courts et clairs<\/strong>\u00a0: \u00ab Services \u00bb plut\u00f4t que \u00ab Ce que nous proposons comme services \u00bb<\/li>\n\n\n\n<li><strong>Toujours une entr\u00e9e Contact<\/strong>\u00a0\u2014 c&rsquo;est la page la plus cherch\u00e9e sur un site professionnel<\/li>\n\n\n\n<li><strong>Maximum 2 niveaux de hi\u00e9rarchie<\/strong>\u00a0\u2014 les sous-sous-menus sont inutilisables sur mobile<\/li>\n\n\n\n<li>Le\u00a0<strong>logo renvoie toujours \u00e0 l&rsquo;accueil<\/strong>\u00a0\u2014 convention universelle appliqu\u00e9e par tous les th\u00e8mes<\/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\">5. Configurer la page d&rsquo;accueil<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Par d\u00e9faut, WordPress affiche le fil de vos derniers articles en page d&rsquo;accueil. Pour un site professionnel, vous voulez une&nbsp;<strong>page d&rsquo;accueil personnalis\u00e9e<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ce r\u00e9glage est&nbsp;<strong>identique quel que soit le th\u00e8me<\/strong>&nbsp;\u2014 c&rsquo;est un param\u00e8tre WordPress global.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u00c9tapes :<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Cr\u00e9ez une page intitul\u00e9e\u00a0<strong>Accueil<\/strong>\u00a0dans\u00a0<strong>Pages \u2192 Ajouter<\/strong>\u00a0(laissez-la vide pour l&rsquo;instant)<\/li>\n\n\n\n<li>Allez dans\u00a0<strong>R\u00e9glages \u2192 Lecture<\/strong><\/li>\n\n\n\n<li>Sous\u00a0<strong>La page d&rsquo;accueil affiche<\/strong>, s\u00e9lectionnez\u00a0<strong>Une page statique<\/strong><\/li>\n\n\n\n<li>Choisissez votre page\u00a0<strong>Accueil<\/strong>\u00a0dans le menu d\u00e9roulant\u00a0<strong>Page d&rsquo;accueil<\/strong><\/li>\n\n\n\n<li>Si vous pr\u00e9voyez un blog, cr\u00e9ez une page vide\u00a0<strong>Blog<\/strong>\u00a0et assignez-la dans\u00a0<strong>Page des articles<\/strong><\/li>\n\n\n\n<li><strong>Enregistrez<\/strong><\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Structure d&rsquo;une page d&rsquo;accueil efficace<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Une bonne page d&rsquo;accueil r\u00e9pond \u00e0 trois questions en moins de 5 secondes : qui vous \u00eates, ce que vous proposez, et ce que le visiteur doit faire maintenant.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#91;Bloc Couverture \u2014 image de fond + titre H1 + bouton principal]\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n&#91;Bloc Colonnes (3) \u2014 3 points forts ou services]\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n&#91;Bloc M\u00e9dias et texte \u2014 photo + paragraphe de pr\u00e9sentation]\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n&#91;Bouton d'appel \u00e0 l'action final \u2014 \u00ab Contactez-nous \u00bb]\n<\/code><\/pre>\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>Le bloc Couverture<\/strong>&nbsp;permet de superposer du texte sur une image de fond avec un overlay color\u00e9 semi-transparent. C&rsquo;est l&rsquo;outil id\u00e9al pour cr\u00e9er un \u00ab hero banner \u00bb en haut de la page d&rsquo;accueil. R\u00e9glez l&rsquo;opacit\u00e9 de l&rsquo;overlay dans le panneau lat\u00e9ral droit \u2192&nbsp;<strong>Superposition<\/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\">6. Les liens internes<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Un&nbsp;<strong>lien interne<\/strong>&nbsp;pointe d&rsquo;une page de votre site vers une autre page de votre site. C&rsquo;est l&rsquo;un des leviers SEO les plus simples et les plus n\u00e9glig\u00e9s.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Pourquoi c&rsquo;est important :<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Google suit ces liens pour comprendre la structure et l&rsquo;importance relative de vos pages<\/li>\n\n\n\n<li>Ils maintiennent le visiteur sur le site en le guidant vers du contenu compl\u00e9mentaire<\/li>\n\n\n\n<li>Ils transmettent de l&rsquo;autorit\u00e9 SEO des pages populaires vers les pages moins visibles<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Cr\u00e9er un lien interne dans Gutenberg :<\/strong><br>S\u00e9lectionnez le texte \u2192&nbsp;<code>Ctrl+K<\/code>&nbsp;(PC) \/&nbsp;<code>Cmd+K<\/code>&nbsp;(Mac) \u2192 tapez le nom d&rsquo;une page \u2192 s\u00e9lectionnez dans la liste \u2192 validez.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>R\u00e8gle des textes d&rsquo;ancre :<\/strong>&nbsp;utilisez des textes descriptifs \u2014 jamais \u00ab cliquez ici \u00bb.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u00c0 \u00e9viter<\/th><th>Pr\u00e9f\u00e9rez<\/th><\/tr><\/thead><tbody><tr><td>Cliquez ici<\/td><td>Consultez notre page de services<\/td><\/tr><tr><td>En savoir plus<\/td><td>D\u00e9couvrez nos formations WordPress<\/td><\/tr><tr><td>Ce lien<\/td><td>Voir le glossaire WordPress<\/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\">R\u00e9capitulatif \u2014 Ce que vous savez faire apr\u00e8s cette s\u00e9ance<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u2705 Distinguer th\u00e8mes classiques (Customizer) et th\u00e8mes de blocs (FSE)<\/li>\n\n\n\n<li>\u2705 Choisir le bon type de th\u00e8me selon son projet et son profil<\/li>\n\n\n\n<li>\u2705 Installer et activer un th\u00e8me depuis le r\u00e9pertoire WordPress<\/li>\n\n\n\n<li>\u2705 Cr\u00e9er un menu de navigation (via Apparence \u2192 Menus ou via l&rsquo;\u00e9diteur de site)<\/li>\n\n\n\n<li>\u2705 Configurer une page d&rsquo;accueil statique dans R\u00e9glages \u2192 Lecture<\/li>\n\n\n\n<li>\u2705 Construire une page d&rsquo;accueil structur\u00e9e avec Gutenberg<\/li>\n\n\n\n<li>\u2705 Cr\u00e9er des liens internes avec des textes d&rsquo;ancre pertinents<\/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\udcc4&nbsp;<strong>Pour aller plus loin :<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Module 3B<\/strong>\u00a0\u2014 \u00c9dition et personnalisation compl\u00e8te avec Twenty Twenty-Five<\/li>\n\n\n\n<li><strong>Module 3C<\/strong>\u00a0\u2014 Installation et personnalisation de GeneratePress<\/li>\n<\/ul>\n<\/blockquote>\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 3.1 \u2014 Identifier son th\u00e8me et activer Twenty Twenty-Five (15 min)<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Allez dans\u00a0<strong>Apparence<\/strong>\u00a0et notez ce que vous voyez :\u00a0<strong>\u00c9diteur<\/strong>\u00a0ou\u00a0<strong>Personnaliser<\/strong>\u00a0?<\/li>\n\n\n\n<li>Dans\u00a0<strong>Apparence \u2192 Th\u00e8mes \u2192 Ajouter<\/strong>, cliquez sur le filtre\u00a0<strong>Th\u00e8mes de blocs<\/strong>\u00a0et parcourez quelques th\u00e8mes \u2014 observez la diff\u00e9rence avec les th\u00e8mes classiques<\/li>\n\n\n\n<li>Installez et activez\u00a0<strong>Twenty Twenty-Five<\/strong><\/li>\n\n\n\n<li>V\u00e9rifiez l&rsquo;affichage de votre site \u2014 notez ce qui a chang\u00e9<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">EX 3.2 \u2014 Cr\u00e9er le menu de navigation (20 min)<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Allez dans\u00a0<strong>Apparence \u2192 \u00c9diteur \u2192 Mod\u00e8les \u2192 En-t\u00eate<\/strong><\/li>\n\n\n\n<li>Cliquez sur le bloc Navigation et ajoutez vos pages principales (minimum 4 : Accueil, une page de contenu, \u00c0 propos, Contact)<\/li>\n\n\n\n<li>Cr\u00e9ez un sous-menu en imbriquant un \u00e9l\u00e9ment sous un autre<\/li>\n\n\n\n<li>Enregistrez et v\u00e9rifiez le rendu sur la partie publique du site<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">EX 3.3 \u2014 Construire la page d&rsquo;accueil (25 min)<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Ouvrez votre page\u00a0<strong>Accueil<\/strong>\u00a0en \u00e9dition dans Gutenberg<\/li>\n\n\n\n<li>Construisez 4 zones :\n<ul class=\"wp-block-list\">\n<li><strong>Bloc Couverture<\/strong>\u00a0: image de fond + titre H1 accrocheur + bouton \u00ab En savoir plus \u00bb<\/li>\n\n\n\n<li><strong>Bloc Colonnes (3)<\/strong>\u00a0: 3 points forts de votre site ou association<\/li>\n\n\n\n<li><strong>Bloc M\u00e9dias et texte<\/strong>\u00a0: photo + paragraphe de pr\u00e9sentation<\/li>\n\n\n\n<li><strong>Bouton<\/strong>\u00a0final : \u00ab Contactez-nous \u00bb (lien vers votre page Contact)<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Allez dans\u00a0<strong>R\u00e9glages \u2192 Lecture<\/strong>\u00a0et d\u00e9finissez cette page comme page d&rsquo;accueil statique<\/li>\n\n\n\n<li>Publiez et v\u00e9rifiez le rendu<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">EX 3.4 \u2014 Liens internes (15 min)<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Cr\u00e9ez au moins 3 liens internes sur votre site :<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Page d&rsquo;accueil \u2192 lien vers \u00ab \u00c0 propos \u00bb ou \u00ab Services \u00bb<\/li>\n\n\n\n<li>Dans un article \u2192 lien vers une cat\u00e9gorie ou une page pertinente<\/li>\n\n\n\n<li>Page \u00ab \u00c0 propos \u00bb \u2192 lien vers \u00ab Contact \u00bb<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Pour chaque lien : texte d&rsquo;ancre descriptif, jamais \u00ab cliquez ici \u00bb.<\/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 4<\/strong>&nbsp;porte sur les extensions et plugins : configuration avanc\u00e9e de Yoast SEO, formulaire de contact, s\u00e9curit\u00e9 et sauvegardes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Pour pr\u00e9parer :<\/strong>&nbsp;r\u00e9fl\u00e9chissez aux fonctionnalit\u00e9s dont vous avez besoin que WordPress ne propose pas nativement \u2014 formulaire de contact, galerie photo, calendrier d&rsquo;\u00e9v\u00e9nements, boutique ? Notez vos besoins.<\/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>Choisir son th\u00e8me et structurer son site<\/p>\n","protected":false},"author":1,"featured_media":66,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-65","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\/65","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=65"}],"version-history":[{"count":1,"href":"https:\/\/site.triskel.ch\/web00\/wp-json\/wp\/v2\/posts\/65\/revisions"}],"predecessor-version":[{"id":69,"href":"https:\/\/site.triskel.ch\/web00\/wp-json\/wp\/v2\/posts\/65\/revisions\/69"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/site.triskel.ch\/web00\/wp-json\/wp\/v2\/media\/66"}],"wp:attachment":[{"href":"https:\/\/site.triskel.ch\/web00\/wp-json\/wp\/v2\/media?parent=65"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/site.triskel.ch\/web00\/wp-json\/wp\/v2\/categories?post=65"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/site.triskel.ch\/web00\/wp-json\/wp\/v2\/tags?post=65"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}