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;
}
<?php }
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 <style amp-custom> l'élément, et l’emporte sur les règles de style précédentes. D’où la couleur de fond orange est maintenant appliqué à l’en- tête.
Vous pouvez procéder à écrire les règles de style comme vous le faites normalement. Mais, garder à l’esprit quelques restrictions, et de garder les tailles de style au – dessous 50Kb. En cas de doute, s’il vous plaît vous référer à notre article précédent sur la façon d’obtenir vos pages AMP validées.
Templating
Si vous semblez avoir à changer beaucoup de choses au – de là du style, vous MIGH twant de se pencher sur la personnalisation de l’ensemble du modèle. Le plug – in, ampli-wp, fournit un certain nombre de haut- modèles , à savoir:
header-bar.phpmeta-author.phpmeta-taxonomy.phpmeta-time.phpsingle.phpstyle.php
Ces modèles sont un peu comme la régulière hiérarchie de modèle de WordPress.
Chacun de ces modèles peuvent être pris en charge en fournissant le fichier du même nom dans le cadre du/amp/dossier dans le thème. Une fois que ces fichiers sont en place, le plugin va les ramasser à la place des fichiers par défaut, et nous permettent de changer la sortie de ces modèles entièrement.
vingt douze ├── 404.php ├── ampli │ ├── méta-author.php │ ├── méta-taxonomy.php │ ├── single.php │ └── style.php
Vous pouvez réécrire les styles entiers à travers le style.php fichier ou modifier toute la structure de la page AMP à votre besoin avec le single.php. Pourtant, vous devrez garder le changement de se conformer à la réglementation de l’AMP.
Liste des crochets et filtres
Comme mentionné précédemment, ce plugin est livré avec un certain nombre d’actions et filtres. Il est impossible de couvrir chacun dans cet article. Mais nous pouvons aller avec une antisèche, le résumé, ainsi que les extraits dont vous avez besoin:
actes
Le amp_init; action est utile pour les plugins qui comptent sur AMP pour leur plug – in pour travailler; il fonctionne lorsque le plugin est déjà lancé.
function amp_customizer_support_init() {
require_once dirname( __FILE__ ) . ‘/amp-customizer-class.php’;
}
add_action( ‘amp_init’, ‘amp_customizer_support_init’ );
Semblable à l’ wp_headaction, nous pouvons utiliser amp_post_template_head pour inclure des éléments supplémentaires dans le head tag dans les pages AMP comme meta, style ou script.
function theme_amp_google_fonts() { ?>
<link rel= »stylesheet » href= »https://fonts.googleapis.com/css?family=PT+Serif:400,400italic,700,700italic%7CRoboto+Slab:400,700&subset=latin,latin »>
<?php }
add_action( ‘amp_post_template_head’, ‘theme_amp_google_fonts’ );
amp_post_template_footer Cette action est similaire à l’wp_footer.
function theme_amp_end_credit() { ?>
<footer class= »amp-footer »>
<p>© Hongkiat.com 2016</p>
</footer>
<?php }
add_action( ‘amp_post_template_footer’, ‘theme_amp_end_credit’ );
Filtres
amp_content_max_width est utilisé pour définir la largeur maximale de la page AMP. La largeur sera également utilisée pour définir la largeur des éléments incorporés comme une vidéo Youtube.
function theme_amp_content_width() {
return 700;
}
add_filter( ‘amp_content_max_width’, ‘theme_amp_content_width’ );
amp_site_icon_url est utilisé pour définir l’icône – favicon et Apple icône – URL. La valeur par défaut tombe à l’image téléchargée via l’interface Icône du site, qui a été introduit dans la version 4.3.
function theme_amp_site_icon_url( ) {
return get_template_directory_uri() . ‘/images/site-icon.png’;
}
add_filter( ‘amp_site_icon_url’, ‘theme_amp_site_icon_url’ );
amp_post_template_meta_parts est pour quand vous avez besoin pour personnaliser la sortie de méta – données de la poste, comme le nom de l’auteur, la catégorie, et l’horodatage. Vous pouvez via ce filtre mélanger l’ordre par défaut, ou supprimer l’un des méta sur la page AMP.
function theme_amp_meta( $meta ) {
foreach ( array_keys( $meta, ‘meta-time’, true ) as $key ) {
unset( $meta[ $key ] );
}return $meta;
};
add_filter( ‘amp_post_template_meta_parts’, ‘theme_amp_meta’ );
amp_post_template_metadata est pour la personnalisation de las tructure de données Schema.org dans les pages AMP. L’exemple suivant montre comment nous fournissons le logo du site qui sera affiché dans le carrousel AMP dans le résultat de recherche Google, et supprimer la page times tamp modifié.
function amp_schema_json( $metadata ) {
unset( $metadata[ ‘dateModified’ ] );
$metadata[ ‘publisher’ ][ ‘logo’ ] = array(
‘@type’ => ‘ImageObject’,
‘url’ => get_template_directory_uri() . ‘/images/logo.png’,
‘height’ => 60,
‘width’ => 325,
);
return $metadata;
}
add_filter( ‘amp_post_template_metadata’, ‘amp_schema_json’, 30, 2 );
amp_post_template_file ce ci est une autre façon de remplacer les fichiers de modèle. Il est utile si vous préférez accueillir personnalisés vos fichiers de modèle AMP dans un autre répertoire autre que /amp/.
function theme_custom_template( $file, $type, $post ) {
if ( ‘meta-author’ === $type ) {
$file = get_template_directory_uri() . ‘/partial/amp-meta-author.php’;
}
return $file;
}
add_filter( ‘amp_post_template_file’, ‘theme_custom_template’, 10, 3 );
amp_query_varest utilisé pour modifier la page en dpoint AMP lorsque l’URL Lien permanent est activé. Par défaut , il est réglé sur /amp/. Compte tenu de ce qui suit, la page d’AMP est maintenant accessible par l’ ajout /m/à l’adresse URL (par exemple www.example.com/post-slug/m/).
function custom_amp_endpoint( $amp ) {
return ‘m’;
}
add_filter( ‘amp_query_var’ , ‘custom_amp_endpoint’ );
Via : hongkiat