Cómo implementar AMP en WordPress WordPress

El plugin AMP utiliza un diseño básico muy limpio pero que se puede personalizar fácilmente.

La primera fuente de personalización es automática utilizando algunos theme mods del core, como el custom background, el custom header o el site icon. Si el theme utiliza estas características, AMP las utilizará también de forma automática.

La segunda fuente de personalización es filtrar algunas de las propiedades CSS establecidas por el plugin AMP. Por ahora no son muchas, puedes verlas todas y cambiar las que necesites en el filtro amp_post_template_data. A través de este filtro se pueden personalizar también otras opciones visuales:

add_filter( 'amp_post_template_data', 'cyb_amp_custom_template_data', 10, 2 );
function cyb_amp_custom_template_data( $data, $post ) {

    // Uncomment para ver todo lo disponible para customizar
    // var_dump( $data );

    $data[ 'content_max_width' ] = 800;
    $data[ 'placeholder_image_url' ] = get_stylesheet_directory_uri() . '/images/amp-iframe-placeholder.png';

    return $data;

}

Algunas de las opciones que se pueden modificar en amp_post_template_data tienen sus propios filtros. Por ejemplo:

add_filter( 'amp_content_max_width', 'cyb_amp_set_content_width' );
function cyb_amp_set_content_width( $content_max_width ) {
    return 1200;
}
add_filter( 'amp_site_icon_url', 'cyb_amp_set_site_icon_url' );
function cyb_amp_set_site_icon_url( $site_icon_url ) {
    return get_stylesheet_directory_uri() . '/images/site-icon.png';
}

Además, podemos añadir nuestras propias reglas CSS utilizando el action amp_post_template_css:

add_action( 'amp_post_template_css', 'cyb_amp_css_styles' );
function cyb_amp_css_styles() {
    ?>
    body {
        font-size: 18px;
    }
    /* Más reglas CSS aquí */
    <?php
}

También se puede sobreescribir completamente el CSS. Para ello crea una carpeta llamada amp en tu theme y en ella crear un archivo style.php dónde se genere el CSS que quieras aplicar (fíjate cómo se hace en el original plugins/amp/templates/style.php).

Actualmente el plugin AMP funciona sólo para la vista de un sólo post, no para páginas de archivo (categorías, blog, etc). El plugin carga un template single.php y dentro de este template carga diferentes partes, por ejemplo meta-author.php que muestra la información del autor del post. El template y las partes están localizadas en plugins/amp/templates/.

Puedes sobreescribirlas desde tu theme simplemente creando una carpeta de nombre amp y poniendo en ella los templates amp que quieras sobreescribir.

Y también se pueden sobreescribir desde plugins. Por ejemplo, podrías cargar un template single.php de este modo:

add_filter( 'amp_post_template_file', 'cyb_amp_set_custom_single_template', 10, 3 );
function cyb_set_custom_amp_single_template( $file, $type, $post ) {
  if ( 'single' === $type ) {
    $file = dirname( __FILE__ ) . '/amp-templates/single.php';
  }
  return $file;
}

Es muy importante recordar que el template single.php incluye actions que deben incluirse necesariamente en el template personalizado. Por ejemplo, el action amp_post_template_head:

do_action( 'amp_post_template_head', $this );

Para evitar fallos, puede ser interesante copiar el template single.php original y modificar lo que necesite a partir de el.

Además del template general single.php, también se pueden sobreescribir las partes del template que mencionábamos antes. Si no quieres alguna de estas partes, por ejemplo el meta-taxonomy.php, la puedes quitar:

add_filter( 'amp_post_template_meta_parts', 'cyb_amp_remove_taxonomoy_meta', 10, 3 );
function cyb_amp_remove_taxonomoy_meta( $meta_parts ) {
  foreach ( array_keys( $meta_parts, 'meta-taxonomy', true ) as $key ) {
    unset( $meta_parts[ $key ] );
  }
  return $meta_parts;
}

O si quieres añadir un template meta personalizado:

// Añadimos el key del template meta
add_filter( 'amp_post_template_meta_parts', 'cyb_amp_add_comment_count_meta' );
function cyb_amp_add_comment_count_meta( $meta_parts ) {
    $meta_parts[] = 'cyb-meta-comment-count';
    return $meta_parts;
}
// Asociamos un archivo con el key definido anteriormente
add_filter( 'amp_post_template_file', 'cyb_amp_set_comment_count_meta_template', 10, 3 );
function cyb_amp_set_comment_count_meta_template( $file, $type, $post ) {
    if ( 'cyb-meta-comment-count' === $type ) {
        // Desde el theme
        $file = get_stylesheet_directory() . '/amp/meta-comment-count.php';
        // Desde un plugin
        // $file = dirname( __FILE__ ) . '/amp/meta-comment-count.php';
    }
    return $file;
}

Muchos hooks de WordPress siguen estando disponibles en los templates amp. Uno de los más importantes, al menos en lo que a personalización se refiere, es el filtro the_content().

Por ejemplo, podemos añadir la imagen destacada del post:

add_action( 'pre_amp_render_post', 'cyb_amp_custom_render_post_actions' );
function cyb_amp_custom_render_post_actions() {
  add_filter( 'the_content', 'cyb_amp_add_featured_image' );
}
function cyb_amp_add_featured_image( $content ) {
  if ( has_post_thumbnail() ) {
    $image = sprintf( '<div class="featured-image">%s</div>', get_the_post_thumbnail() );
    $content = $image . $content;
  }
  return $content;
}

O también se podría hacer con el condicional is_amp_endpoint():

add_filter( 'the_content', 'cyb_amp_add_featured_image' );
function cyb_amp_add_featured_image( $content ) {
  if ( is_amp_endpoint() && has_post_thumbnail() ) {
    $image = sprintf( '<div class="featured-image">%s</div>', get_the_post_thumbnail() );
    $content = $image . $content;
  }
  return $content;
}

El condicional is_amp_endpoint()

En el ejemplo anterior hemos visto como, con el condicional is_amp_endpoint(), se pueden ejecutar filtros del core de WordPress sólo para las versiones AMP.

Lo bueno de que filtros como the_content funcionen en las versiones AMP es que se integrará con cualquier plugin y theme. Lo malo es que mucho HTML y JS no es válido en AMP. Por este motivo el conditional is_amp_endpoint() puede ser muy útil.

Por ejemplo, podríamos utilizar este condicional en shortcodes que añadan elementos no válidos para AMP.

El plugin AMP sólo funciona para el tipo de post estándar. Si tenemos un tipo de post personalizado que queremos que también soporte versión amp, lo podemos añadir de este modo:

add_action( 'amp_init', 'cyb_add_amp_post_type_support' );
function cyb_add_amp_post_type_support() {
    add_post_type_support( 'mi-custom-post-type', AMP_QUERY_VAR );
}

El plugin AMP utiliza de forma predeterminada el marcado BlogPosting, pero se pude modificar según las necesidades que tengamos. Por ejemplo, podemos cambiarlo a NewsArticle:

add_filter( 'amp_post_template_metadata', 'cyb_json_newsarticle_metadata', 10, 2 );
function cyb_json_newsarticle_metadata( $metadata, $post ) {
  $metadata['@type'] = 'NewsArticle';
  return $metadata;
}

Hay otras muchas opciones de personalización, creo que he cubierto las más destacadas. Para no hacer el post interminable, lo dejaremos aquí por el momento.