¿Cómo personalizar el pie de página de las páginas AMP?

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.

¿Cómo personalizar el pie de página de las páginas AMP?

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:

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:

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):

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:

¿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:

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:

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.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *