WordPress : Création de contenu 2 WP07

Cet exercice concerne la création d’article et de page sur WordPress. Il s’agit de construire du contenu afin de découvrir les possibilités de Gutenberg.

Consignes de l’exercice

Démarrage de l’exercice

Connectez-vous au backoffice de votre installation de WordPress.

Créez un nouvel article sous le nom Exercice contenu WP07.

Intégration de média

Téléchargez une musique .mp3 libre de droit sur Internet.
Source possible : https://www.auboutdufil.com/index.php?tag=funk

Trouvez le bloc adapté vous permettant d’intégrer dans votre article la musique que vous venez de télécharger.

Créez un fichier .pdf dans lequel vous mettrez un peu de texte aléatoire avec un logiciel de traitement de texte.

Trouvez le bloc adapté vous permettant d’intégrer dans votre article un lien de téléchargement du fichier que vous venez de créer.

Téléchargez sur image libre de droit.

Intégrez l’image dans votre article.

Trouvez le bloc adapté vous permettant d’intégrer dans votre article un lien de téléchargement du fichier que vous venez de créer.

Trouvez le bloc adapté vous permettant d’intégrer cet article d’exercice (celui que vous êtes en train de lire pour les consignes) directement dans votre article.

Si vous avez un compte Facebook ou Twitter, connectez-vous et intégrez une publication facebook ou un tweet dans votre article.

Éléments de contenu

Insérez trois colonnes dont les dimensions sont respectivement 20%, 20% et 60%.

Intégrez plusieurs blocs de contenu dans chacune des colonnes.

Utilisez le bloc adapté permettant d’obtenir la disposition ci-dessous. L’image doit s’adapter pour occuper systématiquement la hauteur du texte.

Image + Texte

Ajoutez un espace vertical de 250px en dessous.

Insérez le bouton suivant :

Manipulation de blocs

Insérez un paragraphe de texte et une image.

Sélectionnez les deux blocs que vous venez de créer et remontez-les ensemble tout en haut de votre article.

Groupez les deux blocs.

Sélectionnez le groupe et remettez-le tout en bas de l’article.

Sélectionnez le groupe et enregistrez-le comme Bloc réutilisable.

Insérez deux copies de ce groupe en utilisant les blocs réutilisables.

Enregistrez votre article.

Dans la section Réutilisables des blocs Gutenberg ou dans la liste des outils complémentaires, cliquez sur l’option Gérer tous les blocs réutilisables.

Ajoutez un bloc de votre choix au bloc réutilisable que vous venez de créer.

Affichez à nouveau votre article d’exercice pour constater l’effet de la modification d’un bloc réutilisable.

Manipulation HTML

Insérez un bloc de type HTML personnalisé et copiez/coller à l’intérieur de ce bloc le code ci-dessous.

<div style="font-weight: bold;#00B7E8: purple; border: 8px solid #00B7E8; padding: 10px; background-color: yellow">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    <span style="color:red">Curabitur in nisl at nisl</span> 
    venenatis tincidunt eget id ipsum. Proin eget dolor sem. 
    Nulla id elit convallis, 
    <span style="color: green;">condimentum eros ut</span>, 
    viverra magna. Duis felis enim, rutrum non pretium
    et, pulvinar blandit eros. Pellentesque molestie,
    odio vel ullamcorper commodo, ligula nunc 
    fermentum urna, quis luctus risus tellus nec 
    eros. Cras blandit pretium diam quis molestie.
</div>

Insérez un bloc Code et collez à l’intérieur le même code que précédemment.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in nisl at nisl venenatis tincidunt eget id ipsum. Proin eget dolor sem. Nulla id elit convallis, condimentum eros ut, viverra magna. Duis felis enim, rutrum non pretium et, pulvinar blandit eros. Pellentesque molestie, odio vel ullamcorper commodo, ligula nunc fermentum urna, quis luctus risus tellus nec eros. Cras blandit pretium diam quis molestie.

Prévisualisez l’article pour voir la différence entre les deux blocs.

Insérez un nouveau bloc de type HTML personnalisé et copiez/coller à l’intérieur de ce bloc le code ci-dessous.

<ul>
    <li>Ligne 1</li>
    <li>Ligne 2</li>
    <li>Ligne 3</li>
</ul>

Utilisez l’option Convertir en blocs pour transformer le code HTML brut en bloc Gutenberg.

Plugins complémentaires

Installer le plugin Ultimate Addons For Gutenberg
https://wordpress.org/plugins/ultimate-addons-for-gutenberg/

Explorez les possibilités offertes par les nouveaux blocs du plugin Ultimate Addons For Gutenberg qui se trouve dans la liste des blocs de Gutenberg.

Testez et explorez les possibilités d’autres plugins permettant d’étendre les possibilités de Gutenberg :

Sauf mention contraire*, l'article WordPress : Création de contenu 2 [WP07] et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Licence Creative Commons

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International

Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.

* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.

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.