Faire défiler vos derniers commentaires sous Dotclear ou WordPress avec jQuery – Mise à jour

EDIT du 29 Juillet 2007 : changement de script, donc nouvelle publication du tutoriel. Toutes mes excuses également aux personnes qui ont essayé d’implémenter le script de défilement à partir du tutoriel, j’avais laissé une coquille dans le chemin d’accès des fichiers JS et je viens de m’en rendre compte.

Comme quoi, les dimanche pluvieux…

Suite à une demande d’un lecteur sur le mode de fonctionnement du script de défilements des commentaires je me fend d’un petit billet.

En fait, c’est assez simple, donc on va expliquer ça dans l’ordre.

1 Télécharger la bibliothèque jQuery

Vous la trouverez à cette adresse :

Comme c’est pour utiliser directement en production, préférez la version compressée pour une question de poids. Utilisez le clic droit >> Enregistrer la cible sous et gardez en mémoire l’endroit de votre disque dur ou vous l’avez enregistré.

2 Installer le plugin des derniers commentaires

Pour dotclear c’est le plugin Last Comment de Francois Simond + David Latapie à cette adresse : http://blog.lienweb.fr/plugins-dotclear/plugin-lastcomments-0.9.3.pkg.gz.

C’est l’adresse du fichier auto-installeur, utilisez votre procédure habituelle d’installation, vous trouverez toutes les informations à cette adresse : http://blog.lienweb.fr/2006/03/04/122-plugin-dotclear-lastcomments-derniers-commentaires-0-9-3.

Pour WordPress nous allons nous baser sur le plugin Get Recent Comments de Krischan Jodies que vous trouverez à cette adresse : http://wordpress.org/extend/plugins/get-recent-comments/installation/ (utilisez le bouton download Plugin).

Suivez bien les procédures d’installation des plugins que vous soyez sur Dotclear ou WordPress, vérifiez bien que le plugin est actif et que vos derniers commentaires apparaissent bien là ou vous le voulez, je ne vais pas vous expliquer comment installer un plugin Dotclear ou WordPress aujourd’hui, nous partons du principe que vous savez déjà le faire.

3 télécharger le script qui va nous servir de base pour gérer le défilement

J’utilisais à l’origine un script JQuery appellé Newsticker, mais devant des problèmes de stabilité j’ai décidé d’utiliser un autre script : InnerFade with JQuery

La page explique l’utilisation générale du script, le lien de téléchargement est en bas de page.

Il vous faudra décomposer l’archive et récupérer le fichier jquery.innerfade.js qui s’y trouve. L’archive contient en fait une copie de la page d’explication d’utilisation du script.

J’ai décidé d’utiliser ce script pour des rasions de stabilité et de facilité d’intégration.

Il lui manque la fonctionnalité de stopper l’animation au passage de la souris, mais j’y travaille.

Installer et configurer l’ensemble.

Vous allez copier les fichiers les fichiers jquery-latest.pack.js et jquery.innerfade.js dans le répertoire de votre thème/template dotclear ou WordPress.

Vous éditez le fichier contenant le « head » général de votre thème/template, sout dotclear c’est template.php sous wordpress, normalement, ça doit être header.php.

Ajoutez les lignes suivantes juste avant le </head> :

Pour Dotclear :

<script type="text/javascript" src="<?php dcInfo('theme'); ?>/jquery-latest.pack.js"></script>
<script type="text/javascript" src="<?php dcInfo('theme'); ?>/jquery.innerfade.js"></script>

Pour WordPress :

<script type="text/javascript" src="<?php bloginfo(template_url) ?>/jquery-latest.pack.js"></script>
<script type="text/javascript" src="<?php bloginfo(template_url) ?>/jquery.innerfade.js"></script>

Attention : plusieurs personnes ayant essayé ce Tutoriel ont eu des problème avec ces lignes donc je vous donne les versions exactes pour Dotclear 1.2.x et WordPress à partir de la 1.5.

Ensuite, une petite feinte, allez sur votre blog en ligne ou les plugins de derniers commentaires est en fonctionnement et vérifiez le code html généré par ces commentaires.

Sous dotclear vous devriez avoir (a peu de près) le code généré suivant :

<div id="lastcomments">
<h2>Derniers commentaires</h2>
<ul>
<li>blabla 1</li>
<li>blabla 2</li>
<li>blabla 3</li>
...
</ul>

</div>

Sous wordpress :

<ul>
<li>blabla 1</li>
<li>blabla 2</li>
<li>blabla 3</li>
...
</ul>

Pour dotclear :

Il va falloir modifier le code à inclure dans notre template.php de la façon suivante :

Voici le code proposé par défaut :

<div id="lastcomments">
	<h2>Derniers Commentaires</h2>
	<?php $lastcomments->commentList(); ?>
</div>

Il faut le modifier pour avoir ça :

<div>
	<h2>Derniers Commentaires</h2>
	<?php $lastcomments->commentList(); ?>
</div>

Vous pouvez même supprimer le <div></div> si vous n’en avez pas l’utilité.

Ensuite, c’est un peu plus compliqué, mais à peine.

Si vous avez installé le plugin via une archive d’installation automatique (en passant par le backoffice -> outils -> Gestionnaire des plugins), vous n’avez pas les fichiers gérant le plugin lastcomments sur votre pc, il vous faut donc les télécharger.

Utilisez votre logiciel FTP et téléchargez le dossier suivant dans votre répertoire dotclear en ligne : /ecrire/tools/lastcomments.

Une fois le dossier téléchargé sur votre ordinateur, éditez le fichier functions.php avec votre éditeur de texte préféré.

A la ligne 158 (normalement) modifiez le code suivant :

echo '<ul>';

de cette façon :

echo '<ul id="lastcom">';

Enregistrez et republiez le fichier dans le répertoire /ecrire/tools/lastcomments sur votre serveur.

Normalement, tout devrait fonctionner. ;)

Pour WordPress :

L’identifiant « lastcom » de la liste non ordonnée étant important nous allons éditer le code que nous avons ajouté à notre template wordpress pour l’y intégrer.

Vous devez avoir quelque chose comme ça :

<?php if (function_exists('get_recent_comments')) { ?>
<h2><?php _e('Derniers commentaires:'); ?></h2>
<ul>
<?php get_recent_comments(); ?>
</ul>
<?php } ?>

Nous ajoutons l’identifiant et nous avons alors ça :

<?php if (function_exists('get_recent_comments')) { ?>
<h2><?php _e('Derniers commentaires:'); ?></h2>
<ul id="lastcom">
<?php get_recent_comments(); ?>
</ul>
<?php } ?>

Il nous reste le plus dur pour la fin, vous vous en doutez.

Pour finir donc :

Insérez dans le head de votre page ou template la ligne suivante, juste avant le </head> :

<script type= »text/javascript »> $(document).ready( function(){
$(‘#lastcom’).innerfade({ speed: ‘slow’, timeout: 6000, type: ‘sequence’, containerheight: ‘150px’ });
} ); </script>

Et c’est tout. ;)

Pour le reste il vous faudra travailler sur la partie CSS pour que l’ensemble se marie avec le design de votre site.

Vous pouvez changer la vitesse de rotation (le timeout:) la hauteur etc.. reportez vous sur la page de présentation du script pour plus de réglages.

Et n’oubliez pas de faire de l’habillage de #lascom dans votre feuille de style.

Il ne vous reste plus qu’à publier l’ensemble sur votre serveur.

Cordialement,
Aymeric Jacquet

Tags : , , , , ,