MAJ: N’utilisez pas la version 2.3 du thème. Le hack ne fonctionne plus… Utilisez le 2.2.3 ou moins. Videz les caches pour que le hack d’affiche correctement !
Pour les connaisseurs, j’utilise WordPress, qui est à mon goût le meilleur CMS (Content Management System ou Système de gestion de contenu en français) associé au thème Mystique que j’ai retouché pour qu’il soit un peu plus personnel.
Pour les débutants, WordPress est libre et gratuit, vous êtes libre de le modifier (comme moi 😉 ) pour l’adapter à vos besoins personnels ou professionnel. Vous pouvez télécharger WordPress sur http://fr.wordpress.org/ et le thème Mystique sur le site de digitalnature ici. Pour installer et utiliser WordPress, il faut un hébergement pouvant gérer du contenu en PHP et une base de donnée MySQL (PostGre fonctionne tout aussi bien mais MySQL est meilleur, à mon goût, comme d’hab’ ! :p )
Dans cet article, je vais vous montrer comment ajouter les icônes vers les réseaux, qui sont les icônes en haut de mon site qui vous permet d’accéder à mon profil Facebook, Twitter, Skype (n’oubliez pas d’installer Skype !)… D’ailleurs, si vous avez un soucis, n’hésitez pas à me contacter ! 🙂
Voilà comment nous allons nous y prendre…
Commencez par votre connecter à votre Tableau de bord WordPress (Sur votre site hein ? Pas celui de WordPress ! 
)
Pour continuer, uploadez et activez le thème Mystique dans le gestionnaire de thème puis rendez-vous dans Paramètres de Mystique et allez dans l’onglet Avancé. Pour terminer les préparations, télécharger ce dossier d’icônes (télécharger la pack d’icônes)et transférez tous les icônes dans un dossier que vous nommerez mystique_icons qui se trouvera dans le répertoire /wp-content/uploads/
Dans la case Fonctions d’utilisateur, ajoutez le script PHP suivant:
<?php
function mystique_custom_nav_icons($nav_extra)
{
$nav_extra = ‘<a href= »‘.get_bloginfo(‘rss2_url’).' » class= »nav-extra rss » title= »Flux RSS »><span>Flux RSS</span></a>’;
$nav_extra .= ‘<a href= »http://www.twitter.com/ » class= »nav-extra twitter » title= »Suivez-moi sur Twitter! »><span>Suivez-moi sur Twitter!</span></a>’;
$nav_extra .= ‘<a href= »http://www.facebook.com/ » class= »nav-extra facebook » title= »Mon profil Facebook »><span>Mon profil Facebook</span></a>’;
$nav_extra .= ‘<a href= »skype:// » title= »Appelez-moi sur Skype! »><span>Appelez-moi sur Skype!</span></a>’;
$nav_extra .= ‘<a href= »http://www.flickr.com/photos/ » title= »Ma galerie FlickR »><span>Ma galerie FlickR</span></a>’;
$nav_extra .= ‘<a href= »http://www.youtube.com/ » class= »nav-extra youtube » title= »Mes vidéos YouTube »><span>Mes vidéos YouTube</span></a>’;return $nav_extra;
}add_action(‘mystique_navigation_extra’, ‘mystique_custom_nav_icons’);
Pensez à compléter les url qui vous correspondent ! 😉
Pour ajouter, modifier ou supprimer des icônes, copiez la même ligne en remplaçant ce qu’il faut: (ne vous trompez pas !)
$nav_extra .= ‘<a href= »http://www.flickr.com/photos/kyvandoan » class= »nav-extra flickr » title= »Ma galerie FlickR »><span>Ma galerie FlickR</span></a>’;
En parlant de modifier les lignes pour faire afficher les icônes, je vous explique comment faire:
- La balise lien du type <a href= »url »>, remplacez url pour le lien qui correspond à votre demande
- class est une varible, il va falloir porter la même sur le ficheir CSS pour faire afficher l’icône. Après nav-extra, entrez la variable qui correspond, par exemple flickr, skype ou quelque chose de simple à retenir pour l’insérer dans le CSS.
- La fonction title vous fait afficher le titre quand vous passez la souris dessus, essayez donc sur mes icônes au début. Entre les » « , entre le titre souhaiter
- Recopiez le titre dans la balise <span>, c’est celle qui vous permettra d’afficher le titre de l’icône
Après avoir fait tous les changements dans les fonctions PHP, sauvez les changements (on est jamais trop prudent n’est-ce pas ? 8) ), allez dans l’onglet CSS de l’utilisateur
Ajoutez que code suivant pour faire afficher vos icônes, n’oubliez pas d’adapter les variables pour faire afficher les icônes !
#header p.nav-extra {top:-46px;height:54px;}
#header a.nav-extra {height:60px;}#header a.nav-extra.rss{background:url(« http://kyvandoan.free.fr/Blog/wp-content/uploads/mystique_icons/nav-rss.png ») no-repeat scroll right top transparent;}
#header a.twitter{background:url(« http://kyvandoan.free.fr/Blog/wp-content/uploads/mystique_icons/nav-twitter.png ») no-repeat scroll right top transparent;}
#header a.facebook{background:url(« http://kyvandoan.free.fr/Blog/wp-content/uploads/mystique_icons/nav-facebook.png ») no-repeat scroll right top transparent;}
#header a.skype{background:url(« http://kyvandoan.free.fr/Blog/wp-content/uploads/mystique_icons/nav-skype.png ») no-repeat scroll right top transparent;}
#header a.flickr{background:url(« http://kyvandoan.free.fr/Blog/wp-content/uploads/mystique_icons/nav-flickr.png ») no-repeat scroll right top transparent;}
#header a.youtube{background:url(« http://kyvandoan.free.fr/Blog/wp-content/uploads/mystique_icons/nav-youtube.png ») no-repeat scroll right top transparent;}
Pour adapter le fichier CSS avec le script PHP, c’est pas bien compliquer 😆 , suivez le guide:
- Après chaque appel à l’entête du site par la balise #header, la fonction va appeler la variable (Bref, faites comme si j’ai rien dit là 😡 ), l’appel de la variable que vous avez désignez avant va entrer en jeu. La fonction a est l’appel suivi du . (point) qui est comparable à : (deux points) puis de la variable demandé, si on reprend l’exemple de notre sript PHP, pour Facebook
$nav_extra .= ‘<a href= »http://www.facebook.com/ » class= »nav-extra facebook » title= »Mon profil Facebook »><span>Mon profil Facebook</span></a>’;
la variable utilisé est facebook alors nous allons la réutiliser dans le CSS en entrant
#header a.facebook{background:url(« http://kyvandoan.free.fr/Blog/wp-content/uploads/mystique_icons/nav-facebook.png ») no-repeat scroll right top transparent;}
Bon, vous avez plus ou moins compris le principe. Avant de conclure, n’oubliez pas de mettre à jour le lien de l’icône ! 🙄
Voilà, bientôt d’autres astuces pour ce thème, si j’y pense 😉
Encore, une chose mais hors-sujet, mon Blog n’est pas que « geek » alors si vous voyez un article sur un autre thème dans un avenir proche, ne me spammez pas ! Je ne suis pas forcément un « geek » contrairement à ceux qui le pensent…
Icônes de Mark N Hewitt. Tutoriel simplifié de la version originale du même auteur. Merci à lui, un ping a été envoyé sur son site. 🙂 Lien vers l’article d’origine (avec le pack d’icône à jour !)
Et aussi de Phil Penslebury 😉 à qui je dois toute ma reconnaissance pour ce hack simplifié ! Aussi remercié par un rétrolien 🙂 Lien vers l’article d’origine