Comment configurer le support AMP pour WordPress

Dans ce didacticiel, nous allons expliquer en détail comment générer des versions AMP valides des publications de votre site WordPress. Nous ferons cela en utilisant le plugin AMP créé par Automattic.

Il existe d’autres plugins que vous pouvez utiliser si vous le souhaitez, mais comme nous n’avons vraiment de la place que pour regarder un seul plugin dans ce tutoriel, nous allons garder le focus sur celui créé par l’équipe derrière WordPress même.

Remarque: cet article suppose que vous sachiez déjà comment créer des pages AMP valides et qu'il se concentrera sur les détails propres à l'utilisation conjointe de WordPress et AMP. Si vous êtes nouveau sur AMP, consultez:

• AMP en 60 secondes
• En route avec AMP
• Comment faire une page AMP de base à partir de zéro
• Projet AMP: Vos sites seront-ils plus rapides?
• Comment utiliser amp-img et amp-video pour accélérer votre site Web

Cela suppose également que vous maîtrisez un site WordPress auto-hébergé. Sinon, ces ressources pourraient vous être utiles:

• Comment se lancer avec WordPress
  
• Guide du débutant pour WordPress

Le plugin AMP d'Automattic

Ce plugin, nommé simplement AMP, automatise la génération de posts uniques valides AMP. Pour chaque message créé, une deuxième version sera également disponible avec / amp / annexé au permalien. Si vous n'utilisez pas la fonctionnalité de réécriture permanente de WordPress sur votre site /? amp = 1 sera ajouté à l'URL à la place.

Par exemple, ceci est un article WordPress standard:

Notez que l'extension AMP Validator est installée dans Chrome. Elle détecte qu'une version AMP de cette page est disponible et affiche une petite icône de lien bleue:

AMP Validator extension

Si je clique sur la petite icône de lien bleu de l'extension, nous accédons à la version AMP du message:

Utiliser ce plugin dans son état par défaut est à peu près «plug and play». Installez, activez et vous êtes opérationnel. Aucune option de configuration n’exige votre attention dans le cadre de la configuration..

À l’heure actuelle, ce plug-in ne fonctionne que sur des publications uniques. Il n’affecte pas les pages, les types de publications personnalisées ou les archives. La page du plugin sur le référentiel WordPress indique la prise en charge de ces derniers en cours de développement..

• Plugin AMP
  
• LISEZMOI du plugin AMP
  

Utiliser avec Yoast SEO via Glue

Si vous aimez utiliser le plug-in SEO de Yoast pour vos publications habituelles, il existe un plug-in supplémentaire appelé "Glue for Yoast SEO & AMP" disponible pour la sortie de métadonnées de style Yoast dans vos publications AMP. Par exemple, il a ajouté ces balises méta au message de démonstration décrit précédemment:

Pour utiliser ce plugin, vous devez d'abord installer le plugin principal Yoast SEO. Le plugin Glue ajoutera alors une section supplémentaire intitulée AMP à la principale du plugin SEO menu administrateur.

• Colle pour Yoast Plugin
• Yoast sur AMP et WordPress Partie I
  
• Yoast sur AMP et WordPress Part II

Eléments multimédias et AMP personnalisés

L’un des aspects les plus importants de la création de pages valides AMP consiste à utiliser les éléments personnalisés requis pour le placement de supports, tels que amp-img au lieu de img par exemple. Cependant, lors de la création de publications dans WordPress, vous travaillez généralement dans l'éditeur WYSIWYG TinyMCE et vous ne contrôlez pas directement le balisage utilisé pour l'insertion de contenu multimédia..

Avec le plug-in Automattic AMP installé, vous n'avez pas à vous en inquiéter, car il filtrera automatiquement votre contenu et procédera aux conversions suivantes en éléments AMP personnalisés:

• img → amp-img ou amp-anim
• vidéo → amp-video
• l'audio = → ampli-audio
• iframe → amp-iframe
• YouTube oEmbed → amp-youtube
• Instagram eEmbed → amp-instagram
• Twitter ou incorporation → amp-twitter
• Vigne oEmbed → amp-vine
  

Remarque: si vous utilisez Flash n'importe où sur votre site, il n'est pas pris en charge. Tout autre type de support peut être utilisé dans les publications AMP, à condition qu'il soit ajouté à l'aide de l'un des éléments de la liste ci-dessus..

• À propos de WordPress oEmbeds
  

Shortcodes et Plugins

Une autre considération lors de l’utilisation du plugin AMP d’Automattic sur vos publications WordPress est le comportement des shortcodes et des plugins..

Sortie d'en-tête et de pied de page

Le plugin d'Automattic empêche les publications AMP d'utiliser la normale wp_header () et wp_footer () des fonctions de thème souvent utilisées par les plug-ins pour générer du code JavaScript, CSS et HTML personnalisé. Si un plugin que vous utilisez dépend de l'une de ces fonctions, cela ne fonctionnera pas.

Pour qu'un plug-in génère un code personnalisé en combinaison avec le plug-in AMP, il doit utiliser des actions spéciales et des filtres qui se substituent à la fonctionnalité de thème WP normale. Par exemple, vous ne pouvez pas ajouter de balises méta à la section comme vous le feriez généralement, en utilisant le wp_head action de sortie du code à travers le wp_header () fonction, mais vous pouvez utiliser le amp_post_template_metadata filtrer à la place.

Le plug-in Glue de Yoast utilise ces actions et filtres spéciaux, ce qui lui permet de générer des données de référencement et des CSS personnalisées sur des pages AMP sans interrompre la validation..

