Cours complet pour débuter avec Drupal étape par étape

Aller au Téléchargement

CRÉER SON

SITE AVEC

DRUPAL 8

Published : 2017-06-23 License : GPLv2+

INTRODUCTION

Drupal est un CMS (Content Management System ou système de gestion de contenu) pour publier un site web sur internet. Ce logiciel est sous licence libre, vous pouvez le télécharger, l'installer et l'utiliser librement et gratuitement.

Il existe de nombreux CMS (WordPress, PrestaShop, Joomla, Spip ), chacun étant spécialisé dans un domaine. La particularité de Drupal est sa grande stabilité et flexibilité : il répond très bien aux exigences des sites institutionnels ou marchands, aux montées en charges des sites communautaires ou proposant de nombreux contenus, mais aussi à la souplesse nécessaire des blogs et des intranets.

Les professionnels apprécient Drupal pour son installation rapide et sa configuration précise sans besoin d'écrire une ligne de code. De nombreux contributeurs proposent des extensions, libres également, permettant d'enrichir la puissance de Drupal. La communauté sur ce logiciel est vaste et internationale, des traductions dans de nombreuses langues sont proposées et il est facile de trouver de la documentation.

DRUPAL 8, NOUVELLE VERSION DU LOGICIEL

La sortie d'une nouvelle version officielle et stable est toujours un événement dans le milieu du logiciel. Drupal 8 est officiellement sorti en 2016 et tant qu'il s'appelera Drupal 8 connaîtra seulement des améliorations en stabilité et des corrections de fonctionnalités sans changement majeur.

Des changements significatifs ont été réalisés de la version 7 à la version 8 :

une mise à jour des fonctionnalités et des langages pour répondre aux exigences du web actuel : HTML5 et Responsive Design ; la personnalisation de l'affichage du contenu a été enrichie, certains modules font maintenant partie intégrante du coeur de Drupal ; la meilleure gestion d'un site multilingue ; la facilitation d'intégration de webdesign.

Note : Jusqu'ici, Drupal était basé sur son propre code PHP. Drupal 8 est quant à lui fondé sur le framework PHP Symfony. Le CMS a été totalement remanié pour cette nouvelle version.

POURQUOI CHOISIR DRUPAL 8 ?

Sur le marché, il existe de nombreux C.M.S. libres et gratuits jouissant d'une grande communauté de développeurs et d'utilisateurs. Drupal a la réputation d'être difficile à appréhender. Cette version de Drupal prouvera certainement le contraire. Après une installation simple et rapide, Drupal propose un site prêt à l'emploi avec de nombreux points personnalisables :

la création de pages simples pour accueillir le contenu statique la création d'articles pour offrir du contenu dynamique la modification d'une page contact déjà existante la création de différents utilisateurs avec des droits et des rôles personnalisables

la création de type de contenu calibré pour ses besoins et ceux de ses utilisateurs

le paramétrage précis des différents menus du site le placement des différents blocs qui composent le site

la possibilité d'enrichir Drupal avec de nombreux modules et thèmes

Comme tout projet web, il est plus facile d'appréhender un C.M.S. lorsqu'un projet a été clairement défini et est clair à l'esprit de son administrateur.

LE LIVRE CRÉER SON SITE WEB AVEC DRUPAL 8

Avec ce livre, vous découvrirez Drupal 8 et apprendrez à le prendre en main rapidement. Il n'est pas nécessaire de connaître déjà Drupal. Nous construirons ensemble un petit site d'exemple afin de rendre plus concret sa lecture : un site invitant au voyage pour les barroudeurs, proposant aux voyageurs indépendants de trouver un habitant offrant ses services de guides et permettant ainsi la découverte d'une ville hors des sentiers touristiques.

Cet ouvrage est destiné à tous ceux qui souhaitent découvrir ce C.M.S. sans jamais avoir osé prendre le temps de le faire. Que vous soyez simple curieux, professionnel du web ou amateur, vous découvrirez les fonctions essentielles du logiciel au moyen de 7 parties :

Introduction : pour comprendre pour quoi est fait Drupal. Installer : si vous souhaitez réaliser avec nous un petit site afin de mieux appréhender le logiciel, installez Drupal 8 sur votre ordinateur.

Commencer rapidement : pour faire le tour des fonctions essentielles nécessaires à la création d'un site très simple. Collaborer : pour inscrire des collaborateurs et vous aider dans la gestion de vos utilisateurs.

Personnaliser l'organisation : pour découvrir des fonctionnalités plus poussées de Drupal et l'affiner selon vos besoins. Enrichir : pour installer et configurer des extensions et des thèmes pour votre site.

Ajouter des fonctionnalités : un exemple de configuration et d'optimisation plus poussé afin de proposer un site multilingue. Sécuriser Drupal : le minimum nécessaire afin de protéger son site contre les cyberagressions quotidiennes.

À PROPOS

Ce livre a été initié durant la semaine du 21 mars 2016 par plusieurs auteurs dans le cadre d'une session de formation sur Drupal 8. Il a été écrit à plusieurs mains par :

Margaux Girard

Thibault Carmantrand

Cyprien Roudet

Elisa de Castro Guerra

Cédric Gémy

Ce livre a pour objectif de découvrir Drupal 8 en réalisant ensemble un site dédié aux voyageurs indépendants souhaitant découvrir une ville par l'intermédiaire d'habitants locaux amoureux de leurs pays. Ce projet est un prétexte pour évoquer les fonctionnalités importantes de Drupal 8, la flexibilité du logiciel et sa facilité de prise en main.

et Licence Creative Commons By SA, vous avez le droit de copier, distribuer et partager ce livre tout en citant les auteurs et également de remixer, transformer et enrichir ce livre, tout en citant les auteurs et en conservant ces licences.

EXEMPLES DE SITES AVEC DRUPAL

Grâce à sa grande modularité, de nombreux projets très différents ont opté pour Drupal.

SITE INSTITUTIONNEL

Le site de la maison blanche

SITE MAGAZINE

Le site du journal en ligne propose de nombreux articles d'actualités.

SITE COMMUNAUTAIRE

Le site communautaire pour les femmes et le bio, .

SITE CULTUREL

Le site très riche du musée du louvre comprenant de nombreuses images.

SITE MULTIPLE

Le site de twitter s'adressant aux développeurs est basé sur un Drupal et mêle de nombreuses facettes : l'aspect communautaire, gestion des utilisateurs, site vitrine et le tout très personnalisé graphiquement.

SITE E-COMMERCE

propose d'acheter des photos de nourriture.

SITE GRAPHIQUE

Pour le plaisir des yeux, chaque recette propose en plus une petite interactivité sympathique, le site .

INSTALLER DRUPAL 8

1.    TÉLÉCHARGER DRUPAL

2.    INSTALLER DRUPAL SUR UN SERVER

DISTANT

3.    INSTALLER DRUPAL SUR SON

ORDINATEUR

1. TÉLÉCHARGER DRUPAL

Drupal étant un projet communautaire, il est fréquent que les communauté linguistique se fédère autour de site internet parlant de Drupal et proposant de télécharger la dernière version comprenant la traduction du CMS de leur langue.

La communauté francophone propose un site de belle qualité que vous trouverez à l'adresse . Ce site peut être une référence rassurante où vous trouverez les dernières actualités autour du CMS et les dernières versions du logiciel.

Drupal France propose les téléchargement des deux branches, Drupal 7 et 8. Nous vous invitons à télécharger plutôt la branche 8.

2. INSTALLER DRUPAL SUR

UN SERVER DISTANT

3. INSTALLER DRUPAL SUR

SON ORDINATEUR

LINUX

Sous Linux, apache et le reste de l’environnement de développement est certainement déjà installé. Dans le cas contraire, il vous faudra un serveur web comme Apache et un serveur de Base de données comme Mysql.

Dans le cas de l’installation de votre drupal dans un alias configuré, il se pourrait qu’à la fin de l’installation, tout clic dans un menu d’administration n’abouttisse pas. Dans ce cas, il s’agit d’un mauvais conflit entre la configuration par défaut de drupal et de votre alias.

Vous pouvez alors

soit créer un virtualhost spécifique associé à un domaine particulie

soit modifier le fichier .htaccess placé par défaut à la racine de

Drupal et changez la directive RewriteBase /drupal en

RewriteBase /votrealias/drupal

WINDOWS

Télécharger Wampserver et l'installer :

WampServer permet de faire fonctionner localement des applications web, des sites internets en langage de script PHP. WampServer est une plateforme de développement Web comprenant

Apache2 : serveur http permettant de mettre en ligne un site internet (html, php)

MySQL : système de gestion de bases de données et utilise PHPMyAdmin pour gérer plus facilement les bases de données le langage de scripts PHP

Avant de commencer l'installation de Drupal 8

Créer la base de donnée drupal. Pour cela, taper dans l'url du navigateur : localhost/phpmyadmin/ ou à partir de Wampserver :

Dans WampServer, activer

De nombreuses erreurs sont liées à la durée maximum d’exécution ou au paramètrage d’OPCache 

COMMENCER L'INSTALLATION DE DRUPAL 8

Télécharger l'archive Drupal 8 et la décompresser dans le dossier /wamp/www/ créé par WampServer. Modifier le nom du dossier si vous le souhaitez.

Dans l'url de votre navigateur, taper localhost/nom_de_votre_dossier/

, s'affiche alors la page de début d'installation

 Choose language : Choisir la langue de Drupal, par défaut est en Anglais

 Si une autre langue a été choisi, cette page apparaît avec un problème concernant l'installation des traductions.

Le problème vient que le serveur des traductions est hors-ligne Pour cela, il faut installer directement le fichier de traduction dans le dossier translations. Vous trouverez les traductions sur cette page

Sélectionner la langue voulue

Dans le sous onglet Overview, sélection le Drupal Core correspondant, dans ce cas présent, choississer la version 8.0.1beta2, télécharger le fichier et le placer dans le dossier des traductions sites/default/files/translations/.

Retourner ensuite sur la page d'installation de Drupal, Réessayer à nouveau en cliquant sur try again.  Choisir un profil d'installation

Drupal vérifie ensuite les pré-requis c'est-à-dire les bonnes versions de Apache, PHP, etc.

Cliquer sur le bouton Wampserver>php>

Comme Drupal installe toutes les traductions, modifier dans le fichier , la ligne suivante max_execution_time = 120 par max_execution_time = 600

Repérer ensuite dans le même fichier, la partie xdebug et ajouter cette ligne xdebug.max_nesting_level=256

Configuration de la base de données

La base de données a été crée lors de la création de l'utilisateur, la base de données s'intitule Drupal dans notre cas.

L'installation de Drupal démarre

Puis ensuite, Drupal installe les traductions, le temps d'installation peut être assez longs, cela dépend des performances de votre ordinateur.

Viens ensuite la configuration du site. Un message de succès des traductions s'affiche et un message d'erreur mais ne posera pas de problème après.

Remplisser les champs et enregistrer et continuer.

Mise à jour de la configuration des traductions qui finalise l'installation de Drupal 8.

Vous arrivez sur la page d'accueil de votre site.

MAC

COMMENCER RAPIDEMENT

4.    DÉCOUVRIR L'INTERFACE DE DRUPAL

8

5.    CRÉER SES PREMIÈRES PAGES

6.    CRÉER SES PREMIERS ARTICLES

7.    STYLER SON TEXTE AVEC L'ÉDITEUR

VISUEL

8.    AJOUTER UNE IMAGE À UN ARTICLE

9.    MODIFIER UN ARTICLE RAPIDEMENT

10.   CRÉER SON MENU

11.   METTRE EN ÉVIDENCE SON

FORMULAIRE DE CONTACT

12.   POSITIONNER LES BLOCS

4. DÉCOUVRIR L'INTERFACE

