INICIO

CÓMO INTEGRAR AMP PERSONALIZADO EN WORDPRESS | TUTORIAL

Este artículo habla del proyecto Accelerated Mobile Pages (AMP) y de cómo integrarlo en WordPress.

Aquí aprenderemos:

Perfecto. ¡Adelante!

Qué es AMP

Cada vez es mayor la navegación realizada desde un teléfono móvil.

Y no todo el mundo tiene conexión super mega ultra rápida.

Con tanto adorno y tantas animaciones y tantos scripts ejecutándose en segundo plano, hay páginas que tardan medio siglo en cargar.

Eso no puede ser.

Si estoy en mi móvil y quiero leer una noticia, quizás me interese poco cargar los vídeos publicitarios o los sistemas de seguimiento estadístico incorporados en la web.

Quizás me interesen poco los gráficos enormes que le dan color y estilo al asunto.

Yo quiero mi noticia.

Y nada más.

AMP – Accelerated Mobile Pages

Así se llama esta iniciativa de código abierto que pretende ofrecer una segunda versión plana y minimalista de los contenidos de una web.

¿Cómo ofrecer una versión AMP de mi sitio?

Básicamente consiste en crear una nueva versión del contenido original, siguiendo una serie de estándares.

¿Contenido duplicado?

No, no te preocupes.

La versión AMP está referenciada al contenido original y no se considera como duplicado.

¿Cómo es esa nueva versión?

Pues para empezar tienes que usar AMP HTML, que es una versión restringida y de HTML donde se han eliminado las etiquetas que afectan al tiempo de carga y se han sustituido por versiones AMP.

Algo tal que así:

Bien.

Esto podemos hacerlo manualmente, pero no es ese el objetivo de nuestro artículo.

Nosotros queremos hacerlo en WordPress.

Cómo integrar versiones AMP en WordPress

El organismo oficial detrás de WordPress ya se ha encargado de ofrecer un plugin que lo permite.

wp-amp-plugin

AMP Plugin: Ir a la página oficial.

Este plugin es el punto de inicio para darle soporte AMP a nuestro sitio.

Pero si estás leyendo esto, seguramente seas un friki de wordpress, y tu idea es personalizar la versión AMP.

Pero antes de eso, vamos a enterarnos de algunas cosas.

Cosas que tienes que saber de AMP Plugin

En cuanto a lo que es y no es Accelerated Mobile Pages.

Vale.

Cómo instalar AMP plugin

Como siempre.

Después de hacer eso, lo mejor es que resetees tus enlaces permanentes, para evitar problemas tontos.

Ve a Ajustes > Enlaces Permanentes.

Y dale a Guardar Cambios, aunque no cambies nada.

Comprobar si el plugin está funcionando

Ahora querrás saber si el asunto funciona correctamente.

Pues para eso, abre una página de tu blog, y añade /amp al final.

Por ejemplo, yo he abierto este mismo artículo que estoy redactando, porque yo también estoy aprendiendo ahora todo esto desde cero.

En mi caso he abierto:

http://salamarkesa.com/integrar-amp-wordpress-plugin-personalizar/amp/

Y me ha aparecido lo siguiente:

amp-plugin-ejemplo-wordpress

Sinceramente, no es eso lo que yo quiero.

Y bueno, el caso es que no me gusta la plantilla.

Tú puedes tener otros motivos, pero lo más seguro es que quieras saber cómo cambiarla.

Cómo personalizar la plantilla de AMP Plugin

El plugin trabaja con sus plantillas almacenadas en:

wp-content/plugins/amp/templates/

Pero naturalmente no vamos a ser tan salvajes como para editar los archivos originales, pues seguramente querramos disfrutar de las actualizaciones que vayan viniendo.

Lo que sí puedes hacer es copiar la plantilla que te interese, y modificarla.

Luego le diremos al plugin que cargue nuestra plantilla editada.

¿Cómo?

Pues creando y activado nuestro propio plugin.

<?php
/*
Plugin Name: AMPersonalizado
Description: Personalizar la plantilla del plugin AMP Plugin.
Version: 1
Author: Salamarkesa.com
*/

function amp_plantilla_personalizada( $archivo, $tipo, $post ) {
    if ( 'single' === $tipo ) {
        $archivo = dirname( __FILE__ ) . '/plantillas/single.php';
    }
    return $archivo;
}
add_filter( 'amp_post_template_file', 'amp_plantilla_personalizada', 10, 3 );

?>

Puedes descargarlo ya hecho: Plugin Plantilla Personalizada.

Sube y actívalo.

Edita la plantilla localizada en /plantillas/ (dentro de la carpeta del plugin).

Ahí puedes por ejemplo incluir un bloque de AdSense.

Cómo incluir AdSense en AMP

Usando la extensión estándar de AMP.

<amp-ad width=300 height=200
  type="adsense"
  data-ad-client="ca-pub-1222"
  data-ad-slot="22222">
</amp-ad>

Y cuando termines ponte a hacer otra cosa para no perder demasiado el tiempo con esto.