Configuration
Voir au format PDF
Temps d'étude : 45 min. 
Niveau : Facile.Gérer les urls. Le module PATHAUTO
PathAuto est un module permettant de générer automatiquement de bonnes URL reprenant le titre des articles et pages (en vue d'un meilleur référencement)
Nous allons récupérer le module PathAuto en version 7 sur la page officielle : https://www.drupal.org/project/pathauto
Nous allons dans le dossier sites/all/modules pour ne pas le mélanger avec les modules d'origine.
sites/all/modules: décompressez Pathauto
Nous retournons sur la partie suivante : barre noire > modules.
Une fois à l'intérieur, nous allons voir que le module PathAuto n'est pas activable en l'état et possède une dépendance vers un autre module :
Nous allons récupérer le module Token en version 7 sur la page officielle : https://www.drupal.org/project/token
Nous allons dans le dossier sites/all/modules pour ne pas le mélanger avec les modules d'origine.
sites/all/modules: décompressez Token
Actualiser (clavier : F5) la partie suivante : barre noire > modules.
Nous allons d'abord activer Token tout seul.
Et ensuite, activer PathAuto
Il suffit de cliquer sur "Configurer" à coté de PathAuto pour accèder à sa partie d'administration
Sinon vous pouvez vous y rendre par le chemin suivant : barre noire > Configuration> Alias d'url > Patterns (onglet)
admin/config/search/path/patterns>
Pattern for all Article paths : "page/[node:title]". Enregistrer.
Pattern for all Article paths : "article/[node:title]". Enregistrer.
La partie remplacement patterns permet de connaitre les jetons disponibles si nous souhaitons afficher autre chose que le titre dans la réécriture d'url.
D'autres onglets sont disponibles pour générer des alias d'url en masse ou définir des régles d'écriture. N'hesitez pas à faire le tour du paramétrage proposé par le module.
Les régles d'urls que vous définirez ne sont pas rétroactives, c'est la raison pour laquelle PATHAUTO est un module à installer avant de créer ses contenus.
Cela va permettre de générer des urls automatiquement lors de la création d'un contenu, voici un exemple si on retourne dans la partie "ajouter du contenu" :
Cette case " Generate automatic URL alias " n'était pas présente avant l'installation de PATHAUTO.
Cela va permettre de générer automatiquement les urls dès la création de contenu. Imaginez un site d'envergure comme LEPOINT où des centaines d'articles sont créés chaque jour par des personnes différentes, de cette manière les journalistes qui créent des contenus n'ont qu'à se concentrer sur la partie rédaction d'articles et ils seront sûr que la création de l'article se fera dans les normes avec une bonne url.
Si toutefois, vous souhaitez obtenir une url différente pour un contenu spécifique, c'est toujours possible, il suffit de décocher la case : Generate automatic URL alias. et PathAuto ne jouera pas son rôle pour que vous puissiez vous même définir une url différente.
RésuméD'une manière générale, il arrive que certains modules aient un lien de dépendance :
Requiert : "a besoin de..."
Requis : "va servir à..."
Obtenir un éditeur
CKEDITOR est un module permettant d'éditer le code-source visuellement et de nous assister dans la mise en forme de nos contenus (en vue d'une meilleure personnalisation)
Nous allons récupérer le module CKEDITOR en version 7 sur la page officielle : https://www.drupal.org/project/ckeditor
Nous allons dans le dossier sites/all/modules pour ne pas le mélanger avec les modules d'origine.
Nous retournons sur la partie suivante : barre noire > modules.
Ce module n'a pas de dépendance et peut donc être activé directement.
Si vous allez dans la partie : barre grise > Ajouter du contenu.
Un éditeur est bien présent.
En réglant le format sur Filtred Html ou Full Html, vous aurez des options différentes.
Seul bémol, lorsque nous cliquons sur l'icône permettant d'ajouter une image, nous ne pouvons pas en uplaoder et seulement ajouter des urls d'images déjà hébergées.
Pour avoir un gestionnaire d'images couplé à notre éditeur, nous allons le configurer et récupérer un complément : ckeditor.
Pour vous rendre dans la partie paramètrage de ckeditor, vous pouvez retourner dans la page des modules et cliquer sur le lien configurer ou alors vous rendre dans la partie : barre noire > configuration > CKEditor.
Nous allons cibler le format Filtred Html et cliquer sur modifier :
Dans la partie EDITOR APPARENCE nous pouvons personnaliser les icones en cliquant sur le lien "basique" ou en déplaçant les icones en drag&drop pour laisser le minimum d'options.
Pourquoi faisons-nous cela ? Comme ce format sera utilisé par les internautes du site (pour déposer des commentaires par exemple) nous ne souhaitons pas leur laisser toutes les options de mise en forme (création de tableaux, de div, etc.) pour éviter qu'il détourne l'apparence de notre site.
Ensuite Enregistrer
Avant de configurer CKEDITOR pour notre format "Full Html" (utilisable en tant qu'Administrateur), nous allons télécharger CKFINDER à l'adresse officielle : https://cksource.com/ckfinder/trial et cliquez sur "Free Trial".
AttentionIl ne s'agit pas d'un module mais d'un complément de module.
Il faudra donc décompresser le composant ckfinder sur l'adresse suivante : \sites\all\modules\ckeditor\ckfinder (avec les autres fichiers et dossiers).
Nous allons cette fois cibler le format Full Html et cliquer sur modifier :
Dans la partie EDITOR APPARENCE nous pouvons personnaliser les icones en cliquant sur le lien "Full" ou en déplaçant les icones en drag&drop pour donner le maximum d'options.
Dans la sous partie CSS, sur Editor CSS, selectionner : Use theme CSS – load the style.css file from the current site theme.
Cela permettra de voir le style css de notre site en aperçu direct dans l'éditeur
Dans la sous partie File browser settings, Choisir :
File browser type (Link dialog window) > Ckfinder
File browser type (Image dialog window) > Ckfinder
File browser type (Flash dialog window) > Ckfinder
En effet, CKFINDER sera un gestionnaire d'image que nous allons ajouter par la suite, il s'agit d'un complément fait pour fonctionner avec CKEdtior.
Dans la sous partie Options Avancées > Configuration JavaScript personnalisée, ajouter :
config.allowedContent = true; Si l'on passe en mode code-source malgré la présence de l'éditeur, cela permettra d'éviter de perdre les classes css et autres attributs sur les éléments, exemple:
ou encore :GT
Cliquer sur Enregistrer.
Lorsque vous retournez sur votre éditeur (en format Full Html) pour ajouter une image (avec l'icone correspondante), il est possible que vous ayez ce message :
Pour s'en servir, il faut soit l'acheter, soit se rendre dans le nouveau repertoire : sites\all\modules\ckeditor\ckfinder et éditez config.php en changeant la ligne n°33 : mettre
return true; // en remplacement de return false;
Nous pouvons maintenant uplaoder des images avec ckeditor + le complément ckfinder :
Bonne nouvelle ! Cet éditeur est disponible partout : création de contenu (page, article) mais aussi dans la création des blocs !
AttentionUn message rouge d'erreur "Plusieurs problèmes ont été detectés dans votre tableau de bord" peut venir tant que vous n'activez pas ckfinder avec une licence.
Comment ajouter ou définir un format Drupal par défaut ?
Pour ajouter ou définir un format de texte par défaut, nous allons nous rendre dans la partie suivante : barre noire > configuration > Formats de texte (admin/config/content/formats).
Nous allons placer le format Full Html en premier (par drag&drop), cela nous évitera de devoir le choisir lorsque nous créerons du contenu.
Au passage, si vous cliquez sur le lien "configurer", vous pourrez décocher :
Corriger le HTML défectueux ou coupé.
Si vous écrivez du code source, par exemple
Convertir les sauts de ligne en HTML (Lorsque l'on saute une ligne dans l'éditeur, il a tendance a générer du code avec :
Droits d'accès : Autoriser le format Filtred Html pour les internautes non connectés
Nous allons autoriser les commentaires pour les internautes anonymes et leur donner les droits d'utiliser l'éditeur au format html filtré.Pour cela, nous allons cliquer dans la partie : barre noire > Personnes > Droits (onglet).
Créer un formulaire de contact
Pour créer un formulaire de contact avec Drupal, un module (inactif) est déjà prévu pour cela.
Nous allons nous rendre dans la partie suivante : barre noire > modules > contact (à activer).
Cela vous donnera une page avec un beau formulaire de contact :
Créer des formulaires
Pour aller plus loin avec les formulaires et avoir un plus grand niveau de personnalisation, nous pouvons télécharger le module webform.
Adresse url de téléchargement officielle : Web Form
Déposer l'archive dans le dossier : /sites/all/modules/
Nous retournons sur la partie suivante pour activer WebForm : barre noire > modules.
Pour activer WebForm, il nous faut 2 autres modules : Ctools et Views
Url de téléchargement officielle : CTools - Views
Activer d'abord CTools
Activer ensuite Views
Activer pour finir WebForm
Cas d'étude : Créons un formulaire de recrutement
Lorsque vous activez le module, cela ajoute un nouveau type de contenu.
Barre noire > Ajouter du contenu > Webform > Création du contenu comme d'habitude avec un titre
Ensuite dans l'onglet WebForm, vous pouvez ajouter plusieurs composants (des champs) :
Nom : textfield
Prénom : textfield
Expediteur : Courriel (obligatoire)
CV (choisir emplacement du dossier et extensions autorisées).
Message : textarea (Option de Choisir la taille et la hauteur des textarea en décochant "resizable").
Voici quelques options :
grille = checkbox
liste déroulante = radios-box
groupe de champs = fieldset
pagebreak=formulaire sur 2 étapes
Une fois le contenu créé, on se rend compte de la présence de 2 nouveaux onglets : webform et résultats.
Pour éviter d'avoir un espace de dialogue (commentaire) sous les formulaires en tant qu'admin, il faut se rendre sur : Structure > Type de contenu > Webform > Modifier > Parametre de Commentaire > Fermé.
Nous avons la possibilité d'activer la gestion multiligue pour les webforms
Dans webform/emails/ il faut mettre E-mail from address : sur "votre adresse" champ créé au préalable et ensuite dans expediteur il faut cocher : E-mail from address : component expediteur
Lorsque le formulaire s'affiche, on aperçoit également le nom de l'auteur qui l'a créé (admin) ainsi que la date.
il est possible de retirer ces informations à l'endroit suivant :
Structure > Type de Contenu > Webform : Modifier > Paramètre d'affichage > Décochez : Afficher les informations sur l'auteur et la date. > Enregistrer.
WebForm - Exercice : faire un formulaire de réservation (nom, date, heure, email, téléphone, commentaire + modif texte bouton submit) pour un restaurant + page de confirmation où l'on peut saisir des commentaires.
Traduire le backoffice et les modules automatiquement
Pour traduire Drupal, une partie existe à l'endroit suivant : barre noire > Configuration > Traduire l'Interface > Traduire (onglet)
Vous pouvez traduire des chaines à la main, il suffit de saisir une portion de texte.
Il est également possible d'importer ou d'exporter des fichiers de traduction.
Vue d'ensemble > Permet de voir le % de traduction.
Exporter : permet de fournir un fichier .po afin de traduire les chaines non-traduites par le système
Importer : permet d'uplaoder le fichier .po des chaines traduites.
Si vous voulez traduire en français (ou dans une autre langue ;-)) votre backoffice ainsi que les modules que vous ajoutez, vous pouvez faire confiance au module L10N_UPDATE, aussi connu sous le nom de Localization update.
Adresse url de téléchargement officielle : https://www.drupal.org/project/l10n_update
Nous retournons sur la partie suivante pour activer Localization update : barre noire > modules.
Une fois que le module est activé, vous pouvez retourner dans la partie suivante : barre noire > Configuration > Traduire l'Interface > Mettre à jour (nouvel onglet apporter par ce module)
Il faudra cliquer sur le lien : Vérifier Manuellement
Et ensuite cliquez sur le bouton : Mettre à jour les traductions.
Et le plus beau dans tout ça, c'est que pour les prochaines installation de module, L10N_UPDATE jouera son rôle automatiquement et traduira dès l'activation des prochains modules !
Exercice : s'entrainer avec les modules
> Objectifs : Se former au BackOffice de Drupal, savoir comment rechercher / avoir les bon mots-clés, analyser la pertinence des résultats, apprendre la configuration et constituer une liste de modules utiles. <
Exercices :
- Proposer un lien "partage à un ami" pour qu'un internaute puisse partager l'une de vos pages par email.
- Créer un formulaire de contact et un formulaire de satisfaction
- Donner la possibilité à l'internaute de choisir son mot de passe lors de la création d'un compte
- Exiger la vérification par un code de saisie (sur la page d'inscription)
- Afficher une GoogleMap sur le site web
- Connaitre le nombre de fois qu'un contenu a été vu (comme sur les forums)
- Apporter la fonctionnalité Newsletter (permettant l'abonnement d'internaute et l'envoi d'email)
- Avoir la possibilité d'envoyer des newsletters au format HTML
- Proposer une case à cocher lors de la création d'un compte afin que l'internaute puisse s'inscrire à la newsletter dès le départ
- Personnaliser la page d'erreur (page non trouvée) en cas d'URL invalide
- Donner la possibilité à l'administrateur de créer des menus déroulants
- Dans le cadre d'un menu déroulant, donner la possibilité d'une rubrique parent non cliquable
- Possibilité de joindre un avatar de profil à l'inscription des internautes
- Donner la possibilité à l'administrateur de renseigner les balises meta et title en vue des prédispositions à un référencement naturel
- Donner la possibilité à l'administrateur de créer des liens extérieurs (attribut target blank) dans le menu
- Donner la possibilité aux internautes (visiteur non connecté) de déposer des commentaires
- Restreindre l'accès d'une page seulement aux administrateurs
- Donner la possibilité d'avoir un lien du menu restreint aux administrateurs
- Proposer un site multilingue
- Donner la possibilité aux internautes d'activer les notifications par email lorsqu'il y a des réponses dans le fil de discussion de commentaires
Il est tout à fait possible qu'en entreprise on vous demande de mettre en place certaines fonctionnalités et ce sera à vous de trouver les bonnes réponses et solutions aux demandes formulées.
Dans notre cas, le travail de programmation et d'écriture de code est remplacé par un travail de recherche et de configuration de module.
Correction
| n° | exercice question | solution réponse |
|---|---|---|
| 1 | Proposer un lien "partage à un ami" pour qu'un internaute puisse partager l'une de vos pages par email. | FORWARD + gestion droits d'accès, gérer avec un autre navigateur. Cela crée aussi 1 bloc. |
| 2 | Créer un formulaire de contact et un formulaire de satisfaction | WEBFORM |
| 3 | Donner la possibilité à l'internaute de choisir son mot de passe lors de la création d'un compte | Barre noire > Configuration > Paramètres de Comptes > Décocher la case "Exiger la vérification de l'adresse de courriel lorsqu'un visiteur crée un compte.". |
| 4 | Exiger la vérification par un code de saisie (sur la page d'inscription) | Captcha (a activer sur : user_register_form) |
| 5 | Afficher une GoogleMap sur le site web | Localization Map |
| 6 | Connaitre le nombre de fois qu'un contenu a été vu (comme sur les forums) | Statistics (natif, à activer) |
| 7 | Apporter la fonctionnalité Newsletter (permettant l'abonnement d'internaute et l'envoi d'email) | SimpleNews (cela crée aussi un bloc à placer dans une région) |
| 8 | Avoir la possibilité d'envoyer des newsletters au format HTML | MimeMail |
| 9 | Proposer une case à cocher lors de la création d'un compte afin que l'internaute puisse s'inscrire à la newsletter dès le départ | simplenews_register |
| 10 | Personnaliser la page d'erreur (page non trouvée) en cas d'URL invalide | Configuration > Informations > Page 404 par défaut (créer 1 contenu au préalable) |
| 11 | Donner la possibilité à l'administrateur de créer des menus déroulants | NiceMenu / SuperFishMenu |
| 12 | Dans le cadre d'un menu déroulant, donner la possibilité d'une rubrique parent non cliquable | special item menu |
| 13 | Possibilité de joindre un avatar de profil à l'inscription des internautes | reg_with_pic et/ou avatar_selection/td> |
| 14 | Donner la possibilité à l'administrateur de renseigner les balises meta et title en vue des prédispositions à un référencement naturel | MetaTag ou metatag quick ou page_title |
| 15 | Donner la possibilité à l'administrateur de créer des liens extérieurs (attribut target blank) dans le menu | Extlink |
| 16 | Donner la possibilité aux internautes (visiteur non connecté) de déposer des commentaires | Barre noire > Personnes > droits d'accès > Comment : poster des commentaires (internaute anonyme) |
| 17 | Restreindre l'accès d'une page seulement aux administrateurs | node_access et/ou content_access (onglet permissions dans un contenu). |
| 18 | Donner la possibilité d'avoir un lien du menu restreint aux administrateurs | menu_per_role |
| 19 | Proposer un site multilingue | i18n |
| 20 | Donner la possibilité aux internautes d'activer les notifications par email lorsqu'il y a des réponses dans le fil de discussion de commentaires | comment_notify |
