{"id":4074,"date":"2025-02-03T13:11:48","date_gmt":"2025-02-03T18:11:48","guid":{"rendered":"https:\/\/adonato.dectim.ca\/agencetim\/?p=4074"},"modified":"2025-02-08T17:15:24","modified_gmt":"2025-02-08T22:15:24","slug":"guide-wordpress-creer-page","status":"publish","type":"post","link":"https:\/\/adonato.dectim.ca\/agencetim\/guide-wordpress-creer-page\/","title":{"rendered":"WordPress &#8211; Cr\u00e9er une excellente page ou article web avec WordPress et l\u2019\u00e9diteur de blocs (Gutenberg)"},"content":{"rendered":"\n<h5 class=\"wp-block-heading\">Cr\u00e9er un site web professionnel avec <strong>WordPress<\/strong> repose sur une bonne compr\u00e9hension de son fonctionnement, une <strong>organisation efficace du contenu<\/strong>, et l\u2019utilisation <strong>optimale de l\u2019\u00e9diteur de blocs Gutenberg<\/strong>. Ce guide s\u2019adresse aux utilisateurs <strong>d\u00e9butants sur WordPress<\/strong>, ayant des notions en <strong>design, ergonomie et interactivit\u00e9<\/strong>, et souhaitant structurer un site de mani\u00e8re claire et efficace.<\/h5>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>1. Comprendre la diff\u00e9rence entre une page et un article<\/strong><\/h2>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Concept<\/strong><\/h4>\n\n\n\n<p>WordPress propose deux types de contenus distincts :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Les pages<\/strong> : Contenus <strong>statiques et permanents<\/strong>, comme \u00ab\u00a0Accueil\u00a0\u00bb, \u00ab\u00a0\u00c0 propos\u00a0\u00bb, \u00ab\u00a0Contact\u00a0\u00bb.<\/li>\n\n\n\n<li><strong>Une page peut aussi repr\u00e9senter une section du blogue, gr\u00e2ce \u00e0 une boucle de requ\u00eate<\/strong> qui affiche des articles selon. certains r\u00e9glages (date, cat\u00e9gorie, etc)<\/li>\n\n\n\n<li><strong>Les articles<\/strong> : Contenus <strong>dynamiques et organis\u00e9s chronologiquement<\/strong>, utilis\u00e9s pour un blog, des actualit\u00e9s, ou des \u00e9tudes de cas.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Exemple<\/strong><\/h4>\n\n\n\n<p>Si vous cr\u00e9ez un <strong>site vitrine<\/strong> pour un <strong>studio de cr\u00e9ation multim\u00e9dia<\/strong>, voici la r\u00e9partition optimale :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Pages<\/strong> : Pr\u00e9sentation de l\u2019entreprise, portfolio, services, contact.<\/li>\n\n\n\n<li><strong>Articles<\/strong> : Blog sur les tendances du design, \u00e9tudes de cas de projets, tutoriels.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Bonnes pratiques<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Faciliter l\u2019acc\u00e8s aux pages essentielles<\/strong> en les pla\u00e7ant dans le menu principal.<\/li>\n\n\n\n<li><strong>Organiser les articles par cat\u00e9gories<\/strong> pour am\u00e9liorer la navigation.<\/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\"><strong>2. Structurer son contenu avec les cat\u00e9gories et la navigation<\/strong><\/h2>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Concept<\/strong><\/h4>\n\n\n\n<p>Les cat\u00e9gories permettent d\u2019organiser <strong>les articles en th\u00e9matiques distinctes<\/strong> et facilitent la navigation pour les visiteurs et les moteurs de recherche.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Exemple d\u2019organisation des cat\u00e9gories<\/strong><\/h4>\n\n\n\n<p>Un <strong>blog sur le multim\u00e9dia<\/strong> pourrait structurer ses articles ainsi :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>UX\/UI Design<\/strong> : Articles sur l\u2019ergonomie et la conception d\u2019interfaces.<\/li>\n\n\n\n<li><strong>Motion Design<\/strong> : Tutoriels et tendances en animation.<\/li>\n\n\n\n<li><strong>D\u00e9veloppement Web<\/strong> : Astuces WordPress, HTML, CSS, JavaScript.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Bonnes pratiques<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Cr\u00e9er un menu principal avec 4 \u00e0 5 items (max).<\/strong><\/li>\n\n\n\n<li><strong>Limiter les cat\u00e9gories principales<\/strong> (3 \u00e0 6 suffisent).<\/li>\n\n\n\n<li><strong>Ne pas cr\u00e9er une cat\u00e9gorie par article<\/strong>, privil\u00e9gier une organisation globale.<\/li>\n\n\n\n<li><strong>Utiliser des sous-cat\u00e9gories<\/strong> si n\u00e9cessaire, mais sans exc\u00e8s.<\/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\"><strong>3. L\u2019art de bien composer les titres et sous-titres<\/strong><\/h2>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Concept<\/strong><\/h4>\n\n\n\n<p>Les <strong>titres et sous-titres<\/strong> structurent le contenu, captent l\u2019attention et am\u00e9liorent le r\u00e9f\u00e9rencement (SEO).<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Exemples de titres efficaces<\/strong><\/h4>\n\n\n\n<p>\u274c <em>Blocs WordPress<\/em> \u2192 Trop vague<br>\u2705 <em>Comment structurer son contenu avec les blocs Gutenberg ?<\/em> \u2192 Plus pr\u00e9cis et engageant<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Bonnes pratiques<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Un seul titre H1 par page<\/strong>, puis des H2, H3 pour organiser le contenu.<\/li>\n\n\n\n<li><strong>Clart\u00e9 et concision<\/strong> : Un bon titre doit refl\u00e9ter le contenu.<\/li>\n\n\n\n<li><strong>Utiliser des mots-cl\u00e9s pertinents<\/strong> pour le SEO.<\/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\"><strong>4. Optimiser les URL et la structure des liens<\/strong><\/h2>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Concept<\/strong><\/h4>\n\n\n\n<p>L\u2019URL d\u2019une page joue un r\u00f4le cl\u00e9 dans le <strong>r\u00e9f\u00e9rencement<\/strong> et la <strong>compr\u00e9hension du contenu<\/strong>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Exemple<\/strong><\/h4>\n\n\n\n<p>\u274c <em><a>https:\/\/monsite.com\/nos-meilleures-recettes-de-gateaux-<\/a><\/em><br>\u2705 <em><a>https:\/\/monsite.com\/recettes-gateaux<\/a><\/em><\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Bonnes pratiques<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Utiliser des URLs courtes et explicites<\/strong>.<\/li>\n\n\n\n<li><strong>\u00c9viter les caract\u00e8res sp\u00e9ciaux et accents<\/strong>.<\/li>\n\n\n\n<li><strong>Ne pas modifier une URL apr\u00e8s publication<\/strong> pour \u00e9viter des erreurs 404 (au cas o\u00f9 vous avez programm\u00e9 des liens manuellement)<\/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\"><strong>5. Ma\u00eetriser la publication et la gestion des articles<\/strong><\/h2>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Concept<\/strong><\/h4>\n\n\n\n<p>WordPress offre plusieurs options pour organiser la publication des articles :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Brouillon<\/strong> : Pr\u00e9paration avant publication.<\/li>\n\n\n\n<li><strong>Planification<\/strong> : Publier \u00e0 une date pr\u00e9cise.<\/li>\n\n\n\n<li><strong>Publier<\/strong>: Publier l&rsquo;article d\u00e8s maintenant<\/li>\n\n\n\n<li><strong>Mise \u00e0 jour<\/strong> <strong>de la date<\/strong> : Remonter un article dans les fils d\u2019actualit\u00e9.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Bonnes pratiques<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Cr\u00e9er un calendrier \u00e9ditorial<\/strong> pour publier r\u00e9guli\u00e8rement.<\/li>\n\n\n\n<li><strong>V\u00e9rifier l\u2019orthographe et la mise en page<\/strong> avant publication.<\/li>\n\n\n\n<li><strong>Mettre \u00e0 jour les anciens articles<\/strong> pour am\u00e9liorer leur pertinence ou les faire remonter dans le fil en modifiant la date.<\/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\"><strong>6. Ma\u00eetriser les blocs Gutenberg<\/strong><\/h2>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Concept<\/strong><\/h4>\n\n\n\n<p>Gutenberg est un \u00e9diteur <strong>modulaire<\/strong> bas\u00e9 sur des <strong>blocs<\/strong> permettant une mise en page <strong>intuitive<\/strong> et <strong>personnalisable<\/strong>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Exemples de blocs courants<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Texte<\/strong> : Paragraphes, titres, citations.<\/li>\n\n\n\n<li><strong>Colonnes<\/strong> <strong>et rang\u00e9es<\/strong> : Mise en page en plusieurs parties.<\/li>\n\n\n\n<li><strong>Images &amp; vid\u00e9os<\/strong> : Ajout d\u2019\u00e9l\u00e9ments multim\u00e9dias.<\/li>\n\n\n\n<li><strong>Boutons<\/strong> : Cr\u00e9ation de CTA<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Bonnes pratiques<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Utiliser des blocs natifs<\/strong> \u00e0 votre th\u00e8me pour assurer des performances optimales.<\/li>\n\n\n\n<li><strong>Structurer avec des colonnes et des espacements<\/strong> pour une lecture fluide.<\/li>\n\n\n\n<li><strong>Tester la mise en page sur mobile<\/strong>.<\/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\"><strong>7. Ma\u00eetriser la vue par liste<\/strong><\/h2>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Concept<\/strong><\/h4>\n\n\n\n<p>La <strong>vue par liste<\/strong> permet de voir l\u2019arborescence des blocs et de les organiser facilement.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Bonnes pratiques<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Utiliser cette vue pour g\u00e9rer les sections complexes<\/strong>.<\/li>\n\n\n\n<li><strong>Renommer les groupes de blocs<\/strong> pour faciliter l\u2019\u00e9dition.<\/li>\n\n\n\n<li><strong>Glisser-d\u00e9poser des blocs ou groupes de bloc<\/strong>s pour modifier l&rsquo;ordre<\/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\"><strong>8. Optimisation des images et performances du site<\/strong><\/h2>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Concept<\/strong><\/h4>\n\n\n\n<p>Les images sont essentielles mais <strong>doivent \u00eatre optimis\u00e9es<\/strong> pour \u00e9viter de ralentir le site. Inutile de t\u00e9l\u00e9charger les images originales sur le site wodpress, car elles ont souvent une taille excessive (4000px X 3000px) et un poids excessif (3 Mo et plus).<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Exemple de tailles adapt\u00e9es<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1920 px<\/strong> : Pleine largeur.<\/li>\n\n\n\n<li><strong>1200 px<\/strong> : Images d\u2019articles.<\/li>\n\n\n\n<li><strong>800 px<\/strong> : Miniatures.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Bonnes pratiques<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Redimensionner et compresser les images<\/strong> (Photoshop).<\/li>\n\n\n\n<li><strong>Utiliser des formats WebP<\/strong> pour un meilleur ratio qualit\u00e9\/poids.<\/li>\n\n\n\n<li><strong>Une page bien optimis\u00e9e doit peser<\/strong> <strong>moins de 1 Mo<\/strong> pour garantir un chargement rapide sur tous types de connexions.<\/li>\n\n\n\n<li><strong>Une page plus lourde (2 \u00e0 3 Mo) peut \u00eatre tol\u00e9rable <\/strong>si elle contient des \u00e9l\u00e9ments multim\u00e9dias avanc\u00e9s, mais elle risque de ralentir le site.<\/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\"><strong>9. Design, exp\u00e9rience utilisateur et ergonomie<\/strong><\/h2>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Concept<\/strong><\/h4>\n\n\n\n<p>Un site bien con\u00e7u repose sur <strong>une navigation fluide, une lisibilit\u00e9 optimale et une ergonomie efficace<\/strong>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Bonnes pratiques<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Structurer votre page en sections et sous-sections<\/strong><\/li>\n\n\n\n<li><strong>Int\u00e9grer une hi\u00e9rarchie visuelle <\/strong>avec la typographie (H2, H3, H4, etc)<\/li>\n\n\n\n<li><strong>A\u00e9rer les contenus avec des espaces blancs<\/strong>.<\/li>\n\n\n\n<li><strong>Utiliser des polices lisibles<\/strong> et des contrastes suffisants.<\/li>\n\n\n\n<li><strong>Assurer une coh\u00e9rence graphique<\/strong> sur l\u2019ensemble du site.<\/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\"><strong>10. Exp\u00e9rience mobile : un imp\u00e9ratif<\/strong><\/h2>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Concept<\/strong><\/h4>\n\n\n\n<p>Plus de 60 % des visites web se font sur mobile, il est crucial d\u2019avoir un site <strong>responsive<\/strong>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Bonnes pratiques<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Tester l\u2019affichage sur plusieurs appareils<\/strong> (sortez votre mobile pour tester la r\u00e9alit\u00e9)<\/li>\n\n\n\n<li><strong>Assurer que votre menu mobile est clair et intuitif<\/strong>.<\/li>\n\n\n\n<li><strong>Optimiser les boutons et zones cliquables<\/strong>.<\/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\"><strong>11. Gagner du temps avec les mod\u00e8les r\u00e9utilisables<\/strong><\/h2>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Concept<\/strong><\/h4>\n\n\n\n<p>WordPress permet d\u2019enregistrer des <strong>mod\u00e8les Gutenberg<\/strong> pour r\u00e9utiliser des mises en page sans tout recommencer.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Bonnes pratiques<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Cr\u00e9er des mod\u00e8les pour les types de pages r\u00e9currents<\/strong>.<\/li>\n\n\n\n<li><strong>Utiliser des styles homog\u00e8nes pour assurer une coh\u00e9rence graphique<\/strong>.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Cr\u00e9er un site web professionnel avec WordPress repose sur une bonne compr\u00e9hension de son fonctionnement, une organisation efficace du contenu, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4075,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[27],"tags":[],"class_list":["post-4074","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-objectif-dapprentissage-4-assembler-integrer-et-programmer-linteractivite-dune-presentation-multimedia"],"_links":{"self":[{"href":"https:\/\/adonato.dectim.ca\/agencetim\/wp-json\/wp\/v2\/posts\/4074","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/adonato.dectim.ca\/agencetim\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/adonato.dectim.ca\/agencetim\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/adonato.dectim.ca\/agencetim\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/adonato.dectim.ca\/agencetim\/wp-json\/wp\/v2\/comments?post=4074"}],"version-history":[{"count":7,"href":"https:\/\/adonato.dectim.ca\/agencetim\/wp-json\/wp\/v2\/posts\/4074\/revisions"}],"predecessor-version":[{"id":4500,"href":"https:\/\/adonato.dectim.ca\/agencetim\/wp-json\/wp\/v2\/posts\/4074\/revisions\/4500"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/adonato.dectim.ca\/agencetim\/wp-json\/wp\/v2\/media\/4075"}],"wp:attachment":[{"href":"https:\/\/adonato.dectim.ca\/agencetim\/wp-json\/wp\/v2\/media?parent=4074"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/adonato.dectim.ca\/agencetim\/wp-json\/wp\/v2\/categories?post=4074"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/adonato.dectim.ca\/agencetim\/wp-json\/wp\/v2\/tags?post=4074"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}