Prise en Main avec Gutenberg

Wordpress est un système de gestion de contenu ( SGC) ou Content management système (CMS), gratuit, libre et open source. Ce logiciel écrit en PHP repose sur une base de données Mysql et est distribué par l’entreprise Américaine Automatic. Ce logiciel est destiné à la conception et la mise à jour dynamique de blog, Site web professionnel et à d’autres fins…

Il est parmi les meilleurs CMS qui tourne sur la toile du web et est le plus utiliser avec 60,1% d’utilisateurs, ce qui équivaut à 29,6% des sites dans le monde. Source : https://www.blogdumoderateur.com/parts-de-marche-cms/.

WordPress est simple dans sa prise main, avec de nombreuses extensions pour compléter les fonctionnalités de base, et a une grande communauté d’utilisateurs très active. La simple installation de base de WordPress est relativement bien adaptée pour les sites Internet professionnels. Pour les blogueurs notamment, qui souhaitent avoir un contenu changeant régulièrement avec des présentations attrayantes, WordPress représente un CMS efficace avec une interface Web pratique et intuitive.

Passons au vif du sujet.

Gutenberg

Gutenberg, vous connaissez forcément ce nom ! Si vous ne faites pas partie de la « communauté WordPress », cela vous évoquera sans doute l’illustre inventeur de l’imprimerie au XVe siècle. Pour les développeurs WordPress et utilisateurs, ça vous fera penser au nouvel éditeur de contenu de WordPress qui sera embarqué dans la version 5.0 et l’est déjà pour ceux qu’utilisent actuellement cette version.

Passons à la pratique de Gutenberg. Gutenberg est disponible au téléchargement https://wordpress.org/plugins/gutenberg / dans la bibliothèque des modules de WordPress.

Découvrons ci-après le mode d’emploi dans la version 5 de WordPress.

Présentation de l’interface et création d’une page

Il faut comprendre que Gutenberg a sa logique, qui est basée sur un système de bloc. On ajoute des blocs, on y insère différents contenus (textes, images, vidéos, etc.) puis on les dispose dans la page comme on le souhaite.

On distingue 5 groupes de blocs de contenus :

• Communs : ce sont les blocs basiques? — les titres, les paragraphes, les listes à puces, les citations, les images, les galeries d’images, etc.
  Formatage : ce sont les différents formats dans lesquels vous pourrez rédiger vos contenus? — classique, HTML, code source, texte préformaté, etc.
• Mise en page : il s’agit des blocs qui vous permettront de soigner votre mise en page. C’est à mon sens le groupe le plus important, mais il est encore très pauvre pour le moment? — séparateur, colonnes, boutons, etc.
  Widget : vous pourrez, dans ce groupe, retrouver vos widgets WordPress et les intégrer directement dans vos pages / articles.
• Embed : ce sont des contenus embarqués depuis d’autres plateformes (Youtube, Flickr, Twitter, Tumblr, etc.).

1- A droite nous avons deux parties:

a. La Partie du Bloc style de couleur, la police, et l’ajout du Css

b. La Partie Document qui permet de faire les différentes configurations .

On va maintenant construire notre home page et découvrir les blocs de contenus proposés par Gutenberg.

Pour ajouter des blocs, on clique sur le petit (+) en haut à gauche. Par défaut le bloc est ajouté en bas de la page. Si vous sélectionnez un bloc et cliquez sur le (+), le nouveau bloc sera ajouté sous le bloc sélectionné. Vous pouvez voir l’emplacement du bloc que vous êtes sur le point d’ajouter grâce à l’indicateur en bleu.

Insérons une bannière en haut de notre page d’accueil avec le module cover image .
ce module permet d’insérer du text sur une image.

1- Allez dans le signe (+) ensuite → Common Bloks → Cover → Upload image.

Ajoutons une phrase pour attirer l’attention du visiteur

2 → Allez dans le signe (+) ensuite → Common Blocks → Heading

3- Allez dans le (+) → Common Blocks → Module Gallery

3- Allez dans le (+) → Common Blocks → Layout Element → Columns,

pour le sous-titre des images.

4 - Ajoutons un peu de contenu et du text .

Idem (+) → Common Blocks → Layout Element → Media et Text .

Ok , nous allons nous arrêter ici sur ce petit tuto concernant la prise en main de Gutenberg.
Vous pouvez aller encore plus loin avec ce nouvel éditeur en explorant à fond ces outils, en utilisant aussi le shortcode, le bloc html et le css, pour un super rendu.
Voici l’aperçu de notre petit tuto jusqu’à présent.

NB: Bon a savoir .
Les différents blocs de contenu

Blocs communs :

• Titre : pour l’ensemble de vos titres (H2, H3, H4)
• Paragraphe : pour la saisie standard de votre texte
• Image : pour ajouter un bloc image
• Galerie : pour ajouter une galerie d’image
• Bannière : pour ajouter une image sur laquelle vous pourrez saisir du texte par-dessus
• Liste : pour faire une liste à puce ou numérotée
• Citation : pour ajouter une citation
• Son : pour ajouter un média son
• Fichier : pour faire un lien vers un fichier
• Vidéo : pour ajouter une vidéo

Mise en forme :

• Code : pour saisir du code
• Classique : pour retrouver l’éditeur classique de WordPress
• HTML personnalisé : pour ajouter du code HTML
• Pré-formaté : ajouter un texte qui respecte les espacements et tabulations
• Citation en exergue : pour ajouter une citation et définir un aspect visuel
• Tableau : pour ajouter un tableau
• Couplet : pour ajouter de la poésie ou des paroles en utilisant un espacement spécifique

Mise en page :

• Bouton : permet d’ajouter un bouton
• Colonnes : créer des zones pour afficher des blocs de contenu sur plusieurs colonnes
• Media & texte : définir un média et du texte côte à côte
• Lire la suite : ajouter un lien “lire la suite”
• Saut de page : ajouter un saut de page
• Séparateur : ajouter un séparateur (ligne entre 2 blocs)
• Espacement : ajouter un espace (entre 2 blocs)

Widget :

• Code court : pour ajouter des shortcodes
• Archive : afficher les archives mensuelles de vos articles
• Catégorie : afficher la liste des catégories
• Commentaires récents : afficher les commentaires récents
• Articles récents : afficher les articles récents
• Contenus embarqués :
• Intégrer le contenu de vos réseaux sociaux

Merci de votre Attention et à bientôt pour un autre article .