Cómo habilitar el panel de imágenes de encabezado personalizado en WordPress 3.0

Si ustedes no han tenido la oportunidad de probar WordPress 3.0, entonces se lo están perdiendo. Hemos creado numerosas publicaciones sobre las características de WordPress 3.0 y también hemos mostrado capturas de pantalla de WordPress 3.0. Una de las actualizaciones notables en esta versión es un nuevo tema predeterminado llamado Veinte diez. Este tema tiene muchas funciones excelentes habilitadas, pero una de las funciones que muchos usuarios desean es el Panel de encabezados personalizados. En este artículo, compartiremos con usted cómo puede habilitar encabezados personalizados con un panel de administración de back-end en WordPress 3.0.

¬ŅQu√© har√° exactamente esta caracter√≠stica?

Crear√° una pesta√Īa en su panel de administraci√≥n que le permitir√° cambiar las im√°genes del encabezado. Puede registrar im√°genes predeterminadas si es un dise√Īador de temas para ofrecer a los usuarios m√°s opciones. Tambi√©n permite a los usuarios cargar im√°genes personalizadas para el encabezado. Por √ļltimo, pero no menos importante, esta funci√≥n utiliza miniaturas de publicaciones en p√°ginas de publicaciones individuales. Si la miniatura de su publicaci√≥n es lo suficientemente grande como para ajustarse al tama√Īo del encabezado, utilizar√° la miniatura de su publicaci√≥n como el encabezado en lugar de la imagen predeterminada. Si su miniatura es m√°s grande, la recortar√° para usted.

Encabezado personalizado en WordPress 3.0

Mira el screencast

¬ŅC√≥mo agregar esto?

Tomamos el c√≥digo directamente de Twenty Ten’s funciones.php archivo. Debes pegar los siguientes c√≥digos en el tema funciones.php archivo.

 array (
'url' => '%s/images/headers/berries.jpg',
'thumbnail_url' => '%s/images/headers/berries-thumbnail.jpg',
'description' => __( 'Berries', 'yourtheme' )
),
'cherryblossom' => array (
'url' => '%s/images/headers/cherryblossoms.jpg',
'thumbnail_url' => '%s/images/headers/cherryblossoms-thumbnail.jpg',
'description' => __( 'Cherry Blossoms', 'yourtheme' )
),
'concave' => array (
'url' => '%s/images/headers/concave.jpg',
'thumbnail_url' => '%s/images/headers/concave-thumbnail.jpg',
'description' => __( 'Concave', 'yourtheme' )
),
'fern' => array (
'url' => '%s/images/headers/fern.jpg',
'thumbnail_url' => '%s/images/headers/fern-thumbnail.jpg',
'description' => __( 'Fern', 'yourtheme' )
),
'forestfloor' => array (
'url' => '%s/images/headers/forestfloor.jpg',
'thumbnail_url' => '%s/images/headers/forestfloor-thumbnail.jpg',
'description' => __( 'Forest Floor', 'yourtheme' )
),
'inkwell' => array (
'url' => '%s/images/headers/inkwell.jpg',
'thumbnail_url' => '%s/images/headers/inkwell-thumbnail.jpg',
'description' => __( 'Inkwell', 'yourtheme' )
),
'path' => array (
'url' => '%s/images/headers/path.jpg',
'thumbnail_url' => '%s/images/headers/path-thumbnail.jpg',
'description' => __( 'Path', 'yourtheme' )
),
'sunset' => array (
'url' => '%s/images/headers/sunset.jpg',
'thumbnail_url' => '%s/images/headers/sunset-thumbnail.jpg',
'description' => __( 'Sunset', 'yourtheme' )
)
) );
}
endif;
if ( ! function_exists( 'yourtheme_admin_header_style' ) ) :
/**
* Styles the header image displayed on the Appearance > Header admin panel.
*
* Referenced via add_custom_image_header() in yourtheme_setup().
*
* @since 3.0.0
*/
function yourtheme_admin_header_style() {
?>

Eso es improvisado para mí. Por favor explique

Por supuesto, esto puede parecer extra√Īo para algunos de ustedes. Esto es principalmente para dise√Īadores de temas, pero haremos todo lo posible para desglosarlo. Antes de comenzar, aseg√ļrese de copiar y pegar este c√≥digo en su editor de c√≥digo, para que pueda hacer los cambios necesarios.

Nota: Estamos usando / images / headers / como el directorio donde almacenar√° sus im√°genes de encabezado predeterminadas.

  • Comienza el c√≥digo creando una funci√≥n yourtheme_setup ().
  • En la l√≠nea 21, definimos la imagen de encabezado predeterminada. Tenga en cuenta que hay una variable% s que es b√°sicamente un marcador de posici√≥n para el URI del directorio de temas.
  • La l√≠nea 25 y 26 es donde define el ancho y la altura de la imagen. De forma predeterminada, est√° configurado en 940 px de ancho y 198 px de alto. Puede cambiarlo editando esas dos l√≠neas.
  • A partir de la l√≠nea 42, comenzamos a registrar los encabezados predeterminados. Estas son las im√°genes que aparecer√°n como una opci√≥n de bot√≥n de radio en su panel de administraci√≥n. Si necesita m√°s opciones, simplemente siga el formato que se est√° utilizando.
  • En la l√≠nea 95, elegimos el estilo del encabezado. No necesita cambiar estas configuraciones porque ya las defini√≥ en las l√≠neas 25 y 26.

Eso es todo lo que está haciendo para el archivo functions.php del tema. A continuación, veremos cómo va a agregar esto a su tema.

Código para agregar en su tema

Este c√≥digo probablemente ir√° en el tema header.php archivo. Puedes dise√Īarlo como quieras.

ID ) &&
( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail') ) &&
$image[1] >= HEADER_IMAGE_WIDTH ) :
// We have a new header image!
echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
else : ?>

¬ŅQu√© est√° haciendo este c√≥digo?

  • Primero, est√° verificando si se trata de una sola publicaci√≥n o p√°gina. Tambi√©n comprueba si esta publicaci√≥n / p√°gina tiene una miniatura y si es lo suficientemente grande.
  • Si la p√°gina es una sola p√°gina y tiene una miniatura lo suficientemente grande, muestra la miniatura de la publicaci√≥n espec√≠fica para esa publicaci√≥n.
  • Si no es una sola p√°gina, o la miniatura de la publicaci√≥n no es lo suficientemente grande, mostrar√° el encabezado predeterminado.

Esperamos que este tutorial haya sido √ļtil. Recibimos algunos correos electr√≥nicos preguntando sobre este tutorial, por lo que desglosamos el c√≥digo del tema Twenty Ten. Si tiene alguna pregunta, no dude en preguntar en los comentarios.