Comment activer le panneau des images d'en-tête personnalisé dans WordPress 3.0

Si vous n'avez pas eu l'occasion de tester WordPress 3.0, vous rateriez cette occasion. Nous avons créé de nombreux articles sur les fonctionnalités de WordPress 3.0 et montré également des captures d'écran de WordPress 3.0. Une des mises à niveau digne de note de cette version est un nouveau thème par défaut appelé Vingt dix. Ce thème contient de nombreuses fonctionnalités intéressantes, mais l'une des fonctionnalités recherchées par de nombreux utilisateurs est le panneau d'en-têtes personnalisés. Dans cet article, nous vous expliquerons comment activer des en-têtes personnalisés avec un panneau d'administration principal 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 donner plus d'options à l'utilisateur. 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 celle-ci comme en-tête au lieu de l'image par défaut. Si votre vignette est plus grande, elle sera réduite à votre place..

Regarder le screencast

Comment ajouter ceci?

Nous avons pris le code directement de Twenty Ten's functions.php fichier. Vous devez coller les codes suivants dans le thème de votre functions.php fichier.

 array ('url' => '% s / images / en-têtes / baies.jpg', 'thumbnail_url' => '% s / images / en-têtes / baies-thumbnail.jpg', 'description' => __ ('baies' , 'yourtheme')), 'cherryblossom' => array ('url' => '% s / images / en-têtes / cherryblossoms.jpg', 'thumbnail_url' => '% s / images / en-têtes / 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 ',' votre thème ')),' forestfloor '=> tableau ('url' => '% s / images / en-têtes / forestfloor.jpg', 'thumbnail_url' => '% s / images / en-têtes / forestfloor-thumbnail.jpg', 'description' => __ ('sol forestier' , 'yourtheme')), 'inkwell' => array ('url' => '% s / images / en-têtes / inkwell.jpg', 'thumbnail_url' => '% s / images / en-têtes / inkwell-t humbnail.jpg ',' description '=> __ (' Inkwell ',' yourtheme ')),' path '=> array (' url '=>'% s / images / headers / path.jpg ',' thumbnail_url ' => '% s / images / en-têtes / path-thumbnail.jpg', 'description' => __ ('Path', 'yourtheme')), 'sunset' => array ('url' => '% s / images / headers / sunset.jpg ',' thumbnail_url '=>'% s / images / headers / sunset-thumbnail.jpg ',' description '=> __ (' Coucher de soleil ',' votretheme ')));  fin si; if (! function_exists ('yourtheme_admin_header_style')): / ** * Styles l'image d'en-tête affichée dans le panneau d'administration Apparence> En-tête. * * Référencé via add_custom_image_header () dans yourtheme_setup (). * * @since 3.0.0 * / function yourtheme_admin_header_style () ?> #headimg height: px; largeur: px;  #headimg h1, #headimg #desc display: none;   

C'est jibbrish pour moi. S'il vous plaît, expliquez

Bien sûr, cela pourrait sembler bizarre à 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 de pouvoir apporter les modifications nécessaires..

Remarque: Nous utilisons / images / headers / comme répertoire dans lequel vous allez stocker 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 de thèmes.
• Les lignes 25 et 26 vous permettent de définir la largeur et la hauteur de l’image. Par défaut, il est défini sur une largeur de 940 pixels et une hauteur de 198 pixels. Vous pouvez le changer en modifiant 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 comme 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 d'en-tête. Vous n'avez pas besoin de modifier ces paramètres car vous les avez déjà définis dans les 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 ceci à votre thème..

Code à ajouter à votre thème

Ce code ira très probablement dans le thème header.php fichier. Vous pouvez le coiffer comme bon vous semble.

ID) && (/ * $ src, $ width, $ height * / $ image = wp_get_attachment_image_src (get_post_thumbnail_id ($ post-> ID), 'post-thumbnail')) && $ image [1]> = HEADER_IMAGE_WIDTH): // Nous avons une nouvelle image d'en-tête! echo get_the_post_thumbnail ($ post-> ID, 'post-thumbnail'); sinon:?>  

Que fait ce code?

• Premièrement, il vérifie s’il s’agit d’un message simple ou d’une page. Il vérifie également si cet article / cette page a une vignette et si sa taille est suffisante.
• Si la page est une page unique et que la vignette est suffisamment grande, la vignette de publication spécifique à cette publication s'affiche..
• S'il ne s'agit pas d'une seule page ou si la miniature de publication n'est pas assez grande, l'en-tête par défaut sera affiché..

Nous espérons que ce tutoriel a été utile. Nous avons reçu quelques courriels au sujet de 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..