AMP sous WordPress, comment bien configurer ses publications mobiles

Si vous êtes un tant soit peu investi dans le développement de site, ou même simple habitué de la navigation sur le web, l’importance du format mobile ne vous est pas étrangère. De plus en plus d’utilisateurs utilisent leur smartphone pour surfer. Malheureusement de nombreux sites, malgré leur optimisation responsive, accusent une certaine lourdeur une fois sur téléphone. AMP est clairement l’une des solutions les plus importantes pour y remédier et enfin offrir une navigation fluide à vos utilisateurs quelque soit le support.

AMP et WordPress, un plugin tout-en-un presque idéal

Le projet open source lancé par Google autour de l’AMP a bien grandi, et la firme du premier moteur de recherche mondial compte bien imposer le format. Pour se faire, Google met de plus en plus en avant les résultats optimisés par AMP. Outre la rapidité offerte parle format, il s’agit donc également d’un avantage considérable en termes de visibilité dans les résultats de recherche.

Parmi les nombreuses options offertes pour proposer des articles optimisés pour l’affichage sur mobile, le plugin réalisé par Automattic reste la référence à ce jour. Il permet une configuration quasi instantanée de l’affichage des publications. Dans l’absolu, il ne nécessite pas de configuration, une fois installée, l’extension se règle automatiquement et prépare l’affichage des articles avec l’image à la une et un réglage css de base. Il est cependant possible d’aller plus loin en termes de personnalisation.

Personnaliser le CSS de AMP et ajouter les articles liés

Il est en effet possible d’aller plus loin en termes de configuration css que ce que nous propose le plugin de base. Encore une fois, il s’agit de Yoast qui vole à notre secours avec l’extension Glue For Yoast SEO AMP. Cet outil apporte une option AMP à Yoast et permet de booster ses possibilités. Outre l’activation facilitée du type de post concerné et de l’analytics, c’est surtout l’option « Design » qui va nous permettre de personnaliser l’affichage sur mobile.

Nous pouvons ainsi facilement ajouter les couleurs du site, le logo ou encore l’affichage des liens sur chacune des pages mobiles.

Il ne nous reste donc plus qu’à ajouter les articles en rapport. Cette option a disparu de l’affichage de base avec AMP. Grand classique des blogs, elle permet aux utilisateurs d’accéder à plus de publications liées à celle qu’ils sont en train de lire. Pour retrouver ce formidable atout, il va falloir ajouter du code au fichier function.php de votre thème actif (thème enfant de préférence).

Rien de bien compliqué rassurez-vous, ajouter simplement le code ci-dessous :

/**
 * Template tag to show related posts on AMP
 * Output is an unordered list of links
 * @param int $count the number of posts to list
 */
 
function my_amp_related_posts( $count = 2 ) {
 
 global $post;
 $taxs = get_object_taxonomies( $post );
 if ( ! $taxs ) {
 return;
 }
 
 // ignoring post formats
 if( ( $key = array_search( 'post_format', $taxs ) ) !== false ) {
 unset( $taxs[$key] );
 }
 
 // try tags first
 
 if ( ( $tag_key = array_search( 'post_tag', $taxs ) ) !== false ) {
 
 $tax = 'post_tag';
 $tax_term_ids = wp_get_object_terms( $post->ID, $tax, array( 'fields' => 'ids' ) );
 }
 
 // if no tags, then by cat or custom tax
 
 if ( empty( $tax_term_ids ) ) {
 // remove post_tag to leave only the category or custom tax
 if ( $tag_key !== false ) {
 unset( $taxs[ $tag_key ] );
 $taxs = array_values($taxs);
 }
 
 $tax = $taxs[0];
 $tax_term_ids = wp_get_object_terms( $post->ID, $tax, array('fields' => 'ids') );
 
 }
 
 if ( $tax_term_ids ) {
 $args = array(
 'post_type' => $post->post_type,
 'posts_per_page' => $count,
 'orderby' => 'rand',
 'tax_query' => array(
 array(
 'taxonomy' => $tax,
 'field' => 'id',
 'terms' => $tax_term_ids
 )
 ),
 'post__not_in' => array ($post->ID),
 );
 $related = new WP_Query( $args );
 
 if ($related->have_posts()) : ?>
 
 <aside>
 <h3>Ne manquez pas :</h3>
 <ul>
 
 <?php while ( $related->have_posts() ) : $related->the_post(); ?>
 
 <li><a href="<?php echo amp_get_permalink( get_the_id() ); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>
 
 <?php endwhile; 
 wp_reset_postdata(); ?>
 
 </ul>
 </aside>
 
 <?php endif;
 
 }
 
}
 
/**
 * Add related posts to the AMP template footer
 */
function my_add_related_posts_to_amp( $template ) {
 ?>
 <div class="amp-wp-content">
 <?php my_amp_related_posts( 3 ); ?>
 </div>
 <?php
}
add_action( 'amp_post_template_footer', 'my_add_related_posts_to_amp' );

Ce dernier est configurable quant au nombre d’articles proposés. Il est de base réglé à trois, mais vous pouvez changer cela en modifiant la fonction :

<?php my_amp_related_posts( 3 ); ?>

Voilà, votre site est configuré et personnalisé pour un affichage sur mobile. Le monde de l’AMP s’ouvre à vous.