Si no ha tenido la oportunidad de probar WordPress 3.0, se la ha perdido. Hemos creado muchas publicaciones sobre las características de WordPress 3.0 y mostramos capturas de pantalla de WordPress 3.0.Una de las actualizaciones notables en esta versión es un nuevo tema predeterminado llamado las veinteEste tema permite muchas características excelentes, pero una de las características que muchos usuarios desean es un panel de encabezado personalizado. En este artículo, compartiremos con usted cómo habilitar encabezados personalizados usando el panel de administración de back-end en WordPress 3.0.

¿Qué hace exactamente esta función?

Creará una pestaña en su panel de administración que le permitirá cambiar la imagen del encabezado. Si es diseñador de temas, puede registrar imágenes predeterminadas para ofrecer a los usuarios más opciones. También permite a los usuarios cargar imágenes personalizadas para encabezados. 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 título, usará la miniatura de su publicación como título en lugar de la imagen predeterminada. Si su miniatura es más grande, se recortará para usted.

Encabezado personalizado en WordPress 3.0

Ver el screencast

¿Cómo agregar esto?

Tomamos el código directamente del archivo functions.php de Twenty Ten. Debe pegar el siguiente código en el archivo functions.php de su tema.

<?php
/** Tell WordPress to run yourtheme_setup() when the 'after_setup_theme' hook is run. */
add_action( 'after_setup_theme', 'yourtheme_setup' );
if ( ! function_exists('yourtheme_setup') ):
/**
* @uses add_custom_image_header() To add support for a custom header.
* @uses register_default_headers() To register the default custom header images provided with the theme.
*
* @since 3.0.0
*/
function yourtheme_setup() {
// This theme uses post thumbnails
add_theme_support( 'post-thumbnails' );
// Your changeable header business starts here
define( 'HEADER_TEXTCOLOR', '' );
// No CSS, just IMG call. The %s is a placeholder for the theme template directory URI.
define( 'HEADER_IMAGE', '%s/images/headers/forestfloor.jpg' );
// The height and width of your custom header. You can hook into the theme's own filters to change these values.
// Add a filter to yourtheme_header_image_width and yourtheme_header_image_height to change these values.
define( 'HEADER_IMAGE_WIDTH', apply_filters( 'yourtheme_header_image_width', 940 ) );
define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'yourtheme_header_image_height',	198 ) );
// We'll be using post thumbnails for custom header images on posts and pages.
// We want them to be 940 pixels wide by 198 pixels tall (larger images will be auto-cropped to fit).
set_post_thumbnail_size( HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT, true );
// Don't support text inside the header image.
define( 'NO_HEADER_TEXT', true );
// Add a way for the custom header to be styled in the admin panel that controls
// custom headers. See yourtheme_admin_header_style(), below.
add_custom_image_header( '', 'yourtheme_admin_header_style' );
// … and thus ends the changeable header business.
// Default custom headers packaged with the theme. %s is a placeholder for the theme template directory URI.
register_default_headers( array (
'berries' => 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() {
?>
<style type="text/css">
#headimg {
height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
}
#headimg h1, #headimg #desc {
display: none;
}
</style>
<?php
}
endif;
?>

Esto es una tontería para mí.por favor explique

Por supuesto, esto puede parecer una tontería para algunos de ustedes. Esto es principalmente para diseñadores de temas, pero intentaremos desglosarlo. Antes de comenzar, asegúrese de copiar y pegar este código en su editor de código para que pueda realizar los cambios necesarios.

Nota: Usamos /images/headers/ como el directorio donde almacenará las imágenes de encabezado predeterminadas.

  • Puede comenzar a escribir código creando la 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 del asunto.
  • Las líneas 25 y 26 son donde define el ancho y el alto de la imagen. De forma predeterminada, está configurado en 940 píxeles de ancho y 198 píxeles de alto. Puedes cambiarlo editando estas dos líneas.
  • A partir de la línea 42, comenzamos a registrar el encabezado predeterminado. Estas imágenes aparecerán como opciones de botón de radio en su panel de administración. Si necesita más opciones, simplemente siga el formato utilizado.
  • 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 haces para el archivo functions.php de tu tema. A continuación, discutiremos cómo agregarlo a su tema.

código agregado al tema

Lo más probable es que este código se coloque en el archivo header.php del tema. Puedes diseñarlo como quieras.

<?php
// Check if this is a post or page, if it has a thumbnail, and if it's a big one
if ( is_singular() &&
has_post_thumbnail( $post->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 : ?>
<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
<?php endif; ?>

¿Qué está haciendo este código?

  • Primero, está comprobando si se trata de una sola publicación o de una página. También verifica 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 si la miniatura de la publicación no es lo suficientemente grande, se mostrará el encabezado predeterminado.

Esperamos que este tutorial te haya sido útil. Recibimos varios correos electrónicos preguntando sobre este tutorial, así que dividimos el código en veinte temas. Si tiene alguna pregunta, no dude en preguntar en los comentarios.

Los datos expuestos en este sitio web son de índole informativo, no necesariamente están actualizados. Esta información es una recopilación de información de internet.