• Installation des plugins nécessaires
  • ACF => lien web
  • Polylang => lien web
  • WPGraphQL => lien web
  • WPGraphQL for ACF => lien web
  • WP GraphQL Polylang => lien vers le fichier .zip sur github
  • Multi Custom Types => fichier .zip à importer
• Réglages
  • Général
  • GraphQL
  • Langues
• Rédaction d'un contenu multilingue
• GraphQL
  • Création compte GraphQL en lecture seule + création d'un token d'accès
  • Exemple de requête
• 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.

version: "3.7"
services:

  wordpress-db:
    container_name: wordpress-db
    image: mysql:8.0
    ports:
      - '3306:3306'
    volumes:
      - './wp-data/mysql-data:/var/lib/mysql'
    command: mysqld --default-authentication-plugin=mysql_native_password
    networks:
        - wordpress
    restart: on-failure
    environment:
      MYSQL_DATABASE: 'wordpress'
      MYSQL_USER: 'wordpress'
      MYSQL_PASSWORD: 'wordpress'
      MYSQL_ROOT_PASSWORD: 'wordpress'

  wordpress:
    container_name: wordpress
    image: wordpress
    restart: on-failure
    ports:
      - '9090:80'
    networks:
        - wordpress
    environment:
      WP_ENVIRONMENT_TYPE: 'local'
      WORDPRESS_DB_HOST: wordpress-db
      WORDPRESS_DB_USER: 'wordpress'
      WORDPRESS_DB_PASSWORD: 'wordpress'
      WORDPRESS_DB_NAME: 'wordpress'
      WORDPRESS_DB_PORT: '3306'
    volumes:
      - ./wp-data/wordpress:/var/www/html
      - ./uploads.ini:/usr/local/etc/php/conf.d/uploads.ini

networks:
    wordpress:

Pour monter l'image Docker, il vous suffit de vous placer dans le dossier env/local/docker/wordpress et de lancer la commande : 

$ docker compose up -d

Votre instance de Wordpress devrait alors être accessible à l'adresse : http://localhost:9090 

Supprimer les données inutiles

Pour éviter d'élargir les failles de sécurité possibles (Wordpress étant connu pour cela), il est préférable de supprimer tout le contenu présent de base et qui ne nous sera d'aucune utilité.

Supprimer les articles

De base, Wordpress est fourni avec un article d'exemple Bonjour tout le monde. Comme nous n'allons pas utiliser le type Article dans notre cas d'usage, l'accès au type va être masquer dans l'interface d'administration, mais le contenu sera toujours en base. 
Supprimez donc l'article en survolant le titre puis Corbeille. Pensez ensuite à vous rendre dans la corbeille et faire Vider la corbeille.

Supprimer les pages

De base, Wordpress est fourni avec deux pages d'exemple : Page d'exemple et Politique de confidentialité. Comme nous n'allons pas utiliser le type Page dans notre cas d'usage, l'accès au type va être masquer dans l'interface d'administration, mais le contenu sera toujours en base. 
Supprimez donc les pages en survolant le titre puis Corbeille. Pensez ensuite à vous rendre dans la corbeille et faire Vider la corbeille.

Supprimer les commentaires

De base, Wordpress est fourni avec un commentaire d'exemple, mais celui-ci est normalement supprimé automatiquement à l'issu de la suppression de l'article Bonjour tout le monde.
Si ce n'est pas le cas, pensez à le supprimer.

Supprimer les thèmes non utilisés

De base, Wordpress est fourni avec 3 thèmes. Celui activé par défaut est Twenty Twenty-Five.
De même, la gestion des thèmes va être désactivée car inutile dans notre configuration Headless. Donc autant supprimer les thèmes non activés (on ne pourra malheureusement pas supprimer le thème actif).

Dans le menu Apparence, survolez un thème et cliquez sur le bouton Détails du thème

Puis une fois dans les informations du thèmes, cliquez sur le bouton Supprimer tout en bas de la page.
Répétez l'opération pour tous les thèmes inactifs présents.

Supprimer les extensions inutiles

De base, Wordpress comprend 2 extensions d'exemple : Akismet et Hello Dolly.
Vous pouvez les supprimer en vous rendant dans le menu Extensions dans le menu de gauche et pour chaque extension : Désactiver puis Supprimer

