Un gravatar qu’est ce que c’est ?

Un gravatar est un avatar que vous pouvez utiliser sur de nombreux sites ou blogs (wordpress, github,…) . Généralement les gravatar apparaissent à côté du pseudo que vous utilisez pour commenter ou rédiger des articles.  C’est un gain de temps dans la mesure où vous n’avez pas à uploader un avatar sur chaque site que vous fréquentez.

Comment appeler et afficher un gravatar

Une petite fonction php faite à partir des informations données sur Gravatar.com vous permet de faire ceci!

/*
* Fonction de récupération de l'avatar
*/
function get_avatar($monEmail, $taille = null)
{
$trimEmail = md5(strtolower(trim($monEmail)));
echo "<img src='http://www.gravatar.com/avatar/" . $trimEmail . "?s=" . $taille . "' />";
}

/*
* Affichage de l'avatar
*/
get_avatar('scoco@scoco.fr', 150);

Explication des fonctions utilisées

• md5() encode la chaîne passée en paramètre en un nombre hexadécimal de 32 caractères
  Exemple: md5(‘scoco’) retourne f7449c2cd0f9b029e33157459b3d0846
• strtolower()  retourne la chaîne passée en paramètre en minuscule
  Exemple: strtolower(‘Je Suis SCOCO’) retourne je suis scoco
• trim() supprime les caractères invisibles au début et à la fin de la chaîne passée en paramètre
  Exemple: trim(‘     scoco ‘) retourne scoco (sans les espace devant et après)

Pourquoi personnaliser le footer de son site ?

Votre footer ne vous plait pas! Si la ou les licences de votre thème wordpress vous permettent de retravailler les codes sources afin de les adapter à vos besoins. Les étapes ci-dessous vous permettrons d’ajouter certaines informations.
C’est à dire :

• Ajouter des liens vers certaines pages (contact, mentions légales, plan du site, …)
• Ajouter les boutons des médias sociaux (facebook/twitter/google)
• Ajouter un texte pour présenter rapidement le site
• Ajouter des widgets configurables dans la partie administration
• …

Etape 1 : Repérer les fichiers à modifier

Suivant le thème qui vous utilisez, vous aurez plus ou moins la même configuration, à savoir, les fichiers suivants:

• footer.php > Fichier contenant tout se qui sera afficher dans le pied de page
• function.php > Fichier répertoriant certaines configurations du thème
• styles.css > Fichier contenant le css de votre thème

Etape 2 : Ajouter 3 widgets personnalisables

Dans « footer.php », là où commence votre pied de page, ajoutez:

<div class="footer-scoco">
  <div class="footer-widget-scoco">
  <ul class="widget-scoco">
    <?php dynamic_sidebar('widget-f1'); ?>
  </ul>
  </div>
  <div class="footer-widget-scoco">
  <ul class="widget-scoco">
    <?php dynamic_sidebar('widget-f2'); ?>
  </ul>
  </div>
  <div class="footer-widget-scoco">
  <ul class="widget-scoco">
    <?php dynamic_sidebar('widget-f3'); ?>
  </ul>
  </div>
  <div style="clear:both;float:none;"></div>
</div>

Dans « style.css », à la fin, ajouter :

Adaptez le css à votre thème

/* styles.css > apparence du footer */
.footer-widget-scoco{width: 33%;float:left;} 
.footer-widget-scoco h2{margin: 0;}
.footer-widget-scoco ul{list-style: none;margin: 0;padding: 0;}
.footer-widget-scoco li{list-style: none;margin: 0;padding: 0;}

Dans « function.php », ajouter :

register_sidebar(array(
  'name'=>'widget-f1',
  'before_widget' => '<ul><li>',
  'after_widget' => '</li></ul>',
  'before_title' => '<h2>',
  'after_title' => '</h2>'
));
register_sidebar(array(
  'name'=>'widget-f2',
  'before_widget' => '<ul><li>',
  'after_widget' => '</li></ul>',
  'before_title' => '<h2>',
  'after_title' => '</h2>'
));
register_sidebar(array(
  'name'=>'widget-f3',
  'before_widget' => '<ul><li>',
  'after_widget' => '</li></ul>',
  'before_title' => '<h2>',
  'after_title' => '</h2>'
));

Etape 3 : Remplissez vos widgets !

Si il vous manque des informations, n’hésitez pas à me contacter. J’améliorerai cet article par la suite.

Sur wordpress, pourquoi utiliser des extensions ?

L’utilisation d’extensions (plugins) va vous servir à améliorer l’ergonomie de votre blog/site, son référencement, son utilisation.
Des extensions sont des petits programmes, des morceaux de code qui vont venir s’ajouter à ceux de wordpress pour dans certain cas, optimiser certaines parties. L’utilisation de plugin, n’est pas obligatoire car nous pouvons nous même, dans certain cas, ajouter/modifier ce que nous voulons.

Exemple: Ajouter le bouton « J’aime » de facebook, « +1 » de Google, Tweet de « Tweeter »

Quels plugins ai-je choisi et pourquoi ?

Akismet

Akismet, c’est une des deux extensions proposées à la première utilisation de wordpress. Il est très utile pour lutter contre le spam. Je vous conseille grandement de l’activer.

Contact Form 7

Contact Form 7, c’est un plugin pour créer et intégrer des formulaires de contact ou des questionnaires. Il très simple d’utilisation et fonctionne parfaitement. Pour un formulaire de contact, il vous suffit de choisir les champs que vous souhaitez et Contact Form 7 vous donne un petit morceau de code à intégrer dans une page (celle où vous souhaitez avoir votre formulaire)

NextGEN Gallery

