skip to Main Content

Comment ajouter une taille personnalisée pour les miniatures

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 701.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

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 soient : 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 nouvelle 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-personnalise', 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.

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

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épondre 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.

Qt places interactive responsive google maps wordpress plugin

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

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.

Calendarista premium wp appointment booking plugin and schedule system plugin wordpress

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.

Eventon wordpress event calendar plugin wordpress

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

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [Recommandé]

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.

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

… 

Cet article comporte 0 commentaires

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
14 Partages
Partagez10
Tweetez1
Enregistrer3