Aymeric Jacquet, Me, Myself and I…

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

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.

Aymeric Jacquet

, , , , ,

24 réponses à “Faire défiler vos derniers commentaires sous Dotclear ou WordPress avec jQuery – Mise à jour”

  1. salut
    merci beaucoup pour ce super tuto a la demande !!!!
    je cours sur mon blog pour essayer d’appliquer tout ça et je te fais un retour !

  2. salut,
    c’est moi à nouveau ;)
    tout est très clair dans ton tutoriel, sauf un point (qui fait que ça ne marche pas chez moi…malheureusement!) :
    quand je vais voir le code source de ma page, pour la partie liée à Get-recent-comments, j’ai la chose suivante :
    <code><li id= »get-recent-comments » class= »widget widget_get_recent_comments »><h2 class= »sidebartitle »>Derniers Commentaires</h2><div id= »get_recent_comments_wrap »><ul> <li>bla bla 1</li>
    <li>bla bla 2</li>
    <li>bla bla 3</li></code>
    j’ai donc essayé ta méthode avec « #get-recent-comments » ET avec « #get_recent_comments_wrap », mais sans succès :(
    vois-tu d’où ça pourrait venir ?
    désolé d’être une quiche…
    merci encore et bravo pour ton blog !

  3. En fait essaie de mettre id= »lastComment » au <ul> <li>bla bla bla>/li>…</ul> si tu as accès à ce code dans ta page WP.

    Soit : <ul id= »lasComment »> <li>babla bla</li>… </ul>.

    Wp prends certaines libertés avec le code html ce qui peut entraîner des soucis avec l’application de certains scripts.

  4. bonjour,
    je trouve ca vraiment trs sympa, mais je n’arrive pas a finir correctement le tuto.
    Je pense avoir tout bien réalisé jusqu’a Ensuite, une petite feinte, allez sur votre blog… mais après je ne conprend pas trop quoi faire !

    Je suis sou dotclear 1.2 au passage

  6. Jérome : pour dotclear, je crois effectivement avec le recul que j’avais fait un petit « hack » du fichier functions.php de lascomments, je vérifie ça et je reviens rééditer le tutoriel.

    Autre problème, j’ai regardé votre blog et il semble qu’il y ait un souci avec l’adresse d’appel des fichiers .js de jQuery et du script.

    Je regarde ça de mon côté et je vous tien au courant.

  7. Je me suis remis dedans et pour : Autre problème, j’ai regardé votre blog et il semble qu’il y ait un souci avec l’adresse d’appel des fichiers .js de jQuery et du script.

    Effectivement j’avais mal adressé l’emplacement mais cela n’a rien changé au final, je ne désespere pas. Je cherche, cela fait fonctionné les neurones et cela ne fait pas de mal ! :)

  9. Ah, cela m’ embete de dire ca mais aucune difference ! :(
    Je pense avoir fait tout les changementmais cela reste a l’identique.

    echo ‘<ul id= »lastcom »>’; j’ai essayé de mettre :
    echo ‘<ul id= »lastcomments »>’;.

    Un petit coups de main ne serait pas de refus !

  10. Jérome : j’ai corrigé quelque coquilles dans le tutoriel, désolé, je l’avais un peu fait à la va vite. :(

    Par contre, en testant la page de zonelivre, il semble que l’adresse des fichiers .JS de jquery et d’ajscripts.js (petit coquin ;) ) ne soit toujours pas bonne.

  11. Par contre, en testant la page de zonelivre, il semble que l’adresse des fichiers .JS de jquery et d’ajscripts.js (petit coquin ;) ) hihi !!

    Voici lle chemin que j’ai mis, cela me semble pourtant correct :

    <script type= »text/javascript » src= »/themes/darkLiquidCard/jquery-latest.pack.js »></script>

    <script type= »text/javascript » src= »/themes/darkLiquidCard/ajscripts.js »></script>

  12. Bon eh bien !!! :)

    Cela n’a rien changé ! Mais ce n’est pas grave j’ai déjà pu mettre ce plugin sur le blog et c’est vraiment sympa !

    Merci de cette penché sur mon cas.

    Ps : j’ai l’impression que tu as rechangé également et est revenu à la présentation des « derniers commentaire » à la normal !

  13. Tu sais quoi jérome, on va faire plus simple, tu vas rempacer /themes/darkLiquidCard par le code php suivant : <?php dcInfo(‘theme’); ?>, comme pour ta feuille de style.

    Parce que en fait dans ton adresse il manque /dotclear/ ;)

  14. Jérome : tu as retiré le / avant le nom des fichiers .js :

    L’adresse pour les deux fichiers (ce sera plus simple) :

    <script type= »text/javascript » src= »<?php dcInfo(‘theme’); ?>/jquery-latest.pack.js »></script>

    <script type= »text/javascript » src= »<?php dcInfo(‘theme’); ?>/ajscripts.js »></script>

    Normalement là ça devrait fonctionner.

  15. AAArrrg… ça marche pas… j’ai suivi tout de A à Z mais bon dommage… sinon félicitation pour ton blog!

  16. Jérome et LTR : Je vois que vous avez tous les deux installé également la bibliothèque Javascript prototype, il est fort possible qu’il y ait des conflits avec vos scripts déjà installés.

    Je vais quand même voir de mon côté à reprendre le tutoriel points par points, j’ai l’impression qu’il n’est pas forcément très au point. Je vais également faire un test avec prototype voir si ça créé des conflits.

    LTR : merci. ;)

  17. Je ne comprends pas ce qu’est « la bibliothèque Javascript prototype » mais jte remercie de te pencher sur nos cas! Moi perso, j’ai trouvé que le tuto étais clair mais ça doit venir surement d’un truc au de la de mes compétences!
    ;-) ++

  18. LTR : en fait, sur ton blog (géré par wordpress), il y a déjà une bibliothèque javascript d’installée, une autre que jQuery.

    Si je regarde le code source de ton blog je vois ceci :
    <script type= »text/javascript » src= »http://www.leblogdeltr.com/wp-content/plugins/lightbox/prototype.js »></script>
    <script type= »text/javascript » src= »http://www.leblogdeltr.com/wp-content/plugins/lightbox/scriptaculous.js?load=effects »></script>
    <script type= »text/javascript » src= »http://www.leblogdeltr.com/wp-content/plugins/lightbox/lightbox.js »></script>

    prototype.js est une bibliothèque javascript, comme jQuery en est un autre, il est possible qu’il y ait conflit entre les deux.

    jérome a la même chose d’installée sur son blog.

  19. Merci à toi pour t’etre penché une nouvelle fois sur mon blog. En tout cas en venant sur le tient pas mal de petit truc ! merci !

  20. Bonjour et merci pour ce tuto mais il ne fonctionne pas chez moi. J’ai pourtant suivi à la lettre toutes les manipulation. Si vous avez le temps un coup de main serait le bienvenu…

  21. Bonjour Dud : il semble dans un premier temps que l’url vers l’ajscripts.js (rohhh encore) ne soit pas bonne : http://www.unfauxgraphiste.com/menu/themes/freshy/ajscripts.js donne un beau 404 not found.

  24. Easy to install, to set, to run, to enjoy, et ça valorise un max les lecteurs participants…

    encore bravo et merci

    Cdlmnt

    Un débutant admiratif