Cómo habilitar el panel de imagen de encabezado personalizado en WordPress 3.0

Si 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 de esta versión es un nuevo tema predeterminado llamado Veinte diez. Este tema tiene habilitadas muchas características excelentes, pero una de las características que muchos usuarios desean es el panel de encabezado personalizado. En este artículo, compartiremos con usted cómo habilitar encabezados personalizados con un panel de administración de backend en WordPress 3.0.

¿Qué hará exactamente esta función?

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 brindar a los usuarios más opciones. También permite a los usuarios cargar imágenes de encabezado personalizadas. Por último, pero ciertamente no menos importante, esta función utiliza miniaturas de publicaciones en páginas de publicaciones individuales. Si la miniatura de la publicación es lo suficientemente grande para ajustarse al tamaño del encabezado, utilizará la miniatura de la publicación como encabezado en lugar de la imagen predeterminada. Si su miniatura es más grande, se la cortará.

Mira el screencast

¿Cómo agregarlo?

Tomamos el código directamente del archivo functions.php de Twenty Ten. Debes pegar los siguientes códigos en el archivo functions.php de tu 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 divertido para mí. Por favor explique

Por supuesto, esto puede sonar 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 realizar los cambios necesarios.

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

  • Comienzas 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.
  • Las líneas 25 y 26 son donde se define el ancho y el alto de la imagen. De forma predeterminada, está configurado en 940 px de ancho y 198 px de alto. Puede cambiar eso editando esas dos líneas.
  • A partir de la línea 42, comenzamos a registrar los encabezados predeterminados. Estas son las imágenes que se mostrarán como una opción de botón de radio en el panel de administración. Si necesita más opciones, simplemente siga el formato utilizado.
  • En la línea 95 elegimos el estilo de encabezado. No es necesario que cambie estos ajustes porque ya los ha definido 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 agregarlo a su tema.

Código para agregar a tu tema

Es muy probable que este código vaya al 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, verifique si es una sola publicación o una página. También verifique si esta publicación / página tiene una miniatura y si es lo suficientemente grande.
  • Si la página es de 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. Hemos recibido algunos correos electrónicos preguntando sobre este tutorial, por lo que hemos desglosado el código del tema Twenty Ten. Si tiene alguna pregunta, no dude en preguntar en los comentarios.

¿Te ha resultado útil??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicado. Required fields are marked *