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

Creando el .htaccess perfecto para WordPress
Creando el .htaccess perfecto para WordPress
El fichero .htaccess es un archivo de configuración de Apache. Nos permite establecer reglas en un directorio, por ejemplo, WordPress lo usa para crear una…
Seguridad WordPress: proteger wp-config.php
Seguridad WordPress: proteger wp-config.php
El archivo wp-config.php es uno de los más críticos en cuanto a seguridad se refiere ya que es el que contiene la información sobre la…
Añadir cabeceras HTTP de seguridad en WordPress
Añadir cabeceras HTTP de seguridad en WordPress
En éste artículo vamos a ver cómo podemos enviar cabeceras HTTP de seguridad en nuestra web. Creo que es algo que no se utiliza mucho,…
Cómo restringir el acceso al back-end de WordPress a usuarios no administradores
Cómo restringir el acceso al back-end de WordPress a usuarios no administradores
A continuación vamos a ver cómo bloquear o restringir el acceso al back-end o escritorio de WordPress (con y sin plugins), incluso ocultaremos el admin…