Blog ENI : Toute la veille numérique !
En raison d'une opération de maintenance, le site Editions ENI sera inaccessible le mardi 10 décembre, en début de journée. Nous vous invitons à anticiper vos achats. Nous nous excusons pour la gêne occasionnée
En raison d'une opération de maintenance, le site Editions ENI sera inaccessible le mardi 10 décembre, en début de journée. Nous vous invitons à anticiper vos achats. Nous nous excusons pour la gêne occasionnée
  1. Livres et vidéos
  2. Drupal 9
  3. L'affichage du site
Extrait - Drupal 9 Créer des sites structurés
Extraits du livre
Drupal 9 Créer des sites structurés
1 avis
Revenir à la page d'achat du livre

L'affichage du site

Les objectifs

Les sites créés avec Drupal s’affichent grâce à des thèmes. Ces thèmes sont créés par des designers web qui structurent les pages des sites Drupal en régions. Chaque région pourra afficher un ou plusieurs blocs d’affichage.

Dans ce chapitre nous allons étudier l’affichage des régions et des blocs avec le thème par défaut nommé Bartik.

La structure des thèmes

Les pages des thèmes Drupal s’organisent en régions et en blocs. Une région est une zone d’affichage parfaitement délimitée dans les pages publiées. Dans chaque région, nous pouvons placer des blocs. Chaque bloc permet l’affichage d’un contenu de tout type : un menu, un article, un texte fixe, un fil d’Ariane...

Voici un exemple d’une organisation de page en régions :

images/C08-001.png

Les régions et les blocs du thème Bartik

Le thème actif par défaut, suite à une installation standard de Drupal, s’appelle Bartik.

Nous pouvons visualiser les régions des blocs de ce thème :

 Dans la barre des menus, choisissez Structure.

 Cliquez sur le lien Mise en page des blocs.

Nous visualisons dans l’écran Mise en page des blocs, dans l’onglet Mise en page des blocs, que le thème actif est bien Bartik.

images/new-083.png

 Pour visualiser les régions des blocs, cliquez sur le lien Aperçu des régions des blocs (Bartik)

images/new-084.png

Drupal affiche la position et le nom de toutes les régions dans lesquelles nous pourrons afficher les blocs :

images/9-C08-001.png

Vous visualisez la structure de la page :

  • Dans la zone supérieure, se situent les régions Menu secondaire, Entête et Menu principal.

  • Dans la zone en dessous, nous visualisons les régions Mis en évidence et Featured top.

  • Dans la zone centrale, se trouvent les régions Fil d’Ariane, Première barre latérale, Seconde barre latérale et le bloc d’affichage du Contenu.

  • En dessous, la zone suivante affiche trois régions : Featured bottom first, Featured bottom second et Featured bottom third.

  • Enfin, pour terminer, la zone des pieds de page affiche cinq régions de type Pied de page.

 Pour quitter cet affichage des régions, en haut à gauche...

La région Entête

1. L’affichage

La première région est l’en-tête, nommée Entête. Elle est située dans le bandeau supérieur de l’affichage du site. Elle ne contient qu’un seul bloc nommé Site branding.

images/9-C08-003.png

Ce bloc affiche le logo Drupal, le titre et le slogan du site.

images/new-087.png

Le logo se gère dans les paramètres du thème. Reportez-vous au chapitre L’apparence du site avec les thèmes.

Le titre et le slogan se gèrent dans le menu Configuration, encadré SYSTÈME, Paramètres de base du site, puis dans l’encadré DÉTAILS DU SITE.

images/9-C08-004.png

2. La configuration du bloc

Nous allons configurer l’affichage du bloc Identité du site.

 Dans la ligne de ce bloc, cliquez sur le bouton Configurer.

images/9-C08-005.png

 Dans le champ Titre, vous pouvez renommer ce bloc.

images/new-089.png

Si vous souhaitez afficher ce titre dans le site publié, cochez l’option Afficher le titre.

 Dans l’encadré ACTIVER/DÉSACTIVER LES ÉLÉMENTS DE L’IDENTITÉ DU SITE, vous avez la possibilité d’afficher ou de masquer les trois éléments : Logo du site, Nom du site et Slogan du site.

images/9-C08-006.png

 Cochez ou non les cases à cocher correspondantes.

Dans la zone Visibilité vous pouvez déterminer si ce bloc est visible tout le temps, quel que soit le contexte d’affichage...

La région Menu principal

1. L’affichage

La deuxième région est nommée Menu principal, elle fait partie de la CATÉGORIE Menus. Elle ne contient qu’un seul bloc nommé aussi Navigation principale.

images/p177.png

Ce bloc affiche les pages qui sont placées dans le menu Menu principal, comme le montre cet exemple.

images/C08-009.png

C’est dans la configuration du type de contenu Page de base que nous définissons où sont affichées les pages.

 Dans les menus de l’administration, choisissez Structure.

 Cliquez sur le lien Types de contenu.

 Dans la ligne Page de base, cliquez sur le bouton Modifier.

 Puis cliquez sur l’onglet Paramètres du menu.

Dans la liste des options Menus disponibles, c’est le menu Navigation principale qui est bien sélectionné.

images/new-093.png

Donc quand les rédacteurs ajouteront une page, ils pourront l’ajouter au menu Navigation principale, qui est affiché avec le bloc Navigation principale dans la région Menu principal.

2. La configuration du bloc

Nous allons configurer l’affichage du bloc Navigation principale.

 Dans la ligne de ce bloc, cliquez sur le bouton Configurer.

images/9-C08-007.png

 Dans le champ Titre, vous pouvez renommer ce bloc.

images/9-C08-008.png

 Si vous souhaitez afficher ce titre dans le site publié, cochez l’option Afficher le titre.

images/C08-012.png

 Cliquez sur le bouton Enregistrer le bloc.

Le titre de ce bloc est bien affiché...

La région Menu secondaire

1. L’affichage

La région Menu secondaire appartient aussi à la CATÉGORIE Menus. Elle ne contient qu’un seul bloc : Menu du compte de l’utilisateur.

images/9-C08-014.png

Ce bloc affiche les liens Mon compte et Se déconnecter, lorsqu’un utilisateur est connecté dans le site publié. C’est donc un bloc dédié à l’affichage de l’administration.

images/C08-020.png

2. La configuration du bloc

Nous pouvons configurer l’affichage du bloc Menu du compte de l’utilisateur.

 Dans la ligne de ce bloc, cliquez sur le bouton Configurer.

Vous retrouvez les paramètres de configuration vus précédemment : Titre, Afficher le titre, NIVEAUX DE MENU, Visibilité et Région.

La région Mise en évidence

La région Mise en évidence, qui fait partie de la CATÉGORIE System, a deux utilités :

  • dans l’interface d’administration, elle permet d’afficher des messages de Drupal avec l’utilisation du bloc Message de statut.

  • dans le site publié, vous pouvez y placer un bloc qui sera affiché sous le bloc du Menu principal.

La région Featured top

La région Featured top n’affiche pas de bloc.

images/C08-021.png

La région Fil d’Ariane

La région Fil d’Ariane appartient à la CATÉGORIE System. Elle ne contient qu’un seul bloc Fils d’Ariane.

images/C08-022.png

Cette région permet d’afficher le fil d’Ariane pour aider à la navigation dans le site publié. Dans cet exemple, nous avons un article qui est affiché en page seule, le fil d’Ariane permet de revenir sur la page d’accueil.

images/9-C08-015.png

Le bloc Fils d’Ariane est aussi utilisé dans l’interface d’administration pour lister tous les écrans parcourus. Il convient donc de ne pas modifier ce bloc.

images/C08-024.png

La configuration permet de modifier le Titre, d’Afficher le titre, de gérer la Visibilité de ce bloc et de changer de Région.

La région Contenu

La région Contenu est utilisée aussi bien dans le site publié que dans l’interface d’administration. Elle contient de nombreux blocs.

images/9-C08-016.png

Les blocs Aide, Onglets et Actions d’administration principales permettent d’afficher différents éléments de l’interface d’administration. Ne modifiez pas ces blocs.

Le bloc Titre de page permet l’affichage du titre des contenus. Attention cela ajoute un autre titre au contenu !

Le bloc Contenu de la page principal permet l’affichage du contenu du site publié : la liste des articles de la page d’accueil, les articles en page seule, les pages... Il convient donc de ne pas déplacer ce bloc en dehors de cette région.

La configuration de ce bloc permet, comme précédemment, de modifier le Titre, d’Afficher le titre, de gérer la Visibilité et de changer de Région.

 Si vous apportez une modification, n’oubliez pas de cliquer sur le bouton Enregistrer le bloc.

 Puis cliquez sur le bouton Enregistrer les blocs.

La région Première barre latérale

1. Les blocs

La région Première barre latérale contient deux blocs : Rechercher et Outils.

images/9-C08-017.png

Cette région est utilisée dans le site publié pour afficher sur la gauche le champ de recherche (bloc Rechercher) et les outils de gestion (bloc Outils) quand un utilisateur est connecté.

images/C08-027.png

Les paramètres de configuration sont les mêmes que précédemment.

2. Déplacer les blocs

Drupal nous permet de modifier l’ordre d’affichage des blocs d’une région avec beaucoup de facilité. Dans cet exemple nous allons déplacer le bloc Rechercher sous le bloc Outils.

 Dans la liste des blocs de la région Première barre latérale, déplacez le bloc Rechercher sous le bloc Outils, par un simple cliqué-glissé depuis le bouton en forme de quatre flèches.

images/9-C08-018.png

Le bloc est déplacé :

images/9-C08-019.png

Le bloc Rechercher apparaît sur fond jaune avec un astérisque car la modification n’est pas enregistrée.

 Cliquez sur le bouton Enregistrer les blocs.

À l’affichage du site publié, l’ordre des blocs est bien modifié :

images/C08-031.png

Les autres régions

Les autres régions sont sans bloc : Seconde barre latérale, Featured bottom first, Featured bottom second, Featured bottom third, Premier pied de page, Deuxième pied de page, Troisième pied de page, quatrième pied de page.

images/9-C08-020.png

La région Cinquième pied de page

Cette dernière région contient deux blocs : Propulsé par Drupal et Menu Pied de page.

images/9-C08-021.png

Cela permet d’insérer un lien Contact qui affiche un formulaire de contact et le texte Propulsé par Drupal, avec un lien vers le site de drupal.org.

images/9-C08-022.png

Gérer les blocs

1. La gestion des blocs

Nous l’avons évoqué en début de chapitre, vous ne pouvez pas modifier les régions. Elles sont définies par le designer dans le thème qu’il a créé. Par contre vous pouvez gérer les blocs : ajouter, masquer, déplacer, supprimer et modifier les blocs dans le site publié.

2. Ajouter un bloc

Dans un premier temps nous allons ajouter un nouveau bloc. N’oubliez pas que les blocs servent à afficher du contenu de tout type, nous allons donc ajouter un bloc de texte. Cela peut concerner une annonce, un slogan, une information ponctuelle de vos sites.

 Dans les menus de l’administration, choisissez Structure.

 Cliquez sur le lien Mise en page des blocs.

 Cliquez sur l’onglet Bibliothèque de blocs personnalisés.

images/9-C08-023.png

 Pour ajouter un nouveau bloc, cliquez sur le bouton + Ajouter un bloc personnalisé.

 Dans le champ obligatoire Description du bloc, saisissez le nom du bloc qui doit être unique. Dans cet exemple, la description est Annonce.

images/C08-036.png

 Dans le champ Corps, saisissez le contenu rédactionnel de ce bloc. Vous pouvez effectuer une mise en forme si vous le souhaitez.

images/9-C08-024.png

 Dans l’onglet Informations sur les révisions, vous pouvez demander à Créer une nouvelle révision ou pas, si vous jugez que cela n’en vaut pas la peine pour une simple annonce temporaire. 

images/9-C08-025.png

 Cliquez sur le bouton Enregistrer.

Le nouveau bloc est bien créé :

images/9-C08-026.png

 Dans la ligne du bloc créé, vous avez accès aux deux boutons Modifier et Supprimer...

Les menus

1. Les menus disponibles

Nous allons voir comment gérer les menus du site publié. Rappelons que le nombre de menus est déterminé par l’administrateur du site. Ensuite, il faut placer les menus créés dans des blocs qui seront eux, affichés dans les régions disponibles du thème.

 Pour connaître les menus disponibles, dans les menus de l’administration, choisissez Structure

 Puis, cliquez sur le lien Menus.

Drupal affiche la liste de tous les menus disponibles :

images/new-115.png

Vous visualisez les menus de l’interface d’administration : Administration et les menus accessibles dans le site publié.

  • Navigation principale : c’est le menu où sont placées les pages, comme nous l’avons vu plusieurs fois déjà.

images/C08-059.png
  • Outils : c’est le menu qui est affiché dans la colonne latérale de gauche et qui permet à l’utilisateur connecté de gérer le site depuis le site publié.

images/C08-060.png
  • Pied de page : c’est le menu situé dans le pied de page et dans lequel se trouve un lien vers la page de contact.

images/C08-061.png
  • Menu du compte de l’utilisateur : c’est le menu qui est affiché en haut à droite de l’écran et qui affiche les liens de gestion du profil de l’utilisateur connecté et de déconnexion.

images/C08-062.png

Attention, sachez que dès qu’un menu est créé...

Le bloc Propulsé par Drupal

Dans la région Cinquième pied de page, nous visualisons l’affichage du bloc Propulsé par Drupal

images/9-C08-046.png

Avec le thème par défaut Bartik, cette région s’affiche en bas des pages du site.

images/C08-068.png

 Dans la liste des blocs, pour le bloc Propulsé par Drupal, cliquez sur le bouton Configurer.

images/p203.png

Le lien que le bloc contient n’est pas configurable (il fait partie du cœur de Drupal), vous pouvez juste masquer le bloc en choisissant Retirer dans la liste des ACTIONS.

Le formulaire de contact

1. L’affichage du formulaire de contact

Toujours dans la région Cinquième pied de page, nous visualisons le bloc Menu Pied de page.

images/9-C08-046.png

Ce bloc affiche le menu Footer menu avec le lien Contact.

images/C08-071.png

Ce lien affiche un formulaire de contact :

images/new-122.png

 Dans la liste des blocs, dans la ligne du bloc Menu Pied de page, vous pouvez cliquer sur le bouton Configurer pour paramétrer ce bloc, comme nous l’avons fait maintes fois.

2. Modifier le menu du formulaire

Le bloc Menu Pied de page affiche le menu nommé Pied de page.

 Dans la barre des menus, choisissez le menu Structure, puis Menus.

 Dans la liste des menus, pour le menu Pied de page, cliquez sur le bouton Modifier le menu.

images/9-C08-048.png

Dans la liste LIEN DU MENU, vous visualisez le lien Contact qui est bien ACTIVÉ.

3. Modifier le formulaire

Les formulaires sont des contenus à part entière. Vous pouvez donc les gérer comme tel.

 Dans la barre des menus, choisissez le menu Structure, puis Formulaires de contact.

images/9-C08-049.png

 Dans la liste des formulaires, pour le formulaire Retours utilisateurs sur le site web, cliquez sur le bouton Modifier.

images/9-C08-050.png

 Dans le champ obligatoire Libellé, vous pouvez renommer ce formulaire.

images/9-C08-051.png

 Dans le champ obligatoire Destinataires, vous pouvez indiquer les adresses e-mails des personnes qui devront recevoir les mails envoyés par les visiteurs.

images/C08-077.png

 Dans le champ Message, vous pouvez saisir le texte...