Ajouter des boutons de partage social sans tracking à WordPress

📢 Ajouter des boutons de partage simples sur WordPress (sans plugin)

Pourquoi se compliquer la vie avec des plugins quand on peut faire plus léger ?
Les plugins de partage ralentissent souvent le site, surtout si vous avez beaucoup d’images comme moi.
Voici donc une solution simple, rapide et sans tracking pour ajouter des boutons de partage directement dans WordPress.

👉 Bonus : le pack d’icônes utilisé dans cet article est disponible en téléchargement (libre, sans fioritures).

🎨 Effet visuel

Chaque bouton utilise deux images : une version normale (60% d’opacité) et une version au survol (100% d’opacité) grâce à onmouseover et onmouseout.
Résultat : un rendu propre et sans dépendance.

💻 Le code HTML à insérer

Ajoutez ce code dans part-content.php de votre thème (ou single.php selon le cas) pour afficher les boutons à la fin de vos articles :

<p><i>Partager :</i></p>
<div class="wdp-partage">

  <!-- Twitter -->
  <a target="_blank" title="Twitter"
     href="https://twitter.com/share?url=<?php the_permalink(); ?>&text=<?php the_title(); ?>"
     rel="nofollow"
     onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=700');return false;">
     <img src="<?php bloginfo('template_url'); ?>/img/sociaux/twitter2.png" alt="Twitter"
          onmouseover="this.src='<?php bloginfo('template_url'); ?>/img/sociaux/twitter.png';"
          onmouseout="this.src='<?php bloginfo('template_url'); ?>/img/sociaux/twitter2.png';" />
  </a>

  <!-- Facebook -->
  <a target="_blank" title="Facebook"
     href="https://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&t=<?php the_title(); ?>"
     rel="nofollow"
     onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=500,width=700');return false;">
     <img src="<?php bloginfo('template_url'); ?>/img/sociaux/facebook2.png" alt="Facebook"
          onmouseover="this.src='<?php bloginfo('template_url'); ?>/img/sociaux/facebook.png';"
          onmouseout="this.src='<?php bloginfo('template_url'); ?>/img/sociaux/facebook2.png';" />
  </a>

  <!-- Google+ (deprecated mais laissé pour l’exemple) -->
  <a target="_blank" title="Google+"
     href="https://plus.google.com/share?url=<?php the_permalink(); ?>&hl=fr"
     rel="nofollow"
     onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=450,width=650');return false;">
     <img src="<?php bloginfo('template_url'); ?>/img/sociaux/gplus2.png" alt="Google Plus"
          onmouseover="this.src='<?php bloginfo('template_url'); ?>/img/sociaux/gplus.png';"
          onmouseout="this.src='<?php bloginfo('template_url'); ?>/img/sociaux/gplus2.png';" />
  </a>

  <!-- Linkedin -->
  <a target="_blank" title="Linkedin"
     href="https://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>"
     rel="nofollow"
     onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=450,width=650');return false;">
     <img src="<?php bloginfo('template_url'); ?>/img/sociaux/linkedin2.png" alt="Linkedin"
          onmouseover="this.src='<?php bloginfo('template_url'); ?>/img/sociaux/linkedin.png';"
          onmouseout="this.src='<?php bloginfo('template_url'); ?>/img/sociaux/linkedin2.png';" />
  </a>

  <!-- Email -->
  <a target="_blank" title="Envoyer par mail"
     href="mailto:?subject=<?php the_title(); ?>&body=<?php the_permalink(); ?>"
     rel="nofollow">
     <img src="<?php bloginfo('template_url'); ?>/img/sociaux/email2.png" alt="Email"
          onmouseover="this.src='<?php bloginfo('template_url'); ?>/img/sociaux/email.png';"
          onmouseout="this.src='<?php bloginfo('template_url'); ?>/img/sociaux/email2.png';" />
  </a>

</div>

🎨 Le CSS à ajouter

Ajoutez ce petit style dans votre style.css :

.wdp-partage {
  float: left;
  width: 200px;
  padding-top: 0;
}
.wdp-partage a {
  float: left;
  margin-left: 7px;
}

🚀 Résultat

Vous avez maintenant un système de partage léger, rapide et efficace.
Pas besoin de plugin, juste du HTML + CSS.
Vous pouvez voir un exemple de rendu ici :
https://ent.valente-c.fr/chantiers/

Bon partage sur WordPress 🎉