Comment rendre GeneratePress et AMP entièrement compatibles

GeneratePress et AMP sont compatibles. Dans cet article, je vais vous montrer comment vous pouvez rendre GeneratePress 100% compatible avec AMP.

Les pages mobiles accélérées (AMP) sont un open source Projet créé par Google aux côtés d'Automattic. L’objectif est de rendre les sites Web plus rapides sur les téléphones mobiles.

Si la plupart de vos visiteurs proviennent d'un mobile, AMP a le potentiel d'augmenter considérablement votre trafic au fil du temps.

Mais si vous avez la plupart de vos visiteurs depuis le bureau, vous ne remarquerez peut-être pas de différence significative, mais cela en vaut toujours la peine.

GeneratePress est le plus rapide Thème WordPress J'ai vu. Vous pouvez voir mon GénérerRevue de presse. La bonne nouvelle est qu'il est 100% compatible avec AMP.

Mettre en œuvre AMP sur votre site Web/blog

La meilleure façon d'implémenter AMP est d'utiliser le Plugin AMP officiel qui a été construit et est maintenu par Google lui-même.

Visitez le répertoire WordPress pour installer et activer le plugin. Pour ce faire, cliquez sur plugins depuis votre tableau de bord, puis cliquez sur Ajouter nouveau. Une fois sur la page, recherchez AMP. vous verrez le plugin AMP.

Une fois installé, activez le plugin. Cliquez ensuite sur les paramètres. Vous verrez trois options. Mode standard, mode transitionnel ou mode lecteur. Le mode lecteur fonctionnera normalement. Puisqu'il ne s'appuie pas sur votre thème pour fonctionner. Mais si vous rencontrez un problème lors de l'exécution de GeneratePress en mode Transitionnel ou Standard, suivez les étapes ici.

Même si vous utilisez un autre plugin AMP, ces étapes fonctionneront.

Comment rendre GeneratePress et AMP entièrement compatibles

Suivez ces étapes pour rendre GeneratePress et AMP entièrement compatibles :

1. Téléchargez et installez le plugin AMP pour GeneratePress

Il existe un plugin officiel de Tom Usborne, le développeur et fondateur de GeneratePress. Le but du plugin est de résoudre tout problème de compatibilité avec AMP.

Le plugin n'est pas encore disponible sur l'annuaire WordPress. Mais Tom m'a dit d'une manière email qu'il le rendra bientôt disponible.

Pour l'instant, tu peux obtenir le plugin de GitHub.

Une fois là-bas, cliquez sur Cloner ou télécharger. Cliquez ensuite sur télécharger le zip.

Maintenant, pour accéder à votre tableau de bord WordPress, cliquez sur plugins puis cliquez sur ajouter nouveau. Sur la nouvelle page, cliquez sur télécharger le plugin, puis sélectionnez le fichier que vous venez de télécharger et installez-le.

Une fois installé, activez-le. C'est tout.

2. Basculez AMP en mode transitionnel ou standard

Maintenant, allez à nouveau dans les paramètres du plugin AMP et passez en mode transitionnel ou standard. Le mode transitionnel signifie que votre cadre de thème est utilisé pour servir AMP et Non-AMP tandis que le standard signifie que votre site est AMP-first.

Si votre site fonctionne en mode transitionnel AMP, il fonctionnera en mode standard. La seule différence entre les deux est l'URL canonique.

En mode transitionnel, vous devez ajouter ?ampli à la fin de vos liens, y compris la page d'accueil pour accéder à AMP.

Mais en mode standard, aucun ajout n'est nécessaire. Vos URL canoniques sont amp.

Pour ce test, j'utilise le mode transitionnel pour montrer que cela fonctionne. Je préfère utiliser AMP en mode lecteur car la plupart de mes visiteurs viennent du bureau.

3. Effectuez un test AMP.

Après passage en mode transitionnel ou standard. Vous verrez de nombreuses erreurs ! Ne panique pas!

Vous pouvez voir les erreurs que j'ai eues ci-dessous après avoir changé BloggingOutils au mode transitionnel.

Il y avait 48 index d'erreur.

La plupart de ces erreurs sont des avertissements. Certains d'entre eux sont causés par des plugins. Les avertissements vous informent que les éléments en surbrillance ne seront pas affichés dans AMP.

Je n'ai remarqué aucun avertissement majeur lié au thème.

Le problème majeur que j'ai remarqué provenait de mon plugin de mise en cache, Breeze. Il ajoutait un CSS qui ne semble pas rendre AMP heureux. J'ai donc désactivé Breeze et procédé au test.

Vous pouvez utiliser Outil de test AMP officiel de Google pour les tests.

Le résultat montre que AMP fonctionne sans problème. Voir ci-dessous.

Voici le test pour ma page d'accueil.