Como insertar anuncios adaptables asíncronos de AdSense en WordPress

Recientemente el servicio de Google AdSense ha liberado los nuevos bloques de anuncio adaptables.
Ofrecen mucho más rendimiento que los anuncios clásicos ya que se cargan de forma asíncrona, es decir de forma paralela con el contenido de la página.
No obstante la principal virtud que los distingue de los anteriores, es que los bloques de anuncios se adaptan automáticamente al tamaño de la pantalla del dispositivo del usuario.
Esto nos permite que se muestren anuncios anchos (que ofrecen más ganancia) cuando el usuario usa el navegador en una PC de escritorio o en una Laptop, de tamaño mediano si usa una tableta y chicos si accede desde un teléfono celular.
En todos los casos no se mostraran las molestas barras de desplazamiento horizontal que aparecen cuando una página tiene un anuncio ancho.
Incluso en un dispositivo portable si se cambia la orientación se cargará un bloque de anuncio correspondiente al ancho necesario.

¡En WordPress NO se pueden insertar los anuncios adaptables!

Estos anuncios solo funcionan correctamente en páginas en HTML5, por lo que no funcionan en WordPress que usa XHTML.
Utilizan la etiqueta <ins> que el editor de WordPress no entiende y se distorsiona el contenido del código.
No obstante existe una solución que utilizamos nosotros en nuestro blog, crear un shortcode para poder insertar el código de AdSense.
Carga la siguiente página de ejemplo y observa el código fuente: Amor, la palabra más linda del mundo
No es nada difícil crearlo, no se necesita ser experto, solo dedicar unos minutos de nuestro tiempo.
Si te interesa sigue leyendo.

¿Que son los shortcodes en WordPress?

Un shortcode es una especie de macro existente o creado a propósito para poder insertar código u otro contenido en el cuerpo de un post (entrada) o una página.
El ejemplo clásico de un shortcode es [gallery]
Al insertar dicha palabra entre los dos corchetes, se puede crear una galería de imágenes.
El shortcode anterior al igual que los siguientes están incluidos en WordPress:
[audio][caption][embed][video]

---

¿Cómo crear un shortcode en nuestro blog de WordPress?

Podemos crear un shortcode que haga referencia al código de AdSense necesario, así como a cualquier otro contenido.
Bastará con insertarlo en un lugar específico de un post o una página, para que se muestre el anuncio.
Para eso es necesario declararlo en el archivo functions.php de nuestro blog.

Ejemplos de shortcodes para WordPress

En la página de ayuda de WordPress The Shortcode API (en ingles), se puede profundizar en las opciones y encontrar ejemplos más avanzados.
En este artículo mostramos a los que no son profesionales dos ejemplos elementales.
Para declarar el nuevo shortcode es necesario agregarle la función necesaria al archivo functions.php, que se encuentra en la carpeta de nuestro tema.
Accede a la carpeta themes en el directorio wp-content, allí busca la carpeta del tema que utilizas y copia el archivo "functions.php" a tu equipo.
Ábrelo con un editor de texto plano y agrega al final el código a continuación.
Reemplaza el archivo en el servidor.

Ejemplo 1. Código para el shortcode: [ejemplo]
//[ejemplo] function ejemplo_func( $atts ){ return 'ESTO ES SOLO UN EJEMPLO'; } add_shortcode( 'ejemplo', 'ejemplo_func' );


Ejemplo 2. Código para el shortcode: [adsense1]
//[adsense1] function adsense1_func( $atts ){ return '<br /><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- Adaptable --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-1427807059973185" data-ad-slot="8210280102" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <br />'; } add_shortcode( 'adsense1', 'adsense1_func' );
De la misma forma anterior se pueden crear otros shortcode para bloques de anuncios diferentes de AdSense, como son los bloques de enlaces clásicos que aún no son adaptables.

Guardar los cambios en un tema descendiente o Child Theme

Aunque la opción anterior funciona, la opción ideal es crear dentro del tema de WordPress que usamos un tema child (hijo), dentro de él entonces crear un nuevo archivo functions.php que contenga la función del shortcode y no tener que modificar el archivo predeterminado del tema.
Un tema hijo o descendiente (Child Theme) es solo una carpeta con un archivo style.css en el que se especifica su condicion y en la que se pueden crear diferentes archivos que se leeran y cargaran antes de los del tema principal.
Al crearlo podemos agregar funcionalidades a un tema específico y es la forma ideal de modificarlo y personalizarlo.
De esta forma nos aseguramos que en las actualizaciones de WordPress, los cambios que hemos hechos permanecerán intactos.
Lee en nuestro blog como crear paso a paso un tema descendiente o Child Theme en Wordpress.

¿Cómo evitar los cuadros amarillos bajo los anuncios de AdSense?

Al insertar en WordPress anuncios de AdSense, se muestran antes de que los anuncios carguen completamente en el área de la página, rectángulos de color amarillo claro.
Si no los deseamos podemos quitarlos fácilmente.
En WordPress de forma predeterminada la etiqueta INS tiene asignado un fondo de color amarillo, exactamente con el valor: #fff9c0
Se puede comprobar abriendo el archivo de estilo "style.css" en la platilla que usas y haciendo una búsqueda de la etiqueta "ins".
Aparecerá lo siguiente:

ins {
 background: #fff9c0;
 text-decoration: none;
}

La solución es remplazar el valor #fff9c0; por #ffffff; que es el color blanco.
Lo ideal es hacerlo en un archivo "style.css" en un "child theme", como se explicó anteriormente de esa forma aunque WordPress restaure los valores predeterminados de la plantilla en una actualización, tendremos la modificación hecha a salvo.

---

Nuevo plugin de Google para agregar anuncios de AdSense en Wordpress

Google ha habilitado recientemente un plugin que permite agregar y administrar la publicidad de AdSense en un blog de WordPress.
Se llama: Google Publisher Plugin
Lee en otra página de nuestro sitio de forma detallada como implementarlo y usarlo, además sus ventajas y desventajas.
Agregar la publicidad de AdSense a WordPress con el plugin de Google Publisher