AMP para GeneratePress

Tengo un blog con el theme de Generatepress al que le quiero habilitar AMP para Generatepress.

AMP ó AMP Websites fue pensado primero para el usuario, en un template sirve para reducir el tiempo de carga y por tanto mejora la velocidad de tu web.

Quizás te interese leer sobre la Guía de Google Web Stories, otro proyecto de AMP orientado a los story, como Instagram, pero para la Web.

Principalmente periódicos online de talla mundial lo están incorporando.

Con esto en mente me puse a la tarea de implementarlo y compartirlo contigo.

Nota: AMP aun es un proyecto relativamente nuevo que esta creciendo con apoyo de grandes empresas como Google y WordPress, GeneratePress lo esta implementando, pero es posible que aun no sea 100% compatible. De hecho te voy adelantando que a día de hoy JavaScript deja de funcionar cuando se habilita AMP en GeneratePress y por tanto cualquier funcionalidad que lo requiera (generalemtne del menú) podrían tener problemas. Iré actualizando este post a medida que avance el rpyecto.

En éste Artículo de AMP para GeneratePress veremos:

Qué es AMP para Generatepress?

La tendencia actual es que los themes estén adaptados para funcionar con AMP, pero no todos se han puesto manos a la obra.

Tom Usborne, el creado de Generatepress ya lo ha comentado en varias ocasiones en foros, de momento no quiere implementar AMP en su template de manera nativa hasta ver el alcance.

Ya que muchos usuarios hemos contactado con él para solicitar compatibilidad con AMP, Tom ha trabajado en un plugin que soluciona errores que suceden con AMP en GeneratePress. Según comenta, en un futuro hará que GeneratePress sea compatible con AMP sin requerir de un complemento.

Lo hice para que GeneratePress sea compatible con el plugin oficial de AMP. Hay cosas en el theme que no son compatibles, por lo que el plugin es necesario para solucionar esos problemas. Solucionar estos problemas directamente en el theme significa agregar un montón de código al template. Para las personas que no usan AMP, esa codificación es completamente innecesaria y lo engorda sin ninguna razón.

Tom en el foro oficial de GeneratePress

Éste plugin soluciona errores relacionados al menú para móviles cuando se activa AMP.

Activar AMP en Generatepress

Lo primero y más importante, el plugin AMP for GeneratePress funciona exclusivamente con el plugin oficial de AMP.

AMP for GeneratePress esta en el repositorio de GitHub, aún no se encuentra en el repositorio oficial.

  1. Descargar el plugin AMP

    Descargar el plugin oficial AMP.

  2. Subir el plugin

    En el panel de control de WordPress ve a Plugins > Añadir nuevo > Subir plugin > Examinar… y sube el plugin.Subir un plugin a WordPress

  3. Activar el plugin

    Pulsa el botón Activar.

  4. Descargar el plugin AMP for Generatepress

    Para descargar de GitHub pulsa el botón Code > Download ZIP

  5. Subir el plugin

    Repite el paso 2 para el complemento de GeneratePress, el plugin se activa automáticamente.

  6. Modo de plantilla estándar

    Ve a AMP > General y selecciona el Modo de plantilla > General > Guardar cambios

Ahora mira los errores con los que te encuentras.

Ve al menú de WordPress y pulsa AMP > Índice de errores > Selecciona todos los errores y en el menú desplegable pulsa Quitar > Aplicar

Con esto quitarás todo el código que pueda dar problemas para la carga de AMP.

Test AMP de tu Web

Nota: Si tienes un plugin de cache o minificador, antes de comenzar el test de AMP procura borrar la cache.

Existen dos herramientas online para comprobar si todo esta bien:

AMP Validator del sitio oficial AMP

Test AMP Oficial
Test AMP de AMP Project

Prueba de AMP de Google Search Console

Prueba AMP de Google
Prueba AMP de Google
Resultado de validación de AMP de Google
Resultado de validación de AMP de Google

Comparte: Te gusto o te ha parecido útil este artículo? Considera compartirlo con tus amigos, me será de gran ayuda para seguir creciendo.

TwitterFacebookBufferLinkedInWhatsAppPin It

10 comentarios en “AMP para GeneratePress”

  1. Hola, que tal?
    realicé los pasos como indicas y muy buenos resultados, visualmente y tambien en las paginas de comprobación, solo tengo un problema aun, parece ser que el plugin de gp no me funcinó, pues mi barra de navegación se volvió loca se hizo como una linea de 3 pixeles y aunque la modifique en personalizar contenido barra de navegación no funcionan los cambios, sabes como podría solucionar esto? o tendría que quitar los amp plugin para que la barra funcione?

    Responder
    • Hola edwin,
      gracias por pasarte y comentar.

      El plugin AMP de GeneratePress justamente soluciona problemas con el menú cuando se usa AMP, yo hice las pruebas con una instalación limpia para evitar cualquier tipo de incompatibilidad con otros plugins.

      Lo que te aconsejo es dehabilitar todos los plugins excepto el template de GeneratePress y el plugin GP Premium, así como todo el CSS extra. Ésto para verificar qué es lo que esta «rompiendo» tu diseño.

      Si puedes compartir tu web para que la vea más de cerca seria de gran ayuda.

      Responder
      • Gracias por apoyarme, la verdad es que creo que ya hice una revoltura grande en mi diseño y con plugins pues ya todo estaba rodando bien, si no es por el antojo de implementar AMP. ahorita igual hare pruebas desactivando algunos pluggins por que luego es un alboroto todo se mueve no se que pasa quiza no lo hice con orden cuando los active. regresando al tema, está raro porque noto que incluso el icono de busqueda se borra, pero cuando desactivo amp para gp ahi si aparece pero igual manera funciona raro y se mezcla todo.

        Responder
        • Si, como comenté en este articulo «es posible que aun no sea 100% compatible», al ser aun AMP algo relativamente nuevo el creador de GeneratePress no le ha hincado el diente al asunto con la profundidad que se merece, se que cuando lo haga solucionará todos estos inconvenientes porque tiene un excelente Theme.

          Veo que has realizado la misma consulta en el foro oficial y Tom te ha respondido con la solución, la dejo en este comentario por si algún visitante padece lo mismo:

          Agregar en el CSS del Template lo siguiente:

          .mobile-header-navigation .site-logo.mobile-header-logo amp-img {
          max-width: 100px;
          }

          Responder
  2. Confirmado, el que me genera el problema es el plugin AMP oficial, fue el primero en probar y justo cuando los desactivo todo funciona bien, probé los demás y todo sigue funcionando menos con el plugin oficial. Todos los probé con el con gp premium y amp for generatepress activado.

    Responder
    • Gracias Edwin por dejar tus resultados con las pruebas.
      Yo estaré pendiente del tema porque también lo he implementado en un sitio y me he encontrado con algunos detalles, creo que de momento cada uno tiene que probarlo y ver qué resultados le da.

      Responder
      • Que tal Marcelo, pues no sé que pasó que hoy de nuevo vengo a probarlo y no funcionó, es decir, mi pagina tiene el aspecto que quiero pero ya no está activado el amp y si lo activo el logo se mueve y la barra de navegación no queda fija… habra que ver, me dijo David en el soporte que no hay JS para amp, lo que quiero es que el lienzo del menú se vea tal como lo tengo ahorita pero con el amp habilitado y ahorita ya hice el juego de todas las formas y sigue sin funcionar, creo que mejor los desabilito, igual no es una cosa que yo diga me super urge o es una gran herramienta, nada mas por el hecho de usarlo ahi en fuera… da igual. Igual gracias por tu ayuda. Por cierto me gustan el arte de tus imagenes destacada, tu web se ve muy elegante a mi parcer. que tengas buen día!

        Responder
        • Hola Edwin, si es verdad, yo también tuve un problema con el menú y Tom me comentó que no funciona JavaScript cuando se habilita AMP para GeneratePress; «The click dropdown options require javascript, so they won’t work when AMP is enabled.«, a mi (y al igual que a ti) por las necesidades que tenia tuve que desactivarlo.

          Voy a dejar en claro en el post que JS no funciona cuando se habilita.

          Gracias por visitar Wexfly y por apreciar las imágenes destacadas de los posts.

          Responder
  3. Hola!
    Muchas gracias por el tutorial, pero es que no veo unas opciones que comentas después del punto 6 para verificar los errores. En el artículo dices:

    «Ve al menú de WordPress y pulsa AMP > Índice de errores > Selecciona todos los errores y en el menú desplegable pulsa Quitar > Aplicar»

    Pero cuando voy al menú indice de errores no me aparece ninguna opción para seleccionar los errores. Adjunto imagen: https://prnt.sc/uq4kfi

    Por favor, podrías revisarlo y decirme en qué estoy fallando.

    Muchas gracias de antemano.

    Saludos!

    Responder
    • Hola William, gracias por comentar y por tus palabras.
      En la imagen que enviaste veo todo bien, tienes 18 errores de código Javascript que ya han sido eliminados. Puedes ver arriba dos menús desplegables, el primero selecciona los errores y el segundo es el filtro a aplicar, luego clic en Aplicar filtro.

      Responder

Deja un comentario