Cómo usar AMP con WordPress

AMP es un esfuerzo común que promete un mejor rendimiento de carga de página para sitios web en el entorno móvil . Pero, como puede ver en nuestro tutorial anterior, tendrá que sacrificar cosas de lujo de su sitio web, y seguir estrictamente las reglas, cumplir con las directrices y obtener páginas validadas. Parece mucho que hacer, ¿no?

Afortunadamente, si ha creado su sitio web con WordPress, puede aplicar AMP a su sitio web en un instante utilizando un complemento llamado AMP-WP. Se envía con más funciones de lo que parece a simple vista. Entonces, veamos cómo funciona.

Activación

Para empezar, inicie sesión en su sitio web, vaya a Complementos> Agregar nueva pantalla. Busque "AMP; instala y activa el de Automattic.

Una vez activado, puede ver la publicación convertida de AMP agregando el /amp/ trail al final de la URL de la publicación (por ejemplo, http://wp.com/post/amp/ ), o con ?amp=1 (por ejemplo, http://wp.com/post/?amp=1 ) si no está utilizando la función Pretty Permalinks en su sitio web.

Y como puede ver arriba, la publicación recibió estilos básicos, que puede personalizar aún más.

Notar

Hay algunas cosas que debe saber sobre el estado del complemento en este momento:

• Archivos: categoría, etiqueta y taxonomía personalizada : actualmente no son compatibles. No se convertirán a formato compatible con AMP. Sin embargo, los tipos de publicaciones personalizadas se pueden iniciar en AMP a través de un filtro.
• No agrega una nueva pantalla de configuración en el Tablero. La personalización se realiza a nivel de código con Acciones, Filtros, Clase.
• Actualmente, el complemento no incluye todos los elementos personalizados de AMP, como amp-analytics y amp-ad, amp-ad para usar. Si necesita estos elementos, deberá incluirlos enganchándolos en las Acciones o los Filtros del complemento.

Personalización

El complemento proporciona numerosas acciones y filtros que proporcionan flexibilidad sobre la personalización de los estilos, el contenido de la página e incluso el marcado HTML de la página de AMP como un todo.

Estilos

Estoy seguro de que esto es algo que desea cambiar inmediatamente después de activar el complemento, como cambiar el color de fondo del encabezado, la familia de fuentes y el tamaño de fuente para que coincida mejor con la marca y personalidad de su sitio web.

Para hacerlo, podemos emplear la Acción amp_post_template_css en el archivo functions.php de nuestro tema.

 función theme_amp_custom_styles () {?> nav.amp-wp-title-bar {background-color: orange; } 
Si miramos a través de las DevTools de Chrome, estos estilos se anexan dentro del