Initiation à WordPress

1. Édimestres

  • Retour sur les notions de base :
    • Définir le rôle d’un édimestre.
    • Importance de maîtriser l’interface WordPress pour assurer la gestion des contenus.
  • Navigateur :
    • Utilisation efficace d’un navigateur web (Chrome, Firefox, etc.).
    • Importance de la gestion des cookies, du cache et des extensions pour l’expérience WordPress.
  • Onglets :
    • Gestion des onglets pour travailler sur plusieurs pages simultanément.
  • Raccourcis clavier :
    • Introduction aux raccourcis clés pour gagner du temps (ex. Ctrl+C/Ctrl+V pour copier-coller).
  • Serveur et poste de travail :
    • Différence entre un serveur web et un poste de travail.
    • Importance de l’hébergement pour WordPress.

2. Présentation de WordPress

  • Concurrence :
    • Vue d’ensemble des plateformes alternatives à WordPress (Joomla, Drupal).
    • Points forts et faibles de WordPress par rapport à ces alternatives.
  • Articles vs Pages statiques vs Menus :
    • Différences et usage des articles (blog) par rapport aux pages statiques.
    • Rôle et création des menus pour une navigation intuitive.

3. Plugins (extensions)

  • Présentation des Plugins :
    • Introduction à ce que sont les plugins et pourquoi ils sont essentiels.
    • Installer, activer et gérer les extensions.

4. Menu d’administration du site

  • Présentation du tableau de bord :
    • Introduction au menu d’administration : Tableau de bord, Articles, Pages, Extensions, etc.
    • Personnalisation de l’interface selon les besoins de gestion.

5. Édition d’une page WordPress

  • Modification et publication :
    • Ajouter une nouvelle page ou modifier une page existante.
    • Utilisation de l’éditeur de blocs pour organiser le contenu.
    • Catégorisation et étiquetage pour les articles.
  • Ajouter au menu et placer dans l’arborescence :
    • Comment ajouter une page ou un article au menu.
    • S’assurer que le menu reflète une structure cohérente.
    • Éviter les redondances dans les liens.

6. Les zones d’une page WordPress

  • Notion de bloc dans WordPress :
    • Utilisation du concept de bloc (titre, paragraphe, puces, etc.).
    • Organisation du contenu en sections claires et lisibles.
  • Liens hypertextes et mise en forme :
    • Insérer des liens et structurer le texte avec les blocs adéquats.

7. Enregistrement et vérification

  • Sauvegarde des modifications :
    • Importance de prévisualiser avant la publication.
    • Vérification de la cohérence et de l’accessibilité du contenu.

8. Organisation du travail à plusieurs édimestres

  • Partage des tâches :
    • Importance de répartir les rôles pour une gestion fluide.
    • Définir les responsabilités de chaque collaborateur/trice.
  • Règles de publication :
    • Mettre en place des règles claires pour les dates de publication, la vérification des contenus et la cohérence des articles/pages.

Articles (blog) vs Pages statiques vs Menus

1. Articles (blog)

  • Définition : Les articles dans WordPress sont des contenus dynamiques destinés à être publiés régulièrement, souvent sous forme de blog. Ils apparaissent généralement dans l’ordre chronologique inverse (les plus récents en premier).
  • Caractéristiques :
    • Date et auteur : Chaque article est associé à une date de publication et un auteur.
    • Catégories et étiquettes : Les articles sont classés à l’aide de catégories et d’étiquettes (tags) pour faciliter la navigation et le filtrage par les utilisateurs.
    • Commentaires : Les articles peuvent être ouverts aux commentaires, favorisant les interactions avec les visiteurs.
  • Cas d’utilisation :
    • Actualités, événements, publications régulières (blogs, chroniques, nouvelles du jour).
    • Idéal pour des contenus mis à jour fréquemment.

2. Pages statiques

  • Définition : Contrairement aux articles, les pages statiques sont conçues pour des contenus permanents qui ne nécessitent pas de mises à jour fréquentes ni d’être classés par date.
  • Caractéristiques :
    • Hiérarchie : Les pages peuvent avoir une structure hiérarchique, permettant la création de sous-pages (par exemple, une page parent « À propos » peut avoir des sous-pages « Notre histoire » et « Équipe »).
    • Pas de date ni de catégories : Les pages ne sont pas liées à une date de publication et ne sont pas catégorisées avec des étiquettes. Elles sont plus permanentes et fixes.
    • Commentaires désactivés : Par défaut, les pages n’ont pas de section de commentaires (bien que cela puisse être activé manuellement).
  • Cas d’utilisation :
    • Pages « À propos », « Contact », « Mentions légales », « Services », qui constituent le squelette statique du site.
    • Utile pour les informations qui ne changent pas souvent.

3. Menus

  • Définition : Le menu de navigation permet aux utilisateurs d’accéder aux différentes pages et sections du site Web. Il s’agit d’un élément essentiel pour l’ergonomie et la facilité de navigation.
  • Caractéristiques :
    • Structure hiérarchique : Les menus peuvent contenir des sous-menus pour organiser les pages de façon intuitive.
    • Éléments personnalisés : Outre les pages et articles, un menu peut inclure des liens personnalisés vers des URL externes ou des sections spécifiques du site (comme les catégories d’articles).
    • Emplacements des menus : Les thèmes WordPress proposent généralement plusieurs emplacements pour les menus (ex. : menu principal en haut, menu secondaire dans le pied de page).
  • Cas d’utilisation :
    • Menus principaux : Ils permettent de structurer l’accès aux principales sections du site (pages statiques).
    • Menus secondaires : Ils peuvent servir à offrir des accès rapides aux catégories de blog, aux archives d’articles, ou à d’autres contenus spécifiques.

Exemples pratiques pour vos édimestres :

  1. Utilisation des articles : Si vous avez un blog qui couvre des sujets variés, vous pouvez classer les articles sous différentes catégories comme « Nouvelles », « Tutoriels », « Événements ». Les visiteurs peuvent ensuite utiliser les catégories ou les étiquettes pour trouver des articles spécifiques.
  2. Utilisation des pages statiques : Pour un site d’entreprise, les pages comme « Accueil », « Nos services », « Contact » sont des exemples classiques de pages statiques, car leur contenu ne change que rarement.
  3. Menus : Dans votre menu principal, vous pourriez inclure les pages « Accueil », « Nos services », « Contact », ainsi qu’un lien vers une page regroupant les articles de votre blog. Vous pouvez également ajouter des sous-menus pour organiser les services en catégories.

Conseils pour une navigation efficace :

  • Cohérence et hiérarchie : Assurez-vous que vos menus sont cohérents avec la structure de votre site. Les visiteurs doivent comprendre intuitivement où trouver l’information.
  • Pas de surcharge : Évitez de surcharger les menus avec trop d’éléments. Utilisez les sous-menus pour organiser les contenus tout en gardant une interface claire.
  • Optimisation mobile : Les menus doivent être facilement accessibles et utilisables sur des appareils mobiles. Privilégiez des menus déroulants ou des « hamburgers » pour les sites responsive.

5. Édition d’une page WordPress

1. Création ou modification d’une page

  • Accès à l’éditeur :
    • Via le tableau de bord : Allez dans le menu Pages > Toutes les pages pour voir la liste des pages déjà créées. Vous pouvez soit créer une nouvelle page en cliquant sur Ajouter, soit modifier une page existante en cliquant sur son titre.
    • Interface de l’éditeur : WordPress utilise maintenant l’éditeur de blocs (Gutenberg) qui permet de structurer les contenus en sections distinctes (blocs) au lieu d’un simple éditeur de texte classique.

2. Utilisation de l’éditeur de blocs (Gutenberg)

  • Blocs de contenu :
    • Chaque section de la page est un bloc indépendant. Vous pouvez ajouter différents types de blocs comme des titres, des paragraphes, des images, des vidéos, etc.
    • Ajouter un bloc : Cliquez sur le bouton « Plus » (+) dans l’éditeur pour insérer un nouveau bloc. Vous aurez accès à une bibliothèque de blocs, tels que :
      • Titre : Ajoute un en-tête avec un choix de niveaux (H1, H2, etc.).
      • Paragraphe : Texte normal avec les options de mise en forme (gras, italique, etc.).
      • Image : Insère une image à partir de votre bibliothèque ou depuis une URL.
      • Liste à puces ou numérotée : Pour créer des listes structurées.
      • Galerie, Vidéo, Citation : D’autres options selon le type de contenu.

3. Structuration et mise en page

  • Organisation des blocs :
    • Les blocs peuvent être déplacés facilement par glisser-déposer ou avec les flèches « Monter » et « Descendre » situées à côté de chaque bloc.
    • Il est possible de regrouper plusieurs blocs dans un groupe pour appliquer des styles communs (par exemple, une section avec un fond coloré).
  • Personnalisation des blocs :
    • Chaque bloc a ses propres options de configuration dans la barre latérale à droite. Vous pouvez, par exemple, ajuster la taille des titres, ajouter des bordures aux images, ou définir la largeur d’un paragraphe.

4. Publication et gestion des révisions

  • Enregistrer les brouillons :
    • Vous pouvez sauvegarder une page en tant que brouillon avant sa publication. Cela permet de travailler sur plusieurs versions sans les rendre publiques immédiatement.
    • Astuces : Encouragez les édimestres à cliquer régulièrement sur « Enregistrer le brouillon » pour éviter de perdre des modifications accidentellement.
  • Aperçu avant publication :
    • Utilisez le bouton Prévisualiser pour voir à quoi ressemblera la page sur le site avant de la publier.
    • Les édimestres peuvent vérifier si tous les éléments s’affichent correctement, y compris sur les appareils mobiles si le site est responsive.
  • Publication :
    • Lorsque la page est prête, cliquez sur Publier. Vous pouvez soit publier immédiatement, soit programmer la publication pour une date ultérieure.
    • Il est également possible de rendre la page privée ou protégée par mot de passe selon les besoins.
  • Gestion des révisions :
    • WordPress garde un historique des modifications effectuées sur chaque page. Si une erreur est commise, vous pouvez revenir à une version précédente via l’onglet Révisions.

5. Catégorisation et étiquetage pour les articles (si applicable)

  • Utilisation des catégories et des étiquettes (pour les articles) :
    • Si vous éditez un article (plutôt qu’une page), vous pouvez associer des catégories pour organiser vos articles par thème (par exemple, « Nouvelles », « Événements »).
    • Les étiquettes sont des mots-clés plus spécifiques que les catégories, et elles facilitent le filtrage des articles sur des sujets particuliers.

6. Ajouter une page au menu et la placer dans l’arborescence

  • Ajout d’une page au menu :
    • Une fois la page publiée, elle peut être ajoutée à la navigation principale. Allez dans Apparence > Menus. Sélectionnez la page dans la liste des pages disponibles et cliquez sur Ajouter au menu.
    • Vous pouvez réorganiser l’ordre des éléments du menu en les faisant glisser, et définir des sous-pages pour créer une hiérarchie.
  • Organisation dans l’arborescence :
    • Veillez à ce que la page soit bien placée dans une structure logique (par exemple, sous une page principale comme « Nos services »).
    • Une bonne hiérarchie rend la navigation plus intuitive pour les utilisateurs et aide à l’optimisation SEO.

7. Cohérence dans le menu et éviter la redondance

  • Cohérence du menu :
    • Encouragez vos édimestres à maintenir une cohérence visuelle et sémantique dans le menu (noms des pages clairs, pas de doublons).
    • Assurez-vous que chaque page du menu a un objectif distinct et que le contenu n’est pas dupliqué sur plusieurs pages.
    • Astuce : Utilisez des titres de menu courts et explicites pour améliorer la lisibilité.

8. Vérification finale avant publication

  • Vérification du contenu :
    • Relisez le texte pour éviter les fautes de frappe ou d’orthographe.
    • Assurez-vous que tous les liens fonctionnent correctement et que les images sont optimisées.
    • Test de compatibilité : Consultez la page sur différents navigateurs et appareils pour vous assurer que l’affichage est correct partout.

Conseils pratiques pour les édimestres :

  • Gérer les modifications à plusieurs : Si plusieurs édimestres travaillent sur une même page, encouragez la communication pour éviter de remplacer les modifications des uns et des autres.
  • Prévisualisation systématique : Toujours prévisualiser la page avant la publication pour éviter des erreurs visibles.
  • Savoir utiliser les révisions : En cas de problème, revenir en arrière avec la fonctionnalité de révision.

6. Les zones d’une page WordPress

Une page WordPress est composée de différentes zones qui permettent de structurer le contenu de manière claire et attrayante. Il est important que les édimestres connaissent ces zones afin de les utiliser correctement lors de la création et de l’édition des pages.

1. En-tête (Header)

  • Définition : L’en-tête se situe tout en haut de la page et est souvent identique sur toutes les pages d’un site. Il contient généralement le logo, le titre du site ou de la page, ainsi que le menu de navigation principal.
  • Personnalisation :
    • Dans WordPress, l’en-tête est souvent géré par le thème du site. Certains thèmes permettent de modifier l’en-tête directement dans le Personnaliseur (via Apparence > Personnaliser).
    • Des éléments comme les images ou les textes de l’en-tête peuvent parfois être modifiés en fonction de la page via des champs personnalisés ou des plugins.

2. Menu de navigation

  • Définition : Le menu de navigation fait partie de l’en-tête, mais c’est une zone importante à part entière car il permet aux visiteurs d’accéder aux différentes sections du site.
  • Gestion :
    • Les édimestres peuvent gérer les menus en accédant à Apparence > Menus. Ils peuvent ajouter, supprimer ou réorganiser les éléments du menu principal et des menus secondaires.
    • Chaque page peut être ajoutée manuellement au menu ou organisée dans une arborescence logique.

3. Corps de la page (Contenu principal)

  • Définition : Le corps est la zone où se trouve le contenu principal de la page (texte, images, vidéos, etc.). C’est ici que les édimestres ajoutent les blocs (Gutenberg) ou utilisent des shortcodes pour insérer des éléments spécifiques.
  • Organisation des blocs :
    • Utilisez des blocs tels que les titres, paragraphes, listes, images, vidéos, galeries et plus encore pour structurer et styliser le contenu.
    • Exemples de blocs courants :
      • Bloc Titre : Utilisez des titres (H1, H2, etc.) pour séparer les sections du contenu.
      • Bloc Paragraphe : Insérez les textes, avec des options de mise en forme comme gras, italique, etc.
      • Bloc Image ou Galerie : Ajoutez des images pertinentes ou des galeries pour illustrer vos propos.
      • Bloc Citation : Mettez en avant une citation pour capter l’attention.
      • Bloc Vidéo : Insérez des vidéos via un lien ou en téléchargeant des fichiers directement.

4. Barre latérale (Sidebar)

  • Définition : La barre latérale est une zone qui se trouve souvent sur les côtés du contenu principal (à droite ou à gauche, selon le thème). Elle peut contenir des widgets qui fournissent des informations complémentaires ou des liens.
  • Contenus typiques :
    • Liens vers les articles récents, catégories d’articles, boîte de recherche, calendrier, réseaux sociaux, widgets publicitaires, etc.
  • Gestion des widgets :
    • Allez dans Apparence > Widgets pour ajouter, supprimer ou réorganiser les widgets dans la barre latérale.
    • Les widgets peuvent inclure du texte, des images, des vidéos, ou des fonctionnalités comme des calendriers d’événements, des flux RSS, etc.

5. Pied de page (Footer)

  • Définition : Le pied de page se situe tout en bas de la page. Il contient souvent des informations légales, des liens de contact, des crédits ou des liens vers les réseaux sociaux.
  • Personnalisation :
    • Comme l’en-tête, le pied de page est souvent géré par le thème. Certains thèmes permettent de le modifier dans le Personnaliseur.
    • Des widgets peuvent également être ajoutés au pied de page, comme des formulaires d’abonnement à la newsletter, des menus supplémentaires, ou des informations de contact.

6. Zones spécifiques ou contextuelles

  • Zones dynamiques :
    • Selon la structure du site et les fonctionnalités activées, il peut y avoir des zones spécifiques pour certains types de pages. Par exemple, une page produit dans un site de commerce électronique peut avoir des sections spécifiques pour afficher le prix, la description, et les avis clients.
    • Exemples : Section de formulaire de contact, zone d’avis pour un produit, ou section de témoignages.
  • Champs personnalisés :
    • Pour certaines pages, des champs personnalisés peuvent être utilisés pour afficher des informations spécifiques sans toucher au corps du texte principal. Ces champs sont souvent gérés via des plugins ou intégrés dans le thème.

