WordPress

Tous les articles relatifs à WordPress et à son optimisation.

Réalisation de votre projet web photo

Réalisons votre projet WordPress ou WooCommerce

by · Lecture: 10 minutes

Nos compétences au service de vos besoins

Stratégie

Nous étudions le parcours de votre site et vos besoins pour vous fournir une solution à long-terme, qui correspond à votre vision.

Développement

Vous souhaitez ajouter de nouvelles fonctionnalités à votre site ou boutique? Nous pouvons coder la solution!

Performance

Votre site doit être rapide et optimisé sur tous supports afin de convertir vos visiteurs. Nous auditons votre site et proposons la solution adaptée.

Hébergement

Vos projets ont besoin d’un hébergement de qualité, c’est la fondation de votre site web et elle doit être solide car c’est sur elle que tout repose.

Maintenance

Votre site a besoin d’une maintenance régulière afin de toujours utiliser la dernière mouture du code et rester sécurisé face aux menaces.

Assistance

Vous avez besoin d’aide ponctuelle? Pas de problème, nous sommes à votre écoute pour vous dépanner rapidement et sereinement.

Soumettez votre projet

Lire la suite

Image du logo montrant « WPML » avec chaque lettre dans des couleurs différentes : W en bleu, P en bleu sarcelle, M en orange et L en marron. Une bulle de dialogue stylisée gris foncé se trouve à gauche de « WPML ». Une icône de balai avec un manche en bois et des poils jaunes se trouve à droite, faisant allusion à la maintenance ou au nettoyage de WordPress.

Désinstaller proprement WPML et nettoyer la base de données avec WP-CLI

by · Lecture: 5 minutes

Après avoir supprimé et désinstallé les plugins WPML et ses modules complémentaires, vous devez également nettoyer la base de données.

Cette installation particulière que j’ai nettoyée lors d’un projet Codeable n’avait pas WooCommerce ni le module complémentaire WPML WooCommerce installés, donc malheureusement ce guide ne couvre pas le nettoyage spécifique à cela.

Cependant, si vous abandonnez WPML pour des raisons de performance et souhaitez de l’aide pour nettoyer votre base de données, n’hésitez pas à me contacter ici. Vous pouvez également utiliser phpMyAdmin ou Adminer pour nettoyer WPML si vous préférez.

Sauvegardez d’abord votre base de données et testez minutieusement sur un site de staging avant de continuer !

Supprimer les tables et options de base de données WPML

Dans ces sections, nous allons supprimer les lignes pertinentes de WPML de la table wp_options, puis les tables de base de données dédiées à WPML elles-mêmes.

Si vous le souhaitez, vous pouvez recueillir le nombre de données autochargées à l’aide de la commande wp doctor (voir le tutoriel) afin que nous puissions voir à quel point les données autochargées dans wp_options diminuent après avoir nettoyé les plugins WPML.

wp doctor check autoload-options-size --allow-root --skip-plugins --skip-themes

Résultats :

+-----------------------+---------+------------------------------------------------------------+
| name                  | status  | message                                                    |
+-----------------------+---------+------------------------------------------------------------+
| autoload-options-size | warning | Autoloaded options size (1.03mb) exceeds threshold (900kb) |
+-----------------------+---------+------------------------------------------------------------+

Nous dépassons déjà le seuil recommandé de 900 KB de données autochargées dans wp_options (voir ici comment nettoyer les données autochargées).

Lire la suite

Une fenêtre de terminal stylisée affiche la commande « ./WP-CLI » en grand texte blanc, indiquant un audit de profil WordPress pour les problèmes de performances. À droite, un bonhomme allumette rouge s'exécute. La fenêtre comporte une barre de titre bleue et une icône de fermeture.

Auditer les problèmes de performance WordPress avec wp profile

by · Lecture: 7 minutes

La commande wp profile est un peu comme une alternative à New Relic, capable d’identifier précisément quels composants ralentissent votre site WordPress. Initialement disponible en tant que package premium via runcommand, il est désormais gratuit sur GitHub.

Si vous cherchez un hébergeur compatible avec l’installation de wp profile, jetez un œil à Kinsta et FastNyx.

J’utilise régulièrement wp profile pour diagnostiquer les problèmes de performance chez mes clients sur Codeable. Tous les développeurs WordPress devraient s’en servir ! Après avoir suivi ce guide, vous serez plus proche de la résolution de la lenteur de votre site WordPress.

Installation du package wp-profile

Lancez cette commande pour installer wp profile :

wp package install wp-cli/profile-command

Vous devriez voir que le processus s’est déroulé avec succès et que la commande wp profile est maintenant disponible:

Updating /root/.wp-cli/packages/composer.json to require the package...
Using Composer to install the package...
---
Loading composer repositories with package information
Updating dependencies
Resolving dependencies through SAT
Dependency resolution completed in 0.120 seconds
Analyzed 3696 packages to resolve dependencies
Analyzed 101022 rules to resolve dependencies
Package operations: 1 install, 0 updates, 0 removals
Installs: wp-cli/profile-command:dev-master ef44df5
- Installing wp-cli/profile-command (dev-master ef44df5)
Writing lock file
Generating autoload files
---
Success: Package installed.Code language: JavaScript (javascript)

Si vous voyez une erreur concernant composer.json reverté, l’augmentation de la mémoire devrait résoudre ce problème.

Lire la suite

Une fenêtre de terminal stylisée affiche la commande « ./WP-CLI » en grand texte blanc. À côté, une flèche bleue pointant vers le bas pointe vers une barre horizontale verte, suggérant un téléchargement ou une installation via SSH. L'arrière-plan est gris foncé.

Installer WP-CLI sans accès root ni sudo via SSH sur n’importe quel hébergeur

by · Lecture: 3 minutes

Chaque fois qu’un hébergeur n’a pas WP-CLI installé par défaut, je suis déçu : ce puissant outil de gestion WordPress n’est pas disponible ! Heureusement, il est facile d’installer WP-CLI sans accès root ni sudo via SSH.

En suivant cette méthode, vous pourrez utiliser WP-CLI exactement comme s’il avait été installé de manière traditionnelle avec les droits root et placé dans /usr/bin ou /usr/local/bin.

Cet article vous montrera comment installer WP-CLI sur presque toutes les distributions Linux comme CentOS, Debian, Ubuntu, etc., tant que le paquet php-cli est disponible. Tout ce dont vous avez besoin, c’est d’un accès SSH et d’un moyen d’entrer ces commandes, comme le terminal Mac ou PuTTY sous Windows.

Installer WP-CLI sans accès root ni sudo

Nous avons besoin d’un emplacement pour stocker le fichier phar de WP-CLI, créons donc un dossier et entrons dedans :

mkdir -p /tmp/wp-cli<br />cd /tmp/wp-cliCode language: HTML, XML (xml)

Téléchargez la dernière version de WP-CLI phar et rendez-la exécutable :

wget -q https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar -O wp<br />chmod 755 wpCode language: HTML, XML (xml)

Ou bien, téléchargez directement le fichier phar WP-CLI dans votre dossier temporaire :

mkdir -p /tmp/wp-cli<br />wget -q https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar -O /tmp/wp-cli/wp<br />chmod 755 /tmp/wpCode language: HTML, XML (xml)

Ou dans n’importe quel dossier de votre choix :

cd /votre_dossier<br />wget -q https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar -O /votre_dossier/wp<br />chmod 755 /votre_dossier/wp<br />Code language: HTML, XML (xml)

Pour utiliser le WP-CLI que nous venons de télécharger, il faudra ajouter ./ devant wp. Il vous faudra également le chemin d’installation de WordPress.

Lire la suite

Un logo carré rose avec la lettre « E » en blanc se trouve à gauche, symbolisant Elementor. À droite, une illustration simple d'un balai avec un manche marron signifie nettoyer complètement.

Nettoyer complètement la base de données WordPress après la désinstallation d’Elementor

by · Lecture: 4 minutes

Lorsque vous désinstallez des plugins WordPress, de nombreux éléments peuvent rester dans la base de données. Cela rend la base de données inutilement volumineuse et peut même ralentir les requêtes.

Il est toujours recommandé de nettoyer votre base de données WordPress après avoir supprimé des plugins. J’ai récemment migré un site d’Elementor vers GenerateBlocks pour améliorer les performances, donc naturellement j’ai dû nettoyer la base de données.

Ce tutoriel concerne le nettoyage post-désinstallation d’Elementor pour supprimer les lignes restantes des tables options, postmeta, usermeta et posts avec WP-CLI.