Installation et configuration des extensions nécessaires

Installer et configurer Pods

Par défaut, Wordpress ne propose que 4 types par défaut : Articles, Médias, Pages et Commentaires. On ne peut pas y toucher n'y même y ajouter des champs.
Pods est donc l'extension qui nous permet de créer des collections personnalisées dans Wordpress. 

Lien vers le plugin : https://fr.wordpress.org/plugins/pods/

Dans la section Extensions de Wordpress, faire Ajouter une extension, dans le champs Rechercher des extensions, saisir "Pods", localiser l'extension puis installez la et activez la.

Une fois le plugin installé et activé, rendez vous dans Pods Admin > Composants puis désactivez le composant Templates. Étant donné que nous allons faire une utilisation headless de Wordpress, cette fonctionnalité ne nous sera pas utile.

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)

Installer et configurer Polylang

Polylang est le plugin qui va nous permettre de proposer des traductions dans nos collections personnalisées avec Pods.

Lien vers le plugin : https://fr.wordpress.org/plugins/polylang/

Dans la section Extensions de Wordpress, faire Ajouter une extension, dans le champs Rechercher des extensions, saisir "Polylang", localiser l'extension puis installez la et activez la.

Une fois le plugin installé et activé, il va vous demander de définir les langues nécessaires à votre application. Sélectionnez les langues dont vous avez besoin et cliquez sur le bouton Ajouter une nouvelle langue

Cliquez sur Continuer. N'autorisez pas la traduction des médias et choisissez le français comme langue des contenus présents dans le CMS.

L'installation est terminée, vous pouvez revenir à l'administration en cliquant sur le bouton Retour au tableau de bord.

Installer et configurer Disable Gutenberg

De base, Wordpress est livré avec un éditeur de contenu intitulé Gutenberg. Cet éditeur permet surtout de l'édition avancée au niveau apparence en proposant une palette de styles et de la gestion de blocs de contenu.
Dans notre cas, on souhaite seulement utiliser des champs d'édition classiques, du genre Wysiwyg à l'ancienne. Pour cela, il existe un plugin qui permet de revenir à un éditeur plus classique : Disable Gutenberg

Lien vers le plugin : https://wordpress.org/plugins/disable-gutenberg/

Dans la section Extensions de Wordpress, faire Ajouter une extension, dans le champs Rechercher des extensions, saisir "Disable Gutenberg", localiser l'extension puis installez la et activez la.

Aucun réglage supplémentaire n'est à prévoir.

Installer et configurer WPGraphQL

Par défaut, Wordpress ne propose que du REST comme API disponible.
 Pour pouvoir interfacer le connecteur CMS avec, qui lui gère les échanges en GraphQL, il est nécessaire d'ajouter un plugin supplémentaire : WPGraphQL

Liens vers le plugin : https://wordpress.org/plugins/wp-graphql/

Dans la section Extensions de Wordpress, faire Ajouter une extension, dans le champs Rechercher des extensions, saisir "WPGraphQL", localiser l'extension puis installez la et activez la.

Le plugin vous demande si vous acceptez d'envoyer des données de manière anonyme, répondre Non.

Une fois le plugin installé et activé, rendez vous dans GraphQL > Settings puis modifiez la configuration comme suit :

• Restrict Endpoint to Authenticated Users : Cochez la case "Limit the execution of GraphQL operations to authenticated requests..."
• Enable Batch Queries : Décochez la case "WPGraphQL supports batch queries..."
• Enable GraphiQL IDE : Décochez la case "GraphiQL IDE is tool for exploring the GraphQL Schema and test GraphQL operations..."
• GraphiQL IDE Admin Bar Link : Décochez la case "Show GraphiQL IDE Link in the Wordpress Admin Bar."

Vous pouvez réactiver les 2 derniers points si des fois vous voulez faire des essais de requêtes GraphQL sur votre structure.

Installer et configurer WPGraphQL Polylang

Par défaut le plugin WPGraphQL n'expose pas les informations de traductions d'un élément. Pour cela il faut ajouter un plugin tiers : WPGraphQL-Polylang

