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

Cómo personalizar el logo y el enlace del login de WordPress
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…
Autocomplete Off en el formulario de login al backend de WordPress
Autocomplete Off en el formulario de login al backend de WordPress
En ésta entrada vamos a ver cómo agregar la funcionalidad autocomplete=”off” para los campos de usuario y clave en el formulario de login al backend…
Cómo crear imágenes destacadas con tamaños personalizados en WordPress
Cómo crear imágenes destacadas con tamaños personalizados en WordPress
Con ésta cuestión nos podemos encontrar muy a menudo sobre todo si estamos desarrollando temas a medida. En nuestro diseño vendrán definidas unas imágenes con…
Seguridad WordPress: cambiar el usuario y contraseña periódicamente
Seguridad WordPress: cambiar el usuario y contraseña periódicamente
Una de los axiomas en seguridad es tener un usuario y contraseña seguros. No obstante, se recomienda cambiar la contraseña periódicamente o cada cierto tiempo…