Si vous n’avez pas eu l’occasion de tester WordPress 3.0, alors vous manquez quelque chose. Nous avons créé de nombreux articles sur les fonctionnalités de WordPress 3.0 et avons également montré des captures d’écran de WordPress 3.0. L’une des améliorations notables de cette version est un nouveau thème par défaut appelé Vingt dix. Ce thème possède de nombreuses fonctionnalités intéressantes, mais l’une des fonctionnalités souhaitées par de nombreux utilisateurs est le panneau des en-têtes personnalisés. Dans cet article, nous partagerons avec vous comment vous pouvez activer les en-têtes personnalisés avec un panneau d’administration back-end dans WordPress 3.0.
Que fera exactement cette fonctionnalité ?
Il créera un onglet dans votre panneau d’administration qui vous permettra de modifier les images d’en-tête. Vous pouvez enregistrer des images par défaut si vous êtes un concepteur de thème pour offrir plus d’options aux utilisateurs. Il permet également aux utilisateurs de télécharger des images personnalisées pour l’en-tête. Dernier point mais non le moindre, cette fonctionnalité utilise des vignettes de publication sur des pages de publication uniques. Si la vignette de votre publication est suffisamment grande pour s’adapter à la taille de l’en-tête, elle utilisera la vignette de votre publication comme en-tête au lieu de l’image par défaut. Si votre vignette est plus grande, elle la recadrera pour vous.
Regardez le screencast
Comment ajouter ceci ?
Nous avons pris le code directement de Twenty Ten’s fonctions.php déposer. Vous devez coller les codes suivants dans votre thème fonctions.php déposer.
<?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;
?>
C’est de la foutaise pour moi. S’il vous plaît, expliquez
Bien sûr, cela peut sembler farfelu à certains d’entre vous. Ceci est principalement destiné aux concepteurs de thèmes, mais nous ferons de notre mieux pour le décomposer. Avant de commencer, assurez-vous de copier et coller ce code dans votre éditeur de code, afin que vous puissiez apporter les modifications nécessaires.
Remarque : Nous utilisons /images/headers/ comme répertoire dans lequel vous stockerez vos images d’en-tête par défaut.
- Vous commencez le code en créant une fonction yourtheme_setup().
- À la ligne 21, nous définissons l’image d’en-tête par défaut. Notez qu’il existe une variable %s qui est essentiellement un espace réservé pour l’URI du répertoire du thème.
- Les lignes 25 et 26 sont celles où vous définissez la largeur et la hauteur de l’image. Par défaut, il est défini sur 940px de large et 198px de haut. Vous pouvez le changer en éditant ces deux lignes.
- À partir de la ligne 42, nous commençons à enregistrer les en-têtes par défaut. Ce sont les images qui apparaîtront sous la forme d’une option de bouton radio dans votre panneau d’administration. Si vous avez besoin de plus d’options, suivez simplement le format utilisé.
- À la ligne 95, nous choisissons le style de l’en-tête. Vous n’avez pas besoin de modifier ces paramètres car vous les avez déjà définis aux lignes 25 et 26.
C’est tout ce que vous faites pour le fichier functions.php du thème. Ensuite, nous allons expliquer comment vous allez ajouter cela à votre thème.
Code à ajouter dans votre thème
Ce code ira très probablement dans le thème en-tête.php déposer. Vous pouvez le coiffer comme bon vous semble.
<?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; ?>
Que fait ce code ?
- Tout d’abord, il vérifie s’il s’agit d’un seul article ou d’une page. Il vérifie également si cette publication/page a une vignette et si elle est assez grande.
- Si la page est une page unique et a une vignette suffisamment grande, elle affiche la vignette de publication spécifique à cette publication.
- S’il ne s’agit pas d’une seule page ou que la vignette de la publication n’est pas assez grande, l’en-tête par défaut sera alors affiché.
Nous espérons que ce tutoriel vous a été utile. Nous avons reçu quelques e-mails concernant ce didacticiel, nous avons donc décomposé le code du thème Twenty Ten. Si vous avez des questions, n’hésitez pas à les poser dans les commentaires.