DE DRUPAL 8

Avec votre navigateur internet et l'url du site internet, vous accédez au site publique, celui que tout internaute verra.

Le site est encore vide. Pour commencer à le remplir, rendez-vous dans l'administration de Drupal, en cliquant sur Se connecter, en haut à droite.

Pour accéder à l'administration, insérez votre Nom d'utilisateur et votre mot de passe. Vous voyez maintenant la page d'accueil de votre site internet mais avec un menu horizontal  supplémentaire : cer dernier est dédié à l'administration de Drupal.

L'utilisation de ce menu est indispensable pour réaliser et publier votre site.

ORGANISATION DE L'ADMINISTRATION DE DRUPAL

De manière générale, vous devrez systématiquement passer par ce menu d'administration.

Chaque action entraînera l'affichage d'options configurables organisées sous forme d'onglets.

Chaque onglet affiche des cases à cocher, des champs à remplir et/ou des bouton à cliquer. Afin de ne rien oublier, n'hésitez pas à réaliser les étapes dans l'ordre, onglet par onglet.

Le reste du livre vous guidera dans les principaux menus et options utiles pour réaliser un petit site simple et fonctionnel. Libre à vous d'explorer Drupal plus en profondeur.

5. CRÉER SES PREMIÈRES

PAGES

Un site internet présente du contenu à ses internautes. Ce contenu est organisé en plusieurs pages web accessibles via un menu de navigation. Pour prendre en main rapidement Drupal, nous allons créer ensemble un site web dédié aux voyageurs qui souhaitent découvrir une ville avec l'aide d'habitants proposant leurs services en tant que guides. Commençons par réaliser quelques pages web ensemble.

Rendez-vous dans l'administration de Drupal pour accéder à la création de vos pages web. Drupal regroupe sous le terme _contenu les différentes informations que vous souhaitez publier sur le site.

AJOUTER DU CONTENU

Pour l'instant le site est complètement vide, il est nécessaire de créer une première page. Dans le menu _Contenu, cliquez sur le bouton Ajouter du contenu. Une page intermédiaire s'affiche pour choisir le type de contenu que vous souhaitez créer.

CHOISIR LE TYPE DE CONTENUS

Une page s'affiche présentant les différents types de contenu disponibles.

Pour commencer, deux choix sont disponibles : Article et Page de base.

Article : destiné à accueillir du contenu nouveau et attrayant, il s'agit d'un type de contenu souvent utilisé. Il autorise les commentaires et se présente dans l'ordre antéchronologique (du plus récent au plus ancien).

Page de base : destiné à accueillir des pages web qui ne sont destinées ni à à être mises à jour régulièrement, ni à accueillir du contenu dynamique, ni à être commentées. Concrètement, de nombreux utilisateurs utilisent ce type de contenu pour les pages définitives comme les pages À propos et Mentions légales de leur site internet.

Note : C'est ici également que vous créerez votre propre type de contenu personnalisé, illustré dans le reste de cet ouvrage.

Pour commencer, cliquez sur le type de contenu Page de base pour créer la célèbre page A propos.

CRÉER LA PAGE A PROPOS

Tous les sites internet ont une page À propos, une page de mentions légales, et des conditions générales d'utilisation et/ou de ventes selon l'activité du site web. Ces pages n'ont pas vocation à être mise à jour régulièrement, ni à accueillir du contenu nécessitant d'être dynamique ou appelant à être commenté par une communauté de fan.

Dans Créer un type de contenu, après avoir cliqué sur Page de base, vous êtes basculé sur le formulaire de création de contenu.

Validez en cliquant sur Enregistrer et publié. Drupal affiche d'emblée le résultat sur le site public.

Les chapitres Styler son texte avec l'éditeur visuel et Ajouter une image à un article expliquent comment enrichir le texte.

6. CRÉER SES PREMIERS

ARTICLES

Les articles ont la particularité de s'afficher en page d'accueil par ordre inversé de date de publication. Ce système est propre aux blogs qui présentent les articles les plus récents en premier, il s'agit d'un ordre antéchronologique. L'autre particularité des articles est qu'ils peuvent accueillir des commentaires postés par les internautes.

Ce chapitre présente comment rédiger un article, cela diffère peu des pages de base mais c'est l'occasion de présenter petit à petit d'autres fonctionnalités de Drupal.

De la même façon que les pages de base, la création d'articles passe par l'administration du site, dans la rubrique Contenu > Type de contenu > article.

Drupal bascule vers la création de l'article.

CRÉER UN ARTICLE

Après cette première sélection, s'affiche alors la page Créer Article. Plusieurs champs attendent d'être remplis :

1.    _Titre : indiquez le titre de l'article.

2.    _{Modifier le résumé} : Si vous souhaitez écrire une accroche, cliquez sur ce lien. Un nouveau champ intitulé Résumé apparaît alors. Si vous le remplissez, seule l'accroche sera visible en page d'accueil et dans la liste des articles, sinon c'est le début du contenu de l'article qui sera affiché.

3.    _Corps : écrivez ici le contenu de l'article

4.    Étiquettes : Associez des mots-clés à l'article. Séparez-les par des virgules.

Après avoir entré quelques mots-clés, Drupal les propose dans une liste déroulante fin de s'assurer de l'homogénéité de son é ne risquez donc pas d'écrire une fois le terme Culture et une autre fois cultures.

5.    _Image : importez une image qui représente l'article. Cette image s'affiche en haut à gauche du texte de l'article dans le thème par défaut. Pensez également à renseigner le texte alternatif des images !

Cela permet aux malvoyants de connaître ce message, alors qu'il ne voient pas l'image, mais aussi à tous ceux qui ont un débit trop lent pour voir l'image rapidement de savoir que représente l'image avant qu'elle ne s'affiche.

6.    Terminez en cliqunt sur _{Enregistrer et publier}.

L'article est alors validé et vous êtes redirigés sur la page de l'article.

7. STYLER SON TEXTE AVEC

L'ÉDITEUR VISUEL

Vous souhaitez enrichir le contenu de votre article ? Il est possible d'activer des outils pour formater le texte lorsque vous l'éditez. En dessous du champ Corps, un menu déroulant est présent après Format de texte. Il s'agit du moyen pour activer divers outils de formatage du texte.

Améliorez maintenant votre article avec le formatage de votre choix, par exemple en mettant en gras le nom de la ville.

Il est également possible de mettre une partie du texte en italique en

utilisant le bouton  de l'éditeur visuel.

Créez maintenant un lien sur le nom du pays Espagne :

1.    Sélectionnez le nom du pays où le lien sera créé.

2.    Cliquez sur le bouton . Un dialogue s'ouvre pour renseigner l'url du lien. Insérez une adresse url comme par exemple

Le nom Espagne dans l'éditeur est maintenant en couleur et souligné en pointillés, cela signifie que le nom est bien un lien.

 Une fois l'article terminé, cliquez sur Enregistrer et publier. Drupal affiche automatiquement l'article publié sur le site afin d'admirer le résultat. Si quelque chose ne va pas, cliquez sur l'onglet _Modifier pour retourner dans l'administration et corriger l'article.

8. AJOUTER UNE IMAGE À UN ARTICLE

Une page web est plus agréable à lire lorsque le texte est illustré. Vous pouvez insérer une image directement dans l'article et l'habiller de texte ou représenter une article avec une image.

INSÉRER UNE IMAGE DANS UN ARTICLE

Grâce aux éditeurs HTML simple et HTML complet, l'ajout d'image se

fait directement dans la page de l'article grâce au bouton Image situé dans la barre d'outils. Placez le curseur là où vous souhaitez insérer l'image et laissez vous guider par le dialogue.

1.    Le bouton Parcourir vous renverra dans votre explorateur de fichiers. Indiquez-lui où se trouve l'image sur votre disque dur.

2.    _{Texte alternatif} : pour entrer une description courte dans le cas où l'image ne s'affiche pas.

3.    _Aligner : pour placer l'image plutôt à gauche, à droite, au centre ou aucun (et laisser la gestion de la position par le design du site).

4.    _Légende : si vous cochez cette option, un champ s'affichera au bas de l'image, vous pouvez alors y entrer la légende de l'image en question.

5.    _Enregistrer : termine et valide l'insertion de l'image.

L'image insérée s'affiche immédiatement dans l'éditeur.

L'image peut être déplacée et agrandie manuellement grâce aux poignées en haut à gauche et en bas à droite qui apparaissent au survol de l'image.

REPRÉSENTER UN ARTICLE PAR UNE IMAGE

La tendance actuelle des sites web est d'associer un article  à une image. Tantôt le titre de l'article et l'image apparaissent, tantôt seul le titre ou l'image sera présent. Pour qu'une image symbolise l'article, il faut utiliser le dernier champ de la page Créer Article, intitulé _Image.

1.    Un bouton Parcourir est présent, cliquez dessus.

2.    Cherchez votre image sur votre disque dur

3.    Validez. L'image s'affiche immédiatement dans l'éditeur.

4.    N'oubliez pas de renseigner le texte alternatif

Lorsque l'article est prêt, cliquez sur Enregistrer et publier. Drupal bascule vers la nouvelle page du site.

9. MODIFIER UN ARTICLE

RAPIDEMENT

Depuis la page de l'article publié, et tant que vous êtes connecté en tant qu'administrateur, vous voyez 3 onglets au-dessus du titre de attention, le dernier onglet Supprimer efface l'article. Une confirmation est nécessaire. Heureusement car cette action est irréversible.

Drupal propose deux manières de modifier un article :

Via l'onglet Modifier au dessus de l'article

Ou directement dans l'article. Lors du survol de l'article avec la souris, une icône crayon apparraît à droite du contenu. En cliquant dessus, il y a l'option édition rapide. Des blocs de couleur bleue s'affichent pour vous indiquer les différentes zones d'édition.

En cliquant sur un des blocs, l'éditeur apparaît, la modification de l'article peut alors se faire directement. Avant d'en sortir, enregistrez les modifications.

10. CRÉER SON MENU

Des articles ont été créés et ajoutés au site dans les chapitres précédents. Afin que l'internaute puisse visiter toutes les pages créé précédemment, il est judicieux de lui offrir la possibilité de naviguer dans le site au travers d'un menu de navigation. Le menu de navigation principal contient habituellement tous les liens vers les articles et pages principales. Cette partie explique comment :

organiser un menu de navigation ; ordonner les liens du menu ; afficher ou supprimer un lien dans le menu ; ajouter un lien externe.

LES DIFFÉRENTS TYPES DE MENU

Avant d'organiser son menu de navigation principale, il faut comprendre le principe des menus dans Drupal. Par défaut, il présente plusieurs menus qui seront détaillés ci-dessous.

Ces différents types de menus se trouvent dans le menu Structure > Menus. Cette page s'affiche la liste de tous les menus présents dans drupal.

ORGANISER SON MENU DE NAVIGATION PRINCIPAL

depuis le formulaire d'édition de contenu ; en créant directement un lien dans le menu.

Créer le lien du menu depuis l'article

Pour voir apparaître le lien de l'article nouvellement créé dans le menu de navigation du site, l'article doit fournir au menu un lien. Le lien du menu d'une page est paramétré directement au moment dde l'édition de cette page. Sur la page d'ajout d'un contenu se trouve une zone à droite de l'éditeur de texte. Cette zone permet, dans l'onglet Paramètres du menu, de créer directement un lien pointant vers le contenu dans le menu principal.

Lorsque l'option Fournir un lien de menu est cochée, de nouvelles options apparaissent :

Titre du lien dans le menu : définir le titre du lien tel qu'il

s'affichera dans le menu de navigation ;

Description : renseigner une description qui s'affichera dans une bulle d'aide au survol du lien (facultatif) ;

