LA solution pour intégrer WordPress sur Shopify

Mise à jour le 29 octobre 2024

Vous voulez profiter de tous les avantages de Shopify pour le commerce tout en ayant une partie edito robuste sur WordPress ? Le tout sur le même domaine ? avec le blog en sous répertoire ? sans système de synchro complexe ?
👉 Alors vous êtes au bon endroit.

La solution dont je vais vous parler est parfaitement fonctionnelle, en production depuis plus de 2 ans, avec 0 temps de maintenance supplémentaire (côté infrastructure) et validée avec le support Shopify.

Si votre site e-commerce sous Shopify est sur le domaine https://exemple.com, vous pourrez avoir votre blog WordPress sur https://exemple.com/blog (ou tout autre nom que blog).

🚩 La solution demande des connaissances techniques plutôt devops sans avoir besoin d’être un expert Shopify ou WordPress. Il y a plus de configuration à lire et comprendre qu’à réellement mettre en place, car une fois le système configuré, tout est relativement simple.

Dans quels cas utiliser WordPress et Shopify ensemble

Avant d’arriver à la solution que je détaille par la suite, cela a nécessité de nombreuses recherches et expérimentations. Même si elle est parfaitement viable et fonctionnelle, elle nécessite une bonne compréhension de quelques concepts de proxy / routage / DNS pour être mise en place sereinement.

💭 Avant de vous lancer dans la configuration de celle-ci, posez vous la question de savoir s’il y a un réel intérêt à avoir WordPress et Shopify ou si l’une ou l’autre des solutions peut répondre à votre besoin. Vous devrez gérer 2 thèmes (celui de Shopify, et celui de WordPress) et avoir une navigation cohérente entre les deux, et bien sur maintenir votre installation WordPress.

Pour ma part, j’ai abouti à cette solution pour répondre à un contexte client où il y avait un réel intérêt à migrer sur Shopify pour des raisons business et marketing (qui se sont avérées payantes) et aussi de conserver WordPress pour la partie blog pour garder l’héritage SEO de contenus / maillage / structure qui avait été travaillé depuis plusieurs années (là aussi cela s’est avéré payant).

Les étapes pour intégrer WordPress dans Shopify

Shopify + Cloudflare + WordPress, l’explication rapide pour les moins tech

Shopify utilise Cloudflare en tant que proxy pour gérer une bonne partie de ses optimisations, pour faire simple c’est un intermédiaire entre le visiteur et Shopify qui se charge de faire des optimisations à la volée.
On va donc utiliser Cloudflare pour envoyer les requêtes du blog, soit chaque URL qui contient https://exemple.com/blog, vers notre propre serveur WordPress.

Cela permettra d’avoir une installation complètement transparente pour l’utilisateur, tout en ayant un vrai Shopify et un vrai WordPress, sans avoir à gérer des synchronisations via des modules ou altérer l’un ou l’autre.

La suite de l’article est plus technique mais les moins tech pourront appréhender les concepts pour se faire une idée sur la solution et ce qu’elle nécessite.

Configurer Cloudflare sur votre domaine Shopify

Shopify utilise Cloudflare pour gérer une bonne partie de ses optimisations en tant que proxy. Et il est possible depuis un peu plus de 2 ans d’utiliser le mode O2O sous Cloudflare qui vous permet de combiner à la fois la configuration de Shopify qui l’utilise pour sa plateforme, et la votre que vous pouvez mettre en place pour votre domaine.

Le mode O2O est normalement actif par défaut, mais il est possible de passer par une demande au support pour l'activer.

La première étape consiste donc à mettre en place Cloudflare de manière classique sur votre domaine où Shopify est installé. Pour cela il faudra indiquer à votre registrar (là où vous achetez votre domaine) que les DNS sont gérés par Cloudflare. Ce dernier se chargera de récupérer la configuration existante et donc de faire pointer le site vers la plateforme Shopify.

🚩 Si vous n’êtes pas à l’aise avec cette première étape je vous recommande de missionner un prestataire avec des compétences orientées devops, sachant que les étapes suivantes sont plus complexes.

Installer WordPress dans un sous-répertoire

La seconde étape consiste à configurer WordPress et le rendre accessible depuis 2 adresses :
A la fois depuis blog.exemple.com et à la fois depuis exemple.com/blog

Pour cela vous allez devoir faire pointer (niveau DNS) blog.exemple.com vers votre serveur où WordPress est installé. Ensuite créez le répertoire /var/www/blog sur votre serveur, c’est là que WordPress sera installé.
Enfin vous allez devoir configurer le vhost pour que les adresses blog.exemple.com et exemple.com renvoient vers le dossier physique /var/www sur votre serveur.

Pour blog.exemple.com niveau DNS sur Cloudflare, il faut le mettre en DNS seulement (cela permet de détecter les accès direct ou via le worker)

Petite explication : Même si au niveau DNS exemple.com ne pointe pas sur votre serveur, cela nous servira pour plus tard, car exemple.com/blog renverra bien vers le serveur WordPress grâce au proxy Cloudflare, et via ce vhost, le mapping vers /var/www/blog se fera bien correctement.

Dernière chose, afin d’éviter que WordPress soit accessible depuis 2 urls ( et donc risque de duplicate content ), vous pourrez ajouter ces instructions dans le fichier .htaccess

RewriteEngine On
RewriteCond %{HTTP:CF-Connecting-IP} ^$
RewriteRule ^(.*)$ https://exemple.com/$1 [L,R=301]

On ajoutera également dans le fichier wp-config.php dans la zone d’édition :

define('ADMIN_SITEURL', 'https://exemple.com/blog/');
$_SERVER['HTTP_HOST'] = 'exemple.com';

Cela vous permettra de forcer le domaine pour que WordPress considère bien qu’il est sur exemple.com/blog et non blog.exemple.com/blog.

🚩 Note pour plus tard : une fois que la configuration du worker sera en place, il faudra revenir dans WordPress pour remplacer les urls depuis la partie Réglages/Général avec la valeur https://exemple.com/blog

Configurer le worker sur Cloudflare

A partir de là vous allez pouvoir mettre en place un worker sous Cloudflare, c’est un petit applicatif qui va se positionner en intermédiaire et dans lequel on va pouvoir faire beaucoup de choses, comme router la requête vers un autre serveur.

A date pour utiliser les workers vous devrez souscrire à une offre suivant votre volume de requêtes (qui dépend du trafic, du contenu et de l'optimisation du site). 

L'offre gratuite inclut 100 000 requêtes par jour, et l'offre à $5/mois inclus 10M de requêtes par mois, puis $0,30 par million de requêtes supplémentaires. A titre d'exemple, l'offre à $5 est largement suffisante pour plus de 500K pages vues par mois sur un site optimisé.

Pour cela, rendez-vous dans la partie Workers et pages dans la configuration Cloudflare de votre domaine. Créez un nouveau worker vide, et ajoutez le code qui suit :

addEventListener('fetch', function (event) {
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  // Récupérer l'URL originale
  let originalURL = new URL(request.url)
  // Définir la nouvelle URL
    const { pathname,search } = new URL(request.url)

  let newURL = new URL(`https://blog.exemple.com${pathname}${search}`)
  // Copier les paramètres de l'URL originale vers la nouvelle URL
  newURL.search = originalURL.search
  let newHeaders = request.headers
  let newRequest = request.clone()
  newRequest.url = newURL
  // Renvoyer la réponse de la nouvelle requête
  return await fetch(newURL, newRequest)
}

function MethodNotAllowed(request) {
  return new Response(`Method ${request.method} not allowed.`, {
    status: 405,
    headers: {
      Allow: 'GET',
    },
  });
}

Ce code va vous permettre d’intercepter les requêtes de Shopify vers le répertoire blog et de les router vers votre installation WordPress de manière transparente.

➡️ Maintenant vous pouvez sauvegarder votre worker, et passer dans la partie Paramètres / Domaines et itinéraires pour associer à votre worker la zone qui correspond à votre domaine configuré sur Cloudflare soit « exemple.com » et la route souhaitée « exemple.com/blog* » pour qu’elle s’applique seulement lorsque l’on appelle exemple.com/blog.

Vous pouvez déployez le tout pour tester.

Optimiser la mise en cache du blog (optionnel)

En théorie si votre zone éditoriale est essentiellement statique vous pouvez mettre en place une mise en cache forte sur Cloudflare pour limiter le nombre de fois où le worker va devoir intervenir, ce qui réduit drastiquement le coût et au delà de ça vous permet d’avoir de très bonne performances.

Pour cela on va créer quelques règles de cache, il faut donc aller dans « Cache rules », puis créer une nouvelle règle dans laquelle vous pourrez définir l’expression suivante :

(http.request.uri.path contains "/blog" and not http.request.uri.path contains "wp-admin" and not http.request.uri.path contains "wp-login" and not http.request.uri.path contains "wp-cron" and not http.request.full_uri contains "preview" and not http.request.full_uri contains "ajax" and not ends_with(http.request.full_uri, ".xml") and not http.request.full_uri contains "wp-json")

Ensuite définissez les paramètres suivants :

• Éligibilité du cache : cocher éligible pour le cache
• TTL Edge : en fonction de votre configuration, définissez soit sur « Utilisez l’en-tête de contrôle du cache s’il est présent ; sinon, mettez en cache la requête avec le TTL par défaut de Cloudflare pour l’état de la réponse. » si vous gérer bien vos entêtes, sinon « Ignorez l’en-tête de contrôle du cache et utilisez ce délai TTL. » et définissez une durée de mise en cache. Plus ce temps est long plus Cloudflare gardera en mémoire la requête (page, image, script…), vous pouvez toutefois vider à tout moment le cache cloudflare de façon spécifique ou globale
• Navigateur TTL : c’est le temps de mise en cache sur le navigateur de l’utilisateur, idem que le paramètre précédent, toutefois si vous fixez le temps, choisissez un temps adapté aux ressources car vous n’avez pas la possibilité de vider le cache chez l’utilisateur (1 jour par exemple)

Pour pouvez réitérer l’opération en créant une seconde règle avec cette expression :

(http.request.full_uri contains "wp-content/uploads") or (http.request.full_uri eq "wp-content/themes/nomdutheme")

Cela vous permettra de cibler spécifiquement les ressources de type scripts, images et autres médias du thème et du dossier uploads avec leurs propres règles de mise en cache comme vu précédemment. Rien ne vous empêche de faire une segmentation plus fine pour dissocier par exemple les images du reste, etc…

Vous êtes toujours là ? Bravo 😀

Cela peut paraitre indigeste au premier abord, mais en réalité une fois en place c’est plutôt simple à appréhender et ne demande aucune maintenance. Shopify reste inchangé et WordPress malgré quelques astuces niveau routage reste dans une installation classique ce qui le rend totalement fonctionnel et compatible avec tous les plugins et autres fonctionnalités habituelles.

Vous pouvez ainsi conserver le meilleur des 2 mondes si cela répond à votre besoin.

Dans un prochain article je vous donnerais quelques exemples d’intégrations produits Shopify dans la partie WordPress grâce à l’API. N’hésitez pas à vous abonner sur Linkedin pour suivre le sujet.

Envie d’échanger sur le sujet ?