AMP parece ser una de las ventajas competitivas en los resultados de búsqueda de Google en los próximos ¿meses? ¿años?. Las páginas con AMP no son muy bonitas, pero tienen lo necesario para cargarse de forma casi instantánea. No obstante del plugin oficial de Auttomatic (la empresa detrás de WordPress) echamos en falta un pié de página. Aquí os explicamos como añadirlo.

Si instalamos el plugin de Auttomatic para crear automáticamente versiones de AMP de los posts de WordPress, echaremos en falta la posibilidad de darle formato. Yoast SEO, junto con su plugin Glue for Yoast SEO & AMP nos permite hacer algunas personalizaciones, pero por ejemplo no permite modificar el pié. Por lo que las páginas AMP por defecto no tienen pié de página 🙁

Yoast SEO (en la versión 3.4.2) nos permite personalizar lo siguiente de las páginas AMP:

• Para que tipo de posts está habilitado el AMP. Por defecto para las entradas.
• En cuanto a diseño nos permite personalizar:
  • El icono AMP (es un icono redondo que se muestra arriba a la derecha del título del blog). El tamaño mínimo es de 32×32 y aunque hay que subirlo cuadrado, hay que tener en cuenta que se muestra un recorte circular de ese cuadrado.
  • La imagen por defecto: Cuando un post no tiene una imagen asociada se puede poner una imagen por defecto con un ancho mínimo de 696 píxeles.
  • Colores del contenido: Encabezado AMP, título, texto e información meta.
  • Colores de los enlaces: Texto, hover y si están subrayados.
  • Colores de las citas: Texto, fondo y borde.
  • Estilos CSS extra.
  • Código extra en el encabezado. Ojo AMP solo permite etiquetas meta y link.

Esto ya es un montón de cosas que podemos personalizar sin tener que tocar el código. Además podemos añadir el código CSS que necesitemos para personalizar otros aspectos de las páginas AMP.

¿Cómo crear un pié de página para AMP?

Lo primero: Crear un child theme de AMP en el tema activo

Crear una plantilla dentro del tema activo de WordPress

Crear una carpeta AMP dentro del tema activo y copiar el archivo single.php desde la carpeta wp-content/plugins/amp/templates a esa carpeta y renombrarlo a my-single.php

Para que lea nuestro archivo my-single.php y lo use para la visualización de las páginas AMP hay que añadir el siguiente código al final del archivo functions.php del tema activo:

add_filter( 'amp_post_template_file', 'set_my_amp_custom_template', 10, 3 ); //Setting custom template for amp page
function set_my_amp_custom_template( $file, $type, $post ) {
	if ( 'single' === $type ) {
		$file = dirname( __FILE__ ) . '/amp/my-single.php';
	}
	return $file;
}

Lo siguiente: Añadir el pié a AMP

Para añadirle el pie al AMP hay que pegar el siguiente código justo antes de esta línea de my-single.php:

<?php do_action( 'amp_post_template_footer', $this ); ?>

El código a pegar es el siguiente (este código hay que personalizarlo con lo que queremos que muestre en el pie, ya sea un logo, un texto, enlaces, etc):

<footer class="amp-wp-title-bar" >
    <div>
        <a href="<?php echo esc_url( $this->get( 'home_url' ) ); ?>">
            <?php if($this->get( 'blog_name' ) ) : ?>
                <amp-img src="<?php echo get_stylesheet_directory_uri().'/imagenes/TU_IMAGEN.png';?>" alt="EL NOMBRE DE TU WEB" width="187" height="60" ></amp-img>
            <?php else: ?>
                <?php echo esc_html( $this->get( 'blog_name' ) ); ?>
            <?php endif;?>
        </a>
        <div class="textopie">
            Teléfono consultas: <a href="tel:123456789">123 456 789</a><br />
            Email consultas: <a href="mailto:email@hablandodeinternet.com">email@hablandodeinternet.com</a><br />
            Web principal: <a href="https://hablandodeinternet.com">hablandodeinternet.com</a>
        </div>
    </div>
</footer>

Y finalmente darle estilo al pié AMP

Copiamos el archivo style.php desde la carpeta wp-content/plugins/amp/templates a la carpeta AMP que hemos creado dentro del tema activo

AMP automáticamente utilizará este archivo para los estilos.

Le añadimos a final del archivo style.php los estilos que queremos personalizar. En este caso queremos personalizar el pie ya que sino lo hacemos el logo o texto sale alineado a la izquierda de la pantalla:

body { padding-bottom: 0px; }
/* FOOTER */
footer.amp-wp-title-bar {
    /* border-top: 3px solid #33363b; */
    padding: 0 16px;
    margin-top:20px;
    align-items: baseline;
    display: block;
}
.textopie { float:right; }
/* FOOTER END */

¿Cómo podemos añadirle además la imagen destacada del post?

Volvemos a modificar el archivo functions.php del tema de WordPress. Esta vez añadimos:

// Añadimos un nuevo tamaño de imagen destacada para AMP con el ancho correcto: 742 x 0 píxeles.
add_theme_support( 'post-thumbnails' );
add_image_size( 'amp-thumbnail', 742);

// Mostramos todos los tamaños de imagen disponibles, no solo los estándar, sino también los añadidos y los ordenamos correctamente.
function sgr_display_image_size_names_muploader( $sizes ) { 
    $new_sizes = array(); 
    $added_sizes = get_intermediate_image_sizes(); 
    foreach( $added_sizes as $key => $value) { 
        $new_sizes[$value] = $value; 
    } 
    $new_sizes = array_merge( $new_sizes, $sizes ); 
    return $new_sizes; 
}
add_filter('image_size_names_choose', 'sgr_display_image_size_names_muploader', 11, 1); 

add_action( 'pre_amp_render_post', 'xyz_amp_add_custom_actions' );
function xyz_amp_add_custom_actions() {
    add_filter( 'the_content', 'xyz_amp_add_featured_image' );
}
function xyz_amp_add_featured_image( $content ) {
    if ( has_post_thumbnail() ) {
        // Just add the raw <img /> tag; our sanitizer will take care of it later.
        $image = sprintf( '<p class="xyz-featured-image">%s</p>', get_the_post_thumbnail( $post_id, 'amp-thumbnail', array( 'class' => 'aligncenter' ) ) );
        $content = $image . $content;
    }
    return $content;
}

OJO: Hay que personalizar el ancho de las páginas de AMP. En este caso son 742 píxeles, pero esto puede variar. Una vez cambiados los tamaños de las miniaturas hay que volverlas a generar con algún plugin como Regenerate Thumbnails que podéis encontrar en el repositorio de plugins de WordPress.

Y luego hay que darle un poco de estilo para dejar un poco de margen por debajo de la imagen:

.xyz-featured-image {
	margin-bottom:20px;
}

Y con esto ya lo tendríamos casi todo. Solo nos faltaría eliminar el espacio en el texto creado si utilizamos una etiqueta MORE en los posts, pero esto lo dejamos para otro día.