AMP

Cómo personalizar AMP en WordPress

AMP es el proyecto de Google y varios partners (entre los que se encuentra WordPress) para ofrecer a los usuarios páginas ultra rápidas. Son las siglas de Accelerated Mobile Pages, un proyecto que empezó a gestarse en 2015 y que cada vez se está extendiendo más.

Es la alternativa de Google a FIA (Facebook Instant Articles) y Apple News. El usuario es impaciente, quiere el contenido y lo quiere ya, de ahí estas iniciativas para crear “webs” ultra rápidas. Entrecomillo webs, porque realmente las páginas AMP en principio (a día de hoy) suelen utilizarse únicamente para los artículos y/o noticias.

La filosofía de AMP pasa por desprenderse de muchos elementos. Sin entrar en mucho detalle y generalizando, no se cargan hojas de estilos (el CSS es mínimo y va en línea), se prescinde de casi todo el javascript, tiene un marcado HTML especial, y se alojan en servidores de Google. Es decir, se carga lo mínimo y desde servidores optimizados, por lo tanto el resultado es que la web (el artículo) carga a una velocidad asombrosa.

Disclaimer

Personalmente no me termina de convencer AMP por lo que implica: un nuevo marcado HTML propio de Google, fuera de los estándares de W3C, se cachea en y se sirve desde los servidores de google, pierdes la navegación por el resto del site, etc…

Pero no es menos cierto que en el corto plazo puede darte beneficios en cuanto al posicionamiento en dispositivos móviles y conseguir más tráfico y más visibilidad de tu contenido.

El cortoplacismo que marca nuestra vida más de lo que debería.

Puedes activar AMP en WordPress simplemente instalando el plugin AMP creado por Automattic. De base viene con unas opciones de configuración muy básicas: Color del texto de la cabecera, fondo de cabecera y color de enlaces y esquema de color.

AMP customizer

Una vez instalado el plugin simplemente debes esperar a que Google empiece a indexar estas páginas. Pasados unos días podrás observar que aparecen en los resultados de búsqueda desde dispositivos móviles las páginas AMP de tus contenidos

AMP Google

Si pinchas en estos enlaces irás a la página que tiene cacheada Google en sus servidores. No obstante puedes acceder a la URL real de tu sitio, e incluso ver la URL de la versión AMP de tu artículo directamente desde tu sitio. Me explico:

  • URL original: https://desarrollowp.com/blog/tutoriales/carga-condicional-js-css-mejorar-rendimiento-la-velocidad-carga/
  • Versión AMP en tu sitio: https://desarrollowp.com/blog/tutoriales/carga-condicional-js-css-mejorar-rendimiento-la-velocidad-carga/amp/
  • Versión AMP en Google: https://www.google.es/amp/s/desarrollowp.com/blog/tutoriales/carga-condicional-js-css-mejorar-rendimiento-la-velocidad-carga/amp/

 

AMP es tan minimalista (esa precisamente es su filosofía) que puede resultar incluso un poco soso. Probablemente te gustaría poder personalizar un poco el diseño de estas páginas. Hay plugins que te permiten un poco más de maniobra como PageFrog, pero si lo que realmente quieres es poder adaptarlo un poco o que no sea tan escueto es mejor que lo hagas tu mismo

 

Personaliza las plantillas por defecto de AMP

Lo primero es que instales el plugin de AMP mencionado anteriormente y crees una carpeta llamada amp en la carpeta de tu tema. A continuación copia los archivos que quieras editar y que están en la carpeta templates del plugin amp a la carpeta amp que has creado en tu tema.

Para este ejemplo voy a modificar las siguientes plantillas:

  • footer.php
  • header-bar.php
  • single.php
  • style.php

 

Lo siguiente es decirle a WordPress que utilice nuestros archivos que vamos a modificar en lugar de los que están en la carpeta templates del plugin de AMP. Para esto escribiremos en el functions.php:

Lo que hacemos primero es comprobar si el plugin AMP está activado. En este caso definimos una constante con la ruta de nuestra carpeta AMP de nuestro tema. Utilizamos el filtro amp_post_template_file para sustituir las rutas de los archivos del plugin por los nuestros personalizados.

Ahora lo único que te quedaría es modificar los archivos footer.php, header-bar.php, single.php y style.php según tus necesidades. Lo único que debes tener en cuenta es que AMP tiene un marcado específico y algunas tags de HTML no están permitidas. Tienes información más detallada de todo esto aquí.

Puede que también te interese

Los 10 mandamientos del WPO en WordPress
En la primera edición de la WordCamp Madrid he tenido la oportunidad de estrenarme como ponente en casa con la charla titulada Los 10 mandamientos…
Cómo personalizar el logo y el enlace del login de WordPress
Éste es el aspecto que presenta la pantalla de login para acceder al back-end de nuestro WordPress: Es muy común que algún cliente nos pida…
Revisiones y autoguardados en WordPress
Qué son las revisiones? Las revisiones son un control de versiones de las entradas y páginas que WordPress guarda en base de datos. Cada vez…
Crea tu propio motor de búsqueda para WordPress
En este artículo vamos a ver cómo personalizar la búsqueda en WordPress, creando nuestro propio motor de búsqueda para adaptarlo a nuestras necesidades. Por defecto el…