7. Zones de widgets

  • Définition : Les widgets peuvent être utilisés dans plusieurs parties de la page (barre latérale, pied de page, voire parfois dans des zones spécifiques du contenu principal).
  • Utilisation :
    • Les widgets permettent d’ajouter des fonctionnalités supplémentaires comme des formulaires, des listes d’articles récents, des calendriers ou des flux de réseaux sociaux.
    • Exemples : Un widget de météo, une liste des derniers articles publiés, ou un flux Instagram.

Exemple de page WordPress typique :

  1. En-tête (Header) :
    • Logo du site, nom du site, menu principal.
  2. Corps de la page (Contenu principal) :
    • Titre (H1) : Introduction de la page.
    • Paragraphe : Description de la section avec un lien hypertexte.
    • Image ou vidéo intégrée.
    • Liste à puces ou numérotée pour clarifier certains points.
  3. Barre latérale (Sidebar) :
    • Widget de recherche, liste d’articles récents, catégories du blog.
  4. Pied de page (Footer) :
    • Mentions légales, lien vers la politique de confidentialité, liens vers les réseaux sociaux.

Conseils pratiques pour les édimestres :

  • Hiérarchisation du contenu : Utilisez les titres (H1, H2, H3, etc.) et les paragraphes pour structurer le contenu en sections claires et accessibles.
  • Utilisation stratégique des widgets : Placez des widgets dans la barre latérale ou le pied de page pour offrir aux visiteurs un accès rapide à des fonctionnalités importantes, comme la recherche ou les catégories.
  • Vérification mobile : Assurez-vous que toutes les zones s’affichent correctement sur les appareils mobiles, car les thèmes WordPress adaptent souvent les zones différemment sur des écrans plus petits.

6. Les zones d’une page WordPress lors de l’édition

Lorsque vous éditez une page dans WordPress, vous interagissez avec plusieurs zones de l’interface d’édition pour modifier et ajuster différents éléments. Connaître ces zones est essentiel pour maximiser l’efficacité et garantir une mise en page cohérente.

1. Titre de la page

  • Emplacement : Tout en haut de l’éditeur.
  • Rôle : Le titre sert à nommer la page et apparaît comme l’en-tête principal (H1) sur la page publiée. Il est également utilisé pour générer l’URL de la page (le permalien).
  • Bonnes pratiques :
    • Le titre doit être concis et explicite.
    • Évitez les titres redondants avec d’autres pages du site.
    • Revérifiez le permalien pour assurer qu’il reflète bien le contenu de la page et qu’il soit optimisé pour le SEO.

2. Contenu principal (éditeur de blocs Gutenberg)

  • Emplacement : L’éditeur de blocs se trouve juste en dessous du titre.
  • Rôle : C’est ici que vous ajoutez et organisez le contenu de la page en utilisant le système de blocs.
  • Gestion des blocs :
    • Blocs de texte : Utilisez des blocs de Paragraphe pour insérer du texte, et des blocs de Titre pour structurer le contenu en sections (H2, H3, etc.).
    • Blocs multimédias : Insérez des images, vidéos, ou galeries pour enrichir visuellement la page.
    • Blocs interactifs : Utilisez des blocs pour des fonctionnalités comme des boutons, des colonnes, ou des tableaux afin de diversifier la présentation du contenu.
    • Astuce : Utilisez le raccourci clavier / pour insérer rapidement un nouveau bloc en tapant son nom.

3. Barre latérale de l’éditeur (Panneau des paramètres)

  • Emplacement : À droite de l’éditeur de blocs, cette barre latérale affiche des options pour chaque bloc sélectionné et pour la page dans son ensemble.
  • Rôle : Elle permet de configurer les paramètres du document (la page entière) et les paramètres spécifiques à chaque bloc.
