Cómo añadir una imagen hero en la página de entradas de Genesis Sample

Para incluir una imagen de cabecera en una página basta con que la abramos en el editor de WordPress, coloquemos el bloque correspondiente y le asociemos la imagen de fondo que deseemos.

El problema lo tenemos cuando necesitamos eso mismo en la presentación de nuestras entradas. La dificultad radica en que esta página no es editable por nosotros sino que es una página que renderiza WordPress directamente.

Por esta razón tenemos que recurrir a un poco de código.

Lo primero que debemos saber es que la plantilla que se utiliza para renderizar las entradas del blog se llama home.php, por tanto, debemos crear un archivo denominado así en la carpeta correspondiente de nuestro child theme. Por lo general estará ubicado en: …/wp-content/themes/genesis-sample/

<?php
/********************************************
Inserta la imagen de cabecera de la sección
********************************************/
add_action('genesis_after_header','du_imagen_hero');
	function du_imagen_hero() {
		echo '<div class="imagen-hero">';
		echo '<img class="blog-image" src="URL_DE_LA_IMAGEN_DENTRO_DE_MEDIOS">';
		echo '</div>';
		echo '<br>';
		echo '<br>';
	}

// Initialize Genesis.

genesis();

Sobra decir que en el código anterior hay que colocar la URL de la imagen que queramos convertir en cabecera en el lugar que se indica con: URL_DE_LA_IMAGEN_DENTRO_DE_MEDIOS.

Como puedes apreciar hemos incluido la imagen dentro de un bloque del tipo <div>, esto nos permitirá centrar la imagen utilizandeo el código CSS: ‘text-align: center’ asociado a la clase ‘imagen-hero’. la clase blog-image nos servirá para poder controlar la imagen también mediante CSS.

Ir arriba