A3iformations · Formation WordPress

Le contenu : texte, liens et médias

Rédiger et mettre en forme avec l’éditeur, insérer des liens, importer et gérer images et médias, puis publier un contenu conforme au RGPD.

16 notionsÉditeur de blocs et TinyMCEExercice par notionOrganisme Qualiopi

L’éditeur de texte

Articles ou Pages › Ajouter · éditeur de blocs (Gutenberg)

Depuis WordPress 5.0, le contenu se rédige avec l’éditeur de blocs : chaque élément (paragraphe, titre, image, liste, bouton) est un bloc que l’on ajoute, déplace et règle séparément.

Zone	Rôle
Barre supérieure	Bouton + (insérer un bloc), annuler/rétablir, vue en liste, Enregistrer, Prévisualiser, Publier
Zone de rédaction	Titre puis blocs de contenu
Barre d’outils du bloc	Apparaît au-dessus du bloc sélectionné : type, alignement, gras, lien…
Panneau latéral	Onglet Article/Page (réglages du contenu) et onglet Bloc (réglages du bloc)

AstuceTapez / en début de ligne suivi du nom d’un bloc (/image, /titre) pour l’insérer sans quitter le clavier.

Exercice · Découverte

Créez un brouillon et insérez cinq blocs différents avec la commande /. Ouvrez ensuite la vue en liste pour les réorganiser.

Installation de TinyMCE

Extensions › Ajouter une extension

TinyMCE est l’ancien éditeur de WordPress, avec une barre d’outils façon traitement de texte. Il n’est plus l’éditeur par défaut, mais on peut le retrouver de deux façons.

Solution	Usage
Bloc Classique	Insère une zone TinyMCE à l’intérieur de l’éditeur de blocs, sans extension
Extension Classic Editor	Remplace entièrement l’éditeur de blocs par TinyMCE
Advanced Editor Tools	Enrichit la barre TinyMCE (tableaux, polices, couleurs)

Pas à pas

Ouvrir Extensions › Ajouter une extension.
Rechercher Classic Editor, cliquer sur Installer, puis Activer.
Régler le choix par défaut dans Réglages › Écriture et autoriser ou non chaque utilisateur à changer d’éditeur.

AttentionL’éditeur classique est maintenu pour la compatibilité, mais les nouveautés de WordPress se font dans l’éditeur de blocs. Pour un nouveau site, restez sur les blocs.

Exercice · Application

Insérez un bloc Classique dans un article, mettez du texte en forme avec sa barre d’outils, puis convertissez-le en blocs avec Convertir en blocs.

Mise en forme du texte

Barre d’outils du bloc Paragraphe

Mise en forme	Raccourci ou accès
Gras	`Ctrl` + `B`
Italique	`Ctrl` + `I`
Lien	`Ctrl` + `K`
Barré, exposant, indice, code, surlignage	Flèche ▾ de la barre d’outils
Couleur du texte	Onglet Bloc › Couleur, ou Surligner pour une partie

AstuceRéservez le gras aux mots clés importants. Une page entièrement en gras n’en met plus aucun en valeur.

Exercice · Application

Rédigez un paragraphe de présentation d’une formation et appliquez gras, italique, un exposant (1^er) et une couleur sur un mot.

Mise en forme des paragraphes

Barre d’outils du bloc · onglet Bloc du panneau latéral

Titres : bloc Titre, niveaux H2 à H6. Le H1 est réservé au titre de la page.
Alignement : gauche, centré, droite, dans la barre d’outils.
Listes : bloc Liste, à puces ou numérotée ; Tab crée un sous-niveau.
Typographie : taille, interligne, espacement dans l’onglet Bloc.
Citation : bloc Citation ou Exergue pour mettre un passage en valeur.

Bon à savoirEntrée crée un nouveau bloc paragraphe ; Maj + Entrée va à la ligne dans le même bloc.

Exercice · Application

Structurez un article avec un H2, deux H3, une liste numérotée et une citation centrée.

Le mode Visuel et Texte

Menu ⋮ › Éditeur de code · onglets Visuel / Texte (éditeur classique)

Éditeur	Mode visuel	Mode code
Éditeur classique	Onglet Visuel	Onglet Texte (HTML)
Éditeur de blocs, tout le contenu	Éditeur visuel	Menu ⋮ › Éditeur de code ou `Ctrl`+`Maj`+`Alt`+`M`
Éditeur de blocs, un seul bloc	Rendu du bloc	⋮ du bloc › Modifier en HTML

AttentionEn mode code, une balise mal fermée peut rendre un bloc invalide. WordPress propose alors de Tenter la récupération du bloc.

Exercice · Découverte

Passez un article en Éditeur de code, repérez les commentaires  qui délimitent les blocs, puis revenez en visuel.

Les liens hypertextes

Sélection du texte › Ctrl + K

Sélectionner le texte du lien.
Appuyer sur Ctrl + K ou cliquer sur l’icône Lien.
Coller une adresse externe, ou taper un mot pour chercher une page du site.
Ouvrir les options (crayon) pour cocher Ouvrir dans un nouvel onglet si besoin.

AstuceRédigez un texte de lien explicite (« voir le programme Excel débutant ») plutôt que « cliquez ici » : c’est meilleur pour le référencement et l’accessibilité.

Exercice · Application

Ajoutez dans un article deux liens internes vers vos pages de formation et un lien externe vers le site TOSA ouvert dans un nouvel onglet.

Les réglages des médias

Réglages › Médias

Taille	Valeur par défaut	Usage
Miniature	150 × 150 px, recadrée	Vignettes, galeries
Moyenne	300 × 300 px max	Image dans le texte
Grande	1024 × 1024 px max	Image pleine colonne

La case Organiser mes fichiers envoyés dans des dossiers mensuels et annuels range les fichiers dans wp-content/uploads/2026/10/.

Bon à savoirModifier ces tailles ne s’applique qu’aux futures images. Pour recalculer les anciennes, utilisez l’extension Regenerate Thumbnails.

Exercice · Découverte

Relevez les tailles réglées sur votre site et comparez-les à la largeur de votre colonne de contenu.

La taille des images

Avant import · logiciel d’image ou outil de compression

Une image se mesure en dimensions (pixels) et en poids (Ko). Les deux influencent la vitesse du site.

Dimensions : pas plus large que l’affichage maximal (1920 px pour une bannière, 1200 px pour une image d’article).
Poids : viser moins de 200 Ko par image, 300 Ko pour une bannière.
Format : WebP ou JPEG pour les photos, PNG ou SVG pour les logos et pictogrammes.

Bon à savoirWordPress réduit automatiquement toute image de plus de 2560 px et en crée une version « -scaled ». Il génère aussi plusieurs tailles intermédiaires pour les écrans mobiles.

Exercice · Application

Redimensionnez une photo de 4000 px à 1200 px de large, exportez-la en WebP et comparez les poids avant/après.

Importation de médias

Médias › Ajouter un fichier média

Ouvrir Médias › Ajouter un fichier média.
Glisser-déposer les fichiers dans la zone, ou cliquer sur Sélectionner des fichiers.
Attendre la fin du transfert, puis compléter le texte alternatif de chaque image.

Type	Formats acceptés
Images	JPEG, PNG, GIF, WebP, AVIF
Documents	PDF, DOCX, XLSX, PPTX
Audio / vidéo	MP3, WAV, MP4, MOV

Bon à savoirLa taille maximale d’envoi, affichée sous la zone d’import, est fixée par l’hébergeur. Pour les vidéos, préférez YouTube ou Vimeo puis intégrez-les.

Exercice · Découverte

Importez trois images et un PDF de programme en un seul glisser-déposer.

Gérer les médias

Médias › Médiathèque

Vue grille ou liste : icônes en haut à gauche ; la liste affiche l’article auquel le média est attaché.
Filtres : par type (images, audio, vidéo, documents) et par date.
Fiche du média : texte alternatif, titre, légende, description, adresse du fichier.
Sélection groupée : bouton Sélection groupée pour supprimer plusieurs fichiers.

Champ	Utilité
Texte alternatif	Décrit l’image pour les malvoyants et Google : à remplir systématiquement
Légende	Texte affiché sous l’image
Titre	Nom interne du fichier dans la médiathèque

AttentionLes médias n’ont pas de corbeille : Supprimer définitivement efface le fichier, et l’image disparaît de toutes les pages qui l’utilisent.

Exercice · Application

Filtrez la médiathèque sur les images, complétez le texte alternatif de cinq images qui n’en ont pas.

Taille par défaut des images

Bloc Image › onglet Bloc › Résolution

À l’insertion, le bloc Image utilise la taille Grande par défaut. On peut la changer image par image.

Sélectionner le bloc Image.
Dans l’onglet Bloc, choisir la Résolution : Miniature, Moyenne, Grande ou Taille réelle.
Ajuster si besoin la largeur et le ratio dans Dimensions.

AstuceN’utilisez Taille réelle que pour une image déjà redimensionnée : sinon le visiteur télécharge le fichier original, souvent très lourd.

Exercice · Découverte

Insérez la même image trois fois avec trois résolutions et comparez l’affichage et le poids dans l’inspecteur du navigateur.

Insérer une image

Bouton + › Image, ou /image

Insérer un bloc Image.
Choisir Téléverser (fichier de l’ordinateur), Médiathèque ou Insérer depuis l’URL.
Renseigner le texte alternatif dans l’onglet Bloc.
Ajouter une légende et un lien si nécessaire, puis régler l’alignement.

AstuceGlisser une image depuis l’explorateur directement dans l’éditeur crée le bloc Image et l’importe en une seule opération.

Exercice · Application

Insérez une image alignée à droite avec un texte qui l’entoure (bloc Média et texte), une légende et un texte alternatif.

Gérer les images

Bloc Image › barre d’outils · Médiathèque › Modifier l’image

Action	Où
Recadrer, faire pivoter, zoomer	Bouton Recadrer de la barre d’outils du bloc
Remplacer l’image	Bouton Remplacer du bloc
Arrondir, bordure, ombre	Onglet Bloc › Styles et Bordure
Redimensionner le fichier	Médiathèque › fiche › Modifier l’image › Mettre à l’échelle
Galerie	Bloc Galerie pour plusieurs images en grille

Bon à savoirUne modification dans Modifier l’image conserve l’original : le bouton Restaurer l’image d’origine permet de revenir en arrière.

Exercice · Application

Recadrez une photo au format 16:9, appliquez un style arrondi, puis créez une galerie de quatre images en deux colonnes.

L’image à la une

Panneau Article › Image mise en avant

L’image à la une (ou image mise en avant) représente l’article dans les listes, les archives et les partages sur les réseaux sociaux.

Dans le panneau de droite, cliquer sur Définir l’image mise en avant.
Choisir ou téléverser une image, renseigner son texte alternatif.
Cliquer sur Définir l’image mise en avant pour valider.

AstucePréparez vos images à la une en 1200 × 630 px : c’est le format affiché par Facebook et LinkedIn lors d’un partage.

Exercice · Application

Créez une image à la une de 1200 × 630 px pour un article et vérifiez son affichage dans la liste du blog.

Prévisualiser les modifications

Barre supérieure › Prévisualiser

Bureau, tablette, mobile : simulent le rendu dans l’éditeur.
Prévisualiser dans un nouvel onglet : affiche la page avec le thème réel, sans la publier.
Révisions : comparent deux versions et restaurent une version antérieure.

Bon à savoirSur un contenu déjà publié, les modifications ne sont visibles qu’après Mettre à jour. L’aperçu permet de les contrôler avant.

Exercice · Découverte

Prévisualisez un article en mode mobile, corrigez un élément mal affiché, puis comparez deux révisions.

Être en conformité avec le RGPD

Réglages › Confidentialité · Outils › Exporter / Effacer les données personnelles

Point	Action
Politique de confidentialité	Créer la page dans Réglages › Confidentialité, la compléter et la lier dans le pied de page
Cookies	Bandeau de consentement avant tout traceur non essentiel (Complianz, CookieYes)
Droits des personnes	Outils › Exporter ou Effacer les données personnelles sur demande
Formulaires	Ne collecter que le nécessaire, mention d’information sous chaque formulaire
Images	Accord écrit des personnes photographiées ; suppression des données GPS (EXIF) des photos
Vidéos intégrées	Mode confidentialité de YouTube (youtube-nocookie.com)