Categoría: Informática Página 1 de 13

Toda la vida pensé que no se podían modificar los estilos de un iframe, hasta hoy que me tocó implementarlo por narices para la Web de un cliente (a veces las necesidades imperiosas agudizan el ingenio).

Después de mucho indagar por internet y algo de triquiñuelas personales logré implementarlo. Tal vez no sea una solución muy elegante, pero funciona.

Vamos al lío.

Agrega un EventListener

Tendremos que escuchar cada cierto tiempo si el iframe externo terminó de cargarse correctamente…

Para ello asignamos a una variable una función setInterval.

const variableDeIntervalo = setInterval( modificarIframe, 500 );

Crea la función principal

Una vez creado el intervalo, creo la función y añado las primeras verificaciones.

function modificarIframe() {
	// Busco el iframe en el DOM.
	let iframeAModificar = document.querySelector( 'iframe' );
	// Verifico si el iframe ya está cargado.
	if (
		! iframeAModificar
		|| typeof iframeAModificar === 'undefined'
	) {
		return;
	}
}

Cuando el iframe esté cargado

En la misma función y una vez que el iframe esté cargado obtengo su contenido y lo modifico con los nuevos estilos.

// Detengo el intervalo para evitar el consumo de recursos del navegador.
clearInterval( variableDeIntervalo );
// Obtengo el contenido del elemento iframe.
let doc = iframeAModificar.contentDocument;
let nuevosEstilos = `
<style>
	.alguna-clase {
		color: #ffffff;
	}
	
	/* Aplica todos los estilos que desees aquí. */
</style>
`;
// La siguiente línea sobrescribe el contenido del iframe con los nuevos estilos.
doc.body.innerHTML = doc.body.innerHTML + nuevosEstilos;

Control extra

A esta función debería agregar otro condicional para que en el caso de que en cierto límite de tiempo el iframe no se cargue correctamente, el intervalo deje de ejecutarse.

Para ello podemos modificar la función agregando al principio los siguientes condicionales (al final te daré todo el código completo para que no tengas que estar adivinando dónde ubicarlo, solo separo el código para que sea más fácil explicar su funcionamiento).

let iteracionContador = 0;
let iteracionMaxima = 10;
const variableDeIntervalo = setInterval( modificarIframe, 500 );
function modificarIframe() {
	// Chequeo que el contador de iteraciones no supere el iterador máximo para evitar el consumo de recursos.
	if ( iteracionContador === iteracionMaxima ) {
		// Paro el intervalo.
		clearInterval( variableDeIntervalo );
		return;
	}
}

Código completo

Ahora sí, te dejo el código completo con todo lo explicado anteriormente.

( function () {
	let iteracionContador = 0;
	let iteracionMaxima = 10;
	const variableDeIntervalo = setInterval( modificarIframe, 500 );
	function modificarIframe() {
		// Chequeo que el contador de iteraciones no supere el iterador máximo para evitar el consumo de recursos.
		if ( iteracionContador === iteracionMaxima ) {
			// Paro el intervalo.
			clearInterval( variableDeIntervalo );
			return;
		}
		
		// Busco el iframe en el DOM.
		let iframeAModificar = document.querySelector( 'iframe' );
		// Verifico si el iframe ya está cargado.
		if (
			! iframeAModificar
			|| typeof iframeAModificar === 'undefined'
		) {
			iteracionContador++;
			return;
		}
		
		// Detengo el intervalo para evitar el consumo de recursos del navegador.
		clearInterval( variableDeIntervalo );
		// Obtengo el contenido del elemento iframe.
		let doc = iframeAModificar.contentDocument;
		let nuevosEstilos = `
		<style>
			.alguna-clase {
				color: #ffffff;
			}
			
			/* Aplica todos los estilos que desees aquí. */
		</style>
		`;
		// La siguiente línea sobrescribe el contenido del iframe con los nuevos estilos.
		doc.body.innerHTML = doc.body.innerHTML + nuevosEstilos;
	}
} )();

Al día de la fecha, WordPress sigue encolando el CSS de los bloques por defecto de Gutenberg sin ningún tipo de optimización (defer, async o preload), lo cual hace saltar las alarmas de cualquier test de performance de sitios webs, ¿Cómo podemos resolverlo?

Simplemente basta con que agregues el siguiente bloque de código a tu functions.php o plugin personalizado.

/**
 * Función que agregar el preload a archivos CSS.
 */
function agregar_rel_preload( $html, $handle, $href, $media ) {
    if ( is_admin() ) {
		return $html;
	}
	
	// Aplicar rel preload solo a los assets que estén dentro de este array.
	$assets = [ 'wp-block-library' ];
	if ( ! in_array( $handle, $assets ) ) {
		return $html;
	}
    $html = <<<EOT
<link rel='preload' as='style' id='$handle' href='$href' type='text/css' media='$media' />
EOT;
    return $html;
}
add_filter( 'style_loader_tag', 'agregar_rel_preload', 10, 4 );

Este código puede servirte para agrear el rel="preload" de cuaqluier CSS, solo basta que agregues el handle del fichero en el array de la línea 10.

Hace poco un cliente me pidió que agregara publicidad AdSense en los artículos de su blog, alrededor de unas 6600 entradas, con lo cual tenía que sentarme con tranquilidad y encontrar la mejor solución.

Básicamente hay dos formas de agregar publicidad AdSense o cualquier otro tipo de contenido ajeno a WordPress dentro de nuestros artículos: mediante el uso de ShortCodes/Bloques de Gutenberg (lo que descartaba de cuajo dada la cantidad de artículos a modificar manuamente) o en forma automática como lo explicaré en este artículo.

👍🏻 ¿Por qué sugiero realizarlo de esta manera?

• Contenido limpio: No vamos a agregar absolutamente nada a nuestros artículos, seguirán estando limpios como cuando se escribieron por primera vez.
• Gestión desde un único lugar: Manejando algunas variables (que podemos configurar desde un página de opciones personalizadas) seremos capaces de activar/desactivar o modificar el funcionamiento de las publicidades de toda la Web.
• Evitar herrores umanos: Los autores de entradas no tienen por qué estar acordándose de agregar códigos, shortcodes o bloques especiales para incrustar publicidades. Ellos a lo suyo y nosotros como programadores nos encargamos del resto.

Solución que se me ocurrió

Luego de darle algunas vueltas a la cabeza se me ocurrió la siguiente idea: Insertar el código de Google AdSense automáticamente luego de un número X de ocurrencias de un string específico dentro del cuerpo del artículo utilizando el filtro the_content.

Lo que en castellano podríamos traducir como: «Mira, agarra todo el contenido del artículo y busca la segunda vez que aparezca este código «</p>», acto seguido inserta este código HTML que te paso».

🙂 La idea me cuadraba, ahora a ver cómo podía traducirlo a PHP.

Aquí les dejo el código con los correspondientes comentarios para su entendimiento.

/**
 * Esta función agrega contenido luego de un número
 * dado de párrafos.
 */
function mg_inserta_publi_en_contenido( $content ) {
	
	// Nos aseguramos que solo afecte a los artículo de un post.
	// Puede borrarse o modificarse según las necesidades.
	if( ! is_singular( 'post' ) ) return;
	// ¿Después de qué párrafo agregamos la publicidad?
	$numero_parrafo = 2; // Lo ideal es utilizar algúna página de opción para dinamizar este valor.
	// Publicidad a Insertar.
	// Lo ideal es dinamizar este valor.
	$publicidad = 	'<ins class="adsbygoogle" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-123456789" data-ad-slot="123456788"></ins>
					<script>
						(adsbygoogle = window.adsbygoogle || []).push({});
					</script>';
	// Esta función nos ayudará a encontrar la posición exacta para insertar la publicidad.
	// strposX() es una función personalizada que busca recursivamente una posición específica dentro de un string.
	// "\n" es el código para el nuevo "párrafo" en WordPress. Se puede modificar este valor para buscar por otro código.
	$posicion = strposX( $content, "</p>", $numero_parrafo);
	/*
	* Una vez que tenemos todos los valores, solo se debe devolver
	* el resultado de la función substr_replace con los argumentos
	* previamente calculados.
	*/
	return substr_replace( $content, $publicidad, $posicion, 0 );
}
add_filter( 'the_content', 'mg_inserta_publi_en_contenido', 1 );

Explicación de las líneas más importantes

