Créez une page d’accueil
Nous allons commencer à remplir notre site et permettre de naviguer de page en page. Regardons comment créer nos 3 principales pages, et comment définir officiellement une page comme étant la page d’accueil :
Maintenant que notre page d’accueil est en place, nous allons commencer à la remplir grâce à l’éditeur Gutenberg.
Découvrez Gutenberg
Depuis la version 5 de WordPress, un nouvel éditeur de page est apparu. Auparavant, nous utilisions l’éditeur qui ressemblait à un simple éditeur de texte (comme Word, par exemple).
Découvrons ensemble ce qu’est Gutenberg, et comment ça marche :
Maintenant que nous avons vu ce qu’est Gutenberg, voyons en pratique comment l’utiliser sur la page d’accueil.
Personnalisez une page avec Gutenberg
Nous allons maintenant remplir la page d’accueil grâce à Gutenberg. Voici une maquette de ce que nous souhaitons atteindre :
Comme nous pouvons le voir sur la maquette, nous allons apprendre à réaliser plusieurs points sur Gutenberg ; à savoir, créer :
un paragraphe simple ;
une galerie de 4 images ;
un séparateur en pointillés ;
un sous-titre ;
3 colonnes avec image et texte.
Voyons tout cela en détail :
Nous avons donc réussi à reproduire la maquette en utilisant différents types de blocs proposés par Gutenberg. Ce ne sont pas les seuls, et je vous invite à tester par vous-même les autres blocs et à voir le résultat.
Sommes-nous limités aux seuls blocs disponibles ?
Non, il vous est possible d’installer des extensions WordPress qui vous apporteront des blocs complémentaires. De plus, Gutenberg est encore à ses débuts, et chaque mise à jour de WordPress ajoute son lot de nouveautés à son éditeur, et parfois de nouveaux blocs.
À vous de jouer !
Maintenant que l’on a vu comment créer du contenu dans notre page d’accueil avec Gutenberg, vous allez essayer d’ajouter une nouvelle partie vous-même.
Cela tombe bien, car il manque une partie à faire pour les réseaux sociaux. Voici la maquette complète :
Vous constatez sur la maquette complète une partie supplémentaire composée d’une séparation en pointillés et d’une section sur les réseaux sociaux. C’est sur ça que vous allez vous pencher ! Pour le texte, il est dans le dossier de ressources que vous avez téléchargé précédemment. Pour les icônes de réseaux sociaux, ça sera directement géré par Gutenberg.
Consignes
Créer le séparateur de pointillés.
Créer la partie Réseaux sociaux comme sur la maquette, selon les critères suivants :
il y a deux parties séparées en deux colonnes, la première devra faire deux tiers de largeur, et la deuxième un tiers de largeur ;
vous ajouterez les réseaux sociaux Twitter, Facebook et Instagram. Comme aucun lien n’existe pour le moment, vous mettrez en lien “#”.
Corrigé
Alors, vous avez trouvé ? Suivez-moi dans la vidéo ci-dessous pour voir comment j’ai ajouté les réseaux sociaux à notre page d’accueil :
En résumé
Gutenberg est l’éditeur de page créé par les créateurs de WordPress depuis la version 5.
Gutenberg permet de créer des pages avec une organisation plus complexe et présentable qu’avec l’éditeur “classique” proposé par WordPress auparavant.
Il existe d’autres éditeurs qui fonctionnent à la manière de Gutenberg, avec parfois plus de possibilités, mais qui peuvent être payants (par exemple Element, Visual Composer, etc.).
Une fois que l’on connaît bien les blocs de Gutenberg et le fonctionnement en colonne, il est plus facile de reproduire des maquettes complexes sans devoir tout mettre en forme avec CSS.
Nous en avons fini avec la première partie. On s’est concentrés sur la création de notre thème et l’édition de nos premières pages avec Gutenberg. Dans la prochaine partie, nous allons voir comment enrichir notre thème avec nos compétences de développeurs HTML/CSS/PHP ! Mais avant, je vous invite à répondre à un petit quiz pour valider vos compétences !
