WordPress : Création de contenu WP01

Cet exercice concerne la création d’article et de page sur WordPress. Il s’agit de construire du contenu en utilisant les options de l’éditeur Gutenberg.

Avant de commencer l’exercice

Il est conseillé d’utiliser du texte de type Lorem Ipsum pour avoir du contenu textuel lors de la réalisation de cette exercice.

Demonstration de la génération de Lorem Ipsum
Démonstration pour la génération de Lorem Ipsum

Consignes de l’exercice

Un premier article

Créez un nouvel article intitulé Exemple 1.

Insérez un bloc de type Paragraphe, ajoutez-y du texte qui servira de chapeau pour l’article.

Mettez la totalité du texte du chapeau en italique.

Le fait de mettre tout le paragraphe en italique correspond à de la mise en forme directe, il serait préférable de créer une classe CSS pour pour la mise en forme du Chapeau de l’article.

Affichez le code HTML du chapeau.

En observant le code HTML du bloc Chapeau, que constatez-vous au sujet de l’italique ?

Prévisualisez votre article.

À la suite de l’article Exemple 1, insérez un bloc de type Lire la suite pour distinguer le chapeau de l’article du reste du contenu.

À la suite de l’article Exemple 1, insérez les éléments suivant en utilisant les blocs adaptés :

  • Un titre de niveau 2 <h2></h2> (<h1></h1> est réservé au titre de l’article) ;
  • Un paragraphe ;
  • Un titre de niveau 3 ;
  • Un paragraphe ;
  • Un titre de niveau 3 ;
  • Un paragraphe ;
  • Un titre de niveau 2 ;
  • Un paragraphe ;
  • Une liste à puce.
  • Un paragraphe ;
  • Une liste numérotée.

Dans l’article Exemple 1, à l’intérieur d’un des paragraphes de votre choix, insérez un lien hypertexte pointant vers cet article d’exercice.

Veillez à ce que le lien hypertexte créé à la question précédente s’ouvre dans un nouvel onglet lorsque l’on clique dessus.

Dupliquez le bloc contenant la liste numérotée.

Affichez le code html de la copie de liste numérotée de la question précédente. Ajoutez l’attribut start="10" dans la balise <ol> afin de modifier le nombre de départ pour la numérotation.

Créez les catégories suivantes en respectant la hiérarchisation :

  • Actualité ;
  • Promotions :
    • Vente privée ;
    • Soldes.

Associez les 3 premières catégories précédemment créées à l’article Exemple 1.

Publiez votre article.

Retrouvez sur internet un site web proposant des images libres de droit. Récupérez une image de votre choix.

Ajoutez l’image téléchargée comme Image à la une pour l’article Exemple 1. Testez votre site pour voir si l’image à la une a un impact dans votre thème.

Modifiez le permalien l’article Exemple 1 pour le remplacer par article-exo-exemple-1.

Affichez l’article Exemple 1 et observez la nouvelle adresse URL.

Insertion d’images

Créez un nouvel article intitulé Exemple 2.

Téléchargez sur Internet deux images libres de droit de grande taille.

Insérez dans l’article Exemple 2, la première image que vous venez de télécharger, en l’affichant en taille réelle.

Ajoutez un lien sur l’image en choisissant l’option Fichier média.

À la suite de l’article Exemple 2, ajoutez un paragraphe contenant une vingtaine de lignes de texte.

À la suite de l’article Exemple 2, ajoutez la seconde image en prenant soin de l’afficher en taille Moyenne.

Ajoutez un lien sur la seconde image en choisissant l’option Page du fichier joint.

Prévisualisez l’article Exemple 2 et testez les deux liens que vous venez de créer.

Modifiez l’option d’affichage de la première image et choisissez un affichage pleine largeur.

Modifiez l’option d’affichage de la seconde image et choisissez cette fois-ci Aligner à gauche.

Réorganisez vos blocs pour faire passer le bloc contenant les 20 lignes de texte en dessous de celui avec la seconde image.

Prévisualisez l’article.

Création d’une galerie d’image

Créez un nouvel article intitulé Exemple 3.

Téléchargez sur Internet trois images libre de droit de grande taille supplémentaires.

Insérez dans l’article Exemple 3, une galerie d’image composée des cinq images de grande taille que vous avez récupéré.

Testez les différentes options de la galerie d’images.

Intégration de vidéo

Créez un nouvel article intitulé Exemple 4.

Retrouvez sur Internet une vidéo sur une plateforme de streaming tel que Youtube, Viméo ou Dailymotion.

Intégrez la vidéo dans l’article Exemple 4.

En dessous de la vidéo, insérez un bouton permettant d’accéder à la page de la vidéo directement sur le site de streaming.

Insertion de tableau

Créez un nouvel article intitulé Exemple 5.

Créez un tableau de 4 lignes et 5 colonnes.

Alternez les couleurs de lignes pour le tableau.

Cela peut vous intéresser :

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.