En tant que développeurs de thèmes WordPress, nous pouvons créer un ou plusieurs thèmes nécessitant que les images aient une certaine taille (dimensions). Dans le même temps, nous ne pouvons pas confier la responsabilité de la création de telles images spécifiques à une dimension aux utilisateurs finaux de nos thèmes..
Donc, quelle est la solution? La meilleure façon de traiter ce problème consiste à incorporer dans nos thèmes la fonctionnalité permettant de générer des images de taille personnalisée à la volée..
Dans ce tutoriel, je vais vous montrer comment utiliser la bibliothèque PHP BFI Thumb pour y parvenir..
Selon le codex WordPress:
Une image sélectionnée est une image qui est choisie comme image représentative pour les articles, les pages ou les types d'articles personnalisés. L'affichage de cette image dépend du thème. Ceci est particulièrement utile pour les thèmes "de style magazine" où chaque message a une image.
Les images présentées s'appelaient Miniatures avant que le nom ne soit changé. Donc, vous trouverez ces deux termes utilisés de manière interchangeable.
Les thèmes doivent déclarer leur soutien pour les miniatures de publication avant que l'interface d'affectation de ces images apparaisse sur les écrans Ajouter une publication / Modifier une publication..
Pour activer la prise en charge de post-vignettes dans votre thème, ajoutez la ligne suivante à votre functions.php
fichier:
Pour afficher des vignettes de publication dans votre thème, collez le code suivant à un emplacement approprié dans votre fichier de modèle spécifique:
Le code ci-dessus vérifie si la publication comporte une vignette avant d'appeler la fonction pour l'afficher..
le add_image_size ()
Cette fonction vous permet d’enregistrer de nouvelles tailles d’image pour les miniatures de publication..
Par défaut, WordPress crée les tailles d'image suivantes lorsqu'un utilisateur ajoute une image à la médiathèque:
Pour enregistrer de nouvelles tailles d’image, nous utilisons le add_image_size ()
fonctionne comme ceci:
$ name
- (chaîne) (Champs obligatoires) Le nouveau nom de la taille de l'image. Défaut: Aucun $ largeur
- (int) (facultatif) La largeur de la vignette de publication en pixels. Par défaut: 0 $ hauteur
- (int) (facultatif) La hauteur de la vignette de publication en pixels. Par défaut: 0 $ récolte
- (boolean / array) (optionnel)Pour afficher les tailles d’image nouvellement enregistrées dans votre thème, il vous suffit de transmettre le nom de votre taille d’image personnalisée au pouce. the_post_thumbnail ()
fonction, comme ceci:
BFI Thumb est une classe ou une bibliothèque PHP qui agit comme un outil de redimensionnement, de découpage, de niveaux de gris, de coloriseur, d'opacifiant pour WordPress développé par Benjamin Intal..
1. Téléchargez BFI thumb depuis GitHub et enregistrez-le dans le répertoire racine de votre thème..
2. Incluez dans votre thème en ajoutant la ligne suivante à votre functions.php
fichier:
3. Utilisez la fonction suivante lorsque vous souhaitez afficher votre image au format personnalisé:
400, 'hauteur' => 300); bfi_thumb ("URL-to-image.jpg", $ params); ?>
Si vous regardez la fonction ci-dessus ( bfi_thumb ()
), vous remarquerez qu’il faut l’URL de l’image à redimensionner en tant que premier paramètre, suivi des autres paramètres (dimensions de l’image). Vous devez donc vous demander comment nous déterminons l'URL de notre post thumbnail?
Pour déterminer l'URL d'une vignette de publication, nous utilisons une fonction appelée wp_get_attachment_image_src ()
qui prend l'identifiant de pièce jointe, la taille et une icône optionnelle comme paramètres.
Alors on passe get_post_thumbnail_id ()
fonctionne comme premier paramètre. Il prend la Post ID
en paramètre et retourne le ID
de l'image sélectionnée jointe à l'article.
Le deuxième paramètre est Taille
qui peut être un mot-clé de chaîne (miniature, moyen, grand ou complet), toute taille d'image personnalisée ajoutée à l'aide de la add_image_size ()
fonction ou un tableau à deux éléments représentant la largeur et la hauteur en pixels. Mais pour que notre image au format personnalisé ait la plus haute qualité, nous utiliserons la taille originale. - plein
.
A ce stade, notre code devrait ressembler à ceci:
400, 'hauteur' => 300); $ imgsrc = wp_get_attachment_image_src (get_post_thumbnail_id ($ post-> ID, "), $ thumb_size); bfi_thumb ($ imgsrc [0], $ params);?>
wp_get_attachment_image_src ()
retourne un tableau ordonné avec des valeurs correspondant à l'URL (0), à la largeur (1), à la hauteur (2) et à (3) l'échelle d'une pièce jointe d'image (ou d'une icône représentant une pièce jointe).
Mais nous ne sommes intéressés que par le premier paramètre renvoyé - le URL
. Nous passons à la bfi_thumb ()
fonction, avec nos autres paramètres (largeur et hauteur) pour obtenir notre image de taille personnalisée.
Parce que nous allons probablement utiliser ce code encore et encore dans notre thème - ou dans les thèmes - encapsulons-le dans une fonction.
$ image_width, 'height' => $ image_height); $ imgsrc = wp_get_attachment_image_src (get_post_thumbnail_id ($ post-> ID, "), $ thumb_size); $ custom_img_src = bfi_thumb ($ imgsrc [0], $ params); $ custom_img_src = bfi_thumb ($ imgsrc [0], $ params); retourne $ custom_img_src;?
Enregistrez ce fichier sur votre functions.php
fichier.
Pour les images:
Ou pour les images de fond:
…
Les images de taille personnalisée créées à la volée à l'aide d'une bibliothèque telle que BFI Thumb présentent les avantages suivants par rapport aux vignettes personnalisées créées / ajoutées à l'aide de la add_image_size ()
une fonction:
the_post_thumbail ()
fonctions renvoie une balise d'image. Parfois, ce que vous voulez, c'est l'URL de l'image. Un exemple serait où vous voulez utiliser l'image comme arrière-plan.add_image_size ()
ne s'appliquera pas aux anciennes images téléchargées avant l'enregistrement de la taille de l'imageDans ce petit conseil, nous avons examiné les images en vedette - ce qu’elles sont et comment nous pouvons les utiliser dans nos thèmes. Nous avons également examiné le add_image_size ()
fonction pour voir comment nous pouvons l'utiliser pour ajouter des tailles d'image personnalisées lorsqu'une image est téléchargée dans la médiathèque.
Nous avons présenté la bibliothèque PHP BFI THumb et expliqué comment nous pouvons l'utiliser pour créer une image de taille personnalisée à partir d'une miniature de publication ou d'une image sélectionnée..
Nous avons ensuite examiné les limites de l’utilisation de add_image_size ()
pour créer des tailles d'image personnalisées et les avantages de BFI Thumb.
Ajoutez cette fonction à votre functions.php
fichier et utilisez-le chaque fois que vous avez besoin de créer une image de taille personnalisée à partir d'une miniature.