Wpcours

Des tuto, thèmes et plugins pour Wordpress

  • WORDPRESS
  • TUTORIELS
  • PLUGINS
  • WP-SEO
  • THEMES
  • Blogger
  • Contact

Ajouter une image circulaire (ronde) dans la zone du widget Wordpress

Màj le 21 mai 2020

Dans ce tutoriel on va vous montrer comment ajouter facilement une image circulaire dans la zone de widget Wordpress avec de simple code CSS. Pour faire ce travail vous devez d’abord envoyer vos images sur votre site WordPress, via la section Média ou FTP vers un dossier sur votre site.

Envoyez l’image sur votre serveur et notez le chemin de son URL. WordPress crée automatiquement une version miniature pour votre image. Il s’agit généralement de l’URL de l’image en taille réelle avec un -150 × 150 ajouté après le nom de fichier et avant l’extension .jpg.

ajouter une image ronde circulaire à wordpress

Ajouter une image circulaire (ronde) à votre site

Je suppose que votre taille de vignette par défaut est de 150 px x 150 px . Vous pouvez le vérifier sous Tableau de bord> Paramètres> Média.

Par exemple, mon image en taille réelle était
https://wpcours.com/wp-content/uploads/2020/05/social-600X600.jpg

de sorte que la version miniature serait

https://wpcours.com/wp-content/uploads/2020/05/social-600X600-150X150.jpg

Un moyen simple de tester si vous disposez de l’URL correcte consiste à saisir l’URL dans votre navigateur et à voir si l’image s’affiche sans problème.

Ajoutez ensuite un widget de texte à la zone des widgets. J’utilisais le pied de page  (footer) # 2 pour cet exemple.

Tableau de bord> Apparence> Widgets

Ajoutez ce code dans le widget de texte.

<div class="img-circular-gravatar"></div>

Maintenant on va créer l’effet circulaire on jouant avec des codes Css . Ajoutez le code ci-dessous à votre feuille de style sous :

Tableau de bord> Apparence> Éditeur> Feuille de style (styles.css).

Ajoutez-le à la fin de votre feuille de style. (Assurez-vous toujours d’avoir une copie de sauvegarde de votre feuille de style au cas où vous saisiriez quelque chose de manière incorrecte.)

Remplacez l’URL de votre image par celle indiquée ci-dessous.

/* Gravatar for front page centered */
.img-circular-gravatar {
 width: 150px;
 height: 150px;
 background-image:
url('/wp-content/uploads/xxxx/xx/votre-image-150x150.jpg');
 background-size: cover;
 display:block; 
 margin:0 auto 5px; 
 border:2px solid #fff;
 border-radius: 50%;
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;

}

Enregistrez votre feuille de style.

Votre image circulaire doit apparaître dans votre zone de widget et être centrée. Vous devrez peut-être actualiser la fenêtre de votre navigateur et /ou vider votre cache pour que la nouvelle feuille de style se charge. Vous pouvez modifier la taille de l’image en ajustant la largeur et la hauteur, il suffit de garder les deux chiffres identiques.

Vous pouvez facilement répéter ce processus pour d’autres zones de widget en utilisant différentes images. Modifiez simplement le nom de la classe dans la zone de feuille de style et de widget afin qu’il soit unique .

On espère que ce petit tutoriel vous aidera à ajouter facilement une image circulaire (ronde) dans la zone de Widgets Wordpress.


Vous aimerez également...

  • 15 codes pour optimiser votre fichier .htaccess
  • Corriger l’erreur HTTP de téléchargement d’image dans WordPress
  • 15 Astuces pour dépanner, optimiser et sécuriser votre site WordPress.
  • Ajouter « bottom scrolling popup subscription » à votre blog sans plugin
  • Corriger l’erreur : Maximum Execution Time Exceeded sous WordPress
  • Accélérer Wordpress en nettoyant le Header de votre thème

Classé sous :Tutoriels

Accueil / Tutoriels / Ajouter une image circulaire (ronde) dans la zone du widget Wordpress

Laisser un commentaire

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

Ne manquez plus rien
Abonnez-vous

Abonnez-vous dès maintenant à la Newsletters de Wpcours et recevez des tutoriels Gratuitement.

CREER VOTRE AVATAR GRATUIT

Articles récents

  • Ajouter une Image mise en avant (featured image) sous le titre de vos article
  • 13 thèmes WordPress polyvalents pour sites des crypto-monnaies pour obtenir un site bien classé
  • C’est quoi l’API WordPress Heartbeat et pourquoi devriez-vous la contrôler ?
  • Créer un message d’incitation à réautoriser les annonces Adsense sans plugin
  • Comment afficher le nombre de vues de vos articles dans WordPress ?

© 2023 ·Wpcours.com · Mentions · Contact