Como cambiar el nombre del blog (titulo) por una imagen – WordPress

Si tienes un blog y estas modificando o personalizando cualquiera de los temas que trae WordPress por defecto: Twenty Ten, Twenty Eleven, Twenty Twelve, para que se adapte a tus necesidades, pero has llegado a un punto donde te has atascado o no sabes cómo hacerlo, como es el caso de querer cambiar el nombre del blog por el de una imagen, aquí te decimos como hacerlo no importa si estas utilizando el Twenty Ten, Eleven o el último theme de WordPress Twenty Twelve.

Para cambiar el nombre del blog por el de una imagen a los temas que trae WordPress por defecto solo tendrás que hacer lo siguiente.

Como cambiar el nombre del blog (titulo) por una imagen – WordPress

Cambiar el nombre del blog por una imagen

Abrimos el archivo “Header.php” del tema que quieras cambiar el nombre del blog por una imagen, y ubicamos las siguientes líneas.

Twenty Ten

<<?php echo $heading_tag; ?> id="site-title">
<span>
<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
</span>
</<?php echo $heading_tag; ?>>
<div id="site-description"><?php bloginfo( 'description' ); ?></div>

Twenty Eleven

<hgroup>
<h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
</hgroup>

Twenty Twelve

<hgroup>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</hgroup>

Ahora la reemplazamos por el siguiente código

<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img id="site-logo" src="<?php echo get_stylesheet_directory_uri(); ?>/images/logo.png" alt="Ir a la portada del Blog" /></a></h1>

Deberas copiar la imagen a la carpetas «images» de tu plantilla. Y con esto ya habremos sustituido el título del blog por el de una imagen.

Una aclaración para que la tengas en cuenta, no recuerdo en cual theme al cambiar el nombre por una imagen esta se agranda, para que esto no suceda solo tendrás que copiar el siguiente código en tu plantilla «style.css».

img#site-logo { width: auto; }
/*fondo header*/

En el codigo de arriba ya viene incluido en la parte que dice «id=site-log» pero puedes quitarlo si quieres, si el logo no se te agranda.

La fuente original de donde saque este tutorial y que me ayudo  bastante es el foro de WordPress en ingles.

Descubre más

4 Commentarios

    1. He visto tu blog, como no estas trabajando con un tema hijo, en la hoja de estilo en la línea 1496
      cambia
      .site-header h1,
      .site-header h2 {
      text-align: left;
      }

      por esto
      .site-header h1,
      .site-header h2 {
      margin: 0 auto;
      }

      La descripción no hace falta porque ya la tienes centrada. Espero haberte sido de ayuda

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *