Dans ce tutoriel, nous allons examiner de plus près comment modifier la manière dont les articles individuels sont affichés. Nous explorerons deux conceptions et apprendrons à restructurer et imbriquer différents types de blocs.
Objectifs d’apprentissage
- Accéder à l’Éditeur du site et au modèle d’article.
- Reconnaître la mise en page par défaut du modèle d’article de votre thème.
- Identifier différents blocs de thème utilisés pour créer la mise en page d’un article individuel.
- Modifier le modèle d’article pour répondre à vos besoins.
- Déplacer et imbriquer différents types de blocs.
Questions de compréhension
- Comment souhaitez-vous que le contenu de votre article soit affiché ?
- Quels blocs de thème sont les plus couramment utilisés ?
Transcription
Bonjour et bienvenue sur Learn WordPress. Dans la session d’aujourd’hui, nous allons examiner la personnalisation de la mise en page du contenu de vos articles. Chaque thème basé sur des blocs est fourni avec le modèle d’article individuel, qui définit la structure ou la conception selon laquelle un article individuel est affiché. Et vous avez bien sûr la possibilité de le modifier pour répondre à vos besoins.
Actuellement, le thème Twenty Twenty-Two est installé, et voici comment un article est structuré par défaut lors de la modification d’un modèle dans l’Éditeur du site. Cliquons sur la vue en liste afin d’avoir une meilleure vue de la structure de la page. Vous remarquerez maintenant que nous avons le bloc Titre de l’article, le bloc Image mise en avant de l’article, le bloc Contenu de l’article et, tout en bas, le bloc Date de l’article, le bloc Auteur de l’article, le bloc Catégories de l’article et le bloc Étiquettes de l’article. Veuillez noter que cette mise en page par défaut diffère selon le thème que vous utilisez. Voyons à quoi cela ressemble sur la partie publique de votre site. Vous remarquerez que nous avons le titre de l’article, son image mise en avant, son contenu, sa date, son auteur, puis une étiquette ou une catégorie.
Laissez-moi vous montrer comment modifier cette conception par défaut de deux manières différentes. Dans mon premier exemple, vous remarquerez que j’ai modifié l’alignement du titre du site et déplacé les blocs Date, Auteur et Catégories de l’article sous le titre du site et au-dessus de l’image mise en avant de l’article. J’ai laissé le bloc Image mise en avant de l’article et le bloc Contenu de l’article au même endroit.
Dans le deuxième exemple, j’ai créé un en-tête d’article personnalisé. J’ai utilisé un bloc Couverture et imbriqué le menu de navigation, l’image mise en avant, le bloc Titre de l’article, ainsi que les blocs Date et Auteur de l’article.
Voyons maintenant comment personnaliser votre modèle d’article et recréer ces exemples. Pour obtenir la mise en page du premier exemple, cliquez sur Apparence, puis sur Éditeur. Cliquez sur l’icône WordPress ou l’icône du site, accédez aux modèles, puis sélectionnez le modèle d’article individuel. Cliquez sur la vue en liste pour mieux voir la structure de la page. Nous allons d’abord modifier l’alignement du titre de l’article pour le centrer. Faites ensuite défiler la page vers le bas et trouvez vos autres blocs de thème, puis sélectionnez le bloc Ligne parent. Nous allons maintenant faire glisser le bloc Ligne vers le haut, sous le bloc Titre de l’article, dans notre vue en liste, puis modifier l’alignement pour le centrer. Une fois terminé, cliquez sur Enregistrer. Nous pouvons maintenant retourner sur la partie publique de notre site pour voir à quoi cela ressemblera pour une personne qui le visite. Et voilà.
Pour recréer le deuxième exemple, nous sommes de retour dans l’Éditeur du site et nous allons accéder aux modèles, puis sélectionner à nouveau le modèle d’article individuel. La première chose que nous allons faire est supprimer l’en-tête, le bloc Titre de l’article, le bloc Image mise en avant de l’article ainsi que tous les autres blocs de thème. Nous allons maintenant ajouter un bloc Couverture en haut de notre page. Dans la barre d’outils du bloc, une option permet d’ajouter un média et, à gauche, d’utiliser l’image mise en avant. Cliquez sur Utiliser l’image mise en avant, puis sélectionnez une couleur de superposition. Sélectionnez le bloc Couverture, puis réglez l’opacité sur 80. Une fois cela fait, cliquez sur l’outil d’insertion et ajoutez un bloc Ligne. Dans le bloc Ligne, nous allons ajouter le logo du site, puis le titre du site et enfin le bloc Navigation. Je vais sélectionner l’un des menus que j’ai déjà créés. Une fois cela fait, sélectionnez les blocs Logo du site et Titre du site, puis regroupez-les dans une ligne.
Sélectionnez ensuite à nouveau le bloc Ligne parent et, à côté de la justification, choisissez Espacer les éléments. Enfin, sélectionnez le bloc Navigation et assurez-vous de désactiver l’option Autoriser le retour à la ligne sur plusieurs lignes. Nous allons ensuite sélectionner le bloc et le déplacer en haut du bloc Couverture. Je vais maintenant ajouter mon bloc Titre de l’article et le centrer. Je vais ensuite ajouter un autre bloc Ligne pour regrouper la date et l’auteur de mon article. Je vais donc d’abord ajouter le bloc Date de l’article, puis le bloc Auteur de l’article. Je sélectionnerai à nouveau le bloc parent et modifierai la justification pour la centrer. Nous ajouterons ensuite un paragraphe entre les deux et insérerons un point, que nous mettrons en gras. Je m’assurerai ensuite d’avoir sélectionné à nouveau le bloc parent et j’utiliserai les réglages de la barre latérale pour modifier l’espacement du bloc à 10 pixels afin de les rapprocher. Je fermerai ensuite les réglages de la barre latérale et la vue en liste, et je veillerai à augmenter la taille de mon bloc Couverture. Enfin, vous pouvez également décider de supprimer le bloc Séparateur situé juste sous le bloc Couverture. Vous pouvez ensuite retourner sur la partie publique du site pour voir vos modifications en action.
Si vous avez modifié un modèle, vous remarquerez qu’un petit point apparaît au-dessus de l’image, à côté du nom de votre thème. Si vos modifications ne vous conviennent pas, cliquez sur les trois points verticaux et sélectionnez Effacer les personnalisations. Le modèle est alors revenu à son état d’origine. Cela nous amène à la fin de ce tutoriel.
Bonne chance pour la personnalisation de votre propre modèle d’article, et rendez-vous sur Learn WordPress pour découvrir d’autres tutoriels et supports de formation.