Como añadir imágenes de cabecera a TwentyTen

El nuevo tema por defecto de WordPress desde la versión 3.0 se llama TwentyTen o 2010, y una de sus características es que te permite cambiar la imagen de cabecera eligiendo entre una lista de imágenes predeterminadas o bien subiendo una imagen adicional, pero si quieres, por ejemplo, ofrecer para una instalación nueva una lista de imágenes distintas entre las que puedan elegir los usuarios, o quieres que la lista de imágenes de cabecera muestre unas de tu propia factura para cambiarlas de vez en cuando o en ocasiones (navidad, festividades, etc) también puedes hacerlo.

En realidad el proceso es muy sencillo, vamos a verlo … 

Primero abre el fichero functions.php del tema TwentyTen y localiza donde empieza esta sección:

// Default custom headers packaged with the theme. %s is a placeholder for the theme template directory URI.

A partir de ahí verás las «llamadas» a las imágenes por defecto, con su descripción:

register_default_headers( array(
‘berries’ => array(
‘url’ => ‘%s/images/headers/berries.jpg’,
‘thumbnail_url’ => ‘%s/images/headers/berries-thumbnail.jpg’,
/* translators: header image description */
‘description’ => __( ‘Berries’, ‘twentyten’ )
),
‘cherryblossom’ => array(
‘url’ => ‘%s/images/headers/cherryblossoms.jpg’,
‘thumbnail_url’ => ‘%s/images/headers/cherryblossoms-thumbnail.jpg’,
/* translators: header image description */
‘description’ => __( ‘Cherry Blossoms’, ‘twentyten’ )
),
‘concave’ => array(
‘url’ => ‘%s/images/headers/concave.jpg’,
‘thumbnail_url’ => ‘%s/images/headers/concave-thumbnail.jpg’,
/* translators: header image description */
‘description’ => __( ‘Concave’, ‘twentyten’ )
),
‘fern’ => array(
‘url’ => ‘%s/images/headers/fern.jpg’,
‘thumbnail_url’ => ‘%s/images/headers/fern-thumbnail.jpg’,
/* translators: header image description */
‘description’ => __( ‘Fern’, ‘twentyten’ )
),
‘forestfloor’ => array(
‘url’ => ‘%s/images/headers/forestfloor.jpg’,
‘thumbnail_url’ => ‘%s/images/headers/forestfloor-thumbnail.jpg’,
/* translators: header image description */
‘description’ => __( ‘Forest Floor’, ‘twentyten’ )
),
‘inkwell’ => array(
‘url’ => ‘%s/images/headers/inkwell.jpg’,
‘thumbnail_url’ => ‘%s/images/headers/inkwell-thumbnail.jpg’,
/* translators: header image description */
‘description’ => __( ‘Inkwell’, ‘twentyten’ )
),
‘path’ => array(
‘url’ => ‘%s/images/headers/path.jpg’,
‘thumbnail_url’ => ‘%s/images/headers/path-thumbnail.jpg’,
/* translators: header image description */
‘description’ => __( ‘Path’, ‘twentyten’ )
),
‘sunset’ => array(
‘url’ => ‘%s/images/headers/sunset.jpg’,
‘thumbnail_url’ => ‘%s/images/headers/sunset-thumbnail.jpg’,
/* translators: header image description */
‘description’ => __( ‘Sunset’, ‘twentyten’ )
),
‘waterfall’ => array(
‘url’ => ‘%s/images/headers/waterfall.jpg’,
‘thumbnail_url’ => ‘%s/images/headers/waterfall-thumbnail.jpg’,
/* translators: header image description */
‘description’ => __( ‘Waterfall’, ‘twentyten’ )
),
‘mountain’ => array(
‘url’ => ‘%s/images/headers/mountain.jpg’,
‘thumbnail_url’ => ‘%s/images/headers/mountain-thumbnail.jpg’,
/* translators: header image description */
‘description’ => __( ‘Mountain’, ‘twentyten’ )
)
) );

Para que entiendas cada sección esto es lo que significan:

register_default_headers: La función que crea y muestra las cabeceras por defecto. Acepta varios parámetros.

name: Establece el valor del nombre de la cabecera. También aquí podemos definir valores y claves adicionales.

url: Ruta relativa a la imagen de cabecera. Date cuenta que la ruta por defecto es /images/headers/nombre_de_imagen.jpg

thumbnail_url: Ruta relativa a la miniatura de la imagen de cabecera, que verás en la página de administración del tema. La ruta por defecto es /images/headers/miniatura_de_imagen.jpg

description: Una descripción para la imagen que se muestra al pasar el cursor sobre la imagen de miniatura en el panel de opciones de cabecera del tema.

Más cosas que debes tener en cuenta:

  • Las imágenes de cabecera deben ser de un tamaño de 940×198 pixels, si son más grandes se redimensionan y si son más pequeñas se ajustarán también para rellenar esas dimensiones.
  • Las imágenes de miniatura pueden ser de cualquier tamaño pero el tamaño por defecto es de 230×48 pixels.
  • Las imágenes solo pueden estar en formato .jpg o se ignorarán y no se mostrarán.

Ahora bien, ¿como añado imágenes o cambio las existentes?, pues si has llegado hasta aquí ya habrás imaginado que sustituir las imágenes por defecto por las tuyas es tan sencillo como subir tus imágenes de cabecera a la carpeta adecuada y cambiar nombre, descripción y nombre del fichero.

Pero si quieres añadir más el proceso sería este:

Copias un bloque de imagen (para no tener que teclear mucho) del estándar del fichero functions.php, por ejemplo este:

‘berries’ => array(
‘url’ => ‘%s/images/headers/berries.jpg’,
‘thumbnail_url’ => ‘%s/images/headers/berries-thumbnail.jpg’,
/* translators: header image description */
‘description’ => __( ‘Berries’, ‘twentyten’ )
),

A continuación pegas el bloque copiado al final de la sección y sustituyes los parámetros para que se adapten a la nueva imagen y miniatura que hayas subido a las carpetas por defecto (o la que tu quieras), por ejemplo:

‘fuego’ => array(
‘url’ => ‘%s/images/cabeceras/fuego.jpg’,
‘thumbnail_url’ => ‘%s/images/cabeceras/miniatura-fuego.jpg’,
/* translators: header image description */
‘description’ => __( ‘Fuego, una imagen caliente para los días de frío’, ‘twentyten’ )
),

Guardas los cambios y ya tendrás una imagen nueva que cambiar fácilmente a golpe de clic.

Si te gusta ver las cosas más que leerlas en WPbegginer han creado un video que explica este mismo proceso, este:

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(0 votos, promedio: 0)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.

12 comentarios en “Como añadir imágenes de cabecera a TwentyTen”

  1. Gracias Fernando por el artículo, por lo claro y bien explicado que esta.

    Y por si alguien necesita cambiar el alto de la imagen, como me paso a mí, puede hacer lo siguiente:

    – en el mismo archivo al que hace referencia este artículo, functions.php
    – en la línea 110 aparece el siguiente código:

    define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyten_header_image_width', 940
    define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyten_header_image_height', 198

    ya solo es cuestión de cambiar los valores que vienen por defecto para el ancho (940) y para el alto (198)

    POSDATA: se agradecería que alguien cambiara el alto de esta caja de texto, para que los comentarios con más chicha, se puedan hacer más cómodamente 😉

  2. Gracias por la explicación, me ha sido de gran ayuda pero ahora me gustaría hacer algo más…

    ¿Es posible con este tema utilizar una cabecera diferente dependiendo de la página en la que te encuentres?

    1. <cite>¿Es posible con este tema utilizar una cabecera diferente dependiendo de la página en la que te encuentres?</cite>

      Si es posible. Tanto al crear una entrada, como posteriormente al editarla.
      Vete al Panel de Control / Entradas
      O bien creas una nueva o bien editas alguna que ya tengas publicada por ejemplo.

      Es decir Panel de Control, clic en Entradas, editar o crear según sea el caso.

      En el menú de la derecha abajo de todo, Imagen Destacada, clic en Establecer la imagen destacada.

      A partir de aquí es cuestión de elegir una imagen con las características de alto y ancho que hayas definido.

  3. Fredo,

    ¿Es posible con este tema utilizar una cabecera diferente dependiendo de la página en la que te encuentres?

    gracias x tu explicación, funciona OK!!

  4. Hola..

    Una consulta..puedo eliminar el titulo y l a descripcion de la parte de arriba? Lo que pasa es que quiero incluir una imagen donde se mostrará incluido el nombre y la descripción, por lo que no se veria bien si se ve duplicado..Muchas Gracias..

    1. Si puedes.

      1 – Edita el archivo header.php, en nuestro caso del tema TwentyTen (…wp-contentthemestwentytenheader.php)

      2 – Elimina desde la línea 48: <?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div';

      hasta la línea 54:

  5. Fredo:

    Muchas Gracias por contestar mi pregunta, pero al eliminar esas lineas no afectará en lo que respecta a la descripción o posicionamiento en buscadores o SEO en general?. Gracias y perdona que vuelva a preguntar.

    Miroslav

    1. Quizás alguien nos pueda dar otra visión más objetiva.

      Mientras tanto te comento mi única experiencia, con un portal que empezó su andadura en abril de este año: Cuidándote.net; al cual le eliminé el código que te mencionaba.

      El posicionamiento en Google no les interesa demasiado, ya que al existir una intranet, la información se difunde de una forma más rápida y efectiva o bien, a través de la forma tradicional mediante los distintos tablones de anuncios de los distintos departamentos.

      A los pocos días por curiosidad, escribí «cuidandote» en Google. Fijándome sólo en la primera página, observo que todos los enlaces de los resultados apuntan a la canción «Cuidándote» del álbum «Pa Fuera Telarañas» de la cantante Bebe, ¡maldita coincidencia!.

      Semanas más tarde (alrededor del mes) vuelvo a probar, esta vez aparecemos los últimos y a día de hoy es el quinto enlace. Es más, si escribes el nombre y los apellidos junto con el cargo de la persona que escribió el último artículo, (p.e. Fulanita Apellido1 Enfermera) en menos de una hora (comprobado en varias ocasiones), aparece de primer y segundo enlace, en la primera página de resultados de Google.

      Si te digo la verdad, yo no he hecho nada especial y teniendo en cuenta que el portal en cuanto a contenido está arrancando, ya que hasta finales del mes que viene no empezarán a publicar las conferencias y charlas, que actualmente se están llevando a cabo desde el mes de septiembre, no nos quejamos del posicionamiento.

      Esperemos que alguien con más conocimiento y experiencia, responda aportándonos algo más al tema.

      Un saludo, Fredo.

  6. José Miguel De La Rosa Sánchez

    Hola Fernando, mi pregunta es la siguiente,: resulta que cuando hago una selección en la categorías me muestra los artículos pero sólo son texto, sin las imagénes que se le añadieron en su momento. ¿Cómo puedo hacer para que sí las muestre?.
    Gracias por tu tiempo y dedicación
    Un saludo

Deja un comentario

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

 

Ir arriba Ir al contenido