Dans ce tutoriel, nous allons couvrir les points suivants :

  • Supprimer les plugins et fichiers Elementor
  • Supprimer les types de publication Elementor
  • Supprimer la taxonomie Elementor
  • Supprimer les meta_keys Elementor des tables usermeta et postmeta
  • Supprimer les options orphelines Elementor de wp_options

Lire la suite

CloudFest Hackathon 2025 main room @ Kronasar Hotel, Europa Park, Germany

CloudFest Hackathon 2025 : the recap

by · Lecture: 8 minutes

I attended CloudFest Hackathon 2025, organised by Carole Olinger, Alain Schlesser and Lucas Radke. It was awesome to meet old friends and make new acquaintances in Europa Park, Germany. Here’s the recap of this 8th edition!

10 projects in competition for #CFHack25

This year, 10 projects were in competition – check out for yourself the diversity of the topics covered:

That’s quite broad, isn’t it? I love it when it’s so hard to choose from the list! A few projects particularly piqued my interest: CMS Cloud Manager because it was sysadmin (it would be nice to implement on FastNyx), Accessible Infographics because I would love to work with Anne-Mieke, Peer-to-peer RAG Framework because my friend Wesley is leading the project, and WP-CLI as a MCP Host since it touches WP-CLI with AI.

I finally joined the WP-CLI as a MCP Host table.

What is the Model Context Protocol (MCP)?

The Model Context Protocol (MCP) is a standardised interface designed to enable AI models—like large language models (LLMs) or AI assistants—to interact seamlessly with external systems and applications. Rather than requiring developers or AI systems to manually parse complex documentation or adapt to a wide variety of APIs, MCP provides a unified way for AI to discover available capabilities, call specific functions or tools, and receive structured responses from the target system.

In practical terms, MCP acts as a bridge between AI and software platforms. It allows AI assistants to:

  • Discover what actions or data are available from a system (such as creating posts, retrieving content, or managing users in WordPress).
  • Call these capabilities as if they were simple functions, without needing to know the technical details of the underlying APIs.
  • Receive structured, predictable responses, making integration and automation much easier.

This approach is particularly powerful for developers and organisations looking to integrate AI into their workflows, as it removes much of the friction typically involved in connecting AI models to real-world applications.

MCP in the WordPress Ecosystem

Within the context of WordPress, MCP enables AI-powered interactions with WordPress sites through standardised interfaces. A WordPress MCP Server exposes the site’s REST API endpoints and other capabilities in a way that AI models can easily understand and use. For example, an AI assistant can:

  • Retrieve the latest posts or comments.
  • Create or edit content.
  • Manage users or plugins.
  • Chain multiple actions together (e.g., summarise GitHub issues and publish them as a blog post).

The WordPress MCP Server handles authentication, endpoint discovery, and request formatting, making it possible for AI models to interact with WordPress securely and efficiently.

Why MCP Matters for Developers

Traditionally, integrating AI with WordPress—especially in local development environments—has been challenging. While REST APIs allow for some AI interactions on live sites, local development workflows lacked seamless AI integration. MCP changes this by providing a protocol that works both locally and remotely, enabling developers to leverage AI for content creation, site management, and automation directly from their command line or development environment, without needing a live site or custom API integrations.

The Vision: a Universal “USB-C Port” for AI

A helpful analogy is to think of MCP as the “USB-C port for AI applications”. Just as USB-C provides a universal connector for hardware devices, MCP aims to standardise how AI models connect and interact with software systems. This universal approach unlocks new possibilities for automation, content generation, and intelligent site management—making advanced AI capabilities accessible to WordPress developers, content creators, and DevOps teams alike.

Lire la suite

Trois icônes sur fond vert : une base de données bleu foncé représentée par des cylindres empilés à gauche, symbolisant les options de base de données WordPress ; une loupe avec une poignée noire et une lentille bleu clair au centre ; et un engrenage gris avec un centre blanc à droite, faisant allusion à l'intégration polyvalente de plugins.

Identifiez les options de base de données liées à vos plugins WordPress

by · Lecture: 15 minutes

Découvrez quelles options de base de données WordPress appartiennent aux plugins

Cet article vous montrera comment identifier quelles options de plugins WordPress dans la table  wp_options  appartiennent à un plugin spécifique.

Normalement, les développeurs recherchent manuellement dans la table wp_options avec phpMyAdmin ou Adminer (version plugin WordPress), mais cela peut souvent être très fastidieux car vous devez paginer parfois des centaines de pages !

Lorsque nous disposons d’outils de ligne de commande Linux via SSH comme WP-CLI et grep, nous pouvons efficacement identifier quelles options dans la base de données WordPress appartiennent à un plugin spécifique et gagner un temps précieux !

Dans cet article, je vais montrer les techniques que j’utilise habituellement pour trouver ces options afin de pouvoir corriger les paramètres, les sauvegarder, etc. en faisant correspondre le option_name WordPress au plugin.Veuillez noter que ces deux approches nécessiteront un terminal et un accès SSH de quelque sorte à votre installation WordPress.

Je supposerai que WP-CLI et grep sont déjà installés sur le système Linux. Kinsta, WPEngine et FastNyx fournissent un accès SSH avec WP-CLI et grep disponibles.

Lire la suite

Graphique textuel comportant les mots « MyISAM » et « InnoDB » en grandes lettres, de style bleu et orange. Un symbole de flèche circulaire bleu foncé les relie, faisant allusion à une conversion ou une intégration dans les environnements WordPress.

Convertir des tables de base de données WordPress de MyISAM à InnoDB avec WP-CLI

by · Lecture: 3 minutes

Dans cet article, je vous montre comment convertir facilement vos tables de base de données WordPress du moteur MyISAM au moteur InnoDB avec WP-CLI.

Si vous vous demandez pourquoi vous voudriez effectuer cette conversion de base de données, je vous avais déjà parlé des améliorations d’InnoDB par rapport à MyISAM (tirer parti de plusieurs cœurs est assez impressionnant). On constate d’énormes améliorations du temps de réponse et une réduction de la charge du serveur après la conversion de MyISAM à InnoDB. Il existe également des différences d’index MySQL intéressantes entre les deux moteurs.

Commençons !

Conversion des tables WordPress de MyISAM à InnoDB avec WP-CLI

Vérifiez si certaines de vos tables utilisent MyISAM au lieu d’InnoDB:

wp db query "SHOW TABLE STATUS WHERE Engine = 'MyISAM'" --allow-rootCode language: JavaScript (javascript)

Si vous n’obtenez aucune sortie, il n’y a pas de tables MyISAM. Si vous obtenez une sortie, elle ressemblera à ceci :

+----------+--------+---------+------------+------+----------------+-------------+-----------------+--------------+-----------+----------------+---------------------+---------------------+---------------------+--------------------+----------+----------------+---------+
| Name     | Engine | Version | Row_format | Rows | Avg_row_length | Data_length | Max_data_length | Index_length | Data_free | Auto_increment | Create_time         | Update_time         | Check_time          | Collation          | Checksum | Create_options | Comment |
+----------+--------+---------+------------+------+----------------+-------------+-----------------+--------------+-----------+----------------+---------------------+---------------------+---------------------+--------------------+----------+----------------+---------+
| wp_posts | MyISAM |      10 | Dynamic    | 2579 |           1916 |     443644 | 28147497610655 |      4224000 |         0 |          11861 | 2017-08-19 21:56:47 | 2017-09-07 03:55:17 | 2017-08-19 21:56:48 | utf8mb4_unicode_ci |     NULL |                |         |
+----------+--------+---------+------------+------+----------------+-------------+-----------------+--------------+-----------+----------------+---------------------+---------------------+---------------------+--------------------+----------+----------------+---------+Code language: PHP (php)
Faites une sauvegarde de votre base de données avant de commencer !

Lire la suite

Un fond vert présente « Jetpack » dans une police élégante et stylisée à gauche, associée à une icône de balai à droite pour une touche de fantaisie. Au dessus du texte, un logo WordPress circulaire arbore un éclair audacieux à l'intérieur, offrant une ambiance électrique à votre expérience de désinstallation.

WordPress : désinstaller Jetpack proprement avec WP-CLI

by · Lecture: 5 minutes

Des fonctionnalités de Jetpack maintenant payantes

J’ai utilisé Jetpack pour les statistiques de mes sites WordPress site depuis 2004, soit 20 ans… mais voilà que Jetpack demande maintenant de payer pour avoir accès aux statistiques mensuelles et annuelles. Cela ne va pas être possible.

Jetpack est une extension couteau suisse, mais qui utilise vraiment tous les outils du couteau suisse? J’ai donc fait le tour des fonctionnalités de Jetpack que j’utilisais réellement et elles sont somme toute peu nombreuses: Stats, Related Posts, Publicize, et Protect.

Au lieu de Stats, j’utilise depuis quelques semaines Koko Analytics : vos statistiques sont dans votre base de données WordPress, donc chez vous, et le plugin respecte le RGPD (pas de cookies, pas d’informations personnelles). J’utilise également Plausible Analytics qui tourne sous Docker et dont je vous avais parlé il y a quelques mois.

Publicize permet d’envoyer vos posts sur les réseaux sociaux, je trouverai bien une alternative plus tard. Protect, le module de sécurité, n’est pas vraiment essentiel puisque la sécurité est en grande partie gérée par le serveur et le WAF.

Pour Related Posts, j’ai modifié le plugin qui j’utilise depuis des années pour qu’il génère des miniatures à la mode Jetpack mais sans le tracking. Car oui, tous les services de Jetpack (comme WooCommerce d’ailleurs) téléphonent les informations du site et du serveur chez Automattic. Mettons-y un terme.

Je vous propose donc un tutoriel pour désinstaller Jetpack proprement et supprimer les enregistrements Jetpack de la base de données car ils ne sont pas retirés à la suppression du plugin. Ainsi, vous aurez une base de données plus propre et donc un site plus rapide.

Lire la suite

Illustrated portrait of a man with a polygonal art style against a blue background, holding a magnifying glass, with the WordPress logo visible, with the text PHPCS, WPCS, and VSCode.

Valider votre projet VSCode avec PHP CodeSniffer (PHPCS) et WordPress Coding Standards (WPCS)

by · Lecture: 6 minutes

Dans ce tutoriel, nous allons explorer comment utiliser Composer pour installer et configurer PHP CodeSniffer (PHPCS) et WordPress Coding Standards (WPCS) dans un projet WordPress (PHP), spécifiquement en utilisant l’éditeur de code Visual Studio Code (VSCode). 

PHPCS est un outil indispensable pour analyser le code PHP, JavaScript et CSS afin de détecter les violations de standards de codage. WPCS est un ensemble de règles pour assurer que le code WordPress respecte les conventions de codage recommandées par WordPress. 

L’intégration de ces outils dans votre environnement de développement peut grandement améliorer la qualité du code et faciliter le respect des normes de codage.

Installation de Composer

Pour commencer, vous devez installer Composer, un gestionnaire de dépendances pour PHP qui permet d’installer et de gérer des bibliothèques au sein de vos projets PHP.

  • Windows :
    • Téléchargez et exécutez l’installateur de Composer depuis getcomposer.org.
    • Suivez les instructions à l’écran pour installer Composer.
  • macOS et Linux :
    • Ouvrez un terminal et exécutez la commande suivante pour télécharger le programme d’installation de Composer :
php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"Code language: JavaScript (javascript)

Ensuite, exécutez le programme d’installation :

php composer-setup.phpCode language: CSS (css)

Pour rendre Composer accessible globalement, déplacez le fichier composer.phar dans un répertoire accessible dans votre PATH :

mv composer.phar /usr/local/bin/composer

Confirmez l’installation en vérifiant la version de Composer :

composer --version

Passons maintenant à la configuration de Visual Studio Code pour utiliser PHPCS et WPCS.

Lire la suite

Un groupe dynamique de développeurs collabore à la 7ème édition du CloudFest Hackathon 2024, qui se déroulera du 16 au 18 mars 2024 à Europa Park,

CloudFest Hackathon 2024 : the recap

by · Lecture: 6 minutes

This year, I was lucky to be invited to the CloudFest Hackathon 2024, thanks to Carole Olinger, Alain Schlesser and Lucas Radke.

CloudFest Hackathon

11 projects competed this year and it was pretty hard to choose only one as there were loads of exciting challenges to overcome. We only have 2 full days (and nights) to code for the project we are part of and make history.

The projects were:

  1. Managing Multilingual Content with WP Multisite
  2. Public Sector Website Funding Transparency
  3. JSON Schema Field/Form Renderer
  4. CMS Health Checks
  5. Securing more infrastructure by easing OS upgrades
  6. Integrating MariaDB Catalogs with PHP Platforms
  7. Can everyone use _______?
  8. WordPress Tools for Hosting Providers
  9. Enable Mastodon Apps for WordPress and its Plugins
  10. Inclusive Language Checker for Open-Source Contributors
  11. Hack the Hackathon

I was on the fence for a while as I’m interested in Multilingual and Multisite, Inclusivity, JSON Schema, and MariaDB. Eventually, I took a chair at the JSON Schema table but quickly found it was too crowded already so I joined Integrating MariaDB Catalogs with PHP Platforms.

Integrating MariaDB Catalogs with PHP Platforms

The Team

We were very fortunate to work with Andrew Hutchings (aka Linux Jedi), who works for the MariaDB Foundation. The project this year revolves around the integration of a new feature called MariaDB Catalogs with PHP frameworks such as WordPress, Drupal, and others.

The team was therefore composed of:

Our hackathon team for the MariaDB catalogs!
Our hackathon team for the MariaDB catalogs!

The project: MariaDB catalogs

The general idea of catalogs is containerization inside MariaDB itself: you have one MariaDB instance running and every customer has their own catalog inside that instance. The memory is shared so you are saving a lot of RAM that way. You don’t have to have 50,000 different read DB instances running, each using a GB of RAM. You simply have one read DB instance running, but you still have each customer siloed.

The hackathon project is to make it easier to administer this, create and remove catalogs.

Lire la suite

An automatic computer screen displaying the message "sorry you have been blocked".

Contourner le blocage du WAF Cloudflare pour les uploads de zip dans WordPress

by · Lecture: 4 minutes

Le blocage des fichiers zip par le WAF (Web Application Firewall) de Cloudflare est un casse-tête pour de nombreux développeurs WordPress, surtout lors de la mise à jour de plugins et de thèmes. Heureusement, il existe une solution pour contourner ce problème sans compromettre la sécurité de votre site WordPress.

Pourquoi le WAF bloque-t-il les fichiers Zip ?

Cloudflare met régulièrement à jour ses Managed Rules pour renforcer la sécurité. Un upload de fichier zip peut être un vecteur pour des attaques malveéillantes, comme l’installation de shells. Ainsi, Cloudflare bloque ces requêtes pour protéger votre site.

Dans notre cas, par contre, cela nous empêche de faire nos mises à jour et c’est quand même plus simple de mettre à jour les plugins et thèmes payants avec un fichier zip, plutôt que de passer par SFTP ou wp-cli.

Solution #1: créer une exception dans le WAF de Cloudflare

Évidemment, nous n’allons pas désactiver ces règles qui fonctionnent si bien et ajoutent une couche de protection à notre site. Non, nous allons simplement créer une exception aux Managed Rules, que nous placerons avant tous les autres set de règles pour qu’elle soit prise en compte en priorité.

Étape 1: rendez-vous dans le Dashboard de Cloudflare

Allez dans Security > WAF > Managed Rules.

Voici ce que vous obtenez:

A screenshot of the WAF settings in Google Analytics showcasing blocked zip files.

Cliquez ensuite sur le bouton Add exception à droite.

Lire la suite

viewport overflow

Vanilla JS : identifier l’élément plus large que le viewport

by · Lecture: 2 minutes

Aujourd’hui, je régle un petit souci d’affichage sur un une boutique WooCommerce propulsée par Astra.

Le problème est le suivant: lorsqu’on visite le site depuis un mobile, il est possible de faire bouger le contenu de la page vers la gauche, ce qui dévoile une hideuse colonne grise/verte sur le côté droit. Pourtant, aucun élément ne semble dépasser la largeur du contenu.

L’identification de l’élément causant ce défaut d’affichage n’est pas vraiment une chose aisée, car visuellement, on ne distingue rien qui dépasse.

Vanilla JS à la rescousse

Voici un petit script en Vanilla JS qui permet de trouver l’élément qui dépasse la largeur du viewport de votre page:

/**
 * Identify elements that exceed the viewport width
 * by Matt Biscay
 * https://www.skyminds.net/?p=614036
 */
document.addEventListener("DOMContentLoaded", function() {
  const elements = document.querySelectorAll('body *');
  elements.forEach(element => {
    if (element.offsetWidth > document.documentElement.clientWidth) {
      console.log('Element causing overflow: ', element);
    }
  });
});Code language: JavaScript (javascript)

CSS: couvrez cet overflow que je ne saurais voir

Une fois votre ou vos éléments identifiés, il ne vous reste plus qu’à cacher son overflow-x :

#element {
  overflow-x: hidden;
}Code language: CSS (css)

Rafraîchissez la page. Hop, problème résolu.

Suivant →