Lire la suite >>

Pour l’instant, Recent Comments ne propose pas encore de fichiers de traduction. Il n’existe donc qu’en anglais, mais je devrais bientôt, j’espère, vous proposer la traduction.

Il offre de nombreuses options, mais sa configuration n’est pas toujours intuitive.

Installation

Une fois Recent Comment et Post-Plugin Library téléchargés dans le répertoire VotreBlog/wp-content/plugins et activés depuis le panneau d’administration du blog, rendez-vous dans Apparence > Widgets et placer le widget Recent Comments dans votre barre latérale ou votre pied-de-page. C’est là que vous donnez un titre au widget et indiquez le nombre de commentaires à afficher.

Pour personnaliser le plugin, rendez-vous depuis le panneau d’administration du blog dans Réglages > Recent Comments.

Onglet Général

Dans le premier onglet, vous pouvez indiquer notamment (je ne détaille pas toutes les options) :

• dans l’option « Show static pages? », si vous souhaitez afficher les commentaires des pages uniquement dans les billets (« No pages, just posts »), dans les pages et les billets (« Both pages and posts »), uniquement dans les pages (« Pages but not posts ») ;
• dans l’option « Type of comment to show: », le type de commentaires à afficher : tous les commentaires (« All kinds of comment »), seulement les commentaires, sans les trackbacks (« Just plain comments »), uniquement les trackbacks (« Just trackbacks and pingbacks »).

Onglet Output

C’est dans cet onglet que se configurent les options les plus intéressantes, qu’il faut saisir dans la boîte intitulée « Output Template ». A droite de la fenêtre se trouvent les balises à insérer. J’en traduis ici quelques-unes.

Options liées à l’article de référence

• {author} : nom de l’auteur de l’article
• {date} : date de l’article au format long
• {link} : lien vers l’article
• {title} : titre de l’article
• {time} : heure de l’article
• {url} : url de l’article

Options des commentaires

• {commentsnippet} : extrait du commentaire
• {commentdate} : date du commentaire
• {commenttime} : heure du commentaire
• {commenter} : nom du commentateur
• {commenterurl} : lien vers le site du commentateur
• {commenturl} : lien du commentaire

Ma configuration

J’ai choisi de grouper les commentaires par article (ou page) en le précisant au bas de l’onglet « Output » dans l’option « Type of grouping: » et en choisissant « By post » (par article).

Dans l’option « Group title template: », j’ai précisé que je souhaitais faire apparaître un lien vers l’article ou la page :

<strong>&rArr; Dans <u>{link}</u></strong>

Explications

&rArr; <!-- affichage d'une flèche-->
insertion du mot "Dans",
{link} <!--lien vers l'article ou la page-->
<strong></strong> <!--balise pour texte en gras-->
<u></u> <!--balise pour texte souligné-->

Dans la boîte « Output template: » j’ai saisi le code suivant :

<li> <!--ouverture de la balise "puce"-->
<a href={commenterurl}><strong>{commenter}</strong></a> <!--nom du commentateur et lien vers son site-->
a &eacute;crit&nbsp;:&nbsp; <!--a écrit-->
<em> <!--ouverture de la balise italique -->
&laquo; <!--guillemets ouvrants-->
&nbsp; <!--espace insécable-->
<a href={commenturl}>{commentsnippet}...</a> <!--extrait du commentaire et lien vers celui-ci-->
&nbsp; <!--espace insécable-->
&raquo; <!--guillemets fermants-->
</em> <!--fermeture de la balise italique--> 
</li> <!--fermeture de la balise "puce"-->

Pour voir le résultat, consultez la barre latérale

L’affichage des commentaires dans la barre latérale avec les options indiquées ci-dessus est le suivant :

<< Réduire

Lire la suite >>

Christine préparant un nouvel article m’a fait part elle aussi de ses difficultés, notamment pour faire apparaître :

&nbsp

J’ai enfin trouvé, grâce à Christine, le plugin qui fait presque ce que je veux. Il s’agit de WP-Syntax. Ce plugin affiche proprement et avec coloration syntaxique aussi bien du code html que du code php.

Pour afficher du code php

il faut saisir :

<pre lang="php"> 
<?php
  function foo() {
    echo "Bonjour le monde !n";
  }
?>
</pre>

ce qui affiche :

<?php
  function foo() {
    echo "Bonjour le monde !n";
  }
?>

Pour afficher du code html

il faut saisir :

<pre lang="html"> mon texte en html </pre>

Ajout du 2 août 2008 : pour bénéficier de la coloration syntaxique avec du code html, il vaut mieux utiliser les balises html4strict ou xml.

<pre lang="html4strict"> mon texte en html </pre>

ou

<pre lang="xml"> mon texte en html </pre>

ce qui affiche :

<i>code en italique avec la balise 'i'</i>
<em>code en italique avec la balise 'em' </em> //commentaire exemple 1
<b>code en gras avec la balise 'b'</b> /*commentaire exemple 2*/
<strong>code en gras avec la balise 'strong'</strong>
 
<ul>
	<li><a href="http://liseweb.fr/BLOG/">mon lien</a></li>
	<li><font color="#6699FF">texte en couleur</font></li>
	<li><small>petite police</small></li>
	<li><big>grande police</big></li>
</ul>

Afficher des feuilles de style

Pour afficher la coloration syntaxique pour une feuille de style, il faut utiliser la balise css

<pre lang="css"> mon exemple de feuille de style </pre>

ce qui affiche :

.wp_fichier {
  color: #100; /* couleur du texte  */
  background-color: #FFFFFF; /*double cadre sur fond blanc */
  border: 0px solid #FFFFFF; /*suppression de la bordure */
}

Numéroter les lignes

Il est possible de numéroter les lignes de code en spécifiant :

<pre lang="php"> line="1" 
<?php
  function foo() {
    echo "Bonjour le monde !n";
  }
?>
</pre>

ce qui affiche :

1
2
3
4
5

<?php
  function foo() {
    echo "Bonjour le monde !n";
  }
?>

Pour commencer la numérotation depuis un autre chiffre que le 1, il suffit de saisir le numéro souhaité.

Ce plugin permet de présenter également de nombreux autres langages.

Compatibilité avec tous les navigateurs

Un seul petit problème : cette version beta n’affiche pas correctement le code sous Firefox et Opera (navigateurs qui respectent le plus les standards du web !), ni sous Safari, lorsque celui-ci se trouve dans un bloc avec un ascenseur. Vous pouvez en voir une exemple sur la page dKret : créer une feuille de style . L’affichage sous Internet Explorer est parfait !

Ajout du 1er août 2008 : afin de permettre un affichage correct sous tous les navigateurs, je vous invite à modifier la feuille de style de votre thème en ajoutant les lignes suivantes (que Yin_Yin mentionne sur son blog) :

.wp_syntax {
  color: #100; /* couleur du texte standard */
/*les deux lignes suivantes suppriment le double cadre qui apparaît lorsqu'un bloc de code est saisi.*/
  background-color: #FFFFFF; /*double cadre sur fond blanc, donc "invisible" ;-) */
  border: 0px solid #FFFFFF; /*suppression de la bordure */
  margin: 0 0 1.5em 0;
  overflow: auto;
}
 
.wp_syntax pre {
	overflow: auto; /* permet un affichage correct du code avec tous les navigateurs même avec un  ascenseur */
}

<< Réduire