Qu’est-ce qu’AMP ?

AMP est un projet opensource initié par Google et visant à définir et promouvoir un format de page web allégé pour mobile. Dans les faits, c’est un concurrent de Instant Article de Facebook.

Pourquoi l’utiliser ?

Au-delà de l’amélioration de l’expérience utilisateur sur mobile (c’est-à-dire que la page charge plus vite :-), Google favorise dans le résultat de ses recherches les sites supportant AMP.

Et avec WordPress ?

Il y a bien sûr un plugin pour cela (et même plusieurs). Contrairement à Instant Article, le plugin officiel – WP-AMP – est très bien et en plus il est très paramétrable. Malheureusement (ou heureusement, c’est selon son point de vue), ce paramétrage ne se fait que par programmation. La page Github du projet WP-AMP décrit dans le détail toutes les personnalisations possibles. Nous allons en voir quelques-unes.

Personnaliser le plugin WP-AMP

Bien sûr, tout va se passer dans le functions. php de votre thème. En l’occurrence, comme le but est de personnaliser le rendu du frontend de votre site, il n’y a vraiment aucune raison d’aller mettre cela dans un plugin ou un mu-plugin, vu que l’objectif est de rapprocher le rendu des pages AMP de celui des pages classiques.

Un point important à savoir avant de commencer est que le plugin WP-AMP ne converti que les articles, pas les pages ni la homepage, pages de catégories ou pages archives etc.

Première personnalisation : le header de la page. Ici, on va pouvoir ajouter des règles CSS spécifiques à cette partie de la page. Au passage, on peut aussi ajouter des règles CSS pour d’autres parties de la page… Je vous propose une solution un peu plus modulaire que celle proposée par WP-AMP, à savoir définir ces règles CSS dans un fichier css à insérer dans votre thème … ou dans un thème enfant. C’est l’intérêt de l’opération.

add_action( 'amp_post_template_css', 'djth_amp_additional_css_styles' ) ;
function djth_amp_additional_css_styles( $amp_template )
{
// Insert child theme specific css styles into amp page
WP_Filesystem() ;
global $wp_filesystem ;
$file = $wp_filesystem->get_contents( get_stylesheet_directory() . '/amp-style.css' ) ;
if( isset( $file ) )
{
echo $file ;
}
}

Deuxième personnalisation : le footer (logique, après le header…). Ici, c’est rigoureusement la technique proposée par WP-AMP.

// Set custom templates : footer
add_filter( 'amp_post_template_file', 'djth_amp_set_custom_template', 10, 3 ) ;
function djth_amp_set_custom_template( $file, $type, $post ) 
{
// Footer
if ( 'footer' === $type )
{
$file = get_stylesheet_directory() . '/amp-footer.php' ;
}
return $file ;
}

Troisième personnalisation : le code de suivi. La version « Google Analytics » étant parfaitement décrite par WP-AMP sur sa page Github, je vous propose un version « Piwik », en utilisant le code Pixel et avec là aussi, une petite amélioration en externalisant le code de suivi dans un fichier (en l’occurrence nommé amp-piwik.php).

add_action( 'amp_post_template_footer', 'djth_amp_add_pixel' ) ;
function djth_amp_add_pixel( $amp_template )
{
$post_id = $amp_template->get( 'post_id' ) ;
// Insert Piwik Pixel into amp page
WP_Filesystem() ;
global $wp_filesystem ;
$file = $wp_filesystem->get_contents( get_stylesheet_directory() . '/amp-piwik.php' ) ;
if( isset( $file ) )
{
echo $file ;
}
}

Le fichier amp-piwik.php ressemblera à ceci (en remplaçant <id> par l’id de suivi que vous avez défini pour votre site) :

<amp-pixel src="https ://mon.domai.ne/piwik.php ?idsite=<id>&rec=1&action_name=TITLE&urlref=DOCUMENT_REFERRER&url=CANONICAL_URL&rand=RANDOM">
</amp-pixel>

Et pour voir le résultat, visualisons la version AMP de cette page (et une petite mise en abîme au passage).

Sources :

Tags : ,

Classés dans :