Agregar banner automáticamente en el contenido de WordPress

[ 7 mayo 2024 ] [ Autor: Jhon Marreros Guzmán ][ Themes - Intermedio] [ ]

funcionalidad mejoras

Si quieres mostrar una imagen de banner como parte de tus artículos puedes hacerlo de manera manual o que se muestre automáticamente en una posición del contenido.

Generalidades

Si deseas tener un banner de publicidad en las entradas de tu sitio, y quieres que esto se agregue automáticamente, puedes evaluar hacerlo a través de código, tal como veremos a continuación.

Resultado Final

Al final lo que queremos obtener es algo similar a lo que se muestra en la siguiente imagen:

Código para mostrar el banner en el contenido

Puedes agregar el siguiente código como parte del archivo functions.php de tu tema hijo o usando algún plugin de Snippets.

add_filter( 'the_content', 'add_banner_inside_article' );

function add_banner_inside_article($content): string {
	$before_paragraph = 3;

	if (is_single()){

		$paragraphs = explode("<p>", $content);

		$banner = '</p><p style="margin: 20px 0;">';
		$banner .= '<a href="https://www.google.com" target="_blank">';
		$banner .= '<img src="https://via.placeholder.com/728x90" alt="Banner 728x90">';
		$banner .= '</a>';
		$banner .= '</p>';

		array_splice($paragraphs, $before_paragraph, 0, $banner);

		$content = implode("<p>", $paragraphs);
	}
	return $content;
}

 
En el código anterior:

• Usamos el filtro de contenido the_content que hace referencia a la función add_banner_inside_article()
• Dentro de la función establecemos el valor de la variable $before_paragraph para inserta el banner antes de ese párrafo
• Comprobamos si estamos en una entrada
• Convertimos el contenido a un array separado por párrafos
• Creamos el HTML para el banner
• Insertamos el contenido del banner como parte del array
• Finalmente concatenamos todos los elementos del array y lo establecemos al parámetro $content

Conclusión

Como has podido comprobar, es posible agregar de manera automática contenido como parte de las entradas del sitio, en este artículo hemos visto cómo agregar una imagen, sin embargo es posible agregar cualquier código HTML o incluso renderizar un shortcode.

Valora este artículo : (1 votos, promedio: 5,00 de 5)

Cargando...