Comment créer des boutons de partage social dans GeneratePress ?

Dans ce tutoriel, nous examinerons Comment créer des boutons de partage social dans GeneratePress?

Cela vous aiderait sans aucun doute à améliorer la promotion cross-canal de votre article de blog. Cela augmentera à son tour votre présence sur le Web.

Je vais vous montrer comment créer des boutons de partage social collants qui flottent au début de vos entrées de blog. Cela signifie qu’ils seront toujours visibles par votre public.

Nous pouvons y parvenir via un plugin, mais le mieux est de les construire manuellement. De cette façon, vous savez que vous évitez d'ajouter du JavaScript (tue les performances du site Web) sur votre site.

Cette leçon nécessite que vous ayez GeneratePress premium, car nous allons utiliser le module Elements.

Créer des boutons de partage social dans GeneratePress sans plugin

La création de boutons de partage social dans le thème GeneratePress sans plugins vous oblige à connaître les icônes SVG.

Les SVG sont des graphiques vectoriels évolutifs. Il s'agit de visuels standards ouverts (principalement utilisés sous forme d'icônes) développés par le W3C (World Wide Web Consortium).

Avantages de l'utilisation des SVG

• Ils ont une taille de fichier minuscule qui n’affecte jamais la vitesse du site.
• Vous pouvez facilement ajouter des hyperliens vers les icônes SVG.
• Ils sont facilement modifiables avec n’importe quel logiciel de graphiques vectoriels.
• Les icônes SVG sont indépendantes de la résolution, ce qui les rend excellentes pour une utilisation sur ordinateur, tablette et mobile.
• Les images SVG sont plus conviviales pour le référencement que les images conventionnelles.

Nous utiliserons les SVG d'Iconmonstr. C'est-à-dire non seulement l'icône mais aussi l'icône avec son code XML.

Étape 1 : Ajoutez le code des boutons de partage social au crochet GeneratePress Elements

Pour ce faire, vous devrez d'abord créer un nouvel élément dans GeneratePress. Accédez à votre tableau de bord WordPress, sous Apparence, cliquez sur Éléments. Cela ouvrira la page Éléments, cliquez sur Ajouter un nouvel élément.

Dès que vous avez cliqué sur Ajouter un nouvel élément, GeneratePress affichera une fenêtre de dialogue. Cliquez sur Crochet. C'est exact, vous avez besoin d'un hook personnalisé GeneratePress pour cette action.

Donnez un nom au nouvel élément et ajoutez le code.

Sélectionnez le hook comme généré après l'en-tête, exécutez PHP et définissez les règles d'affichage sur Posts – All Posts.

Puisque nous avons besoin que les icônes de partage social flottent sur notre fenêtre d’affichage. Il est préférable de sélectionner Generate After Header Hook.

La raison pour laquelle nous avons choisi les paramètres d'affichage sur Tous les messages est que vous souhaitez que vos utilisateurs partagent votre contenu sur leurs sites sociaux.

N'oubliez pas d'appuyer sur le bouton Publier.

Copiez le code suivant pour implémenter la même chose sur votre site Web.

Étape 2 : Effectuer un style CSS sur les icônes de partage social

Pour ce faire, allez sur le tableau de bord WordPress, sous Apparence, cliquez sur Personnaliser.

Cela ouvrira le personnalisateur de thème GeneratePress. Allez jusqu'en bas et cliquez sur CSS supplémentaire.

Collez le code CSS suivant pour un style comparable. Vous êtes autorisé à ajuster CSS selon vos besoins.

Étape 3 : Résultat final des boutons de partage social dans GeneratePress

Enfin, voici comment le partage social les icônes devraient ressembler à celles de votre site Web. N'oubliez pas que nous les avons fait flotter du haut à 70 % de la fenêtre d'affichage de l'écran.

Avantages des boutons de partage social dans GeneratePress (sans plugin) (sans plugin)

L'utilisation des SVG d'Iconmonstr rend vos icônes très légères
Aucun type de code JavaScript n'est impliqué.

En utilisant cette stratégie, vous n'installez aucun plugin tiers
Il est réactif.

Tous les boutons fonctionneront incroyablement rapidement à des fins de partage.

Conclusion: Comment créer des boutons de partage social dans GeneratePress ?

Vous avez maintenant découvert comment créer des boutons de partage social dans GeneratePress à l'aide de code et de plugins.

Utilisez l’option qui vous convient le mieux et qui répond à vos besoins. N'hésitez pas à modifier le code PHP et/ou CSS de l'article.