Élément parent : préciser l'élément parent du lien s'il en a un. Si le lien est à placer directement dans le menu de navigation, l'élément parent sera <navigation principale> (par défaut). Poids : positionner le lien du menu par rapport aux autres. Si la valeur du poids du lien est plus petite que celle des autres liens du menu, alors le lien se positionnera tout à gauche dans le menu de navigation.

Les articles possédant un lien de menu s'afficheront automatiquement dans le menu de navigation.

Créer un lien de menu directement

Lors de la réalisation d'un site internet, il est fréquent de s'appuyer sur des documents de travail sur lesquels le menu est présent et contient des liens. Avec Drupal, il est possible de créer un menu de navigation, sans que la page web existe au préalable. Le premier exemple ci-dessous montre comment ajouter un lien vers une page externe :

Dans Structure, cliquez sur Menus puis sur le bouton Modifier le menu de la ligne Navigation principale. L'objectif n'est pas de modifier cette page mais de rajouter un lien à la navigation principale. Cliquez sur le bouton Ajouter un lien.

Le lien externe nouvellement créé est alors visible sur le site. Par défaut le lien s'est placé en dernière position mais il sera possible de le déplacer, ce sujet sera vu dans le chapitre suivant.

ORGANISER SON MENU DE NAVIGATION

Fournir le lien de menu pour chaque article permet seulement de les afficher et non de les placer selon le choix de l'utilisateur, il peut être bon de pouvoir les ré-ordonner pour optimiser la navigation des internautes. Pour organiser le menu principal du site, aller dans Structure > Menus puis cliquer sur  Modifier le menu sur la ligne Navigation principale. Sur cette page, les liens des articles précédemment créés sont listés ainsi que le lien Accueil qui est présent par défaut.

Du côté du site public, cet agencement est confirmé :

Réordonner les liens du menu

Les liens du menu s'affichent habituellement dans l'ordre de leur création. Néanmoins, il est possible de modifier l'ordre des liens du menu en faisant un glisser/déposer avec l'icone . De cette manière, il devient aisé de réorganiser son menu de navigation. Ne pas oublier d'enregister les modifications après la réorganisation du menu.

Activer ou désactiver un lien du menu

Le menu du lien peut être activé ou désactivé c'est-à-dire que si le lien est désactivé, il ne s'affichera pas dans le menu du site. Pour cela il suffit de décocher la case _Activé. Par exemple, décocher la case _activé du lien Accueil enlèvera le lien Accueil du menu, la case peut être recochée à tout moment si nécessaire.

Note : Le fait d'avoir désactiver le lien Accueil du menu enlève le lien visuel dans le menu mais ajoute quand même en dessous du menu un lien Accueil qui correspond au fil d'Ariane. Ce fil d'Ariane renseigne aux utilisateurs le chemin parcouru depuis la page d'accueil du site.

Modifier un lien du menu

Un lien de menu peut être modifié. Pour cela, cliquez sur le bouton _Modifiercorrespondant au lien, s'affiche alors la même page que dans la partie Ajouter un lien de menumais avec les informations déjà introduites. Cliquez sur le bouton Enregistrer pour sauvegarder les modifications.

Supprimer un lien du menu

Pour supprimer le lien du menu, en bas de la page à côté du bouton

Enregistrer, il y a un lien Supprimer qui supprimera automatiquement le lien du menu.

Un message d'avertissement s'affiche pour confirmer la suppression du lien. Cette action est irréversible.

11. METTRE EN ÉVIDENCE

SON FORMULAIRE DE CONTACT

Sous Drupal 8, le formulaire de contact est déjà installé et présent sur la page du site. En effet, en bas de la page du site, le lien Contact est présent. Cliquer dessus redirigera vers le formulaire de contact.

LE FORMULAIRE DE CONTACT

Le formulaire de contact se présente de cette manière :

MODIFIER LA CONFIGURATION DU FORMULAIRE

Les informations affichées par le formulaire de contact sont modifiables. Pour cela, allez dans le menu Structure et cliquez sur Contact forms qui permet de personnaliser des formulaires de contact.

Pour modifier la configuration du formulaire, cliquez sur le boutonModifierdu formulaire Retours utilisateurs sur le site web. Ici le champs _Étiquette a été remplacé par Votre avis sur le site nous intéresse !

Une fois la configuration du formulaire de contact terminée, retournez voir les modifications apportées au formulaire dans la page Contact.

POSITIONNER LE LIEN CONTACT DANS LE MENU

Ce formulaire est accessible uniquement depuis le pied de page. Pour optimiser son accessibilité, l'idéal serait de le placer également dans le menu de navigation principale. Il faut donc agir sur les menus.

1.    Dans l'administration du site, cliquez sur l'onglet _Structure puis sur Menus.

La liste de tous les liens du menu s'affiche.

2.    Pour ajouter le lien Contact dans le menu, créez un nouveau lien en cliquant sur Ajouter un lien.

Sur cette page, remplir les champs suivants :

Titre du lien dans le menu : titre qui s'affiche dans le menu, ici Contact

Lien : /contact, le lien doit commencer par un /, sinon Drupal signalera une erreur dans l'écriture du lien. Enregistrer :  pour valider l'action. 

Le lien Contact est maintenant présent dans le menu de navigation du site. Il est possible de créer d'autres formulaires de contact en allant dans l'onglet Structure/Contact forms et en cliquant sur Ajouter un formulaire de contact.

Pour modifier ou ajouter des champs dans le formulaire de contact, se référer au chapitre Les champs avec Drupal.

12. POSITIONNER LES

BLOCS

Un bloc est une boîte qui permet d’afficher des informations aux internautes. Sur le site, des blocs sont déjà affichés comme par exemple la barre de recherche du site, le bloc _outils ou bien encore le message "Propulsé par Drupal" présent dans le pied de page. Ce chapitre sera consacré à la mise en page des blocs dans les différentes régions du site. Pour Drupal, une région représente une zone du site. Le bloc barre de recherche, par exemple, est positionné dans la région intitulée barre latérale gauche (sidebar first).

MISE EN PAGE DES BLOCS

En tant qu'administrateur, se rendre dans le menu _Structure et cliquer sur la partie Mise en page des blocs. Cette partie permet de positionner les bloc dans les barres latérales ou les autres régions du site.

Afin de positionner les blocs dans les régions désirées, il est plus confortable de connaître les différentes régions du thème. En effet, chaque thème possède ses propres zones pour accueillir les blocs.

Pour cela, le lien Aperçu des régions des blocs (Bartik) permet de visualiser les régions, ce qui permettra par la suite de placer les blocs. Bartik, ici, est le thème par défaut dans Drupal 8.

Note : Lisez le chapitre Modifier l'apparence de Drupal 8 pour en savoir plus sur les thèmes.

 Les régions s'affichent sous forme de blocs jaunes. Citons quelques exemples :

La région Sidebar first correspond à la barre latérale gauche du site où sont placés par défaut les blocs Rechercher et Outils ; La région Contenuaccueille le_{contenu principal} de la page ;

Primary menu représente le _{menu de navigation principale}du site ;

Le région Footer fifth contient les blocs du menu Pied de page (actuellement le lien Contact et le bloc _{Propulsé par Drupal}) .

ORGANISER SES BLOCS

Toujours sur la page Structure > Mise en page des blocs, les différentes régions sont listées les unes en dessous des autres, contenant chacune leurs blocs respectifs.

Déplacer un bloc existant

Il est possible de déplacer un bloc d'une région à une autre en faisant un glisser/déposer avec l'icone  ou en sélectionnant la région voulue dans la liste déroulante associée au bloc.

Dans l'exemple ci-dessous, le bloc Rechercher a été glissé dans la région Entête.

N'oubliez pas d'enregistrer pour confirmer le changement, puis admirez le résultat sur le site.

 Le bloc Rechercher n'apparaît plus dans la région Sidebar first mais maintenant dans la région Entête.

Placer un bloc existant

Voici une autre façon de faire. Il est possible d'utiliser le bouton _Placer le bloc pour insérer un bloc dans une région. Un dialogue contenant tous les blocs disponibles s'affiche alors. N'hésitez pas à utiliser le filtre pour retrouver rapidement le votre. Une fois le bloc repéré, cliquez sur Positionner le bloc.

L'exemple ci-dessous indique comment positionner le bloc Commentaires récents dans la région Sidebar First pour que les internautes voient d'emblée les derniers commentaires postés :

1.    Dans la région Sidebar first, cliquez sur le bouton Placer le dialogue (pop-up) apparaît où sont listés tous les blocs.

2.    Repérez le bloc _{commentaires récents} et cliquez sur le bouton Positionner le bloc correspondant ;

3.    Un autre dialogue _{Configurer le bloc} s'ouvre pour configurer le bloc commentaires récents.

Description du bloc : le titre peut être affiché sur le site public ou non, simplement en cochant/décochant cette

Dorénavant, le bloc Commentaires récents s'affiche dans la liste de la région Sidebar first. Il n'est pas nécessaire de cliquer un nouvelle fois sur le bouton Enregistrer le bloc dans la page Mise en page des blocs, l'enregistrement s'effectue automatiquement quand le bouton Enregistrer le bloc du dialogue Configurer un bloc est cliqué.

 Le site public affiche bien le bloc Commentaires récents dans la colonne de gauche.

SUPPRIMER UN BLOC

Pour supprimer un bloc, 2 manières sont possibles. Pour l'exemple, le bloc Propulsé par Drupalprésent en pied de page du site sera supprimé.

depuis la page d'accueil : Au survol du bloc Propulsé par Drupal, l'icone crayon apparaît. Cliquez dessus puis sur Configurer le bloc.

Tout en bas de la page de configuration du bloc, il y a un lien

Supprimer. Cliquez dessus, un message de confirmation s'affiche. Cliquez sur le bouton _Supprimer pour confirmer la suppression, sinon cliquez sur le bouton _Annuler pour annuler l'action. Bien entendu, il sera possible de replacer le bloc dans la région Footer fifth en procédant de la même manière que dans la partie Positionner un bloc.

Il est aussi possible de supprimer un bloc depuis la page _{Mise en} page des blocs : Chaque bloc possède un bouton Configurer. Cliquez sur la flèche à côté du bouton, un bouton Supprimer apparaît, cliquez dessus, un message de confirmation s'affiche. Cliquez sur Supprimer pour confirmer la suppression du bloc.

Si l'on ne veut pas que le bloc Propulsé par Drupal soit définitivement supprimé, celui-ci peut être seulement désactivé. Pour cela, toujours dans la page Mise en page des blocs, en bas de page se trouve une partie Désactivé(e)s, il suffit de déplacer le blocdans cette partie. N'oubliez pas d'enregistrer les modifications.

Le bloc est alors supprimé, il ne se trouve plus dans la région Footer fifth et ne s'affiche plus sur le site.

COLLABORER

13.   CRÉER DES UTILISATEURS

14.   GÉRER SES UTILISATEURS

15.   MODÉRER LES ACTIONS DES

UTILISATEURS

13. CRÉER DES

UTILISATEURS

Le site sera utilisé par plusieurs personnes. Il faut donc pouvoir ajouter de nouveaux utilisateurs. En guise d'exemple, un utilisateur nommé Gwenaël sera créé et ensuite nous expliquerons comment les internautes pourront s'enregistrer.

CRÉER UN COMPTE EN TANT QU'ADMINISTRATEUR

L'administrateur du site a la possiblité de créer lui-même de nouveaux comptes :

1.    Dans le menu d'administration, se rendre dans le menu

Personnes.

2.    Cliquer sur _{Ajouter un utilisateur}.

Un formulaire s'affiche alors. Les champs dont l'intitulé se termine par une astérisque rouge sont obligatoires. Remplissons-les :

Adresse de courriel :

Nom d'utilisateur (Username) : Gwenaël

