Blog sobre desarrollo WordPress en Español Desarrollo WordPress en Español
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

Seguridad WordPress: proteger el archivo wp-login.php
Seguridad WordPress: proteger el archivo wp-login.php
En una entrada anterior vimos cómo proteger el acceso a wp-admin. Vamos a ver ahora cómo proteger el archivo wp-login.php, situado en la raíz de…
Cómo añadir un botón para donaciones en tu plugin
Cómo añadir un botón para donaciones en tu plugin
En el artículo anterior vimos cómo añadir un enlace para los ajustes en el listado de plugins. En esta entrada vamos a ver cómo añadir…
He olvidado, perdido o borrado mi usuario o contraseña, o ambos
He olvidado, perdido o borrado mi usuario o contraseña, o ambos
A quien no le ha ocurrido alguna vez que nos hemos olvidado o perdido nuestro usuario o contraseña, o ambos para acceder a un sitio…
Creando un plugin para WordPress parte 5: Subida al Repositorio
Creando un plugin para WordPress parte 5: Subida al Repositorio
1. Creando un plugin para WordPress: Planificación y planteamiento 2. Creando un plugin para WordPress: Estilo del Código 3. Creando un plugin para WordPress: Escribiendo…