Hace poco, comencé a revisar AMP (Accelerated Mobile Pages) propuesta por Google, la cual esta orientada principalmente a dispositivos móviles, la idea es cargar el contenido de una página web de manera rápida, valga la redundancia, realmente no aporta nada nuevo, lo que hace es optimizar y poner en orden la estructura de la página web, mediante un estándar de código abierto, ¿cómo lo hace?, removiendo el código que ralentiza la visualización de una página web, los cuales son los CSS (hojas de estilo), JavaScript, Animaciones, etc., dejando solo en lo posible lo que realmente importa, el contenido e imágenes, algunos códigos JavaScript son soportados, por ejemplo, el código de Adsense, Analytics, etc.
Para el uso de AMP en WordPress, solo es necesario instalar y activar, el siguiente plugin.
Y eso es todo, hasta el momento no he visto problema alguno con AMP, en lo particular recomiendo usar ese plugin, dado que es del proyecto oficial, esta desarrollado por Automattic y Google, hay otros plugins en el repositorio de WordPress, que pueden implementar AMP, pero algunas funciones tienen un costo.
Es posible visitar el repositorio del plugin en Github.
https://github.com/Automattic/amp-wp
También revise Facebook Instant Articles, es el mismo concepto de AMP, pero creado por Facebook con sus propio estándar, para mostrar contenido en la red social de Facebook, sin salir de la red social, para esta función, se instala el siguiente plugin.
https://wordpress.org/plugins/fb-instant-articles
Una vez activado el plugin, es necesario ingresar información, que relacione el sitio web con una página en Facebook, así es, si no se tiene alguna página en Facebook de tu sitio web o alguna que administres, no podrás usar esta función.
A diferencia de AMP, tuve errores en la conversión del contenido de las páginas web, por lo que observe, algunas etiquetas html han cambiado en las actualizaciones de WordPress, o en su caso, simplemente no se contemplan en Facebook Instant Articles.
1. Error es la inserción de vídeos, no se reconoce el código “html” que se utiliza para insertar un vídeo, por ejemplo de Youtube, para corregirlo es necesario utilizar la siguiente regla del transformador.
{
"rules": [{
"class": "InteractiveRule",
"selector": "//div[@class='video-container']|//div[@class='embed' and iframe]",
"properties": {
"interactive.height": {
"type": "int",
"selector": "iframe",
"attribute": "height"
},
"interactive.width": {
"type": "int",
"selector": "iframe",
"attribute": "width"
},
"interactive.url": {
"type": "string",
"selector": "iframe",
"attribute": "src"
}
}
}]
}2. Error en imágenes que incluyen un texto de leyenda, no se reconoce el código “html”, que se utiliza para insertar una imagen que incluye un texto inferior como leyenda, para corregirlo es necesario utilizar la siguiente regla del transformador.
{
"rules": [{
"class": "CaptionRule",
"selector": "p.wp-caption-text"
}, {
"class": "ImageRule",
"selector": "div.wp-caption",
"properties": {
"image.url": {
"type": "string",
"selector": "img",
"attribute": "src"
},
"image.caption": {
"type": "element",
"selector": "p.wp-caption-text"
}
}
}]
}3. Se ingresa código que no sigue el estándar de Facebook Instant Articles, para esto es necesario ingresar la siguiente regla del transformador, la cual ignora el código y lo deja fuera del formato final, en el ejemplo, se ignora código ubicado en un “div”, con una clase “shareaholic-canvas”.
{
"rules": [{
"class": "IgnoreRule",
"selector": "div.shareaholic-canvas"
}]
}Con lo anterior, hasta el momento, ya no he visto más errores en la conversión de contenido, claro esta, utilizando la última versión del plugin.
Como último ejemplo, se muestra como quedaría el anidar más de una regla del transformador, dado que solo tenemos un cuadro de texto, para ingresar las reglas necesarias.
{
"rules": [{
"class": "InteractiveRule",
"selector": "//div[@class='video-container']|//div[@class='embed' and iframe]",
"properties": {
"interactive.height": {
"type": "int",
"selector": "iframe",
"attribute": "height"
},
"interactive.width": {
"type": "int",
"selector": "iframe",
"attribute": "width"
},
"interactive.url": {
"type": "string",
"selector": "iframe",
"attribute": "src"
}
}
}, {
"class": "CaptionRule",
"selector": "p.wp-caption-text"
}, {
"class": "ImageRule",
"selector": "div.wp-caption",
"properties": {
"image.url": {
"type": "string",
"selector": "img",
"attribute": "src"
},
"image.caption": {
"type": "element",
"selector": "p.wp-caption-text"
}
}
}]
}Se puede aprender un poco más, sobre las reglas del transformador, en el siguiente enlace.
https://developers.facebook.com/docs/instant-articles/sdk/transformer-rules
Como se puede observar, no fue complicada la implementación, gracias a que ya existen plugins para WordPress 😉 .