9. Aplicamos este condicional para que solo afecte a las páginas de artículos (caso contrario podría agregar publicidades en plantillas no deseadas).
Puedes cambiar el condicional según lo que necesites.
12. ¿Después de qué número de párrafos se agrega la publicidad?
Tal como dice el comentario, lo ideal sería que este valor podamos obtenerlo de alguna configuración en WordPress (página de opciones).
16. En este caso estoy insertando una publicidad de Google AdSense pero podría ser cualquier HTML.
24. Llamo a una función personalizada ya que la función strpos() de PHP no permite por defecto búsquedas recursivas.
En esta línea también podríamos reemplazar la lógica a buscar, en lugar de la finalización de un párrafo (</p>) podríamos indicar etiquetas de imágenes, luego de un blockquote, un encabezado h2, etc etc.
31. Con todos los valores ya calculados solo se debe llamar a la función substr_replace() de PHP para realizar el reemplazo de cadenas de textos.

Y esta es la función personalizada que nos permitirá hacer una búsqueda recursiva de un string dentro de otro string:

/**
 * Find the position of the Xth occurrence of a substring in a string
 * @param $haystack
 * @param $needle
 * @param $number integer > 0
 * @return int
 */
function strposX($haystack, $needle, $number){
	if( $number == '1' ){
		return strpos($haystack, $needle);
	}elseif( $number > '1' ){
		return strpos($haystack, $needle, strposX($haystack, $needle, $number - 1) + strlen($needle));
	}else{
		return error_log('Error: Value for parameter $number is out of range');
	}
}

El siguiente vídeo es una demo para comprobar que funciona la inserción de un código «dummy» de HTML luego del 2do párrafo ⬇️

🎉 Genial, por un lado tenemos los artículos limpios, no agregué carga de trabajo para la escritura de nuevas entradas y junto a un panel de control donde el usuario Administrador pueda hacer sus ajustes esta solución funciona a la perfección.

Ahora ya tienes a mano una herramienta para insertar cualquier tipo de contenido dentro de tus posts de WordPress.

Los atributos async o defer nos ayudan a optimizar el tiempo de carga y ejecución de los distintos recursos Javascript de nuestra Web.

Pero lamentablemente la función wp_register_script(), con la que se encolan los distintos recursos Javascripts, no tiene un parámetro para agregar o indicar de alguna forma estos valores.

Es por este motivo que en la versión 4.1 de WordPress se agregó el filtro script_loader_tag que nos permite modificar el string final de la etiqueta <script>.

Aprovechando este filtro he creado la siguiente función para agregar en forma automática cualquiera de estos dos valores.

/**
 * Esta función agrega los parámetros "async" y "defer" a recursos de Javascript.
 * Solo se debe agregar "async" o "defer" en cualquier parte del nombre del 
 * recurso (atributo "handle" de la función wp_register_script).
 *
 * @param $tag
 * @param $handle
 *
 * @return mixed
 */
function mg_add_async_defer_attributes( $tag, $handle ) {
	// Busco el valor "async"
	if( strpos( $handle, "async" ) ):
		$tag = str_replace(' src', ' async="async" src', $tag);
	endif;
	// Busco el valor "defer"
	if( strpos( $handle, "defer" ) ):
		$tag = str_replace(' src', ' defer="defer" src', $tag);
	endif;
	return $tag;
}
add_filter('script_loader_tag', 'mg_add_async_defer_attributes', 10, 2);

¿Cómo utilizar la función?

Tal como se describe en el comentario de la función, solo debes agregar la palabra async o defer en cualquier posición del parámetro handle de la función wp_register_script y luego encolarlo con la función wp_enqueue_script.

// Ejemplo con "async".
wp_register_script( 'fichero-js-async', get_stylesheet_directory_uri() . '/js/fichero.js', [], false, true );
wp_enqueue_script( 'fichero-js-async' );
// Ejemplo con "defer".
wp_register_script( 'fichero-js-defer', get_stylesheet_directory_uri() . '/js/fichero.js', [], false, true );
wp_enqueue_script( 'fichero-js-defer' );

La próxima vez que GTMetrix o Google Lighthouse te regañen por ficheros javascripts que bloquean el renderizado de tu HTML ya tienes aquí una simple solución para implementar en tu código.

🗒 Si quieres saber un poco más sobre al diferencia entre async y defer, te recomiendo este artículo de Juan Padial que lo explica a la perfección.