Page d'accueil » WordPress » Optimisation de la vitesse WordPress avec des icônes de partage social personnalisées
Optimisation de la vitesse WordPress avec des icônes de partage social personnalisées
Cela peut sembler être une tâche facile, mais l’ajout de boutons de partage social sur un site WordPress peut être compliqué. Quand je dis bien se comporter, je veux dire simple, léger, respectueux des ressources et rapide - la plupart des plugins de partage sociaux ne sont pas comme ça. Ils ont tendance à manger des ressources comme des fous, et pourquoi voudrait-on augmenter le temps de chargement du plugin de 25 à 35% juste pour afficher des icônes sur leur site?
La bonne nouvelle est 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 articles sur votre site WordPress avec juste quelques lignes de code.
Étape 1: Générez les boutons de partage social
Nous allons utiliser 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 s'exécutent sur l’interface ils ne vont pas surcharger votre serveur et vous pouvez également garder les activités de vos utilisateurs privées.
Pour générer vos boutons personnalisés, allez ici et appuyez sur Commencer. Choisissez l'un des 6 styles de boutons différents. Cliquez sur suivant et cochez la réseaux sociaux vous voulez ajouter à votre site. Lorsque vous avez terminé, vous devrez renseigner les informations de votre site Web..
Sur cet écran (ci-dessous), vous trouverez deux options: 'Pas de JavaScript' et 'JavaScript'. Cocher JavaScript, car cela permettra au navigateur de détecter l'URL de manière dynamique, vos visiteurs pourront donc partager chaque message individuellement, pas seulement l'URL de la page d'accueil..
Enfin, jetez un coup d’œ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 pour enfants
Maintenant, vous devrez ajouter les icônes générées et le code sur votre site. Tout d'abord, vous devrez créer un thème pour enfants..
Vous pouvez facilement créer un thème enfant WP à l'aide de notre tutoriel ou suivre les étapes décrites dans cet article WP Codex. Si vous en avez déjà un, vous pouvez passer à l'étape 3.
Le thème de l'enfant est lié 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 tu peux ajouter des fonctionnalités supplémentaires à cela.
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 de l'enfant..
À 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 ne dispose pas encore d'un fichier functions.php, créez un fichier texte vierge dans le dossier racine de votre thème enfant avec le nom de fonctions et modifiez son extension en .php..
Insérez la ligne de code suivante dans ce fichier vierge:
Quand ton functions.php le fichier est configuré, ajoutez l'extrait de code suivant:
/ * * Ajoute les icônes de partage social personnalisées * / function add_social_sharing () ?>
Partager cette publication
finalement supprimer la ligne du commentaire HTML à partir de l'extrait de code ci-dessus et remplacez-le par le code HTML vous avez généré à l'étape 1 avec le générateur de boutons de partage social.
Étape 4: Copiez le fichier de modèle approprié dans le dossier du thème enfant.
Par défaut, les publications uniques sont régies par un fichier modèle appelé single.php. Parfois - surtout dans des thèmes plus modernes - la structure de single.php est plus compliqué, car il charge également des fichiers modèles supplémentaires. Dans cette étape, nous devons trouver le fichier de modèle approprié dans lequel nous pourrons ajouter les icônes ultérieurement..
Pour localiser le bon endroit pour les boutons sociaux, nous devons trouver le fichier modèle qui contient la fonction qui charge le contenu des posts individuels.
Ouvrons l'éditeur de thème dans le tableau de bord d'administrateur 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. En dessous du menu déroulant, vous pouvez voir tous les fichiers de modèle que votre thème parent contient. Faites défiler jusqu'à trouver le Modèle de poste unique (appelé single.php) et ouvrez-le.
Si le thème parent utilise le get_template_part () Fonction WP dans le single.php fichier qui signifie qu’il utilise un fichier modèle supplémentaire pour charger le contenu du message individuel.
Vous devez d’abord savoir lequel est ce. Le nom du fichier modèle supplémentaire est le premier paramètre du fichier. get_template_part () une fonction.
Le premier paramètre est 'contenu' ce qui signifie que nous cherchons le fichier modèle 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 fichier de modèle de droite
Nous avons créé une fonction appelée add_social_sharing () à l'étape 3, et nous l'avons attaché à un crochet d'action personnalisé appelé custom_social_share. Maintenant nous devrons ajouter ce crochet à 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 de modèle que vous avez ajouté à votre thème enfant à l'étape 4 dans un éditeur de code ou à l'intérieur de l'éditeur de thème du tableau de bord d'administrateur WordPress, puis recherchez le le contenu() une fonction.
Vérifiez s'il y a un wp_link_pages () fonctionner juste après la le contenu() une fonction. Si tel est le cas, l'extrait de code ci-dessus vient ensuite; sinon il suit le le contenu() une fonction.
Étape 6: Ajoutez le code CSS au thème enfant
Ouvrez le style.css fichier de votre thème enfant dans votre éditeur de code ou dans l'éditeur de thème du tableau de bord d'administrateur WordPress, copiez le code CSS généré à l'étape 1, collez-le à la fin du fichier et enregistrez-le..
Nous allons ajouter 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 de la style.css fichier:
ul.share-buttons li a border: 0; ul.share-buttons li img display: inline;
Étape 7: Téléchargez le jeu d'icônes de médias sociaux sur le serveur
Téléchargez le jeu d'icônes de médias sociaux choisi que vous avez téléchargé à l'étape 1 dans le dossier de votre thème enfant. Connectez votre serveur via FTP, créez un nouveau dossier appelé images à la racine du dossier de votre thème enfant (/ wp-content / themes / votre-thème-enfant / images) et téléchargez l’icône définie ici.
Nous nommons le dossier images 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érification du chemin des fichiers d'icônes
Après avoir chargé les icônes de médias sociaux sur votre serveur à l'étape 7, il est important de vérifier le chemin d'accès aux fichiers d'icônes pour vous assurer qu'ils seront chargés..
Le chemin d'un fichier image indique au navigateur son emplacement sur le serveur. Vérifions les chemins des images à l'intérieur du functions.php fichier du thème enfant. Ouvrez le fichier dans votre éditeur de code et naviguez jusqu’au add_social_sharing () fonction où vous devez vérifier le code HTML que vous avez généré avec le générateur de boutons de partage simple.
Dans le code HTML, vous trouverez un tag avec un src attribut pour chaque icône. Vérifiez si chaque src attribue des points à 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 restituer les images si vous utilisez un chemin relatif, c'est donc une bonne idée de utiliser des chemins absolus à la place. De cette manière, chaque navigateur potentiellement utilisé par vos visiteurs peut être parfaitement 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 le src attribut de chaque icône à un chemin absolu, ce qui signifie qu'il inclura l'URL complète du fichier.
Le chemin d'URL ci-dessus ressemblera à ceci:
Étape 9: Téléchargez les fichiers modifiés et activez le thème de l'enfant
Connectez votre serveur via FTP et téléchargez tous les fichiers créés dans ce didacticiel que vous n'avez pas encore téléchargés: functions.php, la style.css, et le fichier de modèle approprié (dans ce tutoriel, le fichier single.php ou la content.php).
Enfin, activez le thème enfant dans le tableau de bord WP admin sous le Apparence> Thèmes menu.
Vous êtes maintenant prêt avec vos icônes de partage social personnalisées ultra-légères, qui économisent les ressources. Vous pouvez aller en ligne et 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 publications individuelles. Vous pouvez ajouter les icônes de partage à n’importe quel autre emplacement de votre site Web à l’aide du crochet d’action que nous avons créé..
Ajoutez simplement le code que nous avons utilisé à l’étape 5 à l’endroit où vous souhaitez afficher les boutons:
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 comme les images sont chargées par pièce jointe.php.
Si vous souhaitez afficher les boutons de partage social à un endroit différent de votre site Web, vous pouvez utiliser la hiérarchie des modèles WordPress pour le trouver..
