Créer un en-tête réactif dans WordPress 3.4

Parmi toutes les nouvelles fonctionnalités et améliorations introduites par la récente version de WordPress 3.4, il existe un joyau caché. La fonctionnalité d'en- tête d'en-tête personnalisée a été prise en charge par WordPress pendant un certain temps, mais auparavant, ses dimensions fixes la rendaient trop immobile pour être très utile à l'ère de la conception réactive.

La nouvelle version le rend flexible et introduit un code plus simple et plus propre pour cette option populaire. En tant que développeurs de thèmes, nous pouvons maintenant aller plus loin, en prenant en compte le besoin d'optimiser pour les visiteurs mobiles.

Auparavant, les dimensions d’une image d’en-tête étaient prédéfinies et gérées avec HEADER_IMAGE_HEIGHT et HEADER_IMAGE_WIDTH constantes et le fichier téléchargé a été rogné pour répondre à ces contraintes. Mais depuis la version 3.4, l’en-tête personnalisé prend en charge des largeurs et des hauteurs flexibles et nous libère de ces constantes laides. Cela vous intrigue, n'est-ce pas? Voyons comment cela peut être fait.

Ce que nous allons réaliser

Tout d'abord, nous devons décider laquelle des techniques d'image réactive disponibles (et largement discutées) nous conviendra. Nous pouvons nous permettre un balisage personnalisé pour cette image, en tenant compte de son importance pour le branding du site et en même temps de son indépendance par rapport à la structure ou au balisage d'un article. De ce point de vue, la technique "noscript" semble très prometteuse. Pour résumer la technique, cela fonctionne comme suit:

Nous spécifions des références d'images alternatives pour les points d'arrêt choisis comme attributs de données d'un

