Hoy en AyudaWordPress.com

Como añadir imágenes de cabecera a TwentyTen
Tema para Buddypress JooPad
WordPress en ASCII

Como añadir imágenes de cabecera a TwentyTen

Posted: 07 Jul 2010 03:56 PM PDT

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:

Clic para ver Texto Plano

PHP:

// 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:

Clic para ver Texto Plano

PHP:

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:

Clic para ver Texto Plano

PHP:

'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:

Clic para ver Texto Plano

PHP:

'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:

Tema para Buddypress JooPad

Posted: 07 Jul 2010 03:50 PM PDT

Buddypress se ha convertido rápidamente en uno de los plugins mas usados por la comunidad wordpress y como consecuencia los usuarios buscan temas que realmente atraigan la atención de sus usuarios, es por esto que me he dado a la tarea de crear algunos diseños para buddypress que podrán descargar, copiar y modificar con total libertad.

El tema que les traigo el día de hoy se llama JooPad, un diseño inspirado principalmente en los ya famosos gadgets de apple, aun esta en la versión 1.0 por lo que es muy básico, pero no se preocupen que para la versión 1.1 vendrá con un panel de opciones para poder cambiar el diseño de la portada, algunos aspectos de los perfiles de usuario y espacios para añadir publicidad en diferentes secciones del sitio.

A continuacion les dejo el link para que puedan ver el demo, descargarlo, ver la licencia de uso, las instrucciones de instalacion y demas.

LINK: Demo y Descarga