Une fois que vous avez téléchargé le .zip du plugin (Bouton Code > Download ZIP), rendez-vous dans Extensions > Ajouter une extension > Téléverser une extension.
Choisissez le Zip téléchargé et cliquez sur Installer maintenant.

Puis cliquez ensuite sur Activer l'extension.

Installer et configurer Multi Custom Config

TODO

Optimisation et sécurité du CMS

TODO

Désactiver la MAJ auto de Wordpress et des plugins

Installation

WordPress peut être déployé avec Docker, voici un exemple d'un docker-compose (pour plus d'informations sur le paramétrage, vous pouvez vous référer à la documentation WordPress) : 

L'exemple utilise une base de données Mysql et WordPress se lance sur le port 9090 que vous pouvez modifier dans la configuration.

version: '3.1'

services:

  wordpress:
    image: wordpress
    restart: always
    ports:
      - 9090:80
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_USER: exampleuser
      WORDPRESS_DB_PASSWORD: examplepass
      WORDPRESS_DB_NAME: exampledb
    volumes:
      - ./wordpress:/var/www/html

  db:
    image: mysql:8.0
    restart: always
    environment:
      MYSQL_DATABASE: exampledb
      MYSQL_USER: exampleuser
      MYSQL_PASSWORD: examplepass
      MYSQL_RANDOM_ROOT_PASSWORD: '1'
    volumes:
      - ./db:/var/lib/mysql

Import de la structure de données

L'import de structure de données se fait au niveau du plugin ACF dans l'onglet Outils :

Ensuite, il suffit de sélectionner le fichier à importer : 

Import des données d'exemple

Quand les collections sont importées, on peut utiliser la fonction d'import de WordPress pour importer les données :

Puis importer les données pour chaque collection en suivant les instructions : 

Import des images

Dans l'onglet Médias, on peut importer ou supprimer des images. Pour les collections qui nécessitent des images, on a la possibilité de directement importer ou de sélectionner une image. 

Les extensions

Pour le bon fonctionnement du projet, on a besoin de plusieurs extensions :

• Advanced Custom Fields (ACF) : permet de créer des collections complexes et de les exposer via des API
• Code Snippets : (optionnel) permet de configurer facilement et rapidement des webhooks suivant le besoin du projet 

ACF

Dans l'application, on utilise deux fonctionnalités principales de l'extension ACF : 

• Type de publication : permet de créer des collections et de les configurer (accès API, droits utilisateurs, etc) 
• groupes de champs : permet de définir les champs qui composent une collection

Type de publication

Un type de publication se compose d'un libellé au pluriel et au singulier, ainsi qu'une clé. Pour accéder à la collection dans le menu, il faut la rendre publique. 

Dans les réglages avancés, on va garder cochés seulement les éléments présents ci-dessous : 

C'est également dans les réglages avancés que l'on peut changer les accès utilisateurs et certaines configurations pratiques. Il faudra également penser à définir une route pour l'API et l'activer.

Groupes de champs

Dans la partie groupes de champs, on peut ajouter, modifier et supprimer les champs qui vont composer la collection. Avec la version gratuite de l'extension, on a accès à tous les champs classiques (texte, image, url, etc), la version payante n'ajoute que des champs qui facilitent la mise en page.

Il ne faut pas oublier d'attribuer le groupe de champs au type de publication qui lui correspond dans les réglages.

Les collections

Quand une collection est créée, on peut y accéder via le menu à gauche. Dans la vue de la collection, on a la liste des objets déjà créées, que l'on peut modifier ou supprimer. On a également la possibilité de créer de nouveaux objets.

Pour chaque objet, il faut renseigner un titre et remplir l'ensemble des champs qui composent la collection. Une fois terminé, il faut cliquer sur le bouton publier ou mettre à jour pour sauvegarder l'objet.

Pour aller plus loin

Export des données

Pour exporter les données, on utilise la fonction WordPress dans l'onglet Exporter du menu Outils. Dans cette vue, on a la possibilité d'exporter les données de toutes les collections ou de le faire individuellement pour chaque collection.  

Export de la structure de données

L'export des collections se fait dans le menu ACF, dans la partie Outils. Comme pour l'export des données, on peut choisir entre tout exporter ou exporter seulement les collections qui nous intéressent. On peut aussi choisir d'exporter soit les groupes de champs ou les types de publication.