1. Livres & vidéos
  2. WordPress
  3. Les autres types de bloc
Extrait - WordPress Personnaliser les thèmes Gutenberg sans coder (5e édition)
Extraits du livre
WordPress Personnaliser les thèmes Gutenberg sans coder (5e édition)
2 avis
Revenir à la page d'achat du livre

Les autres types de bloc

Insérer des blocs de contenu dans les modèles

Dans les chapitres précédents, nous avons abordé les différents types de blocs qui sont directement utilisables dans les modèles de page pour créer la mise en page et la mise en forme de la structure des modèles. Mais, dans les modèles, nous pouvons aussi insérer des blocs de contenu, comme ceux couramment utilisés dans les contenus rédactionnels, les articles et les pages. Ces blocs permettent d’insérer du texte fixe dans des titres ou des paragraphes, des illustrations sous forme d’image fixe ou de galerie, voire de la vidéo. Nous avons déjà vu l’utilisation de ces blocs de contenus dans les modèles de page du thème Twenty Twenty-Five.

Dans ce chapitre, nous allons aborder tous ces blocs, sans rentrer dans les détails de mise en page et de mise en forme. Pour cela, reportez-vous à mon ouvrage WordPress - Un CMS pour créer et gérer blogs et sites web, paru aux Éditions ENI.

images/C13-001.png

Utiliser les blocs pour le texte

1. Ajouter et mettre en forme un bloc Titre

Le bloc Titre permet d’insérer des textes pour des titres dans les modèles de page. Ces blocs de type Titre peuvent avoir six niveaux d’importance. Le niveau 1, <h1> en HTML, est usuellement réservé au nom des articles et des pages. Il est donc recommandé d’utiliser les niveaux 2 et inférieur pour les contenus des modèles.

images/C13-002.PNG

 Utilisez la barre d’outils pour modifier l’alignement dans la page, changer le niveau de titre, modifier l’alignement horizontal du texte dans le bloc et modifier la typographie d’une sélection dans le bloc.

 Utilisez le volet des réglages, l’onglet Bloc, pour modifier les réglages Styles, Couleur, TypographieDimensions et Bordure.

2. Ajouter et mettre en forme un bloc Paragraphe

Le bloc Paragraphe permet d’insérer du texte courant.

images/C13-003.png

 Utilisez la barre d’outils de mise en forme du bloc pour modifier l’alignement horizontal du texte dans le bloc et modifier la typographie d’une sélection dans le bloc.

 Utilisez le volet des réglages, l’onglet Bloc, pour modifier les réglages Styles, Couleur, TypographieDimensions et Bordure.

3. Ajouter et mettre en forme un bloc Liste

Le bloc Liste permet d’insérer des listes numérotées et des listes à...

Utiliser les blocs pour les médias

1. Exploiter les médias

Les médias sont un élément essentiel des sites web et ils sont bien sûr très présents dans les modèles de page. Les illustrations peuvent être insérées sous forme d’image fixe, de galerie, de texte et d’image côte à côte et de bannière. Enfin, il peut être intéressant dans certains cas très précis d’insérer une vidéo.

2. Utiliser le bloc Image

Le bloc Image permet d’insérer une image fixe.

images/C13-010.png

 Utilisez la barre d’outils de mise en forme du bloc pour modifier l’alignement dans la page, appliquer un filtre duotone, créer un lien sur l’image, redimensionner l’image, ajouter du texte au-dessus de l’image et ajouter une légende.

 Utilisez le volet des réglages, onglet Bloc, sous-onglet Styles, pour modifier les réglages Styles, Filtres, Dimensions, Bordure & ombre et RAYON.

3. Utiliser le bloc Galerie

Le bloc Galerie permet d’insérer une galerie de photo statique. C’est-à-dire qu’il n’y a pas d’interaction avec le visiteur. Ce n’est pas un diaporama ni un slider.

images/C13-011.png

 Utilisez la barre d’outils de mise en forme du bloc pour modifier l’alignement dans la page, créer un lien sur la galerie et ajouter une légende....

Utiliser les widgets

1. Présentation des widgets

Les widgets sont des composants d’interface déjà présents dans les anciennes versions de WordPress. Ils permettent d’insérer des composants de navigation, de taxinomie, de réseaux sociaux… Lorsque vous ajoutez un bloc, les widgets sont accessibles dans la catégorie WIDGETS :

images/C13-015.png

2. Les widgets pour les contenus

 Insérez un widget Archives pour afficher la liste des articles classés par mois par défaut.

 Dans le volet des réglages, vous pouvez aussi afficher par jour, semaine ou année à l’aide de la liste déroulante REGROUPER PAR.

images/C13-016.png

 Cliquez sur le sous-onglet Styles, Couleur, Typographie, Dimensions et Bordures pour modifier les paramètres.

Voici un exemple d’affichage par mois :

images/C13-017.png

 Insérez un widget Calendrier pour afficher les articles publiés dans un calendrier mensuel :

images/C13-018.png

 Utilisez le volet des réglages, sous-onglet Style pour modifier les paramètres Couleur et Typographie

 Insérez un widget Derniers articles pour afficher sous forme d’une liste les derniers articles publiés.

images/C13-019.png

Le volet des réglages propose de nombreuses options très faciles à comprendre :

images/C13-020.png

 Cliquez sur le sous-onglet Styles pour modifier les paramètres Couleur, Typographie et Dimensions

 Utilisez le widget Derniers commentaires pour afficher tous les commentaires publiés sur le site :

images/C13-021.png

Les options du volet des réglages sont très simples à utiliser :

images/C13-022.png

 Utilisez le widget Liste des pages dans le cadre d’un menu de navigation, comme nous...

Utiliser les blocs de contenus embarqués

Les contenus embarqués sont des contenus qui proviennent d’autres sites, d’autres plateformes de diffusion ou d’autres médias. La liste de ces blocs est longue, donc voici les plus utilisés : Twitter (ou X maintenant), YouTube, Spotify, WordPress, SoundCloud, Reddit, Tik-Tok, PinterestBluesky