Codes courts

Si vous utilisez des plugins qui reposent sur des codes courts, vous devez vous assurer que le code généré est le suivant:

1. AMP valide, par exemple pas de JS ni CSS en ligne
   et / ou
   
2. Marquage de la liste de la section précédente que le plug-in AMP convertit automatiquement en éléments personnalisés requis.
   

Pour vérifier cela, accédez à une publication qui, à votre connaissance, utilise le (s) code (s) en question et utilisez le plug-in AMP Validator dans Chrome / Chromium pour voir si la validation de la publication est réussie..

JavaScript personnalisé

Il est également important de garder à l'esprit lors de l'utilisation de plug-ins sur un site AMP ', qu'aucun JavaScript personnalisé n'est autorisé. Par conséquent, les plug-ins qui dépendent de JavaScript ne fonctionneront pas du tout. Par exemple, si vous utilisez un plug-in pour piloter un curseur d'image alimenté par JavaScript, il ne fonctionnera pas..

Analytique

Si vous utilisez des analyses qui dépendent d'un extrait de code JavaScript, l'exclusion de JS personnalisé par AMP signifie que vous devrez remplacer l'extrait de code par l'élément. amp-analytics élément sur vos pages AMP.

Cela signifie que vous êtes limité aux services d'analyse que Google a choisi de prendre en charge dans le format AMP, mais la bonne nouvelle est qu'il existe plusieurs fournisseurs sur la liste..

Vous pouvez soit utiliser un plugin pour générer du code analytique convivial, soit ajouter manuellement le code de suivi..

Pour être inclus via un plugin, le plugin Glo de Yoast contient une section dans laquelle vous pouvez ajouter du code Google Analytics, et le convertira au format convivial AMP pour vous. Pour le trouver allez au AMP section dans le SEO menu pour le plugin de Yoast, puis sur le Analytique languette:

Si vous ne trouvez pas de plug-in pour intégrer le service d'analyse que vous souhaitez utiliser, vous devrez le coder en dur. Le plugin Automattic AMP propose un filtre que vous pouvez utiliser pour cela..

Le code personnalisé permettant d’intégrer vos propres analyses doit être ajouté au fichier «functions.php» d’un thème personnalisé ou d’un thème enfant, ou à un plugin personnalisé que vous créez vous-même..

Personnaliser le look

Vous pouvez donner à vos pages AMP un peu de votre style et de votre marque de différentes manières..

Customizer intégré

Le plug-in Automattic AMP a une page intégrée dans le personnaliseur avec trois paramètres d’apparence que vous pouvez modifier. Pour y accéder, allez à Apparence> AMP dans le menu admin:

Une fois dans la zone de personnalisation, les options de conception AMP ne s'affichent que lorsque vous cliquez sur Conception dans la colonne de gauche. À partir de là, vous serez en mesure de sélectionner une couleur d'en-tête, une couleur d'arrière-plan et de lien, et vous pourrez choisir entre un jeu de couleurs clair ou foncé..

Personnalisateur de colle

Les options du personnalisateur intégré sont limitées, donc si vous souhaitez jouer avec quelques paramètres supplémentaires, le plug-in Glue de Yoast comporte le bonus supplémentaire de certains contrôles de conception, trouvés en allant dans SEO> AMP et ensuite au Conception languette.

Le plugin Glo de Yoast et ses contrôles de conception

Modifications du code

Si les personnalisateurs disponibles basés sur une interface graphique ne suffisent pas, vous pouvez commencer à creuser dans du code pour pouvoir utiliser votre propre code CSS ou modèle. Pour ce faire, vous pouvez soit:

• Créez un thème personnalisé (ou thème enfant) et ajoutez du code à son fichier «functions.php».
  
• Créer un plugin personnalisé

Si vous ne savez pas déjà comment procéder, le mieux est probablement de vous en tenir aux options de personnalisation de l'interface graphique disponibles..

Remplacer le fichier “style.php” du plugin AMP

Tous les CSS qui contrôlent la présentation des pages AMP dans le plugin Automattic se trouvent dans son sous-dossier "templates" dans le fichier "style.php". Vous ne devez pas modifier directement le code dans ce fichier car vous perdrez toutes vos modifications lorsque le plugin sera mis à jour. Cependant, vous pouvez remplacer ce fichier par l’un des vôtres..

Si vous créez votre propre thème personnalisé ou un thème enfant, créez un dossier nommé «amp» et ajoutez-y votre CSS à un fichier nommé «style.php». Le plugin AMP trouvera automatiquement ce fichier et l'utilisera.

Si vous créez votre propre plugin, vous pouvez utiliser n’importe quel fichier PHP contenant votre CSS personnalisé, puis spécifiez ce fichier à l’aide de la touche amp_post_template_file filtre combiné avec une vérification conditionnelle pour 'style' === $ type.

Pour plus d'informations sur cette procédure, consultez la documentation d'Automattic sur GitHub..

Append CSS

Si vous devez seulement ajouter un peu de code personnalisé au CSS existant du plugin, vous pouvez utiliser le amp_post_template_css action. Pour plus de détails sur la manière de procéder, ainsi que quelques exemples, voir la section correspondante de la documentation d'Automattic..

Dans le cas de l'ajout de CSS, vous avez également la possibilité d'ajouter du code personnalisé via le plugin Glo de Yoast, dans la zone de texte intitulée «Extra CSS» située au bas de sa page. Conception languette.

Remarque: Que vous ajoutiez ou surchargiez le code CSS du plug-in AMP, assurez-vous de ne pas en inclure.