Besoin d’une galerie photo pour votre blog, NextGEN Gallery est la solution parfaite.
Très complet et très performant, la gestion des images/photos se fait rapidement et simplement. Ce plugin offre la possibilité de faire des diaporamas avec ou sans effets, d’ajouter un filigrane sur les images afin de préserver les droits d’auteur.

Shareaholic ou ShareThis

Shareaholic ou Sharethis sont des plugins spécialisés pour les réseaux sociaux, c’est à dire qu’il vont simplifier le partage des articles sur divers médias du web.
Comme je l’ai dis plus haut, c’est des scripts que nous pouvons installer nous même sans avoir besoin de ces plugins. Si vous avez les compétences, installez le morceau de code disponible sur facebook, google plus, twitter, … vous même sinon utilisez un de ces deux plugins.

WordPress SEO

Yoast WordPress SEO est un plugin pour améliorer votre référencement et votre visibilité sur le net. C’est un plugin très complet et pratique. WordPress SEO propose aussi quelques conseils pour améliorer votre contenu affin qu’il soit plus pertinent pour les moteurs de recherche.

Exemple:

• Ce mot-clef / cette phrase apparaît dans le lien URL de cette page.
• Le mot-clef / phrase clef principal apparaît dans 2 (sur 7) sous titres de votre texte. Bien que n’étant pas un facteur majeur pour le classement, cela est tout de même bénéfique.
• Le mot-clef apparaît dans le premier paragraphe du texte.
• Cette page a 1 lien(s) externe(s).
• La densité du mot-clef est de 1.51%, ce qui est bon, le mot-clef a été trouvé 5 fois.
• Ce titre de page contient un mot-clef / phrase au début ce qui devrait permettre d’améliorer votre classement.
• Pour cette balise méta description, n’oubliez pas de considérer :Comment se compare-t-elle à la concurrence ? Pourrait-elle être plus attrayante ?
• La méta description contient le mot-clef / phrase principal
• Il y a 332 mots dans le corps du texte, ce qui est supérieur au minimum recommandé de 300 mots.
• Le titre de cette page compte plus de 40 caractères et moins que la limite recommandée de 70 caractères.

Voici une petite liste de trucs et astuces pour votre thème wordpress

• Ajouter un texte personnalisable n’importe où dans votre thème wordpress
• Ajouter/Supprimer des champs pour les utilisateurs
• Ajouter une image à la une pour un article

Ajouter un texte personnalisable n’importe où dans votre thème wordpress

Dans le fichier « functions.php » de votre thème
On ajoute une action

add_action('admin_menu', 'add_welcome_interface');

On ajoute un petit menu dans la partie d’administration de wordpress (ici, un menu message)

function add_welcome_interface() {
add_theme_page('Message', 'Message', '8', 'functions', 'monmessage');
}

On créer la fonction avec le formulaire pour administrer notre texte

<form action="options.php" method="post"> 
Titre: <input name="titremea" type="text" value="<?php echo get_option('titremea'); ?>" />
Message:
<textarea cols="100%" name="msgmea" rows="10"><?php echo get_option('msgmea'); ?></textarea>
<input name="Submit" type="submit" value="Mettre a jour" />
<input name="action" type="hidden" value="update" />
<input name="page_options" type="hidden" value="titremea,msgmea" />
</form>

Dans votre thème wordpress, à l’endroit où vous voulez afficher ces champs, insérer:

Ajouter/Supprimer des champs pour les utilisateurs

/* Champs utilisateur */
function contacts_field() {

/* Supprimer des champs */
unset($contact['aim']);
unset($contact['yim']);
unset($contact['jabber']);

/* Ajouter des champs */
$contact['tel'] = 'Téléphone';
$contact['twitter'] = 'Twitter';
$contact['facebook'] = 'Facebook';
$contact['linkedin'] = 'Adresse LinkedIn';

return $contact;
}

add_filter('user_contactmethods','contacts_field',75,1);

Ajouter une image à la une pour un article

Dans le fichier « functions.php », ajouter:

add_theme_support( 'post-thumbnails');
/* taille de l'image */
set_post_thumbnail_size(613, 70);

Pour appeler cette image dans l’article
dans le(s) fichier(s) « index.php », « single.php », « page.php » etc …, ajouter:

Un slideshow : Qu’est-ce que c’est ?

Le slideshow (appelé aussi slider, diaporama ou encore carrousels) est un élément graphique servant à améliorer l’ergonomie, la navigation d’un site web. Il sert surtout à mettre en avant une ou plusieurs informations. Généralement les slideshow sont des images circulant les une après les autres. Il existe une multitude de façon de les afficher.
Pour ajouter un slideshow simplement sur un site wordpress, j’ai choisi le plugin Meteor Slides qui est un plugin wordpress très simple d’installation et d’utilisation.

Téléchargement et installation du slideshow

1. Télécharger le plugin sur wordpress.org
2. Installer et activer le plugin (un menu s’ajoute sur le coté gauche dans l’administration)
   
3. Insérer la ligne de code ci dessous à l’endroit où vous souhaitez le voir apparaitre. Par exemple en dessous du menu de navigation dans header.php ou encore dans index.php si vous souhaitez juste le mettre sur la page d’accueil.

   <?php if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow(); } ?>

4. Configurer votre slideshow dans votre panel admin
   
5. Ajouter des diapositives en remplissant 3 champs (Titre, Images, URL)
6. Tadaaaaaaaaaaaaaa vous avez ce que vous voulez 🙂

Avantages : Très facile à mettre en place
Inconvénient: Limité (Pas possibilité de mettre une description)

Plugin créer par Jleuze