3.1 Paramètres de document (Page entière)
  • Visibilité : Choisissez si la page doit être publique, privée, ou protégée par mot de passe.
  • URL/Permalien : Modifiez l’URL de la page si nécessaire, pour qu’elle soit plus conviviale ou optimisée pour le SEO.
  • Image à la une : Téléchargez ou sélectionnez une image à la une qui sera utilisée comme illustration principale de la page dans certains thèmes ou sections du site.
  • Modèle de page : Certains thèmes offrent des modèles de page prédéfinis (par exemple, plein écran, avec barre latérale, etc.) qui changent la mise en page globale.
  • Attributs de page : Ici, vous pouvez ajuster l’ordre d’affichage des pages (pour certains menus ou thèmes) et définir une page parente, ce qui permet de structurer une arborescence logique pour vos pages.
3.2 Paramètres de bloc (Bloc individuel)
  • Texte et visuel : Pour chaque bloc, des options contextuelles apparaissent dans la barre latérale. Par exemple, pour un bloc de paragraphe, vous pouvez ajuster :
    • Alignement du texte (gauche, centré, droite).
    • Taille de la police, couleur du texte, et couleur d’arrière-plan.
  • Avancé :
    • Certains blocs disposent d’options avancées, comme l’ajout de classes CSS personnalisées pour des ajustements de style précis.

4. Barre d’outils des blocs

  • Emplacement : Lorsqu’un bloc est sélectionné, une barre d’outils apparaît directement au-dessus de celui-ci.
  • Rôle : Cette barre d’outils contient les options les plus couramment utilisées pour chaque type de bloc (par exemple, gras, italique, ajout de liens pour les blocs de texte).
  • Fonctionnalités communes :
    • Changer le type de bloc : Convertir un paragraphe en titre, une liste en puces, etc.
    • Déplacer un bloc : Utilisez les flèches pour déplacer un bloc vers le haut ou vers le bas sur la page.
    • Dupliquer un bloc : Si vous avez besoin de répéter un bloc de contenu, il peut être dupliqué sans avoir à le recréer manuellement.

5. Menu des blocs

  • Emplacement : Accessible en cliquant sur le bouton « + » dans la partie supérieure gauche de l’éditeur ou entre les blocs existants.
  • Rôle : Le menu des blocs vous permet d’insérer de nouveaux blocs dans votre contenu. Les blocs sont organisés par catégories (Texte, Multimédia, Design, Widgets, etc.).
  • Exemples de blocs courants :
    • Texte : Paragraphe, Titre, Citation.
    • Multimédia : Image, Vidéo, Galerie.
    • Design : Colonnes, Bouton, Icône.

6. Aperçu et publication

  • Emplacement : En haut à droite de l’éditeur, ces options permettent de prévisualiser, enregistrer en brouillon, et publier la page.
  • Rôle : Une fois l’édition terminée, l’aperçu vous permet de voir comment la page s’affichera sur le site sans la publier immédiatement.
    • Aperçu : Permet de visualiser la page telle qu’elle apparaîtra aux visiteurs, sur bureau ou mobile.
    • Enregistrer : Sauvegardez la page en tant que brouillon si elle n’est pas encore prête pour la publication.
    • Publier : Une fois la page prête, vous pouvez cliquer sur Publier pour la rendre visible au public.

Résumé des bonnes pratiques lors de l’édition d’une page WordPress :

  1. Gérer les blocs efficacement : Utilisez la flexibilité de l’éditeur de blocs pour insérer, déplacer, et formater rapidement le contenu.
  2. Utiliser les paramètres des blocs : Configurez chaque bloc de manière optimale (alignement, taille, couleur, etc.) pour garantir la lisibilité et l’esthétique du contenu.
  3. Vérifier le permalien : Assurez-vous que l’URL est propre et descriptive.
  4. Ajouter des images à la une : Pour rendre la page plus attrayante, surtout si le thème les utilise en haut de la page ou dans les aperçus des articles/pages.
  5. Organiser le contenu : Utilisez des titres (H1, H2, etc.) et des sections claires pour améliorer la navigation et la lecture sur la page.
  6. Prévisualiser avant de publier : Assurez-vous que la mise en page est correcte, que les images sont bien placées, et que tous les liens fonctionnent.