Mot de passe : gwenael

Confirmer le mot de passe : gwenael

Les options Status et Rôles ont déjà des valeurs par défaut : le compte de Gwenaël est actif (Active), et son rôle est Utilisateur authentifié.

Image : ce champ est facultatif, il permet d'ajouter une photo de profil à Gwenaël. Laissons-le vide.

Une fois ces informations remplies, cliquer sur Créer un nouveau compte à la fin du formulaire.

L'utilisateur Gwenaël a bien été créé. Il pourra maintenant se connecter grâce à son identifiant (renseigné dans le champs _Nom d'utilisateur) et son mot de passe.

C'est très bien, mais créer des utilisateurs de cette manière n'est pas très fréquent. En général, lorsqu'une personne se rend sur un site et qu'elle souhaite s'y inscrire, c'est à elle de remplir ce formulaire et non à un administrateur. Par défaut, tous les visiteurs peuvent créer un compte, mais l'approbation d'un administrateur est requise. Pour qu'un administrateur n'ait pas besoin de confirmer l'inscription des visiteurs, il doit autoriser les utilisateurs anonymes à se créer un compte.

AUTORISER TOUT LE MONDE À SE CRÉER UN COMPTE

Pour autoriser un utilisateur anonyme à créer un nouveau compte sans l'approbation d'un administrateur :

1.    Dans le menu d'administration, se rendre dans le menu

Configuration.

2.    Dans la section Personnes, cliquer sur Paramètres de compte.

3.    Dans la partie Inscription et annulation, à la question Qui peut enregistrer des comptes ?, 3 options sont proposées. Par défaut, c'est l'option Les visiteurs, mais l'approbation d'un administrateur est requise qui est activée. Sélectionner l'option _Visiteurs suffit pour créer un compte sans l'approbation de l'administrateur.

4.    Cliquer sur _{Enregistrer la configuration}, tout en bas de la page.

Note : Si l'optionLes visiteurs, mais l'approbation d'un administrateur est requise est active, ce dernier pourra approuver les comptes en attente en se rendant dans le menuPersonnes. Comme pour l'approbation de contenu, il lui faut sélectionner les comptes en attente d'approbation puis choisir l'optionDébloquer les utilisateurs sélectionnés dans la liste déroulantePour cette sélection.

Les internautes peuvent maintenant créer un nouveau compte à partir du site, et ce sans attendre que leur compte soit validé par un administrateur.

LA VÉRIFICATION DU COURRIEL

Sur le site, par défaut, la vérification du courriel est activée. C'est à dire qu'un utilisateur, après avoir créé son compte, recevra un email dans lequel il devra cliquer sur un lien de vérification le renvoyant vers votre site. Une fois qu'il aura cliqué sur ce lien, nous aurons la certitude que son adresse mail est bien la sienne. Ce lien le redirigera vers une page dans laquelle il pourra définir son mot de passe. Une fois son mot de passe créé, il pourra s'authentifier.

Il est possible de désactiver la vérification de courriel, pour cela :

1.    Dans le menu _{Configuration}, dans la section _Personnes, cliquer sur

Paramètres de compte.

2.    Dans la partie _{INSCRIPTION ET ANNULATION}, décocher l'option

Nécessiter la vérification du courriel lorsqu'un visiteur crée un compte.

14. GÉRER SES

UTILISATEURS

La gestion des droits est fondamental pour le bon fonctionnement du site. En effet, cette fonctionnalité définit les actions possibles pour tel ou tel type d'utilisateur. Par exemple, un utilisateur anonyme peut ne pas avoir le droit de déposer un commentaire sur article, alors que les utilisateurs authentifiés auront ce droit. L'administrateur du site, quant à lui, a tous les droits.

Pour illustrer cette fonctionnalité, un nouveau rôle : "guide" sera créé. Un guide est un utilisateur authentifié, mais il a des droits supplémentaires comme ajouter du contenu, modifier son propre contenu, le supprimer.

Ensuite, nous verrons comment l'administrateur peut attribuer un rôle à un type d'utilisateur.

Note : Un rôle est pour ainsi dire un nouveau type d'utilisateur. Ici, le guide créé étant obligatoirement authentifié, il hérite par conséquent de tous les droits offerts aux utilisateurs authentifiés.

CRÉER UN RÔLE

Pour créer un nouveau rôle, dans le menu d'administration, se rendre dans Personnes.

1.    Aller dans l'onglet _Rôles. Trois rôles existent déjà : Utilisateur anonyme, utilisateur authentifié et administrateur.

2.    Cliquer sur _{Ajouter un rôle}.

3.    Un champ se présente : nommer le nom d'un nouveau rôle. Appeller-le "Guide", puis enregistrer.

Après la création du rôle, vous êtes directement redirigés dans l'onglets Rôles du menu Personnes. Dans la liste des rôles, le nouveau rôle Guide a bien été ajouté.

GÉRER LES DROITS

À ce stade, le rôle Guide existe, mais il ne dispose d'aucun droits supplémentaires par rapport aux utilisateurs authentifiés. Or il doit pouvoir ajouter du contenu, le modifier et le supprimer.

1.    Toujours dans le menu _Personnes, aller dans l'onglet _Droits. La liste des différents droits est affichées, ainsi que celle des différents rôles. Pour chaque rôle, les droits correspondants sont cochés. Le guide dispose en effet des mêmes droits qu'un utilisateur authentifié.

2.    Dans la section Node, le droit Article : Créer un nouveau contenu est activé uniquement pour l'administrateur. Cocher la case correspondant à la colonne du rôle Guide.

3.    Un guide doit pouvoir modifier et supprimer du contenu, mais uniquement le sien. Activer pour le guide les droits Article

: Supprimer son propre contenu et Article : Modifier son propre contenu.

