Ajouter des icônes de médias sociaux à WordPress avec des sprites CSS

Bien qu'il existe de nombreux plugins qui peuvent vous aider à ajouter des icônes de médias sociaux à votre site, ils ne sont pas tous créés égaux. Certains d'entre eux pourraient être un drain sur votre serveur, sans parler du fait qu'ils sont également moins personnalisables.

Heureusement, il existe une alternative qui peut aider à garder votre site ultra-rapide : les sprites CSS.

En règle générale, des images distinctes sont ajoutées à un site pour chaque lien de média social. Bien que cela soit considéré comme un codage sonore, cela signifie des demandes de serveur supplémentaires pour chaque image lorsqu'un visiteur charge la page. Et bien sûr, plus une page a de requêtes serveur, plus son temps de chargement est long.

La beauté des sprites CSS est qu'ils peuvent contenir toutes les images de vos icônes de médias sociaux tout en mappant correctement tous les liens correspondants. Cela se traduit par moins de demandes de serveur, une économie de bande passante et des pages à chargement rapide. Une situation gagnant-gagnant!

Dans ce didacticiel, je vais vous montrer comment utiliser CSS pour créer vos propres icônes de médias sociaux entièrement personnalisables pour votre site WordPress, y compris du code pour vous faire gagner du temps et faciliter la réalisation de ce projet.

Continuez à lire ou avancez en utilisant ces liens :

• Créer votre image
• Ajouter les liens et l'image à votre site
• Ajoutez vos icônes et styles

Créer votre image

La première étape pour créer votre propre sprite CSS consiste à créer une image avec les icônes de médias sociaux que vous souhaitez utiliser. Il devrait avoir deux couches étroitement empilées :

• Couche supérieure – Les icônes qui seront visibles sur la page
• Couche inférieure - Les icônes qui seront visibles au survol de la souris

Voici un exemple de ce à quoi vos icônes devraient ressembler :

Gardez à l'esprit que je n'ai pas utilisé d'arrière-plan transparent pour cette image afin de les afficher clairement pour ce didacticiel. L'arrière-plan de votre image doit idéalement être transparent afin que vous puissiez utiliser les icônes même si vous modifiez les styles et la couleur d'arrière-plan de votre thème.

Vous n'avez pas non plus besoin d'ajouter d'espace entre chaque image car il peut être ajouté ultérieurement avec CSS. Cela dépend entièrement de vous.

Dans cet exemple, les icônes apparaîtront en gris sur le site, mais lorsqu'une souris passe dessus, leurs versions colorées seront affichées.

Une fois que vous avez créé votre propre ensemble d'icônes de médias sociaux, vous êtes prêt à passer à l'étape suivante.

Vous aurez besoin de connaître la largeur et la hauteur de chaque symbole en pixels avant de continuer, alors assurez-vous de le noter. Un programme de retouche d'image peut vous aider à identifier cette information.

Ajouter les liens et l'image à votre site

Téléchargez l'image sur votre site et notez l'emplacement de l'image afin de pouvoir l'appeler ultérieurement dans votre code.

Ensuite, vous devez ajouter les liens de médias sociaux à votre site pour que ces icônes fassent leur travail. Vous pouvez le faire avec HTML :

C'est la structure de base dont vous aurez besoin pour vos liens. Ajoutez le nom réel du site vers lequel vous souhaitez créer un lien en remplaçant les instances de socialSite et Name of Social Media Site dans l'exemple ci-dessus. Assurez-vous également de remplacer l'URL.

Répétez la deuxième ligne du code ci-dessus pour chaque icône de la ligne supérieure de l'image que vous avez créée, en remplaçant le texte factice en cours de route. Vous pouvez également choisir de changer le nom de l' div id en quelque chose de plus adapté à vos besoins.

Le meilleur endroit pour mettre ce code est directement dans les fichiers de votre thème où vous souhaitez que les icônes apparaissent. Par exemple, vous pouvez ajouter les liens vers vos fichiers sidebar.php , footer.php , header.php ou de modèle de page.

Ne soyez pas timide non plus. N'hésitez pas à ajouter un texte d'en-tête avec un titre descriptif ou tout autre code que vous souhaitez. N'oubliez pas de sauvegarder lorsque vous avez terminé.

Lorsque vous aurez terminé, vous ne verrez aucune différence sur votre site, mais ce n'est pas grave car nous allons ensuite ajouter les images. Vous pouvez également vous soucier du style, du rembourrage et de l'espacement plus tard.

J'ai ajouté des titres aux liens sur mon site de test pour vous montrer où les liens seraient autrement.

Ajoutez vos icônes et styles

Il est temps d'ajouter vos icônes avec CSS. Vous pouvez ajouter le code au fichier style.css de votre thème ou via un plugin CSS personnalisé si vous le souhaitez.

Voici le code que vous devez ajouter :

Remplacez les classes par les vôtres, ainsi que les chemins d'accès aux images. Les hashtags peuvent être remplacés par les valeurs correctes en fonction de votre fichier, mais ne modifiez pas les zéros - ils doivent rester intacts pour que les icônes s'affichent correctement.

Vous pouvez également copier et coller la classe socialSiteTwo pour chaque icône de réseau social supplémentaire que vous souhaitez ajouter. Vous pouvez également modifier la position, la marge, le rembourrage et le haut en fonction de vos besoins de style spécifiques.

Voici une ventilation de cet exemple CSS pour une référence rapide :

• #social a.social {height:#px;} – Remplacez le hashtag par la hauteur de chaque icône et non par la hauteur totale de l'image.
• #social a.socialSiteOne {left:0px;} - C'est là que commence votre premier symbole tout à gauche de l'image.
• #social a.socialSiteOne {width:#px;} - Il s'agit de la largeur de votre première icône de réseau social. Ce nombre devrait également être le même pour toutes vos autres icônes.
• #social a.socialSiteOne {background:url('your-image.png') 0 0;} – L'image est appelée et la position est définie sur zéro pixel pour les positions gauche et supérieure.
• #social a.socialSiteTwo {left:#px;} – Remplacez le hashtag par la valeur en pixels de la position où votre deuxième icône commence dans l'image. Si votre première icône mesure 50 pixels de large, cette valeur sera de 51 pixels.
• #social a.socialSiteTwo {background:url('your-image.png') -#px 0;} – Remplacez le hashtag par le nombre de pixels où le deuxième symbole commence à compter à partir de l'extrême gauche de l'image.

Si vous avez inclus un espacement entre les icônes dans l'image que vous avez créée, les sélecteurs de position de gauche et d'arrière-plan seront les mêmes. Si vous n'avez pas ajouté d'espacement au départ, les sélecteurs de gauche doivent être plus grands que vos sélecteurs de position d'arrière-plan, car vous devrez tenir compte de l'espacement supplémentaire que vous souhaitez ajouter en pixels.

Vous pouvez maintenant ajouter les images qui seront affichées au survol. Vous pouvez ajouter le code suivant sous l'exemple ci-dessus comme je l'ai fait ici pour des raisons de simplicité ou les mélanger :

Remplacez les hashtags par la valeur correcte comme nous l'avons fait dans l'exemple précédent. La première valeur est le nombre de pixels sur lesquels l'icône est positionnée à partir de la gauche et le second nombre compte à partir du haut.

Une fois que vous avez terminé, enregistrez le fichier et affichez vos résultats.

Conclusion

Vous devrez peut-être faire quelques ajustements supplémentaires de votre feuille de style CSS pour obtenir l'apparence souhaitée, mais vous êtes sur la bonne voie avec le code couvert ici.

Si vous souhaitez en savoir plus sur CSS pour vous aider à styliser vos icônes, consultez l'un de nos articles.

Si vous souhaitez augmenter le partage social de votre site ou de votre réseau, consultez certains de nos autres articles : Augmentez vos partages avec ces 5 plugins de médias sociaux WordPress gratuits, 50 meilleurs plugins de médias sociaux WordPress (2020).

Note de l'éditeur : ce message a été mis à jour pour plus de précision et de pertinence.
[Publié à l'origine : mai 2015 / Révisé : avril 2022]

• CSS
• des médias sociaux