Aimerez-vous savoir comment ajouter une taille personnalisée sur les miniatures ?
L’envoi d’images sur WordPress crée différentes tailles de l’image originale, mais malheureusement, ce n’est pas une solution qui pourrait convenir à tout le monde. Les tailles par défaut créées sont : miniatures, moyennes, grandes et taille originale. Mais, si vous avez besoin d’une taille différente, comme pour les produits dans une boutique en ligne, vous pouvez créer votre propre taille personnalisée en fonction de vos besoins.
Dans ce tutoriel, nous vous montrerons comment créer des formats personnalisés d’image en les enregistrant dans votre thème avec un code.
Je vais supposer pour ce tutoriel que vous savez développer (HTML/CSS & PHP). Ce tutoriel s’applique également si vous savez comment créer des plugins WordPress.
Mais avant, si vous n’avez jamais installé WordPress découvrez Comment installer un blog WordPress en 7 étapes et Comment rechercher, installer et activer un thème WordPress sur votre blog
Ensuite revenons vers ce pourquoi nous sommes là.
Comment enregistrer des tailles personnalisées sur WordPress
Commencez par ouvrir ou créer le fichier functions.php de votre thème, puis configurer ce dernier tel que dans l’exemple ci-dessous qui est un extrait du thème Twenty Seventeen par défaut :
<?php
if ( version_compare( $GLOBALS['wp_version'], '4.7-alpha', '<' ) ) {
require get_template_directory() . '/inc/back-compat.php';
return;
}
/**
* Configuration par défaut du thème + ajout de nouvelles fonctionnalités.
*
* Notez que ce code s'ajoute après le crochet "after_setup_theme hook", qui
* s'exécute avant le crochet init.
*/
function twentyseventeen_setup() {
Comme l’explique le commentaire, vous pouvez ajouter des compatibilités avec les fonctionnalités de WordPress que vous souhaitez utiliser dans votre thème, telles que les images à la une, les formats de publication, un en-tête personnalisé et d’autres options similaires.
Consultez aussi notre liste de 5 plugins WordPress pour retoucher les images sur votre blog
Il existe une fonctionnalité que vous vous devez absolument ajouter afin de pouvoir créer des images avec des tailles personnalisées et des aperçus des vignettes:
add_theme_support( 'post-thumbnails' );
Après la version 2.9 de WordPress, les images des articles ont été renommées « images à la une », mais il est (confusément) encore mentionné par son nom d’origine dans le code du fichier. Ces termes peuvent être utilisés de manière interchangeable, cependant, selon votre audience, cela peut être source de confusion pour certains.
Lire aussi notre tutoriel sur Comment avoir un contrôle avancé des utilisateurs sur WordPress
Ensuite, vous pouvez ajouter vos tailles d’image personnalisées à la fonction « add_image_size ». C’est la structure de base dont vous avez besoin:
add_image_size( 'nouvelle-taille-personnalisée', width, height, crop mode );
Assurez-vous de changer « themename » par le nom de votre thème. Remplacer « nouvelle-taille-personnalisée » par un nom descriptif pour votre taille de l’image. Bien que vous pouvez utiliser presque tous les noms, ceux-ci sont interdits parce qu’ils sont réservés par les tailles d’image par défaut mentionnées plus haut : thumb, thumbnail, medium, large, post-thumbnail.
En outre, vous pouvez définir les tailles d’image personnalisées width, height et pour le recadrage.
Découvrez aussi Comment compresser et redimensionner les images sur WordPress
Vous pouvez modifier les dimensions « width » et « height », pour celles que vous aurez besoin. Bien que ce soit assez auto-explicatif, le mode de recadrage ne l’est pas.
Il existe quelques options pour recadrer vos images :
- Recadrage forcé – Pour cela, définissez la valeur « crop mode » à « true ». Il coupe une image plus grande à la largeur et à la hauteur exacte qui est définie de manière à ce qu’elle s’intègre parfaitement à votre conception, mais elle ne peut pas nécessairement recadrer l’image proportionnellement.
- Recadrage doux – C’est le paramètre par défaut et il est activé en supprimant le mode recadrage. Il produit proportionnellement une image, mais les hauteurs d’image peuvent varier si elles étaient à l’origine de différentes tailles.
- Hauteur illimitée – En supprimant la valeur « height », le mode recadrage de votre image personnalisée peut avoir une hauteur illimitée. Ceci est particulièrement utile pour l’infographie.
Vous pouvez répéter la ligne dans l’extrait de code ci-dessus pour enregistrer autant de tailles d’image que vous avez besoin. N’oubliez pas de l’éditer afin qu’il réponde aux spécificités dont vous avez besoin.
Comment partager vos articles sous forme de PDF sur WordPress ? Découvrez-le en consultant cet article.
Vous pouvez continuer à ajouter un support pour les fonctionnalités dont vous avez besoin et lorsque vous avez fini, incluez le dans le hook « after_setup_theme »:
add_action( 'after_setup_theme', 'themename_setup' );
Gardez à l’esprit que « themename » devrait être changé pour le nom réel de votre thème WordPress. Assurez-vous d’utiliser ce nom de façon constante dans tout ce fichier.
Découvrez aussi quelques plugins WordPress premium
Vous pouvez utiliser d’autres plugins WordPress pour donner une apparence moderne et pour optimiser la prise en main de votre blog ou site web.
Nous vous proposons donc ici quelques plugins WordPress premium qui vous aideront à le faire.
1. QT Places
QT Places est une extension WordPress élégante et versatile pour afficher des cartes de Google Maps sur votre site Web. Après l’installation, un nouveau type de publication appelé « Places » (« Lieux ») apparaîtra dans votre menu WordPress, et vous pourrez immédiatement commencer à ajouter des nouveaux lieux sur les cartes.
Cette extension est super responsive, et fonctionne sur mobile (iPhone, Android). Vous pouvez ajouter des fonctionnalités de carte à n’importe quelle type de publication standard (comme les articles ou pages), ou personnalisée (comme des portfolios).
Télécharger | Démo | Hébergement Web
2. Calendarista
Calendarista est un plugin WordPress premium conçu pour offrir une expérience de réservation en ligne –Booking- plus rapide et plus efficace à vos clients. Son objectif est de rendre les services très rapides et faciles à ajouter pour les entreprises qui proposent la réservation des séances ou rendez-vous sur internet.
Donc, si vous êtes à la recherche d’un système complet de réservation pour un hôtel, une entreprise de location de voiture, de location d’appartement, d’agence de voyages, de salon de beauté, de restaurant, etc.…, ce plugin sera parfait pour vous.
Lire aussi cet article sur Comment afficher toutes vos publications WordPress sur une seule page
Comme fonctionnalités il propose entre autre : 10 modèles de système de réservation prêts à l'emploi, le support de 3 passerelles de paiement, la prise en charge de WooCommerce, l’intégration d’un constructeur de formulaires personnalisables, le support de Google Map, un excellent modèle de calendrier pour afficher vos rendez-vous, et bien plus.
Télécharger | Démo | Hébergement Web
3. EventOn
Le plugin WordPress premium EventOn est le plugin de calendrier le plus vendu sur CodeCanyon, avec plus de 7000 ventes. Il possède une tonne de fonctionnalités utiles telles que les images à la une pour des événements, des shortcodes, la création illimitée des calendriers d’événements, les champs de métadonnées personnalisables et les caractéristiques des événements.
Ses principales extensions sont entre autres : la possibilité de vendre des billets, l’import/export d’évènements au format CSV, l’intégration gratuite avec Google Map, le tri et filtre sur la liste des évènements, la mise en page entièrement responsive, le support du multilingue, et la personnalisation facile du calendrier.
Découvrez nos 9 plugins WordPress pour créer un site web de voyages
Certaines fonctionnalités sont déjà disponibles gratuitement dans les autres plugins, mais le rapport qualité- prix constitue un compromis efficace.
Télécharger | Démo | Hébergement Web
Autres ressources recommandées
Nous vous invitons aussi à consulter les ressources ci-dessous pour aller plus loin dans la prise en main et le contrôle de votre site web et blog.
- Comment concevoir un formulaire de connexion en ligne pour un en-tête global personnalisé dans Divi
- 7 plugins WordPress pour créer une FAQ sur votre site Web
- Quelques plugins au choix pour créer des tables sur WordPress
- Comment corriger l’erreur de connexion avec la base de données WordPress
Conclusion
Voila ! C’est tout pour ce guide. Nous espérons qu’il vous permettra d’ajouter des tailles personnalisées pour les images.
Cependant, vous pourrez aussi consulter nos ressources, si vous avez besoin de plus d’éléments pour mener à bien vos projets de création de sites internet, en consultant notre guide sur la création de blog WordPress ou celui sur Divi : le meilleur thème WordPress de tous les temps.
Si vous avez des commentaires ou des suggestions, n’hésitez pas à nous en faire part dans la section réservée Mais en attendant, partagez cet article sur vos différents réseaux sociaux.
…