4.    En bas de la page cliquer sur _{Enregistrer les droits d'accès}.

ATTRIBUER UN RÔLE À UNE PERSONNE

Le rôle Guide est créé et configuré, il faut maintenant pouvoir l'attribuer à certains utilisateurs.

Pour l'exemple, l'utilisateur Gwenaël créé précédemment aura pour rôle : Guide.

1.    En tant qu'administrateur, se rendre dans le menu Personnes.

2.    Dans la liste des utilisateurs, cliquer sur le bouton _Modifier correspondant à l'utilisateur Gwenaël.

3.    Une section Rôles est présente : Gwenaël a, par défaut, le rôle Utilisateur authentifié. Il suffit de cocher le rôle _Guidepour l'attribuer à Gwenaël.

4.    Enfin, cliquer sur Enregistrer en bas de la page pour sauvegarder les changements.

Désormais, lorsque Gwenaël se connectera, il aura la possibilité d'ajouter de nouveaux articles ainsi que de modifier et supprimer ceux qu'il aura déjà créés.

15. MODÉRER LES ACTIONS

DES UTILISATEURS

Il semble très important, lorsque plusieurs utilisateurs peuvent se connecter sur votre site, d'avoir la possibilité de modérer leurs actions. En effet, certains commentaires peuvent être insultants, hors-sujet ou tout simplement non désirés car ajoutés lors d'une phase de test. Il en va de même pour le contenu : Gwenaël a le droit d'ajouter de nouveaux articles, mais il ne doit pas parler de n'importe quoi. C'est le rôle de l'administrateur de gérer ces débordements. L'objectif de ce chapitre est de montrer comment l'administrateur (ou tout autre Rôle ayant les droits requis pour ces actions) peut supprimer des commentaires et autoriser la publication de contenu.

MODÉRER LES COMMENTAIRES

L'administrateur peut, lorsqu'il est sur une page de contenu comportant des commentaires, modifier ou supprimer ces derniers :

1.    Se connecter en tant que Gwenaël , et ajouter un commentaire sur l'article Dakar.

2.    En tant qu'administrateur, se rendre sur l'article commenté par Gwenaël. Dans la section Commentaires, pour chaque commentaire, l'administrateur a accès à 2 boutons supplémentaires par rapports aux utilisateurs authentifiés : Supprimer et Modifier. Il peut ainsi, comme leur nom l'indique, modifier ou supprimer des commentaires.

Note : Il est possible d'autoriser les utilisateurs anonymes à poster des commentaires. Pour ceci, il suffit de se rendre dans l'onglet_Droits du menuPersonnes, et d'activerPoster des commentaires pour l'utilisateur anonyme.

L'approbation des commentaires

Le droit Sauter l'approbation des commentaires, s'il est désactivé (ce n'est pas le cas par défaut pour les utilisateurs authentifiés), empêche la publication des commentaires tant qu'ils n'ont pas été approuvés par un administrateur. Les utilisateurs concernés pourront alors poster des commentaires, mais ces derniers ne seront publiés qu'à partir du moment où un administrateur les aura approuvé.

Lorsqu'un administrateur se rend sur la page d'un article, les commentaires en attente d'approbation sont colorés en fond rouge clair. Un bouton _Approuver apparaît en plus de ceux déjà présents. Il suffit de cliquer dessus afin que le commentaire soit validé et publié sur le site.

Note : Pour autoriser d'autres utilisateurs à modérer les commentaires, il faut leur donner le droitCommentaire : Administrer l'affichage.

MODÉRER LE CONTENU

L'administration du contenu se déroule de la même manière que celle des commentaires : lorsqu'un administrateur se rend sur une page de contenu, il a la possibilité de la modifier ou de la supprimer, et ce peu importe l'auteur de la page.

Note : Le droitAdministrer le contenu permet aux utilisateurs le possédant de modifier et de supprimer le contenu posté par tout autre utilisateur.

L'approbation du contenu

Par défaut, lorsqu'un utilisateur crée un nouveau contenu, celui-ci est directement publié sur le site. Pour les mêmes raisons que les commentaires, ce comportement peut être indésirable. Dans ce cas, Gwenaël doit pouvoir créer un article qui ne sera publié qu'une fois approuvé par un administrateur.

1.    Dans le menu d'administration, se rendre dans le menu

Structure, puis dans Types de contenu.

2.    Cliquer sur la liste déroulante correspondante au type de contenu Article puis sélectionner Modifier.

3.    Se rendre dans l'onglet _{Options de publication}.

4.    L'option _Publié est active par défaut. Pour que les contenus de Gwenaël ne soient pas publiés avant d'être approuvés, il suffit de décocher cette option puis d'Enregistrer le type de contenu.

Désormais, Gwenaël peut écrire un article mais ne sera pas automatiquement pubié. En effet, si l'on se rend sur l'accueil, l'article n'apparaîtra pas.

Pour qu'un article en attente soit publié :

1.    En tant qu'administrateur, se rendre dans le menu _Contenu.

2.    Dans la liste des contenus, l'article en attente est en statut Unpublished. Cocher la case tout à gauche correspondante à l'article.

3.    Dans la liste déroulante Pour cette sélection, sélectionner Publier ce contenu.

4.    Cliquer sur _Appliquer pour confirmer.

Sur l'accueil, l'article est maintenant affiché.

PERSONNALISER L'ORGANISATION DE DRUPAL 8

16.   PRINCIPE D'ORGANISATION DU

CONTENU AVEC DRUPAL 8

17.   LES CHAMPS AVEC DRUPAL

18.   TAXONOMIE

19.   PARAMÉTRER LE CONTENU EN

COURS D'ÉDITION

20.   LES BLOCS PERSONNALISÉS

21.   ORGANISER SES DONNÉES

16. PRINCIPE

D'ORGANISATION DU CONTENU AVEC DRUPAL 8

rédiger intro

LES CHAMPS LA TAXONOMIE

17. LES CHAMPS AVEC

DRUPAL

Lorsqu'un utilisateur souhaite ajouter un nouvel article, seuls quelques champs de formulaires lui sont présentés. Il est possible de personnaliser ces champs : en ajouter, en enlever, choisir des valeurs par défaut, etc.

Afin de montrer comment tout cela est possible, nous allons tout d'abord créer un nouveau type de contenu. Ici, nous souhaitons que les utilisateurs ayant le rôle Guide puissent créer un nouveau contenu. Ce type de contenu servira à présenter le guide, nous le nommerons Guide. Devront y figurer : son nom et son âge et la/les langue(s) qu'il parle. Un champ facultatif sera également ajouté : la description du guide.

Rappel : Deux types de contenus existent déjà par défaut :_Article etPage de base.

CRÉER UN NOUVEAU TYPE DE CONTENU

Pour créer un nouveau type de contenu, voici la marche à suivre :

1.    Se rendre dans le menu Structure puis dans Types de contenu.

2.    Cliquer sur _{Ajouter un type de contenu} un formulaire se présente.

3.    Dans le champ _Nom, il faut définir le nature du contenu. Celui-ci affichera une page de présentation d'un guide, appellons-le "Guide".

4.    Le champ Description est facultatif. C'est ce qui sera affiché sur la page Créer du contenu. Ici le nom du type de contenu est assez explicite, laissons la description vide.

5.    Sous le champ Description, différents onglets sont présentés. Le premier, intitulé Paramètres du formulaire de contribution, permet de configurer le titre du formulaire. La page créée présentera un guide. Il semble donc pertinent que le titre du contenu soit le nom du guide. Dans le champ Libellé du champ titre, entrer "Nom du guide". Laissons l'aperçu avant soumission facultatif. Il est également possible, dans le champ Explication ou directives pour la contribution, d'afficher une explication pour les guides qui souhaiteraient créer un nouveau contenu.

6.    Dans l'onglet _{Options de publication}, les options par défaut permettent au contenu d'être immédiatement publié, et ce sans l'approbation d'un administrateur. Décocher l'option _Publié pour annuler ce comportement. Une page de type Guide ne sera publiée qu'une fois validée par un administrateur.

7.    Dans l'onglet _{Paramètres d'affichage}, une seule option nous est proposée : Afficher les informations sur l'auteur et la date. Ces informations ne semblent pas pertinentes pour ce type de contenu, décocher cette option.

8.    Cliquer sur _{Enregistrer et gérer les champs}.

GÉRER LES CHAMPS

Le type de contenuGuide est maintenant créé. Il nous faut maintenant configurer les champs qui seront affichées dans le formulaire de création de ce type de contenu. Dès que nous avons enregistré les modifications précédentes, nous sommes redirigées dans l'onglet Gérer les champs.

Par défaut, nous remarquons qu'un seul champ est présent : _Body. Ce champ nous sera utile par exemple pour la description de notre guide. Mais d'autres informations sont nécessaires : le nom du guide, son âge Le nom du guide ne nécessite pas l'ajout d'un nouveau champ. En effet, c'est le titre du contenu qui renseignera le nom du guide.

Ajoutons donc de nouveaux champs à notre formulaire. Commençons par son âge. Pour ceci :

1.    Cliquer sur le bouton _{Ajouter un champ}.

2.    Dans la liste déroulante _{ajouter un nouveau champ}, selectionner l'option Nombre (entier).

3.    Un nouveau champ apparaît immédiatement : _Étiquette. Entrer "Âge", puis appuyer sur le bouton Enregistrer et continuer.

4.    La page affichée demande le _{nombre de valeurs autorisées} pour le champ Âge. Une personne ne peut avoir qu'un seul  âge. C'est la valeur par défaut, cliquer directement sur Enregistrer les paramètres du champ.

Le formulaire suivant demande plus de précisions quant aux champs que nous venons de créer.

Ajoutons maintenant un nouveau champ pour les langues parlées par notre guide. Appellons-le "Langue".

Inutile de renseigner une valeur par défaut, enregistrons directement les paramètres.

À ce stade, 3 champs sont créés : la langue, l'âge et la description. Le champ de cette dernière s'intitule Body, rendons-le plus explicite.

Cliquer sur le bouton Modifier correspondant au champ Body. Modifier son étiquette afin qu'il affiche "Présentation" au lieu de "Body"  puis enregistrer les paramètres.

GÉRER L'AFFICHAGE DU FORMULAIRE

Se rendre dans l'onglet Gérer l'affichage du formulaire. C'est ici que nous déciderons quels champs apparaîtront dans le formulaire, dans quel ordre, etc.

Cacher tous les champs sauf ceux que nous avons créés : Nom du guide, Présentation, Âge, Langue.

Note : Un champ Langue, en plus de celui qui vient d'être créé, est déjà présent dans la liste, ce champ représente la langue de l'interface d'administration. Attention à ne pas vous tromper de champs.

Se rendre maintenant dans l'onglet Gérer l'affichage. Il est ici possible de choisir l'endroit où l'étiquette de chaque champ sera affichée ainsi que le format d'affichage des champs.

1.    Pour afficher l'étiquette du champ Présentation au-dessus de celui-ci, sélectionner l'option Au-dessus dans la liste déroulante correspondante à ce champ dans la colonne Étiquette.

2.    Afficher l'étiquette du champ Âge sur la même ligne que ce dernier plutôt qu'au dessus. Sélectionner l'option Sur la même ligne dans la liste déroulante correspondante.

Voici à quoi ressemble le formulaire de création de contenu de type Guide après ces modifications :

Note : Menu Contenu/Ajouter du contenu/ Guide

Il est possible de personnaliser l'affichage pour l'accroche du type de contenu Guide. C'est-à-dire l'affichage de ce type de contenu dans les listes (sur la page d'accueil par exemple). Pour ceci, se rendre dans l'onglet _Accroche et procéder de la même manière que pour personnaliser l'affichage par défaut. Affichons seulement l'_âge et la langue. Désactivons l'affichage du champ Présentation.

Note : Une fois le type de contenu créé et configuré, il est important de ne pas oublier d'autoriser les utilisateurs ayant le rôle Guide à créer ce type de contenu. Pour ceci, se reporter au chapitre_{Gérer ses}utilisateurs.

Résultat pour une page de guide :

18. TAXONOMIE

Nous avons vu précédemment que Drupal permet l’ajout de champs personnalisés dans les différents contenus, ainsi que l’intérêt que cela peut représenter pour la fiabilité et la lisibilité du site. Cependant, les champs ainsi ajoutés sont spécifiques au type de contenu créé.  Or, dans de nombreux cas, nous souhaiterons pouvoir exploiter ce champ dans différents types de contenus, voire encore plus, avoir des rapports sur ces termes.

Pour centraliser l’utilisation de champs personnalisés au sein de Drupal, on passera par la taxonomie. Il s’agit de définir les catégories d’informations qui seront à réutiliser ainsi que les différentes valeurs qu’elles pourront contenir. Vous pourrez alors contrôler les valeurs saisies pour ces catégories et ainsi guider les auteurs ou utilisateurs tout en fiabilisant vos outils d’analyse.

La création de taxonomie se fait en plusieurs étapes :

1.    création du vocabulaire, qui définit la catégorie que nous souhaitons avoir ;

2.    ajout de termes, qui constituent les différents choix dans notre catégorie ;

3.    utilisation de cette taxonomie dans les autres types de contenu.

Il conviendra évidemment de vérifier que les vocabulaires créés sont clairs pour les utilisateurs et s’assurer que les termes mis à disposition couvrent suffisamment les besoins au risque d’induire des réponses de substitution qui fausseraient les résultats.

CRÉER ET DÉFINIR LE VOCABULAIRE

Essayons par exemple de définir une taxonomie pour les langues de nos guides.

1.    Aller dans _{Structure > Taxonomie}. Vous obtenez alors la liste des vocabulaires disponibles.

2.    Cliquer sur _{Ajouter un vocabulaire}.

3.    Dans le champ Nom, qui est le seul requis, écriver le nom de votre catégorie, par exemple «langues parlées». Le nom système apparait alors à droite.

4.    Ajouter éventuellement une description pour éviter par la suite des confusions éventuelles avec d’autres catégories langues

5.    Pour des sites multilingues, spécifiez la langue du vocabulaire et éventuellement la langue des différents termes possibles que contiendra la catégorie.

6.    Cliquer sur _Enregistrer.

Par défaut, toutes les taxonomies disposent d’une URL sous la forme taxonomy/term/ suivi de l’identifiant du terme.

Il faudra alors rajouter les différentes langues sous forme de «termes», page que Drupal vient immédiatement d’affichée.

1.    Cliquer sur le bouton _{Ajouter un terme}.

2.    Saisissez le nom pour le terme, ici le nom de la langue, par exemple «Français».

3.    Ajoutez éventuellement une description.

4.    Alias d’URL sera utile si vous souhaitez mettre à disposition les données recueillies sur ce terme pour le rendre accessible à partir d’un lien personnalisé.

5.    Cliquer sur Enregistrer. Drupal affiche immédiatement une nouvelle page contenant un message de confirmation ainsi que des champs similaires permettant de continuer l’ajout de termes. Recommencer ainsi pour English, Deutsch, Italiano,

Castellano.                                   

6.    Lorsque vous avez saisi tous les termes, cliquer dans le _fil d’Ariane pour revenir dans le vocabulaire langues parlées.

7.    L’onglet _Lister, montre alors tous les termes ajoutés et donne la possibilité de les réordonner car ils sont par défaut dans l’ordre alphabétique. Pour cela, il suffit de glisser les croix fléchées grises en début de chaque ligne.

8.    Cliquer sur Enregistrer pour ne pas perdre les modifications.

 Pour classer les termes en sous-catégories, il suffit de les ranger par groupe et de les décaler légérement vers la droite lors de la phase d’organisation.

UTILISER LE VOCABULAIRE DANS DES CONTENUS

Une fois que le vocabulaire est créé, il sera possible de l’utiliser dans tous les types de contenu, comme tout type de champs.

1.    Aller dans _{Structure > Type de contenu} et choisissez le contenu à modifier.

2.    Cliquer sur le bouton _{Ajouter un champ} et dans la liste déroulante ajouter un nouveau champ, sélectionnez Reférence > Terme de taxonomie.

3.    Définissez une étiquette pour votre champ, par exemple «Langues parlées».

4.    Enregistrer puis définir le nombre de valeurs autorisées si le chiffre est supérieur à un.

5.    Cliquez enfin sur les paramétres du champ. Le nouvel écran permet de préciser les options du champs, en particulier.

6.    Ajouter un texte d’aide.

7.    Spécifier si le champ est obligatoire (requis) ou non.

8.    Spécifier une valeur par défaut, par exemple «Français» (dans ce cas, commencer à saisir pour que Drupal fasse une recherche sur les valeurs disponibles).

9.    Enfin et surtout, choisir dans la rubrique _{Type de Référence}, le vocabulaire que nous souhaitons utilisés. Ici langues parlées.                             

10.  Cliquez sur _{enregistrer les paramétres}.

Par défaut, Drupal utilise un champ de saisi de texte de type autocomplétion, parfait lorsque les options sont très nombreuses, mais moins dans notre cas où la quantité est plus réduite. Pour modifier le type de champ,

1.    Retourner dans le type de contenu à adapter.

2.    Choisir l’action Gérer l’affichage du formulaire.

3.    Changer Autocomplétion par liste de sélection.

4.    Enregistrer et tout est prêt.

Retourner dans le menu _Contenu, sur votre page avec le type de contenu modifié. Le champ Langues parlées est présent avec dans la liste de sélection, la liste des langues créés dans le vocabulaire Langues parlées.

Image à conservé ou à supprimer

19. PARAMÉTRER LE

CONTENU EN COURS D'ÉDITION

Lorsque l'utilisateur édite son contenu, un cadre figure à droite du formulaire de création de contenu. Celui-ci s'affiche uniquement pour les administrateurs et pour les utilisateurs qui ont le droit de modifier les paramètres proposés par ce cadre. Il est possible via cette section, de régler certains paramètres uniquement pour le contenu en cours de création. Par exemple, si les commentaires sont activés sur toutes les pages dont le type de contenu est Article, cette section permet de désactiver les commentaires sur la page actuelle.

Paramètres des commentaires : c'est ici que sont autorisés ou non les commentaires sur la page. Si l'option _Ouvert est sélectionnée, les utilisateurs ayant le droit Poster des commentaires pourront en poster sur cette page. En revanche, si l'option _Fermé est sélectionnée, les commentaires seront désactivés sur cette page.

 Paramètres des chemins d'URL: un champ Alias d'URL s'affiche dans ce sous-menu. Par défaut, Drupal configure lui-même les URLs. Par conséquent, elles ne sont pas forcément très compréhensibles. Si le contenu que vous créez est, par exemple, une page de contact, il suffit de remplir le champ avec "/contact". La page de contact sera ainsi directement accessible aux utilisateurs via l'URL nomdevotresite/contact.

 Informations de publication : il est ici possible de renseigner le nom de l'auteur du contenu dans le champ _{Écrit par} ainsi que la date d'écriture dans le champ _{Écrit l}e. Par défaut, ces champs seront remplis respectivement par le nom d'utilisateur de l'auteur et par la date de soumission du formulaire.

 Options de publication : les deux options présentées ici permettent d'afficher le contenu sur la page d'accueil. En cochant l'option Promu en page d'accueil, les contenus sur la page d'accueil sont affiché sdu plus récent au plus ancien. La deuxième option, Epinglé en haut des listes, offre la possibilité, comme son nom l'indique, d'épingler le contenu en haut des listes desquelles il fait partie.

Ce qu'il faut bien retenir dans ce chapitre, c'est que même si les paramètres d'un type de contenu activent les commentaires ou qu'ils ne publient pas immédiatement les contenus créés, il est possible de faire des exceptions sur les pages souhaitées.

20. LES BLOCS

PERSONNALISÉS

Ce chapitre aborde la création et l'affichage de blocs personnalisés. Pour notre exemple, nous afficherons un bloc invitant les guides à venir s'inscrire sur notre site. La spécificité de ce bloc est de s'afficher uniquement sur certaines pages et pas d'autres, et qu'il soit invisible pour les utilisateurs déjà inscrits ! Pour des raisons esthétiques, ce bloc sera placé à gauche de notre contenu principal.

CRÉER UN BLOC PERSONNALISÉ

Pour créer un bloc personnalisé, rendez-vous dans l'administration du site :

1.    Dans le menu d'administration, se rendre dans Structure / Mise

en page des blocs

2.    Aller dans l'onglet Bibliothèque de blocs personnalisés

3.    Cliquer sur le bouton Ajouter un bloc personnalisé

Un formulaire s'affiche, dans lequel le contenu du bloc doit être défini

:

1.    _{Description du bloc} : ce champ est obligatoire. Celle-ci pourra être invisible pour les internautes. Appelons-le "Message pour les guides"

2.    _Corps : c'est le contenu du bloc.  Tout ce qui est écrit ici sera affiché dans le bloc. Entrer donc "Si vous êtes un guide, inscrivez-vous, c'est gratuit !"

3.    Cliquer sur _Enregistrer, en bas de la page.

Note : Le format de texte de l'éditeur est par défaut en HTML restreint. Pour en savoir plus sur les formats de texte, reportez-vous au chapitre Créer ses première pages.

Le bloc personnalisé est maintenant créé ! Il faut à présent l'afficher dans la région souhaitée.

AFFICHER UN BLOC PERSONNALISÉ

Le bloc étant créé, nous allons maintenant l'afficher dans la région "Sidebar first" :

1.    Retourner dans Structure / Mise en page des blocs.

2.    Cliquer sur le bouton _{Placer le bloc} correspondant à la région Sidebar first.

3.    Rechercher le bloc "Message pour les guides".

4.    Cliquer sur Positionner le bloc.

5.    Le _titre du bloc est obligatoire. Il est rempli, par défaut, avec la description définie précédemment. Pour ne pas afficher ce titre dans le bloc, il suffit de décocher Afficher le titre.

6.    Dans la partie Visibilité, l'ongletTypes de contenu permet de choisir sur quels types de contenu s'affichera ce bloc. Cocher "Article". Ce bloc figurera donc à gauche du contenu principal de toutes les pages Articles.

7.    Toujours dans la partie _Visibilité, l'onglet _Rôles permet d'affiner la visibilité du bloc en fonctions des différents types d'utilisateurs. Le bloc ne doit s'afficher que pour les utilisateurs anonymes.

Cocher uniquement Utilisateur anonyme.

8.    Note : L'onglet_Pages offre la possibilitéde n'afficher le bloc que sur certaines pages. C'est inutile dans cette situation, laisser cela par défaut.

9.    Cliquer sur _{Enregistrer le bloc}.

Le bloc est maintenant affiché sur toutes les pages Article, et uniquement si l'utilisateur n'est pas connecté !

21. ORGANISER SES DONNÉES

Tout le travail effectué jusqu’à présent à construire de quoi affiner l’interface de saisie des utilisateurs du site et à afficher les informations recueillies dans des types de contenu. Ces informations, à travers les formulaires, sont stockées dans des bases de données gérées par Drupal 8. À l’affichage, ces données sont présentées avec une structure par défaut qui correspond à l’interface de saisie. Dans bien des cas, il sera utile d’extraire certaines données et les mixer avec d’autres en provenance de formulaires différents (par exemple un carnet d’adresse d’utilisateur et les villes disponibles). Ces données peuvent alors être non seulement extraites de la base de données, mais aussi présentées de façon cohérente et spécifique à travers des URL définies.

Drupal 8 aide grandement à la réalisation de ces taches complexes grâce aux Vues (Views). Les Vues sont un outil très pratique permettant de communiquer avec la base de données pour en extraire les contenus, et spécifier comment ces données seront affichées.

La vue, comme le contenu, va au final produire une page présentée à l’utilisateur. Ce qui différencie la vue d’un type de contenu c’est la relation à la saisie des données. Dans le cas des contenus standards, l’utilisateur choisit son type de contenu, suite à quoi un formulaire lui est présenté pour l’écriture. Ces informations sont ensuite affichée conformément à ce qui est défini pour le type de contenu.

Dans le cas de la vue, il n’y aura pas de saisie. Une vue repose sur des données existantes, saisies par ailleurs dans d’autres contextes, mais qui seront présentées communément pour un besoin particulier. D’un certaine façon, il s’agit d’une sorte de tri croisé automatique.

Les vues permettent d’effectuer tellement de croisement qu’elles donnent la possibilité de faire de nombreuses actions sans pour autant avoir recours à la programmation.

CRÉER UNE VUE

La création du vues se fait simplement dans la partie Structure de l’espace d’administration. Il suffira d’y créer de nouvelles vues et de définir précisément les différents champs à afficher. Commençons par un cas simple qui sera affiné.

1.    Aller dans Structure > Vues

2.    Cliquer sur le bouton Ajouter une nouvelle vue

3.    Donner un nom à la vue, puis dans les paramètres sélectionner les valeurs de base pour les guides :

4.    En Afficher, chosir Contenu

5.    En type, choisir Guide

Pour afficher ces données, nous aurons la possibilité de créer directement une page pour cette vue :

1.    Cocher la case Créer une page pour ouvrir les champs correspondant

2.    Saisir le Titre, qui peut être le même que le nom de la vue.

3.    Saisir le Chemin, qui doit absolument être unique puisqu’il s’agit de l’adresse URL permettant d’accéder aux informations

4.    L’option Éléments à afficher permet de mentionner le nombre de réponses maximal à mettre dans une page. En complément, la pagination donne la possibilité de répartir les réponses sur plusieurs pages.

5.    Enfin, il est possible de créer un lien de menu. S’il doit être en page d’accueil, choisir Navigation principale dans Menu et en Texte du lien, informer du texte à afficher dans le menu.

6.    Enfin, enregistrer les informations après cette première étape importante.

À l’enregistrement, Drupal se dirige vers une nouvelle page qui affiche de nombreux paramètres qui vont permettre de préciser un peu les choses. Cependant, il peut être intéressant de faire un premier test de vérification avant de continuer plus loin. Pour cela, il suffit de cliquer sur le bouton Retour au site, en haut à gauche de la barre d’administration.

Le tout a l’air de fonctionner :

le menu est présent avec son texte les guides sont affichées par ordre alphabétique chaque information saisie dans le contenu des guides est visible…

AFFINER LA PRÉSENTATION DE LA VUE

Cette présentation n’est cependant pas satisfaisante. Autant de détails à ce niveau n’est sans doute pas nécessaire, par exemple, l’age pourrait sans doute être omis, voire, à ce niveau, la langue, et à l’inverse la ville présentée. Il sera donc nécessaire de modifier notre vue pour définir exactement l’affichage qui doit être fait.

Pour cela, il suffit d’aller dans la liste des vues et de cliquer sur Modifier pour la vue souhaitée. Cela nous affiche donc la liste des option d’Affichages suivi plus bas d’un aperçu bien pratique pour voir l’impact de nos modifications. Ce dernier ressemble évidemment au résultat de la page finale.

Nous voyons ici que nous avons accès à :

un affichage de type page qui porte le titre Liste des guides présenté sous forme de liste

et qui contient le contenu de l’accroche défini dans l’affichage du type de page Guide

le tout filtrer selon deux critères : le contenu doit être publié, et il doit être de type Guide enfin, l’ensemble est affiché par ordre descendant

Ces critéres correspondent évidemment à ce qui a été saisi au moment de la création de la vue. Mais ici, il va être possible de tout affiner. En premier lieu, nous souhaitons ne pas afficher l’ensemble de l’accroche mais seulement le nom, la ville et éventuellement une photo.

1.    Dans la rubrique Format, cliquer sur contenu et sélectionner Fields, et cliquer sur Appliquer.

Il ne reste donc bien que le Titre visible conformément à ce qui est spécifier dans la partie Fields. Ce champ, qui était auparavant vide a donc automatiquement été paramétré de la sorte.

2.    Pour ajouter une information, dans Fields, cliquer sur Ajouter. Drupal affiche alors la longue liste des champs disponibles pour le site. Il suffit d’écrire le nom de champ recherché pour qu’il soit affiché.

3.    Cocher la case devant le champ voulu (en particulier si plusieurs correspondent au critère) et Appliquer.

4.    Une fenêtre d’options s’affiche alors pour gérer l’affichage. Dans notre cas, nous pouvons laisser tel quel et appliquer. Nous pourrions par exemple y modifier le code HTML ou la classe utilisée pour l’affichage en CSS.

5.    Il suffit de faire la même chose pour tous les autres champs souhaités comme par exemple l’image du guide : Fields > Ajouter, chercher photo, et choisissez les paramètres d’affichage comme le style d’image.

Il ne reste alors plus qu’a définir éventuellement l’ordre des éléments. Cela se fera simplement, sur la ligne Fields, en choisissant le menu Réordonner à la place de Ajouter.

 Ajouter des conditions :

-  avec les critéres de tri

-  avec avancé filtres contextuels

Pour views y'a pas de changement entre le 7 et 8, ça a été intégré. Avec views y'a un certain nombre de vue déjà créé avec views ex liste de tout nos contenus c une vue et on peut la modifier. Admin/content est une view

est une view

ENRICHIR

22.   AUGMENTER LE POTENTIEL DE

DRUPAL 8 AVEC DES EXTENSIONS

23.   MODIFIER L'APPARENCE DE DRUPAL

8 AVEC DES THÈMES

24.   CRÉER SON PROPRE THÈME À

PARTIR DU THÈME BARTIK

25.   PERSONNALISER SES IMAGES

22. AUGMENTER LE

POTENTIEL DE DRUPAL 8 AVEC DES EXTENSIONS

Les modules sont des programmes permettant d'augmenter les fonctionnalités de Drupal. Il existe deux sortes de modules :

des modules présents avec l'installation de Drupal mais encore inactifs. Pour ne pas surcharger votre Drupal, vous pouvez activer uniquement ceux dont vous avez réellement besoin. des modules externes, à télécharger ou à acheter.

ACTIVER UN MODULE

Quelques modules plebiscités par les utilisateurs de Drupal sont intégrés dans Drupal 8. Ils ne sont pas activés automatiquement, ainsi vous pouvez adapter la configuration de votre Drupal à vos propres besoin.

Pour le site des Guides du voyageurs, le module Statistics est intéressant. Ce module permettra d'afficher le nombre de page vues et indiquera à nos guides quelles sont les villes et les guides les plus visités par les internautes.

en cliquant sur Installer.

Bien souvent, Drupal matérialise le téléchargement du module par une barre de progression et affiche à la fin un message positif.

CONFIGURER LE MODULE

Chaque module apporte son lot de fonctionnalités. Il n'est pas rare qu'un module nécessite l'installation préalable de modules complémentaires. Vérifier ce point avant de configurer le module.

De manière générale, après l'installation d'un module, cliquer sur sa description affichera des liens importants guidant vers l'_aide et la configuration. Pour chaque module, ces points peuvent différer et être spécifiques aux besoins du programme additionnel.

Le paramétrage de ce module ne comporte qu'une option, cocher la case et confirmer en enregistrant.

Le module est donc prêt à relever le nombre de pages vues, mais il manque encore la précision indiquant où ce module affichera les pages les plus vues pour les utilisateurs du site. Cette dernière configuration est en dehors du module Statistics car cela ne le concerne pas directement : le module affichera le résultat là où il lui sera demandé.

AFFICHER LE MODULE STATISTICS

L'objectif est maintenant d'afficher ce message sur la colonne de gauche du site. Pour cela, aller dans l'administration de Drupal, se rendre dans l'onglet Structure puis dans Mise en page des blocs.

Note : pour connaître le nom des différentes régions du site où le module Statistics peut afficher son contenu, cliquer sur Aperçu des régions des blocs (Bartik).

La colonne de gauche s'intitule donc Sidebar First, cliquer sur Placez le bloc.

Un dialogue s'affiche présentant tous les blocs disponibles.

Le module Statistics a lui-même créé un nouveau bloc intitulé _Contenu Populaire.

Utiliser le champ de recherche pour trouver le bloc Contenu populaire, puis cliquer sur le bouton Positionner le bloc.

Un nouveau dialogue invite maintenant à configurer le bloc.

Valider avec le bouton Enregistrer le bloc.

Le résultat est immédiatement visible sur le site. Voici une capture de la région de gauche du site internet.

INSTALLER UN MODULE DE LA COMMUNAUTÉ

La communauté de développeurs est étendue pour Drupal. Par chance, certains développeurs partagent leur travail et fournissent à tous les utilisateurs des extensions qui rajoutent des fonctionnalités à Drupal. Drupal 8 étant encore récent, les modules sont peu nombreux. Si vous cherchez des fonctionnalités spécifiques, n'hésitez pas à vérifier régulièrement si de nouveaux modules pour votre version de Drupal ont été publiés.

Chercher et trouver le bon module

Si vous avez identifié un besoin pour votre site internet que Drupal ne comble pas, alors le premier réflexe est de regarder dans les modules proposés. Rendez-vous sur le site officiel et dans la partie Download & extend pour trouver votre bonheur.

Pour notre site internet, la page d'accueil serait plus accueillante avec un diaporama. Après une recherche, il apparaît que le module Jssor Slider conviendrait. Il est très important de vérifier qu'il est compatible avec la version actuelle de Drupal, soit Drupal 8. Chaque module propose un lien de téléchargement et une installation sensiblement différente. À vous de lire et de suivre les recommandations.

Installer Jssor Slider

Télécharger le module et suivre les indications d'installation :

Un message de succès d'installation s'affiche. Cliquez sur le lien Activer les modules récemment ajoutés pour retourner sur la page du menu _Extension. Sinon pour installer un autre module, cliquez sur le lien Installer un autre module

Note : l'archive décompressé doit se trouver dans le répertoire /modules de Drupal.

Une barre de progression symbolisant l'installation puis un message positif s'affichent.

Note : Il arrive souvent qu'un module comporte plusieurs sousmodules. Vérifiez bien les pré-requis d'un module. En effet, un module peut avoir besoin d'un autre pour son bon fonctionnement.

L'installation et l'activation sont terminées, maintenant libre à vous de poursuivre sa configuration, son placement, le choix des images.

23. MODIFIER L'APPARENCE

DE DRUPAL 8 AVEC DES THÈMES

Un site est plus rapide à réaliser avec l'aide d'un CMS, mais a le désavantage de ressembler à tous les sites utilisant le même CMS. Une façon assez simple de se démarquer est de modifier l'apparence par défaut du site. Pour personnaliser l'apparence du site internet, vous pouvez :

réaliser vous-même les modifications des fichiers gérant l'apparence (html, css, etc) ou demander à un professionnel de le faire pour vous installer une extension qui se charge de cela, dans laquelle des morceaux sont plus ou moins personnalisables.

Le terme de thème graphique est fréquemment employé pour désigner ce type de programmes qui ont uniquement pour tâche de modifier l'apparence du site internet.

Pour Drupal vous trouverez deux sortes de thèmes :

les thèmes de l'administration du site, (Drupal vient avec le thème Seven) ;

les thèmes de la partie publique du site (Drupal vient avec le thème Bartik), ceux-ci sont plus ou moins personnalisables ;

Note : La plupart du temps, les thèmes modifiant l'apparence du site public sont plus recherchés que ceux modifiant l'administration !

MODIFIER L'APPARENCE DU THÈME BARTIK

Bartik est le nom du thème graphique par défaut du site public de Drupal. Il donne accès à quelques personnalisations en se rendant dans le menu Apparence.

En-dessous du nom Bartik 8.0.5 (thème par défaut) un lien intitulé Paramètres redirige vers une page de personnalisation des couleurs.

Entrez les nouvelles valeurs des couleurs en héxadécimal ou alors aidez-vous visuellement de la roue des couleurs.

INSÉRER SON PROPRE LOGO

Par défaut le thème Bartik vient avec le logo du projet Drupal. Il est bien sûr possible de modifier et d'insérer votre propre logo :

CHERCHER ET TROUVER UN THÈME

Le site officiel propose une partie dédiée aux thèmes :

Vous trouverez des thèmes qui modifient complètement l'apparence de votre site internet en requierant un minimum de configuration. D'autres, dédiées aux intégrateurs, développeurs et graphistes, sont une sorte d'ossature pour les modifications plus profondes du thème.

Ce second type de thème est donc réservé aux professionnels et ne rentre pas dans le cadre de ce livre.

INSTALLER ET ACTIVER UN THÈME

Cherchez le thème Mayo. Il a l'avantage d'être compatible avec Drupal 8.

Téléchargez l'archive ;

Dans le menu Apparence, cliquer sur Installer un nouveau thème Importer l'archive soit depuis son url soit depuis vos dossiers personnels

Note : Le thème Mayo est installé dans le répertoire /themes/ de

Drupal

Au bas de la page Apparence > Thèmes désinstallés, le thème Mayo apparaît. Cliquez sur Installer et définir par défaut afin de l'appliquer sur le site.

De la même manière, en cliquant sur Paramètres, cela bascule vers la page de personnalisation du thème. Cette page propose via un menu déroulant de nombreuses possibilités. En-dessous, il est possible de créer son propre jeu de couleurs.

Le résultat est immédiatement visible sur le site public.

24. CRÉER SON PROPRE

THÈME À PARTIR DU THÈME BARTIK

Les thèmes par défaut de Drupal ne sont pas toujours adaptés aux besoins de l'utilisateur. Il est cependant possible de créer son propre thème de A à Z ou bien d'adapter un thème déjà existant. Dans ce chapitre, le thème Bartik sera modifié.

Le thème Bartik est un des thèmes par défaut de Drupal 8. Les fichiers de ce thème se situent dans le dossier Core de Drupal. Il est donc conseillé de ne pas y toucher. Un dossier comprenant le nouveau thème va alors être créé, en ayant comme base le thème Bartik.

CRÉER UN NOUVEAU THÈME

Créer un nouveau dossier dans le dossier themes. Le nom du nouveau thème ne doit comporter ni espaces ni caractères spéciaux. Copier tout le contenu du dossier core/themes/bartik et le coller dans le dossier précédemment créé.

Ce dossier contient alors :

  color/   config/

  css/   images/         bartik.theme   templates/

La première étape à effectuer est de changer le nom bartik de tous les fichiers par le nom du nouveau thème.

bartik.theme

Une fois fait, il faut modifier le contenu des fichiers

Dans les fichiers , et , remplacer le mot bartik par montheme. Le fichier défini les différents points de rupture du thème.

Le fichier déclare tous les fichiers css et js utiles au thème. Si une nouvelle feuille de style est créée, elle devra être placée dans le dossier css/ et être déclarée dans ce fichier. Le fichier défini le schéma pour les fichiers de configuration du thème.

Ouvrir maintenant le fichier le plus important : Dans ce fichier sont renseignés :

-   le nom du thème :  apparaît dans l'onglet Apparence de Drupal.

-   le thème de base : le thème dont hérite le nouveau thème

-   les librairies utilisées

-   les régions du thème

-   la version de Drupal

Changer le nom du thème, celui-ci peut comprendre des espaces et des caractères spéciaux. Le thème montheme hérite du thème bartik.

name: Mon thème type: theme base theme: bartik

description: 'A flexible, recolorable theme with many regions and a responsive, mobile-first layout.' package: Core # version: VERSION # core: 8.x libraries:

-   montheme/global-styling ckeditor_stylesheets: -

-  

-   - regions:

header: Header primary_menu: 'Primary menu' secondary_menu: 'Secondary menu' page_top: 'Page top' page_bottom: 'Page bottom' highlighted: Highlighted featured_top: 'Featured top' breadcrumb: Breadcrumb content: Content sidebar_first: 'Sidebar first' sidebar_second: 'Sidebar second' featured_bottom_first: 'Featured bottom first' featured_bottom_second: 'Featured bottom second' featured_bottom_third: 'Featured bottom third' footer_first: 'Footer first' footer_second: 'Footer second' footer_third: 'Footer third' footer_fourth: 'Footer fourth' footer_fifth: 'Footer fifth'

# Information added by packaging script on 2016-03-02 version: '8.0.5' core: '8.x'

Enregistrer les modifications.

Le dossier color du thème permet de modifier l'apparence du thème comme vu dans le chapître "Modifier l'apparence d'un thème". Il faut remplacer le nom bartik par le nom du thème afin de lui attribuer les codes couleur modifiés lors de l'enregistrement.

// Preview files.

'preview_library' => 'montheme/color.preview',

'preview_html' => '',

// Attachments.

'#attached' => [

'drupalSettings' => [

'color' => [

// Put the logo path into JavaScript for the live preview.

'logo' => theme_get_setting('', 'montheme'),

],

],

],

Une fois tous les mots bartik remplacés, se rendre ensuite dans le menu Apparence, le nouveau thème créé se trouve dans les thèmes désinstallés.

Cliquer sur "Installer et définir par défaut". L'apparence du site avec ce thème est identique au thème Bartik puisque rien n'a encore été modifié.

AJOUTER DES NOUVELLES RÉGIONS AU THÈME

Le thème est structuré selon plusieurs régions. Pour apercevoir les différentes régions du thème, il faut se rendre dans le menu Structure/Mise en page des blocs, puis cliquer sur le lien Aperçu des région des blocs(Mon thème).

Pour ajouter une nouvelle région à ce thème, ouvrir le fichier . Dans la partie régions, définir la nouvelle région. Par exemple, le thème possèdera deux colonnes de largeur égale placées sous le contenu. La déclaration des deux régions se fera de cette façon :

  featured_left: 'Colonne de gauche' featured_right: 'Colonne de droite'

Le premier élément "featured_left" ne doit comprendre  ni espaces ni de caractères spéciaux. Il sera utilisé dans le code. Le deuxième élément 'Colonne de gauche' est le nom donné à la région. Ce nom apparaîtra dans Structure/Mise en page des blocs pour désigner les différentes régions des blocs.

L'ordre des régions ne se définit pas au hasard, il se fait selon la position des régions des blocs. Ces nouvelles régions doivent être placées sous le contenu, elles sont définies sous la région Content.

regions:

breadcrumb: Breadcrumb content: Content sidebar_first: 'Sidebar first' sidebar_second: 'Sidebar second' featured_left: 'Colonne de gauche'  featured_right: 'Colonne de droite' featured_bottom_first: 'Featured bottom first' featured_bottom_second: 'Featured bottom second' featured_bottom_third: 'Featured bottom third' footer_first: 'Footer first'

Enregistrer les modifications.

Se rendre dans le menu Structure/Mise en page des blocs, les nouvelles régions sont présentes dans la liste des régions des blocs. Si elles n'apparaissent pas, cela est dû aux caches, il faut donc les effacer.

Les régions ont été créées mais ne sont pas encore implantées dans le thème. Pour les intégrer, ouvrir le fichier dans le dossier templates. Ce fichier constitue tout le html du thème.

Écrire les lignes de code suivantes juste après la div fermante du contenu principal (ligne 100) :

{% if page.featured_left or page.featured_right %}

<div class="featured-two">

<aside class="layout-container clearfix" role="complementary">

{{ page.featured_left }}

          {{ page.featured_right }}

</aside>

</div>

{% endif %}

La première ligne est une condition qui crée le code html de la région si cette dernière n'est pas vide. Si la colonne de gauche ne contient aucun bloc, le html de cette région ne sera pas créé et la colonne de droite s'affichera à la place de la colonne de gauche.

La classe featured-two permet la mise en page de zone contenant les deux régions. Cette classe peut bien sûr être nommée autrement. Les deux régions sont déclarées à l'intérieur d'une balise aside par page.featured_left et page.featured_right.

Enregistrer le fichier. Dans l'aperçu des régions des blocs, les deux régions sont bien situées à l'emplacement désiré.

Ajouter des blocs dans les régions pour les voir apparaître sur le site.

Pour le moment, la zone contenant les deux régions n'a pas été mise en page.

Une feuille de style doit être créée. Elle se nommera (ou autrement selon la classe donnée précédemment). Pour cela, créer un nouveau fichier css dans le dossier css/components ou copier le fichier .

Remplacer tous les sélecteurs featured-bottom par le nom de la classe, ici featured-two.

Les régions sont deux colonnes de même largeur. Changer la valeur de width (largeur) par 50% au lieu de 33%.

@media all and (min-width: 560px) { .featured-two .region {     float: left; /* LTR */     position: relative; box-sizing: border-box;     padding: 20px 15px 30px;     width: 50%;

  }

  [dir="rtl"] .featured-two .region {     float: right;

  }

}

Ensuite, cette feuille de style doit être déclarée et chargée par Drupal. Comme précisé précédemment, les feuilles de style sont déclarées dans le fichier .

Pour déclarer la feuille de style, indiquer le chemin de la feuille de style comme suit :

css: base:

: {} component:

: {}

Les deux régions sont maintenant ajoutées dans le thème. Ne pas oublier d'effacer les caches pour voir les modifications apportées. Dans l'aperçu des blocs, les deux colonnes ont une largeur de 50% et sont côte à côte.

Sur le site, les deux nouvelles régions s'affichent bien comme souhaité.

De cette manière, il est possible d'ajouter ou d'enlever des régions afin d'obtenir un thème personnalisé à l'image de l'utilisateur.

25. PERSONNALISER SES

IMAGES

Réaliser un site sans l'agrémenter d'images est de moins en moins fréquent. Vous savez déjà comment ajouter et associer des images à un article. Drupal propose en plus une action sur le style de toutes les images. Ainsi vous avez la possibilité de réaliser un style pour toutes les images qui sont reliées à un type de contenu, sans avoir à recréer chacune des vignettes. Par exemple, nous allons le faire pour toutes les accroches du type de contenu Article.

CRÉER SON STYLE D'IMAGE

Pour cela, rendez-vous dans l'administration du site et cliquez sur Configuration.

Dans la rubrique Media, cliquez sur Styles d'images. Vous êtes devant un tableau présentant tous les styles déjà existants. Pour créer votre propre style, cliquez sur le bouton Ajouter un style d'image.

Vous êtes redirigés vers un champ vous invitant à nommer votre style d'image. Confirmez en cliquant sur Créer un nouveau style.

Vous êtes face à la personnalisation du style Noir et blanc (par exemple). Au bas de cette page, un titre _EFFET liste les effets disponibles. Ceux-ci sont sélectionnables via un menu déroulant.

Pour afficher des vignettes en noir et blanc, l'effet _Désaturer a été sélectionné. En cliquant sur _Ajouter, l'aperçu proposé sur une image imaginaire affiche le résultat. Observez le changement : l'image de droite est maintenant en noir et blanc.

 Note : Les effets sont cumulables. Bien souvent les utilisateurs cumulent les effets comme Redimensionner et Mise à l'échelle et recadrage.

Note : Des modules concernant le style des images sont également fortement sollicités.

APPLIQUER UN STYLE D'IMAGE

Maintenant que le style d'image est créé, il faut pouvoir l'appliquer sur toutes les images associées aux articles. Pour cela, allez dans la rubrique Structure puis Types de contenus. Cliquez sur le triangle à droite du bouton Gérer les champs dans la ligne intitulée Article et cliquer sur Gérer l'affichage.

Repérez le sous-menu Accrocheet ensuite la ligne du champImage.

Cliquez sur la roue dentée tout à droite. Cela ouvre une zone dans laquelle l'aperçu du style d'image est paramétrable. Sélectionnez _Noir et Blanc dans la liste déroulante, puis validez en cliquant sur Mettre à jour.

Confirmez toutes les modifications en cliquant sur Enregistrer au bas de la page.

Vous pouvez maintenant vous rendre sur la page d'accueil de votre site, toutes les images présentes en page d'accueil (le contenu des accroches du type de contenu Article) sont maintenant en noir et blanc.

AJOUTER DES FONCTIONNALITÉS

26. AVOIR UN SITE MULTILINGUE

26. AVOIR UN

SITE MULTILINGUE

Ce chapitre aborde la réalisation d'un site multilingue permettant aux visiteurs de passer facilement d'une langue à une autre. Cela prendra l'apparence d'une liste comprenant toutes les langues proposées par le site.

ACTIVER LES MODULES NÉCESSAIRES

Les modules permettant un site multilingue ont déjà été importés lors de l'installation de Drupal 8. Il suffit simplement de les activer.

AJOUTER ET CONFIGURER LES LANGUES

Aller dans le menu Configuration et dans la section Régionalisation et langue. Cliquer sur Langues.

Dans _Langues sont listées toutes les langues installées.

Cliquer sur le bouton Ajouter une langue.

Une liste de langues à installer s'affiche. Sélectionner une langue

puis cliquer sur le boutonAjouter une langue. L'installation de la langue commence. Un message de succès annonce que la langue sélectionnée peut désormais être utilisée.

              Code de la langue : Cette valeur ne peut être modifiée. Elle apparaîtra dans l'url du site lorsque ce dernier sera dans la langue sélectionnée.

              Nom de la langue : ce nom apparaîtra sur le site.

              Direction: sens de lecture.               Enregistrer la langue.

Le Drupal installé étant Drupal 8 version française, la langue par défaut de l'interface et du site est donc le français. Il est possible de modifier la langue par défaut, pour cela cocher la case PAR DÉFAUT à côté de la langue souhaitée.

L'ordre des langues à son importance puisque c'est dans cet ordre qu'apparaîtront les langues sur le site. Changer l'ordre des langues avec la petite croix à gauche des langues.

TRADUIRE DU CONTENU EXISTANT

Il faut maintenant traduire du contenu dans les autres langues. Soit :

S'affiche les langues installées précédemment. Pour la langue Français, l'article a un statut Publié tandis que pour les langues Spanish et English le statut est Non traduit.

AFFICHER LE SÉLECTEUR DE LANGUE SUR LE SITE

Maintenant que les articles ont leurs traductions, le sélecteur de langues doit être ajouté au site. Se rendre dans le

Sur le site figure maintenant, dans la barre latérale gauche, le bloc Sélecteur de langue avec les langues précédemment installées. Une fois la langue English sélectionnée, le site s'affiche en anglais. De même pour l'espagnol.

Certains blocs ne sont peut-être pas traduits. Par exemple, le titre du bloc Sélecteur de langue sur une des page en anglais n'est pas traduit, il apparaît toujours en français. Une traduction de ces blocs est alors nécessaire. Sur la page du site, cliquer sur le crayon du bloc pour le configurer.

Aller sur l'onglet Traduire bloc.

Pour les langues qui ont pour actions _Ajouter cela indique que la traduction n'a pas encore été effectuée pour cette langue. Cliquer sur Ajouter pour traduire le titre du bloc dans la bonne langue.

Dans le champ Description, écrire la traduction du titre du bloc et enregistrer la traduction.

Maintenant, le titre du bloc Sélecteur de langue sur une page en anglais s'affiche suivant la traduction du titre de ce bloc.

AJOUTER UN DRAPEAU DEVANT LA LANGUE

Il est possible d'ajouter le drapeau approprié à la langue, pour cela installer et activer le module Language Icons :

Cliquer sur la description du module pour accéder à sa configuration.

Cette configuration comprend :

SÉCURISER ET MAINTENIR SON DRUPAL

27.   ADMINISTRER DRUPAL

28.   CONCLUSION

27. ADMINISTRER DRUPAL

L'administration d'un site internet et du serveur sur lequel le site est hébergé requiert des compétences assez poussées en administration système et réseau qui dépasse le but de cet ouvrage.

Cependant, cela ne vous dissipe pas à réaliser quelques tâches de surveillance de manière régulière depuis votre installation de Drupal. En effet, les cyberattaques sont régulières sur les sites et les serveurs. Il serait dommage de laisser une entrée flagrante mettant à mal tout votre travail.

Le menu d'administration intitulé _Rapports vous envoie vers de nombreuses pages dédiées à l'administration et l'analyse de votre Drupal. Vous pourrez explorer ces sous-menus lorsque vous vous sentirez plus à l'aise avec Drupal, cependant n'oubliez surtout pas de passer rapidement et régulièrement sur le Tableau de bord d'administration.

Pistez les messages affiché sur fond rouge et tentez de résoudre les problèmes indiqués est une excellente démarche.

N'hésitez pas à collaborer avec des professionnels pour vous aider dans les divers tâches d'administration système.

28. CONCLUSION

Vous êtes maintenant prêt à utiliser Drupal 8 pour votre projet de site web. Ce livre ne couvre pas toutes les utilisations de ce C.M.S., néanmoins nous espérons que vous aurez eu un assortiment de son potentiel satisfaisant. Nous souhaitons également que ce livre vous a donné envie d'utiliser Drupal 8 pour votre prochain projet de site web.