Comment utiliser AMP avec WordPress

AMP est un effort commun qui promet une meilleures performances de chargement de page pour les sites Web dans l'environnement mobile. Mais, comme vous pouvez le constater dans notre précédent tutoriel, vous devrez sacrifier tout ce qui est fantaisie sur votre site Web, respecter scrupuleusement les règles, vous conformer aux directives et obtenir la validation de vos 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 instant en utilisant un plugin nommé AMP-WP. Il est livré avec plus de fonctionnalités que ce qui vous passe par la tête. Alors voyons comment ça marche.

Activation

Pour commencer, connectez-vous à votre site Web, allez à Plugins> Ajouter un nouveau écran. Rechercher “AMP; installer et activer celui d'Automattic.

Une fois activé, vous pouvez afficher le poste converti au format AMP en ajoutant le / amp / trace à 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 fonction Pretty Permalinks sur votre site web.

Et comme vous pouvez le voir ci-dessus, des styles de base ont été attribués au message, que vous pouvez personnaliser davantage..

À noter

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

• Les archives - Catégorie, Étiquette et Taxonomie personnalisée - ne sont actuellement pas pris en charge. Ils ne seront pas convertis au format compatible AMP. Toutefois, les types de publication personnalisés peuvent être initiés dans AMP via un filtre..
• Il n'ajoute pas dans un nouvel écran de réglage dans le tableau de bord. La personnalisation est faite au niveau du code avec Actions, Filtres, Classe.
• Le plugin n'englobe actuellement pas tous les éléments personnalisés AMP tels que amp-analytics et amp-ad hors de la boîte. Si vous avez besoin de cet élément, vous devrez l'inclure en vous connectant aux Actions ou Filtres du plugin..

Personnalisation

Le plug-in propose 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 souhaitez modifier immédiatement après l'activation du plug-in, par exemple changer la couleur d'arrière-plan de l'en-tête, la famille de polices et la taille de la police afin de mieux correspondre à la marque et à la personnalité de votre site Web.

Pour ce faire, nous pouvons employer le amp_post_template_css Action dans le functions.php fichier de notre thème.

fonction theme_amp_custom_styles () ?> nav.amp-wp-title-bar background-color: orange;   
Si nous regardons à travers Chrome DevTools, ces styles sont ajoutés à la liste.