Cómo hacer Trucos y tutoriales webmaster

Colocar Adsense en AMP entre contenido con Wordpress sin plugins

Hoy te muestro cómo agregar Google Adsense entre párrafos del contenido a tus entradas o post con (AMP) si está utilizando  WordPress y AMP.  Páginas móviles aceleradas (AMP), El proyecto permite la creación de sitios web y anuncios consistentemente rápidos. Este código que te muestro agregará Adsense dentro del contenido después de cierto número de párrafos.

Como primer paso y obligatorio :
En primer lugar, Si no lo tiene ya, necesitará un bloque de anuncios de Google Adsense “responsive”.  ó ( Adaptable ).

amp adsense wordpress

Inicie sesión en su cuenta de Google Adsense: haga clic en “Unidades de anuncios” -> haga clic en “Nuevo bloque de anuncios” -> seleccione “Anuncios de texto y de display”.
Asigna al nuevo bloque de anuncios un nombre como por ejemplo “Ads- AMP para Mi sitio”. Usa el nombre que quieras
Haga clic en “Guardar y obtener código”. Anote la siguiente información de su código de anuncio de respuesta:

  • Su ID de editor ( data-ad-client), por ejemplo, ca-pub-1234567891234567.
  • El ID de su bloque de anuncios ( data-ad-slot), por ejemplo, 1234567890.

Como poner Adsense en AMP, entre contenido con Wordpress

Este ejemplo añade Google Adsense a sus publicaciones de AMP dentro del contenido. Esto código que muestro agregará Adsense después del segundo párrafo. Si desea mostrar el anuncio después de un párrafo posterior, en lugar del segundo párrafo, cambie el “2” en la línea 20 , a continuación, al número del párrafo deseado. ten en cuenta,  que si colocas por ejemplo 5to, párrafo y la publicación no tiene ese número de párrafo, entonces no se mostrará ningún anuncio en ese lugar.

Código:


/**
 * agregar código de Google Adsense a AMP dentro del contenido, por diginota.com <strong>not</strong> above.
 */
add_action( 'pre_amp_render_post', 'isa_amp_add_content_filter_within');
function isa_amp_add_content_filter_within() {
    add_filter( 'the_content', 'isa_amp_adsense_within_content' );
}
function isa_amp_adsense_within_content( $content ) {
    $publisher_id = 'ca-pub-1234567891234567';
    $ad_slot = '1234567890';
    // Below the fold ad code. This is responsive as per Google guidelines for Adsense for AMP.
    $btf_ad_code = '<amp-ad layout="responsive" width="300" height="250" type="adsense" data-ad-client="' . $publisher_id . '" data-ad-slot="' . $ad_slot . '"></amp-ad>';
    // Insertar anuncio Adsense entre el contenido, después del párrafo
    $new_content = isa_insert_after_paragraph( $btf_ad_code, 2, $content);
    return $new_content;
}
function isa_insert_after_paragraph( $insertion, $paragraph_id, $content) {
    $closing_p = '</p>';
    $paragraphs = explode( $closing_p, $content );
    foreach ($paragraphs as $index => $paragraph) {
        if ( trim( $paragraph ) ) {
            $paragraphs[$index] .= $closing_p;
        }
        if ( $paragraph_id == $index + 1 ) {
            $paragraphs[$index] .= $insertion;
        }
    }
    return implode( '', $paragraphs );
}

Nota: no olvides al copiar editarlo en texto plano.

Debe editar el código siguiente en las líneas 12 y 14. Debe editar la línea 12 para reemplazar “ca-pub-1234567891234567” con su propio ID de editor. Edite la línea 14 para reemplazar “1234567890” con el ID de su propio bloque de anuncios.

El código lo añades en tu archivo  functions.php, de tu tema activo.

Agregar el código al archivo functions.php de su tema.

Este método NO es muy recomendado porque si actualizas los archivos de tema el código personalizado en este archivo se borrará al actualizar su tema. Si nunca vas a actualizar el tema, entonces este método funciona. O bien que estés pendiente de colocarlo de nuevo al actualizar o cambiar el tema de Wordpress.

Otra  vía es para los usuarios más avanzados.  Seria crear tu propio plugin para incorporar tus funciones favoritas?.

La ventaja, si te lo preguntas, sobre usar el fichero functions.php de tu tema es principalmente que puedes actualizar tu tema sin temor a perder tus personalizaciones, pues tus funciones están en tu plugin, no en el tema. Hacerlo es muy sencillo …Bueno en esta pagina de ayudawp.com te lo explican bien.

 

Para orientar los anuncios en las páginas de AMP, es cambiar amp-ad, en lugar de ins.adsbygoogle. Y, en lugar de insertarlo en el archivo single.php, puede agregar el siguiente código a sus funciones. Esto insertará CSS en las páginas de AMP. Puede agregar tantos estilos CSS personalizados como desee.

add_action( 'amp_post_template_css', 'my_amp_css_styles' );

function my_amp_css_styles( $amp_template ) {

    ?>

    amp-ad { margin: 30px auto; }

 

    <?php

}

Esto agrega márgenes superior e inferior de 30 píxeles. Puede cambiar ” 30px ” a la altura deseada para los márgenes superior e inferior.

Nota: si desea obtener una vista previa de cómo aparecerán sus anuncios en sus páginas AMP (páginas móviles aceleradas), debe navegar a una de sus URL de AMP en un dispositivo móvil (como un teléfono celular). Si visualiza su página de AMP en un navegador de escritorio normal, es probable que en algunos navegadores no vea los anuncios. Esto está bien porque las páginas de AMP sólo se mostrarán a los usuarios en dispositivos móviles, de ahí el nombre “ Páginas móviles aceleradas “