Rédaction d'un contenu multilingue
Pour aller plus loin
- Création d'un nouveau custom type => plugin Multi Custom Types
- Création d'un nouveau custom field => plugin Multi Custom Types
- Ajouter des champs traduisibles => plugin Multi Custom Types

Installation locale

La version fournie avec Multi permet une installation locale rapide avec Docker.

...

Canaux de notifications (channels)
Formulaire de contact (contact_us)
Informations importantes (important_news)
Page de login (login)
Services (features)
Pages statiques (static_pages)
Widgets (widgets)

Puis cliquez sur Enregistrer les modifications

Catégories de points (map_categories)
Points sur la carte (map_points)

Puis cliquez sur Enregistrer les modifications

Enfin dans le menu supérieur, cliquez sur Afficher toutes les langues et sélectionnez Français. Ceci permettra de n'afficher que le contenu en français dans le listing des articles.

...

De même, au niveau de Pods Admin > Réglages vous pouvez passer la fonctionnalité Dynamic Features à Disable All Dynamic Features in Pods (penser à enregistrer la modification avec le bouton en bas de page)

Image Added

Configurer WPGraphQL

...

Wordpress va générer un nouveau mot de passe.

Image Added

Remarque

Pensez à bien copier le mot de passe généré car une fois la page fermée ce mot de passe ne sera plus accessible et vous en aurez besoin côté Connecteur CMS.

Pensez également à enregistrer pour que le modifications soient bien prises en compte.

Importer les données

L'image Wordpress sur le projet Multi est accompagnée d'un set de données. Vous pourrez les trouver dans le dossier env/local/docker/wordpress/imports/.
Le fichier 0 - data.xml contient l'ensemble des données pour toutes les collections présentes. Si vous ne souhaitez pas importer toutes les données mais seulement celles de quelques collections, vous trouverez un fichier de données par collection.
Il est cependant recommandé de respecter l'ordre suggéré par les numéros de fichiers car certains jeux de données dépendent d'autres collections.

...

Cliquez ensuite sur Choisir un fichier et sélectionnez le fichier de données souhaité . Puis cliquez sur Téléverser et importer le fichier.(0-data.xml contient l'ensemble des données, autrement vous pouvez importer les collections une par une en respectant l'ordre indiqué par le numéro en entête de fichier). Puis cliquez sur Téléverser et importer le fichier.
Enfin sur la page suivante, sélectionner admin (admin) à assigner aux articles et cliquer sur le bouton Envoyer (ne pas cocher Téléverser et importer les fichiers joints).

Optimisation et sécurité du CMS

Désactiver toutes les options relatives aux commentaires

Les commentaires n'étant d'aucune utilité dans notre cas d'usage, toutes les options en rapport peuvent être désactivées.

Dans la barre latérale gauche, Réglages > Commentaires et décochez les options inutiles.

Santé du site

Wordpress met à disposition un outil permettant d'améliorer les performances et la sécurité. Pour cela, cliquez sur Outils > Santé du site dans la barre latérale gauche et suivez les suggestions afin d'améliorer le fonctionnement de votre instance.

Erreurs rencontrées

Failed to execute /docker-entrypoint-init.d/init-wordpress.sh

Si vous rencontrez ce message d'erreur au montage du Dockerfile, pensez à vérifier les droits sur le fichier init-wordpress.sh

...

language	yaml

...

Mise en place des webhooks

Info

De base, Wordpress peut être long à retourner les informations demandées par le backend (pic parfois jusqu'à 2 secondes pour l'ensemble des features pour un utilisateur). Pour palier à ce problème, du cache a été mis en place du côté du Connecteur CMS. Il est possible de personnaliser le TTL de chaque collection à mettre en cache sur le Connecteur CMS, mais pour certaines données qui n'évoluent pas beaucoup, il peut être intéressant de mettre un TTL assez long. Cependant il reste possible d'invalider le cache via une route d'API côté connecteur. La documentation suivante indique donc comment mettre en place des webhooks sur Wordpress, permettant d'appeler ces routes d'invalidation de cache dés qu'un post est créé, modifié ou supprimé depuis l'interface d'administration de Wordpress.

Authentification JWT

Les routes d'invalidation du cache du Connecteur CMS sont protégées par la stratégie JWT HS256 mise en place pour les échanges entre le backend multi et le connecteur CMS.
Il convient donc de créer un bearer token à partir de la clé privée TOKEN_SECRET fixée dans le fichier .env du Connecteur CMS pour que le plugin Wordpress utilisé soit capable de communiquer avec.

Bloc de code

language	json
title	Exemple de payload

{
  "service": "wordpress",
  "iss": "multi-cms-connector"
}

Une fois le Bearer Token créé, il faut le renseigner dans la configuration du plugin wp-webhooks. Pour cela, se rendre dans Réglages > WP Webhooks dans la barre latérale, puis cliquer sur l'onglet Authentication, et enfin sur le bouton Create Template.

Image Added

Dans la modal qui s'ouvre, donnez un nom à votre template d'authentification, par exemple cms-connector, et comme type d'auth choisissez Bearer Token.

Image Added

Cliquez ensuite sur les 3 points verticaux de la colonne action de votre template, puis sélectionnez Settings.

Dans la nouvelle modal qui s'ouvre, laissez Bearer comme Scheme, et collez votre bearer précédemment créé dans l'input Token. Enfin cliquez sur Save Template.

Mise en place des Webhooks

Malheureusement, avec la version gratuite du plugin utilisé (WP Webhooks) nous ne pouvons pas utiliser les params dynamiques dans les urls. Il va donc falloir créer un trigger pour chaque collection, mais également pour chaque type d'action (create/update/delete) dans chacune des collections.

Dans l'onglet Send Data, nous allons nous intéresser à 3 hooks : Post created, Post trashed et Post Updated. Dans chacun de ces triggers, il va falloir aller renseigner la route qui permet de vider le cache pour chacune des collections.

Pour l'exemple, je vais documenter la création des 3 triggers pour la collection Services (features). Il vous conviendra ensuite de créer le triggers des collections restantes : Page de login (auth), Formulaire de contact (contact-us), Informations importantes (important-news), Canaux de notifications (notifications), Réseaux sociaux (social-networks), Pages statiques (static-pages), Widgets (features), Carte (map-points, campuses, map-icons, map-categories).

Les données de carte sont un cas particulier : il faut créer un seul hook par action, sur la route map-points, mais en sélectionnant dans la config de WP Webhooks les 4 pods : Campus ; Catégorie de point ; Icône carte ; Point sur la carte.

Pour connaitre l'ensemble des routes disponibles : Connecteur CMS Headless#Routesdisponibles

Hook pour la création d'un service

Cliquez sur l'entrée Post created, puis Add Webhook URL.

Image Added

Dans la modal qui s'ouvre, entrez les éléments suivants :

Webhook name : donnez un intitulé parlant à votre hook, par exemple clear-features-cache
Webhook URL : {%URL_VERS_VOTRE_CONNECTEUR_CMS%}/cache/clear/features

Puis cliquez sur le bouton Add for post_create.

Une fois le hook créé, nous allons le configurer. Cliquez sur les 3 points alignés verticalement sous la colonne Action, puis sur Settings.

Dans la modal qui s'ouvre, modifier les paramètres suivants :

Trigger on selected post types : Sélectionnez le type Service
Trigger on initial post status change : Sélectionnez Publié
User must be logged in : activé
Trigger from backend only : activé
Change the data request type : X-WWW-FORM-URLENCODE
Change the data request method : GET
Add authentication template : Choisissez le template créé précédemment (dans notre exemple, cms-connector)
Laissez le reste inchangé

Cliquez sur le bouton Save Settings et fermez la modal.

Votre trigger est à présent configuré. Vous avez la possibilité de le tester en cliquant sur les 3 points alignés verticalement, puis Send Demo.
Si votre connecteur est configuré en mode Debug (variable NODE_ENV différente de production), vous devriez voir passer les informations d'invalidation du cache dans les logs

Image Added

Hook pour la modification d'un service existant

Cliquez sur l'entrée Post updated, puis Add Webhook URL.

Dans la modal qui s'ouvre, entrez les éléments suivants :

Webhook name : donnez un intitulé parlant à votre hook, par exemple clear-features-cache
Webhook URL : {%URL_VERS_VOTRE_CONNECTEUR_CMS%}/cache/clear/features

Puis cliquez sur le bouton Add for post_update.

Une fois le hook créé, cliquez sur les 3 points alignés verticalement sous la colonne Action, puis sur Settings.

Dans la modal qui s'ouvre, modifier les paramètres suivants :

Trigger on selected post types : Sélectionnez le type Service
Trigger on post status : On va laisser volontairement vide pour que le cache soit mis à jour sur changement de statut (par exemple dans le cas où un utilisateur décide d'archiver un service, ou bien de passer un service de l'état 'brouillon' à 'publié')
User must be logged in : activé
Trigger from backend only : activé
Change the data request type : X-WWW-FORM-URLENCODE
Change the data request method : GET
Add authentication template : Choisissez le template créé précédemment (dans notre exemple, cms-connector)
Laissez le reste inchangé

Cliquez sur le bouton Save Settings et fermez la modal.

Hook pour la suppression d'un service existant

Info
Ici nous allons utiliser le trigger Post trashed plutôt que Post deleted car nous partons du principe qu'à partir du moment où un contenu est mis à la corbeille il n'a plus lieu d'être affiché sur l'application mobile. Et cela permet, le cas échéant, de le republier en cas de restauration via le trigger Post updated.

Cliquez sur l'entrée Post updated, puis Add Webhook URL.

Dans la modal qui s'ouvre, entrez les éléments suivants :

Webhook name : donnez un intitulé parlant à votre hook, par exemple clear-features-cache
Webhook URL : {%URL_VERS_VOTRE_CONNECTEUR_CMS%}/cache/clear/features

Puis cliquez sur le bouton Add for post_trash.

Une fois le hook créé, cliquez sur les 3 points alignés verticalement sous la colonne Action, puis sur Settings.

Dans la modal qui s'ouvre, modifier les paramètres suivants :

Trigger on selected post types : Sélectionnez le type Service
User must be logged in : activé
Trigger from backend only : activé
Change the data request type : X-WWW-FORM-URLENCODE
Change the data request method : GET
Add authentication template : Choisissez le template créé précédemment (dans notre exemple, cms-connector)
Laissez le reste inchangé

Cliquez sur le bouton Save Settings et fermez la modal.

Optimisation et sécurité du CMS