Il doit être accompagné d'un style CSS approprié et d'un script permettant à jQuery Picture de fonctionner. En dehors de cela, nous aimerions avoir un ensemble d'images d'en-tête prédéfinies parmi lesquelles choisir (de la même manière que nous l'avons dans le thème Twenty Eleven). De plus, nous aimerions donner à l'utilisateur la possibilité de télécharger sa propre image dans le panneau d'administration. En supposant qu'une version complète de l'image soit téléchargée, nous créerons les tailles intermédiaires nécessaires avec la prise en charge de la vignette WordPress intégrée associée aux tailles flexibles d'en-tête. Notre en-tête personnalisé devrait finalement ressembler à ceci:

Assez parlé, passons au code.

Étape 1: inscrivez l'en-tête personnalisé avec votre thème

$default_url = get_template_directory_uri().'/_inc/img/city-large.jpg';$args = array('default-image'          => $default_url,'random-default'         => false,'width'                  => 1000,'height'                 => 300,'flex-height'            => true,'flex-width'             => true,'header-text'            => false,'default-text-color'     => '','uploads'                => true,'wp-head-callback'       => 'frl_header_image_style','admin-head-callback'    => 'frl_admin_header_image_style','admin-preview-callback' => 'frl_admin_header_image_markup',);add_theme_support('custom-header', $args);

Ceci est un nouveau code d'enregistrement introduit dans WordPress 3.4. Vous pouvez voir l'ensemble des paramètres pour cela dans le Manuscrit , mais pour notre tâche, les éléments suivants sont les plus importants:

• default-image - URL à la taille de l'image par défaut dans le dossier du thème
• width , height - valeurs maximales supportées par notre thème
• flex-height , flex-width - définir comme "vrai" ce paramètre permet à l'image d'avoir des tailles flexibles
• header-text - nous n'allons pas montrer du texte sur l'image dans notre thème
• uploads - activer les téléchargements dans admin
• wp-head-callback - fonction à appeler dans la section tête de thème
• admin-head-callback - fonction à appeler dans la section head de la page de prévisualisation
• admin-preview-callback - fonction pour produire un marquage de prévisualisation dans l'écran d'administration

Si vous avez déjà utilisé une image d'en-tête personnalisée dans votre thème et que vous vous demandez comment les techniques se comparent, voici une liste d'équivalents entre les anciennes constantes et les nouveaux paramètres (les clés du tableau):

HEADER_IMAGE        -> 'default-image'HEADER_IMAGE_WIDTH  -> 'width'HEADER_IMAGE_HEIGHT -> 'height'NO_HEADER_TEXT      -> 'header-text'HEADER_TEXTCOLOR    -> 'default-text-color'

Étape 2: enregistrer les images par défaut à choisir

Dans notre exemple, nous allons fournir deux images prédéfinies comme options pour l’en-tête et chacune d’elles doit avoir trois variantes: -large.jpg , -medium.jpg et -thumb.jpg pour la gamme correspondante de largeurs de fenêtre. La plus petite taille sera également utilisée comme miniature dans l'interface d'administration.

register_default_headers(array('city' => array('url' => '%s/_inc/img/city-large.jpg','thumbnail_url' => '%s/_inc/img/city-thumb.jpg','description' => 'City'),'forest' => array('url' => '%s/_inc/img/forest-large.jpg','thumbnail_url' => '%s/_inc/img/forest-thumb.jpg','description' => 'Forest')));

Le code est assez explicite, le seul détail qui nécessite une attention est une URL correcte pour les images: -large.jpg pour taille réelle et -thumb.jpg pour la vignette ( %s - est un espace réservé pour le dossier de thème actif qui sera automatiquement remplacé par WordPress.

Étape 3: enregistrer des tailles d'image supplémentaires

add_image_size('header_medium', 600, 900, false);add_image_size('header_minimal', 430, 900, false);

L'enregistrement de ces tailles supplémentaires avec notre thème indiquera à WordPress de créer une variante pour chacune d'elles lors du téléchargement d'une image pour l'en-tête personnalisé. La variante appropriée peut être obtenue ultérieurement en utilisant le nom. L'astuce consiste à spécifier une valeur de hauteur assez grande, ce qui oblige à redimensionner l'image en largeur et à en déduire sa hauteur à partir des proportions.

Étape 4: balisage pour le front-end

function frl_header_image_markup(){/* get full-size image */$custom_header = get_custom_header();$large = esc_url($custom_header->url);$mininal = $medium = '';/* get smaller sizes of image */if(isset($custom_header->attachment_id)){ //uploaded image$medium_src = wp_get_attachment_image_src(intval($custom_header->attachment_id), 'header_medium', false);if(isset($medium_src[0]))$medium = esc_url($medium_src[0]);$minimal_src = wp_get_attachment_image_src(intval($custom_header->attachment_id), 'header_minimal', false);if(isset($minimal_src[0]))$mininal = esc_url($minimal_src[0]);}else{ //default image$medium = esc_url(str_replace('-large', '-small', $custom_header->url));$mininal = esc_url(str_replace('-large', '-thumb', $custom_header->url));}/* fallback for some unexpected errors */if(empty($medium))$medium = $large;if(empty($mininal))$mininal = $large;?>

Encore une fois, tout est simple. Avec le frl_header_image_markup fonction nous créons le balisage nécessaire pour que notre technique réactive fonctionne. La partie la plus intéressante ici est l'obtention d'URL d'image pour les grands, moyens et petits états. La fonction WordPress 3.4 get_custom_header renvoie un objet d'en-tête personnalisé contenant toutes les données nécessaires. Si $custom_header a un ensemble correct attachment_id propriété, nous traitons une image téléchargée et devrait obtenir des tailles intermédiaires en utilisant wp_get_attachment_image_src . S'il n'y a pas une telle propriété, nous traitons une de nos images par défaut afin que nous puissions obtenir des tailles intermédiaires basées sur notre propre convention de dénomination.

Avec frl_header_image_style nous injectons le CSS et le JavaScript qui rendent notre image sensible. Cette fonction sera appelée automatiquement car nous l’avons spécifiée comme paramètre d’enregistrement d’en-tête personnalisé. Mais le _markup fonction devrait être appelée directement dans le thème - évidemment quelque part dans le header.php

Après cette étape, nous avons déjà affiché notre première image d’en-tête par défaut.

Étape 5: balisage pour l'aperçu de l'administrateur

Sous Apparence -> Menu En-tête , nous avons maintenant un écran qui nous permet de changer l'image de l'en-tête personnalisée en en choisissant une parmi les options prédéfinies ou en téléchargeant une nouvelle image. Nous allons avoir l’en-tête simple.

function frl_admin_header_image_markup() {$image = get_header_image();?>
#header-image {max-width: 1000px;max-height: 400px; }#header-image img {vertical-align: bottom;width: 100%;height: auto; }

Dans admin, nous n'utilisons qu'une seule taille d'image (complète) dans notre balisage et obtenons son URL avec le get_header_image fonction ( frl_admin_header_image_markup est responsable de cela). Mais nous devrions fournir un style approprié pour l’aperçu afin qu’il représente le comportement réactif ( frl_admin_header_image_style est responsable de cela). Les deux fonctions seront appelées automatiquement car nous les avons spécifiées comme paramètres d’enregistrement d’en-tête personnalisés. Maintenant, nous pouvons profiter d'une liberté absolue, en définissant une image d'en-tête personnalisée.

Un mot d'avertissement

Avec la liberté vient la responsabilité. En offrant à l'utilisateur la possibilité de télécharger des images personnalisées, nous n'avons aucun contrôle sur la taille et les proportions de l'image. Si une image téléchargée dépasse les limites de largeur et de hauteur, nous avons prévu qu'elle soit rognée. Mais si tout cela se produit dans le nouveau Customizer Live Theme au lieu de l'écran Apparence -> En-tête , l'image d'en-tête ne sera pas tronquée (du moins pour le moment). Le Customizer Live Theme est une nouveauté, donc les futures améliorations semblent probables, mais pour le moment, nous devons faire attention.

Un autre problème pourrait survenir si une image téléchargée avait une largeur inférieure à celle prévue par la conception de notre thème. Notre code va l'étirer pour remplir toute la largeur du conteneur afin que la qualité de l'image puisse en souffrir. La vérité est que tout ce qui est personnalisable peut, par nature, être brisé. Fournir des directives solides à vos utilisateurs vous aidera, mais dans une certaine mesure, vous devez les laisser faire ce qu’ils veulent.

Conclusion

En résumé: nous avons maintenant implémenté de nouvelles fonctions introduites dans le nouveau WordPress 3.4 pour prendre en charge une image d'en-tête personnalisée. Nous l'avons rendu réactif en utilisant la technique "noscript" qui nous permet non seulement d'ajuster la taille d'une image en fonction de la largeur du navigateur, mais également de servir des images de différentes tailles pour différentes largeurs. Nous fournissons notre thème avec deux variantes prédéfinies, mais toute image peut être téléchargée via une interface d'administration et notre en-tête sera toujours réactif.

Vous pouvez télécharger le code et les exemples d'images utilisés dans cet article d'ici .


Avez-vous travaillé avec des en-têtes personnalisés dans WordPress? Quelles améliorations dans la version 3.4 ont un impact sur votre façon de travailler avec WordPress? Rejoignez la conversation ci-dessous.