AMP est un effort communal qui promet une Page de meilleures performances de la charge pour les sites web dans l’environnement mobile. Mais, comme vous pouvez le trouver à partir de notre précédent tutoriel, vous aurez à sacrifier des choses de fantaisie à partir de votre site Web et suivre strictement les règles, respecter les directives, et obtenir des pages validées. Cela ressemble beaucoup à faire, non?
Heureusement, si vous avez construit votre site web avec WordPress, vous pouvez appliquer AMP à votre site Web en un clin d’ œil à l’aide d’ un plugin nommé AMP-WP. Il est livré avec plus de fonctionnalités que ce qui saute aux yeux. Donc, nous allons voir comment cela fonctionne.
activation
Pour commencer, connectez – vous à votre site Web, allez à Plugins> Ajouter un nouvel écran. Chercher AMP installer et activer celui de Automattic.
Une fois activé, vous pouvez afficher le poste AMP converti en ajoutant la /amp/piste à la fin de l’après URL (par exemple http://wp.com/post/amp/), ou avec ?amp=1(par exemple http://wp.com/post/?amp=1) si vous ne l’utilisez Pretty Permalinks disposent sur votre site.
Et comme vous pouvez le voir ci-dessus, le poste a été donné stylings de base, que vous pouvez personnaliser davantage.
À noter
Il y a quelques choses que vous devez savoir sur l’état du plug-in en ce moment:
- Archives – Catégorie, Tag et personnalisé Taxonomie – ne sont actuellement pas pris en charge. Ils ne seront pas convertis au format AMP-conforme. Cependant, les types personnalisés de poste peuvent être lancées en AMP àtravers un filtre.
- Il n’ajoute pas dans un nouvel écran de réglage dans le tableau de bord. La personnalisation se fait au niveau du code avec des actions, Filtres, classe.
- Le plugin ne couvre pas actuellement tous les éléments personnalisés tels que AMP
amp-analyticsetamp-adhors de la boîte. Si vous avez besoin de ces éléments, vous devrez l’inclure en accrochant sur les actions ou filtres du plugin.
Personnalisation
Le plugin fournit de nombreuses actions et filtres qui fournit la flexibilité sur la personnalisation des 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 ce soit une chose que vous voulez changer immédiatement après l’activation du plugin, comme le changement de la couleur de l’en-tête d’arrière-plan, la famille de polices, et la taille de police pour mieux correspondre à la marque de votre site et de la personnalité.
Pour ce faire, nous pouvons employer l’amp_post_template_css action dans le functions.php dossier de notre thème.
function theme_amp_custom_styles() { ?>
nav.amp-wp-title-bar {
background-color: orange;
}
add_action( ‘amp_post_template_css’, ‘theme_amp_custom_styles’ );
Si l’on regarde à travers les DevTools Chrome, ces styles sont ajoutés au sein de