Optimisation de vitesse WordPress avec des icônes de partage social personnalisé

Cela peut sembler être une tâche facile, mais l'ajout de boutons de partage social bien agencés à un site WordPress peut être un problème. Quand je dis bien-vouloir, je veux dire simple, léger, convivial, rapide - la plupart des plugins de partage social là-bas ne sont pas comme ça. Ils ont tendance à manger des ressources comme des fous, et pourquoi voudrait-on augmenter le temps de chargement des plugins de 25-35% juste pour afficher quelques icônes sur leur site?

Les bonnes nouvelles sont que vous n'avez pas nécessairement besoin d'un plugin pour accomplir cette tâche. Dans ce tutoriel, je vais vous montrer comment vous pouvez facilement ajouter des boutons de partage social personnalisés à la fin des messages sur votre site WordPress avec juste quelques lignes de code .

Étape 1: Générer les boutons de partage social

Nous utiliserons le générateur de boutons de partage simple, un outil web pratique et facile à utiliser pour générer les icônes de partage. Le principal avantage de cette application est que les boutons qu'elle génère tournent sur le frontend, par conséquent ils ne vont pas charger votre serveur et vous pouvez également garder les activités de vos utilisateurs privés.

Pour générer vos boutons personnalisés, allez ici et appuyez sur Begin . Choisissez 1 parmi les 6 styles de boutons différents. Cliquez sur suivant et cochez les réseaux sociaux que vous souhaitez ajouter à votre site. Lorsque vous avez terminé, vous devrez remplir les informations de votre site Web.

Sur cet écran (ci-dessous), vous trouverez deux options: 'No JavaScript' et 'JavaScript' . Cochez JavaScript, car cela permettra au navigateur de détecter dynamiquement l'URL, vos visiteurs pourront donc partager individuellement chaque publication et pas seulement l'URL de la page d'accueil.

Enfin, jetez un œil à l'aperçu en direct, téléchargez le jeu d'icônes choisi et récupérez le code que vous avez généré.

Étape 2: Créer un thème enfant

Vous devrez maintenant ajouter les icônes générées et le code sur votre site. Tout d'abord, vous devrez créer un thème enfant.

Vous pouvez facilement créer un thème enfant WP à l'aide de notre tutoriel, ou vous pouvez suivre les étapes de cet article WP Codex. Si vous en avez déjà un, vous pouvez passer à l'étape 3.

Le thème de l'enfant se rapporte au thème que vous utilisez actuellement - de la même manière qu'un enfant se rapporte à ses parents. Il hérite de tout (style et fonctionnalité) du thème parent, mais vous pouvez lui ajouter des fonctionnalités supplémentaires .

Dans notre cas, les fonctionnalités supplémentaires seront les boutons de partage social personnalisés.

Étape 3: Créer une fonction personnalisée qui affiche les icônes

Nous allons ajouter une fonction personnalisée au fichier functions.php du thème enfant.

Avec l'aide de cette fonction, vous pourrez ajouter les icônes sociales où vous le souhaitez sur votre site en utilisant un crochet d'action personnalisé. Si votre thème enfant n'a pas encore de fichier functions.php, créez un fichier texte vide dans le dossier racine de votre thème enfant avec les fonctions name et changez son extension en .php.

Insérez la ligne de code suivante dans ce fichier vide:

Lorsque votre fichier functions.php est configuré, ajoutez-y l'extrait de code suivant:
 / * * Ajoute les icônes de partage social personnalisées * / function add_social_sharing () {?> 
Partager cette publication 
Enfin, supprimez la ligne du commentaire HTML de l'extrait de code ci-dessus et remplacez-le par le code HTML que vous avez généré à l'étape 1 avec le Générateur de boutons de partage social.
Étape 4: copiez le fichier modèle approprié dans le dossier thématique enfant 
Par défaut, les messages uniques sont régis par un fichier modèle appelé single.php . Parfois, en particulier dans des thèmes plus modernes, la structure de single.php est plus compliquée, car elle charge également des fichiers de modèles supplémentaires. Dans cette étape, nous devons trouver le fichier de modèle approprié où nous pouvons ajouter les icônes plus tard.
Pour trouver le bon endroit pour les boutons sociaux, nous devons trouver le fichier modèle qui contient la fonction qui charge le contenu des messages individuels .
Ouvrons l'éditeur de thème dans le tableau de bord d'administration de WordPress sous Apparence> Editeur . Dans le coin supérieur droit, vous trouverez une liste déroulante dans laquelle vous pouvez sélectionner votre thème parent. Sous la liste déroulante, vous pouvez voir tous les fichiers modèles que contient votre thème parent. Faites défiler jusqu'à ce que vous trouviez le modèle Single Post (appelé single.php) et ouvrez-le.
Si le thème parent utilise la fonction WP get_template_part () dans le fichier single.php, cela signifie qu'il utilise un fichier de modèle supplémentaire pour charger le contenu de la publication unique.
Vous devez d'abord savoir lequel est-ce. Le nom du fichier de modèle supplémentaire est le premier paramètre de la fonction get_template_part () .
Dans Twenty Fifteen, il ressemble à ceci:
 get_template_part ('content', get_post_format ()); 
Le premier paramètre est 'content', ce qui signifie que nous recherchons le fichier template appelé content.php . Vous devez copier ce fichier du dossier racine du thème parent dans le dossier racine du thème enfant afin de le modifier.
 Étape 5: Ajouter le crochet d'action au bon fichier de modèle 
Nous avons créé une fonction appelée add_social_sharing () à l'étape 3, et nous l'avons attachée à un hook d'action personnalisé appelé custom_social_share . Maintenant nous allons devoir ajouter ce hook à l'endroit où nous voulons que la fonction soit exécutée.
Voici l'extrait de code que vous devrez insérer au bon endroit:
Ensuite, trouvons le bon endroit.
Ouvrez le fichier modèle que vous avez ajouté à votre thème enfant à l'étape 4 dans un éditeur de code ou dans l'éditeur de thème du tableau de bord d'administration WordPress, puis recherchez la fonction the_content () .
Vérifiez s'il existe une fonction wp_link_pages () juste après la fonction the_content () . Si tel est le cas, l'extrait de code ci-dessus vient ensuite. sinon, il suit la fonction the_content () .
 Étape 6: Ajouter le code CSS au thème enfant 
Ouvrez le fichier style.css de votre thème enfant dans votre éditeur de code ou dans l'éditeur de thème du tableau de bord d'administration WordPress, copiez le code CSS généré à l'étape 1, collez-le à la fin du fichier et enregistrez-le.
 Nous ajouterons deux lignes supplémentaires au fichier CSS pour que les icônes de partage social s'affichent correctement dans chaque thème. Copiez et collez l'extrait de code suivant à la fin du fichier style.css :
 ul.share-buttons li a {border: 0; } ul.share-buttons li img {affichage: inline; } 
Étape 7: Télécharger l'ensemble d'icônes de médias sociaux sur le serveur 
Téléchargez le jeu d'icônes de médias sociaux que vous avez téléchargé à l'étape 1 dans votre dossier de thème enfant. Connectez votre serveur via FTP, créez un nouveau dossier appelé images dans la racine de votre dossier de thème enfant (/ wp-content / themes / votre-enfant-thème / images) et téléchargez le jeu d'icônes ici.
Nous nommons les images du dossier car il s'agit du nom par défaut du dossier d'image utilisé par le Générateur de boutons de partage simple.
Étape 8: Vérifiez le chemin des fichiers d'icône 
Après avoir téléchargé les icônes de médias sociaux sur votre serveur à l'étape 7, il est important de vérifier le chemin des fichiers d'icônes pour vous assurer qu'ils seront chargés.
Le chemin d'un fichier image donne un indice au navigateur sur son emplacement sur le serveur. Vérifions les chemins de l'image dans le fichier functions.php du thème enfant. Ouvrez le fichier dans votre éditeur de code et accédez à la fonction add_social_sharing () où vous devez vérifier le code HTML généré avec le Générateur de boutons de partage simple.
Dans le code HTML, vous trouverez un  tag avec un attribut src pour chaque icône. Vérifiez si chaque attribut src pointe vers l'emplacement exact où votre jeu d'icônes a été téléchargé à l'étape 7.
Le générateur de boutons de partage simple ajoute des chemins relatifs à la  des dossiers. Parfois, les navigateurs ne peuvent pas afficher les images si vous utilisez un chemin relatif . Il est donc recommandé d' utiliser des chemins absolus à la place . De cette façon, chaque navigateur potentiellement utilisé par vos visiteurs peut être sûr de l'emplacement des fichiers d'icônes requis.
Le chemin d'image relatif ajouté par le générateur ressemble à ceci:
Changeons l'attribut src de chaque icône en un chemin absolu, ce qui signifie qu'il inclura l'URL complète du fichier.
Le chemin de l'URL ci-dessus ressemblera à ceci:
Étape 9: Télécharger les fichiers modifiés et activer le thème enfant 
Connectez votre serveur via FTP et téléchargez tous les fichiers que nous avons créés dans ce didacticiel et que vous n'avez pas encore importés: fonctions.php, style.css et le fichier de modèle approprié (dans ce didacticiel, le fichier single.php ou le contenu). php ).
Activez enfin le thème enfant dans le tableau de bord d'administration WP sous le menu Apparence> Thèmes .
Vous êtes maintenant prêt avec vos icônes de partage social sur mesure, super-légères et économes en ressources. Vous pouvez aller en ligne et le vérifier en direct sur votre site.
 Conclusion 
Dans ce tutoriel, je vous ai montré comment ajouter les boutons de partage social personnalisés à la fin des messages uniques. Vous pouvez ajouter les icônes de partage à d'autres emplacements sur votre site Web à l'aide du hook d'action que nous avons créé.
Ajoutez simplement le code que nous avons utilisé à l'étape 5 à l'endroit où vous voulez que les boutons soient affichés:
Vous devrez également trouver le bon fichier de modèle si vous souhaitez placer les icônes ailleurs. Les pages individuelles sont régies par un fichier modèle appelé page.php, tandis que les pièces jointes multimédia telles que les images sont chargées par attachment.php .
Si vous souhaitez afficher les boutons de partage social sur un autre emplacement de votre site Web, vous pouvez utiliser la hiérarchie des modèles WordPress pour le trouver.
Source de téléchargement







        

          
          

		  
10 projets montrant Google a l'avenir défini
            
Avoir une question? Demander à Google Vous pouvez dire que Google est le meilleur moteur de recherche et personne ne pourrait discuter avec vous. Mais Google n'est plus seulement une société de moteur de recherche. Oui, bien sûr, il abrite également le système d'exploitation Android toujours populaire, mais la portée de Google est bien au-delà du domaine en ligne.Depuis 
			
(Conseils techniques et de conception)
          
        
      

        

          
          

		  
20 réveils intelligents pour les Sleepyheads
            
Les gens ont généralement une relation amour-haine avec des réveils. D'une part, tout le monde aime et a besoin de réveils pour les réveiller à l'heure désirée . Cependant, lorsque ces appareils défectueux font leur travail et réveillent les gens d'un sommeil doux, ils veulent les briser.L'ère
			
(Conseils techniques et de conception)