Como Configurar el Soporte de AMP para WordPress

Spanish (Español) translation by Cristian Marroquin (you can also view the original English article)

En este tutorial vamos a caminar por los pros y contras de generar versiones AMP validas de las publicaciones de tu sitio de WordPress. Vamos a hacer esto usando el plugin de AMP creado por Automattic.

Hay plugins alternativos disponibles que puedes usar en lugar de este si tu lo deseas, pero como realmente solo tenemos espacio para revisar un solo plugin en este tutorial vamos a mantenernos enfocados en el que fue creado por el equipo detrás de mismo Wordpress.

Nota: este articulo asume que tu estas familiarizado con crear paginas AMP validas, y como tal se va a enfocar en los detalles específicos para usar WordPress y AMP juntos. Si eres nuevo en AMP, revisa:

También asume que estas familiarizado con tener un sitio Wordpress auto hospedado. Si no, puedes encontrar útil estos recursos:

El Plugin AMP de Automattic

Este Plugin, llamado simplemente AMP, automatiza la generación de publicaciones AMP validas. Para cada publicación que creas. una segunda versión también estará disponible con el sufijo /amp/ añadido en el permalink. Si no estas usando la funcionalidad de reescritura de permalink de WordPress en tu sitio /?amp=1 sera adjuntado a la URL.

Por ejemplo este es una publicación regular de WordPress:

Nota que aquí tengo instalada la extensión AMP Validator en Chrome la cual detecta si hay disponible una versión AMP de esta pagina y muestra un pequeño icono de enlace azul:

AMP Validator extension — Extensión AMP Validator

Si doy clic en el pequeño enlace azul de la extensión nos lleva a la versión AMP de la publicación:

Usando este plugin en su estado predeterminado es solo "conectar y usar". Instalalo, activalo y ya lo tienes funcionando. No hay opciones de configuración que requieran tu atención como parte de la instalación.

En el presente este plugin solamente funciona con publicaciones-no afecta paginas, publicaciones de tipo personalizado o archivos. La pagina del plugin en el repositorio de WordPress dice que el soporte para estos está actualmente en desarrollo.

Uso Con Yoast SEO via Glue

Si te gusta usar el plugin Yoast's SEO para los post regulares, hay un plugin adicional llamado "Glue for Yoast SEO & AMP" disponible para colocar metadata estilo-Yoast en tus publicaciones AMP también. Por ejemplo, el agrega estas meta etiquetas a la publicación de ejemplo mostrado anteriormente:

Para usar este plugin primero debes tener instalado el plugin principal Yoast SEO. El plugin Glue va a agregar una sección extra al menu de administración SEO del plugin principal etiquetada como AMP.

Elementos AMP de Medios y Personalizados

Una de las partes mas Significativas de crear paginas AMP validas es usar sus elementos necesarios para colocar medios, tales como amp-img en lugar de img por ejemplo. Sin embargo al crear las publicaciones en WordPress típicamente usas el editor WYSIWYG TinyMCE y no controlas directamente el marcado usado para la inserción de medios.

Con el plugin AMP de Automattic instalado no te tienes que preocupar por esto ya que el automaticamente va a filtrar tu contenido y hacer las siguientes conversiones a elementos personalizados de AMP:

img→amp-img ó amp-anim
video → amp-video
audio → amp-audio
iframe → amp-iframe
YouTube oEmbed → amp-youtube
Instagram eEmbed → amp-instagram
Twitter oEmbed → amp-twitter
Vine oEmbed → amp-vine

Nota: si estas usando Flash en algun lugar de tu sitio este no esta soportado. Otro tipo de medio puede ser usado en las publicaciones AMP mientras sea agregado usando uno de los elementos de la lista anterior.

Acerca de los oEmbeds de WordPress

Shortcodes y Plugins

Otra cosnideración al usar el plugin AMP de Automattic en tus publicaciones de WordPress es como se van a comportar los shortcodes y los plugins.

Mostrar Encabezado y Pie de pagina

El plugin de Automattic previene que las publicaciones AMP usen las funciones de tema wp_header() y wp_footer() normales, que en ocasiones están cubiertas por plugins para mostrar JavaScript, CSS y HTML personalizados. Si un plugin que estés usando depende de cualquiera de estas funciones este no funcionará.

Para que un plugin genere código personalizado combinado con el plugin para AMP este tiene que hacer uso de las acciones especiales y filtros que sustituyen a las funcionalidades de temas de WP normales. Por ejemplo, no puedes agregar meta etiquetas a la sección <head> de como tipicamente lo harias, usando la acción wp_head para mostrar codigo a través de la función wp_header(), pero puedes usar en su lugar el filtro amp_post_template_metadata

el plugin Glue de Yoast usa estas acciones especiales y filtros, los cuales es como se habilita la salida de datos SEO y CSS personalizado en paginas AMP sin romper la validación.

Shortcodes

Si estas usando plugins que usan shortcodes necesitarás asegurarte que el código que generan es:

AMP valido, ej. sin JS o CSS en línea.
y/o
Marcado de la lista en la sección anterior que el plugin de AMP automaticamente convierte en los elementos personalizados requeridos.

Para revisar esto, ve a una publicación que sabes que usa el o los shortcode(s) en cuestion y usa el plugin AMP Validator en Chrome / Chromium para ver si la publicación pasa la validación.

JavaScript Personalizado

Algo mas a tener en mente cuando usas plugins en un sitio AMP es que no esta permitido el JavaScript personalizado, así que los plugins que dependen de JavaScript no van a funcionar para nada. Por ejemplo, si estas usando un plugin para controlar un slider de imagenes con JavaScript este no va a funcionar.

Analítica

Si estas usando analíticas que dependen de un fragmento de JavaScript, la exclusión de JS personalizado de AMP significa que vas a necesitar reemplazar el fragmento con el elemento amp-analytics en tus paginas AMP.

Esto significa que estas restringido a los servicios de analíticas de Google que ha elegido soportar en AMP, pero las buenas noticias es que hay muchos vendedores en la lista.

Puedes o usar un plugin para generar código compatible con AMP, o puedes agregar código de rastreo manualmente.

Para la inclusión vía plugin, el plugin Glue de Yoast tiene una sección en la cual puedes agregar código de Google Analytics, y este lo convertirá el código en un formato compatible con AMP por ti. Para encontrarlo ve a la sección de AMP en el menú de SEO del plugin de Yoast, luego a la pestaña de Analytics:

Si no puedes encontrar un plugin para integrar el servicio de analítica que deseas, necesitaras incrustarlo tu mismo. El plugin AMP de Automattic ofrece un filtro que puedes usar para esto.

Para integrar el código personalizado de tu propias analíticas debes agregarlo al archivo "functions.php" de un tema personalizado o un tema hijo, o a un plugin personalizado que creaste tu mismo.

Personalizando la Apariencia

Hay algunas formas diferentes de poder darle a tus paginas AMP un poco de tu estilo y marca personal.

Personalizador Incorporado

El plugin AMP de Automattic tiene una pagina incorporada en el personalizador con tres configuraciones de apariencia que puedes cambiar. Para acceder a esta ve a Appearance > AMP en el menú del administrador:

Una vez en el área de personalización no verás las opciones de diseño de AMP hasta que des clic en Diseño en la columna izquierda. Desde aquí podrás seleccionar un color para el encabezado, fondo del encabezado y color del enlace, y puedes elegir entre un esquema de color obscuro o claro.

Personalizador de Glue

las opciones del personalizador incorporado son limitadas, si te gustaría jugar con mas configuraciones, el plugin Glue de Yoast tiene controles de diseño adicionales, encuentralos yendo a SEO > AMP y luego a la pestaña Diseño.

Yoasts Glue plugin has the added bonus of some design controls — Plugin Glue de Yoast y sus controles de diseño

Modificaciones de Código

Si los personalizadores basados en GUI disponibles no son suficiente puedes empezar a indagar algo de código así puedes usar tu propio CSS o plantilla de marcado. Para hacer esto puedes:

Crear un tema personalizado, (o tema hijo) y agregar código a su archivo "functions.php"
Crear un plugin personalizado

Si aun no estas familiarizado con hacer algo de lo anterior tu mejor apuesta es probablemente quedarte con las opciones de personalización con GUI disponibles.

Sobrescribir el arhivo "style.php" del plugin AMP

Todo el CSS que controla la presentación de las paginas AMP en el plugin de Automattic puede ser encontrado en sus subfolder "templates" en el archivo "style.php". No deberías editar directamente el código en este archivo ya que perderías todos los cambios cuando se actualice el plugin. Sin embargo puede sobrescribir este archivo con uno echo por ti mismo.

Si estas creando tu propio tema personalizado o tema hijo, cre una carpeta dentro de este y nómbrala "amp" y ahí agrega tu CSS en un archivo llamado "style.php". El plugin AMP automáticamente va a encontrar este archivo y usarlo.

Si estas creando tu propio plugin puedes usar cualquier archivo PHP que quieras que contenga tu CSS personalizado, luego especifica dicho archivo usando el filtro amp_post_template_file combinado con una verificación condicional para 'style' === $type.

Para detalles de como hacer esto revisa la documentación de Automattic en GitHub.

Adjuntando CSS

Si solo necesitas adjuntar un pequeño código personalizado a CSS existente del plugin, puedes usar la acción amp_post_template_css. Para mas detalles de como se hace esto, mas algunos ejemplos mira la sección relevante en la documentación de Automattic.

En el caso de adjuntar el CSS, también tienes la opción de agregar algo de código personalizado vía el plugin Glue de Yoast, en el área de texto etiquetada como "Extra CSS" cerca del fondo de su pestaña Diseño.

Nota: Ya sea que estés adjuntando, o sobrescribiendo el CSS del plugin AMP, asegúrate de no incluir ninguna etiqueta <style> ya que estas interferirán con la etiqueta requerida <style amp-custom> que ya se encuentra en la plantilla del plugin.

Plantilla Personalizada

Si deseas, puedes crear completamente un marcado personalizado para tus paginas AMP. De manera predeterminada el plugin usa el archivo "single.php" de su carpeta "templates", (que a su vez utiliza otros archivos de esa carpeta), pero en su lugar puedes hacerlo que use un archivo de plantilla echo por ti mismo usando el filtro amp_post_template_file.

Hay una serie de requerimientos que debes cumplir para que una plantilla personalizada produzca un marcado AMP valido, así que asegúrate de seguir al pie todas las instrucciones ofrecidas en la documentación.

También es buena idea darle una mirada minuciosa a la carpeta "templates" del plugin AMP, para ver como los archivos en esta son configurados. Empieza con el archivo "single.php" y observa como este incorpora los otros archivos de plantilla desde ahí.

Ajustes para las Plantillas Existentes

Si no quieres crear completamente tu propia plantilla para tus paginas AMP, y en su lugar quieres ajustar ciertos aspectos de esta, hay un rango de acciones y filtros listos para que lo hagas. Estos permiten hacer cosas como ajustar el logo de la pagina, modificar la visualización de la información del autor, agregando contenido al pie de pagina y asi.

Como siempre, lee mas acerca de estas opciones y mira ejemplos de modificaciones en la documentación.

Finalizando

Vamos a recapitular los puntos principales que hemos cubierto:

La forma mas fácil obtener soporte para AMP en WordPress es usar el plugin AMP de Automattic.
Este genera versiones AMP de tus publicaciones, pero no para ningún otro contenido (aún).
Las versiones AMP son conseguidas agregando /amp/ o /?amp=1 al final de la URL de tus publicaciones.
Agrega metadatos generados por Yoast a tus publicaciones usando el plugin Glue.
Los elementos img, video, audio, iframe y oEmbeds de YouTube, Instagram, Twitter y Vine serán automáticamente convertidas a elementos personalizados de AMP por el plugin de Automattic.
Verifica los plugins y shortcodes que estas usando para estar seguro que estos no requieren JavaScript personalizado o CSS en linea, y que ellos producen código que puede ser convertido a marcado AMP valido.
Agrega analiticas de un vendedor soportado mediante un plugin o a través de tu propio código personalizado.
Realiza personalizaciones básicas basadas en GUI a la apariencia de tus paginas AMP usando el personalizador integrado en el plugin AMP de Automattic.
Para personalizaciones adicionales basadas en GUI usa la pestaña Diseño disponible en el plugin Glue de Yoast.
Para personalizaciones mas avanzadas basadas en código para tus paginas AMP CSS y / o marcado crea un tema personalizado o un plugin.
Agrega CSS personalizado sobrescribiendo la plantilla "style.php" del plugin, o adjúntalo a este usando las acciones y filtros apropiados.
Agrega marcado personalizada sobrescribiendo la plantilla "single.php" del plugin or ajusta partes especificas de este usando acciones y filtros apropiados.

Espero que todo lo anterior te ayude a orientarte con el como abordar AMP en sitos WordPress, también a como puedes personalizar tus publicaciones AMP.

¡Gracias por leer!