Avec se tutoriel vous pourrez ajouter les boutons de partage Facebook, Google plus, Twitter et l’icône RSS de Votre blog, qui défileront a l’extérieur de votre page, et il sera possible ajouter ou de retirer des réseaux sociaux, et tous sa sans plugin !
Le code sources fait 300 lignes vous pouvez le télécharger ici je vais vous expliquez comment le mettre en place et l’adapter a votre thème.
Une fois le fichier téléchargé placé le dans le dossier de votre thème WordPress ensuite ouvrez votre fichier function.php et ajouter le code ci-dessous pour appeler le fichier social.php.
include (TEMPLATEPATH .'/social.php');
Ensuite ouvrez votre fichier header.php de votre thème puis ajouter le code pour suivant après la balise </head> pour afficher les boutons de partage.
<?php echo socials_bar(); ?>
Dans le fichier social.php vous pourrez modifier le code css pour ajuter le widget à votre thème :
/*-------Socials bar------------*/
#floating-socials-wrapper{
width:950px; /* Modifier cette ligne pour ajuater la social bar a votre thème */
margin:0 auto 0 auto;
height: auto;
position: relative;
}
#floatdiv {
position:absolute;
width:94px;
height:229px;
top:0;
left:500px;
z-index:100
}
#socials-sidebar {
background-color:#ffffff;
border:1px solid #ddd;
padding-left:5px;
position:relative;
height:278px;
width:70px;
float:right;
margin:0 0 0 5px;
}
Pour positionner la colonne qui contient les boutons de partage modifié la largeur de la balise <div> qui a l’ ID floating-socials-wrapper.
Pour ajouter le Flux RSS modifier cette ligne pour ajouter votre adresse, puis transférer icône dans le dossier image de votre thème.
<a href="http://www.votre-site.com/feed"><img src="<?php bloginfo('template_url'); ?>/images/feed-icon.png"></a>
Si vous voulez fixer la position des boutons de partage ajouter le code css ci-dessous et ajuter la marge du haut comme indiquer dans le code.
/* code css pour fixer la socials bar */
#floating-box-container .fixed{
position:fixed;
top:200px; /* Modifier cette ligne pour ajuster la postion vertical */
}
#floating-box-container{
float:left;
top:0;
left:0;
position:absolute;
width:auto;
}
Vous pouvez ajouter des boutons de partage en ajoutant des lignes dans le tableau html et en modifiant la hauteur de la balise à l’aide du code css.