TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Comment ajouter et personnaliser des icônes sociales dans WordPress ?

16

WordPress a une limite pour les développeurs de plugins et de thèmes. Cela permet de ne pas confondre les fonctions du thème avec les fonctions du plugin. Cela aide beaucoup lors de la modification d’un thème que cela n’affecte que l’apparence et non les fonctions. Cependant, de nombreux thèmes populaires utilisent des icônes de suivi social et de partage dans le cadre des modèles de thème. Il est également logique de ne pas installer de plug-in social supplémentaire pour améliorer la vitesse et la confidentialité. Enfin, WordPress a inclus un widget d’icônes sociales dans le cadre de l’éditeur Gutenberg à partir de la version 5.4. dans cet article, explorons comment insérer des icônes sociales dans le site WordPress.

Connexe : Comment insérer et personnaliser des icônes sociales dans Weebly ?

Partage social et icônes de suivi

Les icônes sociales ont deux fonctions: l’une permet aux utilisateurs de partager la page et l’autre permet aux utilisateurs de suivre vos profils sociaux. Les icônes de suivi social sont simples et contiennent une URL de profil statique. Cependant, les icônes de partage nécessitent un script pour inclure l’URL de la page actuelle lorsque l’utilisateur clique dessus pour le partage. Il doit également récupérer l’image et la description présentées pour créer un widget à partager (comme un graphique ouvert dans les cartes Facebook ou Twitter ).

Maintenant, vous connaissez la différence entre partager et suivre des icônes sociales. Du point de vue de la convivialité, les icônes de partage doivent se trouver au même endroit sur la mise en page du site, tandis que les icônes de suivi doivent être un widget que l’utilisateur peut insérer où il le souhaite.

Insérer des icônes sociales dans WordPress

WordPress a introduit un widget Social Icons dans la version 5.4. Cependant, le nom "Icônes sociales" peut vous dérouter. Il s’agit d’un simple bloc d’ icônes de suivi social que vous pouvez insérer n’importe où sur votre publication ou votre page et ajouter les URL de votre profil social.

  • Tout d’abord, assurez-vous de mettre à jour votre version de WordPress vers la 5.4 ou une version ultérieure et utilisez l’éditeur ou le plugin Gutenberg.
  • Lorsque vous êtes dans l’éditeur Gutenberg, cliquez sur « Ajouter un bloc » + icône.
  • Tapez « social » et recherchez le bloc « Icônes sociales » dans la section « Widgets ».
  • Cliquez sur le bloc « Icônes sociales » pour l’insérer dans votre contenu.

Comment ajouter et personnaliser des icônes sociales dans WordPress ?

Insérer des icônes sociales dans WordPress

Personnalisation des widgets d’icônes sociales dans Gutenberg

Par défaut, le bloc « Icônes sociales » affichera quelques icônes avec l’icône WordPress en premier.

Comment ajouter et personnaliser des icônes sociales dans WordPress ?

Bloc d’icônes sociales à Gutenberg

Vous pouvez personnaliser les icônes de la même manière que n’importe quel autre bloc Gutenberg.

Comment ajouter et personnaliser des icônes sociales dans WordPress ?

Personnalisation du bloc d’icônes sociales dans WordPress

  • Cliquez sur l’icône pour ajouter votre lien de profil social pour cette icône.
  • Vous pouvez modifier le libellé dans la barre latérale des paramètres « Bloquer ». L’étiquette est utile pour les personnes malvoyantes à utiliser dans le lecteur d’écran.
  • Vous pouvez ajouter une classe CSS personnalisée sous l’option "Avancé".
  • Déplacez la flèche dans le bloc pour déplacer l’icône sélectionnée vers la gauche ou la droite. De cette façon, vous pouvez ajuster la position des icônes comme vous le souhaitez.

Lorsque vous cliquez en dehors du bloc, seules les icônes avec l’URL seront visibles. Vous pouvez ajouter des icônes supplémentaires en cliquant sur le bouton + dans les blocs d’icônes sociales. Cela fonctionne comme un bloc à l’intérieur d’un bloc (comme un bloc de colonnes). Il vous permet également de rechercher l’icône sociale parmi les icônes disponibles.

Comment ajouter et personnaliser des icônes sociales dans WordPress ?

Rechercher des blocs sociaux

De plus, vous pouvez également insérer des liens personnalisés à l’aide du bloc « Lien ». Étant donné que chaque icône est un bloc, vous pouvez supprimer les icônes sociales inutilisées du widget. Nous vous recommandons de supprimer les icônes inutilisées pour garder le code backend propre.

Modification de l’affichage

Lorsque vous avez terminé d’ajouter des liens de profil, vous avez la possibilité d’aligner les icônes à gauche, à droite ou au centre. De plus, vous pouvez modifier le style des icônes en choisissant l’une des options disponibles.

Comment ajouter et personnaliser des icônes sociales dans WordPress ?

Changer le style des icônes sociales

Le widget d’icônes sociales actuel a trois styles :

  • Par défaut – icône à l’intérieur d’un cercle rempli
  • Logos uniquement – affiche uniquement le logo de la marque sans remplissage
  • Forme de pilule – changez le style en partage de pilule ovale avec des icônes et remplissez

Nous espérons qu’à l’avenir il y aura plus d’options pour styliser vos icônes.

Réutiliser les icônes sociales

La meilleure partie est que vous pouvez cliquer sur les paramètres des trois points et inclure les icônes sociales à inclure dans « Blocs réutilisables ».

Comment ajouter et personnaliser des icônes sociales dans WordPress ?

Ajouter aux blocs réutilisables

Vous pouvez insérer le bloc d’icônes sociales réutilisables n’importe où sur votre site, sans avoir besoin de le recréer à chaque fois.

Bug dans l’affichage du code HTML

Pour le moment, vous ne pouvez pas obtenir le code HTML du widget social et il affiche une erreur insoluble.

  • Cliquez sur l’icône des paramètres à trois points dans le bloc des icônes sociales et sélectionnez « Modifier en HTML ».
  • Encore une fois, cliquez sur le bouton des trois points et sélectionnez « Modifier visuellement » pour remettre les icônes visuellement.

Malheureusement, le bloc a un bug et vous montrera une erreur de contenu invalide lorsque vous basculerez entre les modes HTML et visuel.

Comment ajouter et personnaliser des icônes sociales dans WordPress ?

Erreur de bloc d’icônes sociales

Nous ne voyons pas non plus de possibilité de résoudre l’erreur et de ramener le bloc.

Comment ajouter et personnaliser des icônes sociales dans WordPress ?

Erreur lors du basculement du code HTML et visuel

Nous espérons que ce bug sera résolu dans les futures versions. Parce que, vous pouvez utiliser le code HTML dans la barre latérale ou le widget de pied de page si cela fonctionne.

Insertion d’icônes de partage social

WordPress n’a pas d’options par défaut pour insérer des icônes de partage social sur votre site. Si votre thème n’a pas d’icônes de partage intégrées, le seul moyen est de rechercher des plugins tiers et vous en avez beaucoup disponibles gratuitement ainsi que premium. L’un de nos favoris est le bouton de partage social premium facile que vous pouvez acheter à 22 $. Si vous souhaitez installer un plugin gratuit, consultez cette liste de plugins sociaux gratuits pour en trouver un qui vous convient.

Comme mentionné, cela n’a pas de sens d’avoir un bloc de partage social dans Gutenberg car il n’est pas pratique d’insérer les icônes sur chaque publication.

Source d’enregistrement: www.webnots.com
Leave A Reply

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails