Wordpress: cómo poner un banner (imagen, Adsense o lo que quieras) a la derecha en la cabecera de tu página web

Ayer decidí poner un Adsense en mi blog. Es muy fácil de añadir en la sidebar: sólo tienes que crear un nuevo widget y pegarlo en el código de Adsense.

Pero yo quería insertar Adsense en la cabecera del blog, a la derecha. A menudo es un espacio que se queda vacio así que me he preguntado: ¿Por qué dejarlo vacío?

Tengo 2 cabeceras diferentes y lo he añadido en ambas:

Mira la página principal: Enitaliano - El blog para aprender italiano gratis y en la página con la cabecera distinta: curso de italiano

He empleado 2 horas buscando un plug-in que pudiese ayudarme, pero no he encontrado ninguno que pudiese hacer exactamente lo que tenía en la cabeza.

Lo he conseguido sólo editando estos archivos: style.css y header.php.

Empecemos por style.css.

Tu archivo style.css puede ser distinto si usas un tema diferente. Pero es muy fácil de entender porque normalmente los archivos style.css no son demasiado diferentes de los demás.

Edita style.css (manualmente con un editor de textos o con el interfaz de admnistrador deWordpress: Appareance → Editor) y busca la sección Header en el file.

Mi style.css antes:

/* begin Header */

div.art-header

{

margin: 0 auto;

position: relative;

z-index: 0;

width: 988px;

height: 100px;

overflow: hidden;

}

div.art-header-jpeg

{

positi on: absolute;

z-index: -1;

top: 0;

left: 0;

width: 988px;

height: 100px;

background-image: url('images/header.jpg');

background-repeat: no-repeat;

background-position: center center;

/* end Header */

Mi style.css después

/* begin Header */

div.art-header

{

margin: 0 auto;

position: relative;

z-index: 0;

width: 988px;

height: 100px;

overflow: hidden;

}

div.art-header-jpeg

{

positi on: absolute;

z-index: -1;

top: 0;

left: 0;

width: 988px;

height: 100px;

background-image: url('images/header.jpg');

background-repeat: no-repeat;

background-position: left center;

}

div.art-header-banner

{

posi tion: absolute;

z-index: 9;

top: 0;

left: 0;

width: 968px;

height: 100px;

background:transparent;

margin-top: 20px;

margin-left: 500px;

}

/* end Header */

Como puedes ver en el nuevo file están las siguientes líneas:

div.art-header-banner

{

position : absolute;

z-index: 9;

top: 0;

left: 0;

width: 968px;

height: 100px;

background:transparent;

margin-top: 20px;

margin-left: 500px;

}

El significado de las nuevas líneas es: la anchura de la cabecera de la página es de 968 pixel y la altura 100 pixel; mis banners se van a posicionar con el ángulo izquierdo a 20 pixel desde a lo alto y 500 pixel desde la izquierda. He dado el valor 9 a z-index,  así quedan encima los demás “estratos”.

Bien, ahora vamos a editar el file header.php. Busca en el texto “echo get_option('home');” o algo similar.

Mi header.php antes (substituye "«" y "»" con los símbolos de mayor y menor) :

«div class="art-header"»

«div class="art-header-jpeg"»«/div»

«div class="art-logo"»

«h1 id="name-text" class="art-logo-name"»«a href="«?php echo get_option('home'); ?»/”»En Italiano«/a»«/h1»

«div id="slogan-text" class="art-logo-text"»El blog para aprender italiano gratis«BR/»curso de italiano básico«/div»

«/div»

«/div»

Y después:

«div class="art-header"»

«div class="art-header-jpeg"»«/div»

«div class="art-header-banner"»

«!-- tu banner, Google Adsense code, etc. AQUI --»

«/div»

«div class="art-logo"»

«h1 id="name-text" class="art-logo-name"»«a href="«?php echo get_option('home'); ?»/”»En Italiano«/a»«/h1»

«div id="slogan-text" class="art-logo-text"»El blog para aprender italiano gratis«BR/»curso de italiano básico«/div»

«/div»

«/div»

Cómo puedes ver sólo necesitas añadir estas líneas:

«div class="art-header-banner"»

«!-- tu banner, Google Adsense code, etc. AQUI --»

«/div»

¡Ya está! Un truco: si, como yo, ya tienes una imágen en la cabecera de la página estaría bien modifcarlo para añadir un borde en la posición en la que estará el banner.

Puedes hacer esto con cualquiere editor de imágen. En mi página hay un rectángulo verde debajo de los banners (tamano: 472*64) en la misma posición de los banners (tamaño de los banners 468*60).

¡Espero haberte sido de ayuda!

Peonia