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 mejoras dignas de mención en esta versión es un nuevo tema predeterminado llamado Veinte diez. Este tema tiene muchas características excelentes habilitadas, pero una de las características 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 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 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 la publicación es lo suficientemente grande como 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, entonces la recortará por usted.
Mira el Screencast
¿Cómo agregar esto?
Tomamos el código directamente de Twenty Ten functions.php expediente. Debes pegar los siguientes códigos en la carpeta de tu tema. functions.php expediente.
<?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; ?>
Eso es una burla para mí. Por favor explique
Por supuesto, esto puede parecerles ridículo a 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.
- Empiece 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 alto 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 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 agregará esto a su tema.
Código para agregar en su tema
Este código probablemente irá en el tema header.php expediente. 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, verifica si es una sola publicación o 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, entonces 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, así que desglosamos el código del tema Twenty Ten. Si tiene alguna pregunta, no dude en preguntar en los comentarios.