Comment utiliser AMP avec WordPress

AMP est un effort collectif qui promet une meilleure performance de chargement de pages pour les sites Web dans l'environnement mobile . Mais, comme vous pouvez le constater dans notre didacticiel précédent, vous devrez sacrifier des éléments fantaisistes de votre site Web, suivre strictement les règles, respecter les consignes et valider les pages. Cela semble beaucoup à faire, n'est-ce pas?

Heureusement, si vous avez construit votre site Web avec WordPress, vous pouvez appliquer AMP à votre site Web en un clin d'œil en utilisant un plugin nommé AMP-WP. Il est livré avec plus de fonctionnalités que ce qui vous convient. Alors, voyons comment cela fonctionne.

Activation

Pour commencer, connectez-vous à votre site Web, allez à Plugins> Ajouter un nouvel écran. Rechercher "AMP; installez et activez celui d'Automattic.

Une fois activé, vous pouvez afficher le message converti en AMP en ajoutant le /amp/ trail à la fin de l'URL du message (par exemple http://wp.com/post/amp/ ), ou avec ?amp=1 (par exemple http://wp.com/post/?amp=1 ) si vous n'utilisez pas la fonctionnalité Pretty Permalinks sur votre site Web.

Et comme vous pouvez le voir ci-dessus, le poste a été donné des styles de base, que vous pouvez personnaliser davantage.

À noter

Il y a quelques choses que vous devriez savoir sur l'état du plugin en ce moment:

• Les archives - catégorie, étiquette et taxonomie personnalisée - ne sont actuellement pas prises en charge. Ils ne seront pas convertis en format compatible AMP. Cependant, les types de post personnalisés peuvent être initiés dans AMP via un filtre.
• Il n'ajoute pas dans un nouvel écran de paramètres dans le tableau de bord. La personnalisation est effectuée au niveau du code avec Actions, Filtres, Classe.
• Le plugin n'inclut pas actuellement tous les éléments personnalisés AMP tels que l' amp-analytics amp-ad et l' amp-ad hors-la-boîte. Si vous avez besoin de ces éléments, vous devrez les inclure dans les Actions ou les Filtres du plugin.

Personnalisation

Le plugin fournit de nombreuses actions et filtres qui permettent de personnaliser les styles, le contenu de la page et même le balisage HTML de la page AMP dans son ensemble.

modes

Je suis sûr que c'est une chose que vous voulez changer immédiatement après l'activation du plugin, comme changer la couleur d'arrière-plan de l'en-tête, la famille de polices et la taille de police pour mieux correspondre à votre marque et votre personnalité.

Pour ce faire, nous pouvons utiliser l'action amp_post_template_css dans le fichier functions.php de notre thème.

 function theme_amp_custom_styles () {?> nav.amp-wp-barre-titre {background-color: orange; } 
Si nous regardons à travers les Chrome DevTools, ces styles sont ajoutés dans le