WordPress – Créer un Widget Réseaux Sociaux sans Plugin

WidgetResoc_2

Il est relativement facile dans WordPress de créer un widget pour afficher les icônes des principaux réseaux sociaux (Facebook, Tweeter, LinkedIn et Google+ dans cet exemple).


Pré-requis

Ajouter la gestion des Widgets

Si le thème ne supporte pas les widgets par défaut, il faut les déclarer au préalable en ajoutant les lignes suivantes au fichier functions.php.

function slim_slug_widgets_init() {
 register_sidebar( array(
 'name' => 'Sidebar',
 'id' => 'sidebar',
 'description' => 'Ajouter des widgets ici',
 'before_widget' => '<li id="%1$s" class="widget %2$s">',
 'after_widget' => '</li>',
 'before_title' => '<h3 class="widgettitle">',
 'after_title' => '</h3>',
 ) );
}
add_action( 'widgets_init', 'slim_slug_widgets_init' );

Le menu Apparence > Widgets devrait maintenant apparaître dans la console wp-admin.

Source: Codex – Function Reference/register sidebar

Autoriser le PHP dans les Widgets

Comme nous allons utiliser du PHP, il faut au préalable autoriser l’interprétation de ce code dans les Widgets.

Pour cela on modifie le fichier functions.php du thème en y ajoutant le filtre suivant s’il n’existe pas déjà:

function php_execute($html){
if(strpos($html,"<"."?php")!==false){ ob_start(); eval("?".">".$html);
$html=ob_get_contents();
ob_end_clean();
}
return $html;
}
add_filter('widget_text','php_execute',100);
?>

Mise en oeuvre

Modifier le fichier footer.php

Les liens Facebook et Google+ nécessite chacun un script PHP à inclure dans le fichier footer.php juste avant les 2 dernières balises:

</body></html>

soit:

Le code suivant:
<!-- Scripts Google+ -->
<script src="https://apis.google.com/js/platform.js" async defer>
 {lang: 'fr'}
 data-href="<?php echo($currenturl); ?>"
<script>
<!-- Scripts Facebook-->
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

</body>
</html>

Créer le widget

Depuis la console wp-admin, dans Apparence > Widgets, ajouter le widget Texte prédéfini.
Titre: Réseaux
Contenu: Coller le code suivant dans le contenu

<?php
global $wp;
$current_url = add_query_arg( $wp->query_string, '', 
home_url( $wp->request ) );
$url = explode('?', $current_url, 2)[0];
?>
<ul style="list-style-type: none;margin-left:0;">
<li style="padding:1px">
<!-- Facebook-->
<div class="fb-like" data-Href="<?php echo($url); ?>" 
data-send="false" data-layout="button" data-action="like" data-show-faces="true" data-share="false"></div>
</li>
<li style="padding:1px;"> 
<!-- Tweeter -->
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="InfoWebMaster">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<!-- Linkedin -->
<script type="text/javascript" src="http://platform.linkedin.com/in.js"></script>
<script type="in/share"></script>
</li>
<li style="padding:1px"> 
<!-- Google+ -->
<g:plusone></g:plusone>
</li>
</ul>

Remarque: Récupération de l’URL de la page en cours

Les expressions suivantes,

  • the_permalink()
  • « http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI] »

utilisées en dehors de La Boucle  ne retournent pas l’URL de la page en cours mais celle du dernier post de La Boucle.
Pour y remédier on a utilisé la syntaxe suivante en PHP fournie par Konstantin Kovshenin:

global $wp;
$current_url = add_query_arg( $wp->query_string, '', home_url( $wp->request ) );

Intégrer le widget à la sidebar

il ne reste plus qu’à intégrer le widget à la sidebar depuis la console wp-admin en ouvrant le menu Apparence > Widgets.

Si la sidebar n’apparaît pas dans une page (cas d’un thème ne supportant pas les widgets par défaut), ajouter la ligne suivante à l’endroit ou elle devrait apparaître:

<?php get_sidebar(); ?>

C’est terminé, les boutons des réseaux sociaux apparaissent maintenant dans la sidebar.

WidgetResoc_2

 

Ce contenu a été publié dans PHP, Sites Web, WordPress, avec comme mot(s)-clé(s) , , , , , . Vous pouvez le mettre en favoris avec ce permalien.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.