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.