Como configurar y personalizar las paginas AMP en WordPress

Todos los que poseemos un blog o sitio web en WordPress, debemos de preocuparnos por crear versiones de nuestras páginas en formato AMP.
Esto se puede lograr fácilmente, instalado el plugin AMP for WordPress.
De esta forma aumentan las posibilidades de aparecer en las búsquedas en los dispositivos móviles, además de otras ventajas adicionales.
Los que ya lo han implementado, habrán notado a en las estadísticas un aumento de trafico significativo hacia las paginas en este formato.
Por eso es que vale la pena interesarnos por ellas y dedicarles algo de nuestro tiempo.
En este artículo explico cómo configurar y personalizar las páginas generadas por este plugin.

Publicaciones y páginas en formato AMP en WordPress

El plugin AMP for WordPress, fue creado por Automattic, Google y otros desarrolladores.
Una gran comunidad activa en Github, colabora en su desarrollo actual.
Después de instalarlo cada vez que se publique una nueva entrada o una página, automáticamente se genera una copia en formato AMP, que usa la misma dirección URL, seguida por los caracteres: /amp/.
Esta página usa un formato sencillo, minimalista y carece de muchas funcionalidades habituales en WordPress, como gran parte de los widgets.
Una captura de esta misma página en este formato, se puede ver en la siguiente imagen.

No obstante posee la ventaja de que carga más rápido, consumiendo mucho menos recursos, tanto en el servidor, como en los navegadores de los s.

Personalizar y cambiar el estilo de las paginas AMP

Las paginas AMP generadas por el plugin, usan un estilo predeterminado que podemos modificar a nuestro antojo, aunque también es posible usar un tema diferente.
Hay dos formas de hacerlo:
1- Modificar manualmente el código fuente de las plantillas.
Para eso necesitamos previamente crear una carpeta de nombre “amp” en nuestro tema Child y en ella situar una copia de las plantillas a modificar.
Los archivos originales se encuentran en la carpeta “templates” en el directorio amp del plugin en wp-content -> plugins.
2- Agregar o modificar instrucciones a la hoja de estilo CSS.
Para eso necesitamos agregar la función necesaria al archivo “functions.php” del tema Child, aunque lo ideal es crear para eso un plugin personal.

Crear un plugin para modificar el estilo y formato de las paginas AMP

Es algo fácil, un plugin personal para esta tarea, puedes crearlo de la siguiente forma:
– Pega el código que se muestra a continuación en un archivo de texto plano.
– Renómbralo a “amp_extra.php”.
– Sitúalo en la carpeta plugins, situada en wp-content y actívalo en el de istración del blog.

<?php
/*
* Plugin Name: AMP Extra
* Description: Modificar las paginas AMP
*/

//Agregar a la hoja de estilo CSS
add_action( 'amp_post_template_css', 'mi_estilo' );
function mi_estilo( $amp_template ) {
    ?>
	//OTRAS REGLAS DE ESTILO
	    <?php
}

En la línea comentada “Otras reglas de estilo”, agrega todas las instrucciones necesarias.
Un Consejo
Para conocer la clase que corresponde a cualquier elemento en una página, selecciónalo en el navegador Google Chrome y en el menú contextual usa la opción “Inspeccionar”.
A continuación comparto algunas reglas CSS que yo he agregado a mi plugin, que pueden servir como ejemplos.

// Especifico el uso de la fuente sans-serif, porque la predeterminada de Google Fonts la elimine, para evitar la carga de recursos externos. 
body {font-family: sans-serif;line-height: 1.5em;}

//Aumento el tamaño del nombre del sitio en el encabezado 
.amp-wp-header div {font-size: 1.6em;} 
  
///Aumento espaciado y tamaño de la fuente en el contenido  
.amp-wp-article-content {font-size: 1.1em;line-height: 1.5em;}
  
//Amento el margen superior e inferior de las imagenes
.amp-wp-article-content amp-img{margin:8px 0 8px 0;}
  
//Oculto el enlace a Etiquetas  
.amp-wp-meta.amp-wp-tax-tag{display:none;}    

Lo anterior permite modificar y agregar reglas al archivo de estilo existente.
Otra opción es crear un archivo de estilo completamente nuevo.
Para eso crea un archivo de nombre “style.php” en la carpeta amp del tema Child y agrégale las reglas necesarias (sin la etiqueta <style>).

Facilitar la navegación en las páginas AMP

Las paginas AMP del blog no necesitan ser incluidas en un archivo “sitemap.xml”, para Google.
El enlace a ellas se muestra en los lectores, al hacer búsquedas desde teléfonos o tabletas.
No obstante debemos preocuparnos por lograr que los que acceden a nuestro sitio directamente, las descubran y así les facilitemos la navegación con un menor consumo de datos móviles.
Para eso es necesario crear un enlace en nuestra página index o Home a dicha página en formato AMP, usando una dirección URL similar a la siguiente:
https://norfipc.descargarjuegos.org/blog/?amp
Otra opción es agregar funciones adicionales a las páginas para facilitar descubrir más contenido.
Son tres las acciones que he implementado:
1- Agregar el módulo de Páginas relacionadas a cada publicación.
En otra publicación explico cómo habilitarlo: Agregar publicaciones relacionadas en páginas AMP
2- Crear una página con las Últimas publicaciones, cuyos enlaces conducen solo a las paginas AMP.
3- Crear un Mapa del sitio, cuyos enlaces también conducen a las paginas AMP.
Explico en otro artículo como realizar las dos últimas acciones: Agregar Entradas recientes y Mapa del sitio a páginas AMP

Cambios necesarios para optimizar las paginas AMP

Algunos cambios que yo he implementado y considero de utilidad, están encaminados a que los lectores puedan mantenerse navegando en las páginas AMP y para personalizar algunos parámetros.
Para eso he modificado manualmente los archivos “header-bar.php” y “footer.php”, para cambiar los enlaces que conducen a la raíz del sitio, sustituyendo la tradicional función ‘home_url’ por la dirección URL del blog +?amp/
Con otras direcciones, como la que conduce a la página de autor, he hecho algo similar.
Además en el archivo “footer.php” he eliminado el tradicional enlace de crédito a WordPress.
En la plantilla “meta-author.php” he eliminado la imagen del avatar del autor, que me restaba puntos en las pruebas de optimización, de la herramienta LightHouse.
El contenido de la plantilla “meta-time.php”, lo eliminé, porque considero innecesario mostrar la fecha de creación de las publicaciones.
Otro cambio importante ha sido agregar el código de los botones de compartir en las redes sociales, en la plantilla “single.php”, como explico en otro artículo.

Evitar el tiempo de demora de carga de AMP en páginas locales

Los que han instalado WordPress en su computadora, para hacer pruebas en su blog de forma local, como aconsejo en otro artículo, pueden saltarse el tiempo de espera predeterminado de 8 segundos, pata poder visualizar las páginas.
Para eso solo es necesario editar el archivo “amp-helper-functions.php” situado en el directorio amp/includes.
Allí busca en la línea 209 la función “amp_get_boilerplate_code()” y sustituye el valor 8s por 0s, que aparece en cuatro ocasiones.

Otras páginas relacionadas

✓ Como modificar y personalizar mi tema de WordPress
✓ Como usar y configurar WordPress sin plugins
✓ Convertir los enlaces externos en NoFollow en WordPress


Comparte

Sígueme en las redes sociales