Dimanche dernier, je me suis décidé à installer la dernière version de WordPress, la 3.0.1. Passage de version majeure, puisque l’on passe de la 2.x à la 3.x.

Côté nouveautés, on peut citer notamment la fusion avec WordPress MU (Multi-Utilisateurs) et donc la possibilité de gérer plusieurs sites avec une seule installation, une nouvelle gestion des menus (si le thème le supporte), l’amélioration de la taxonomie (classification plus fine) et enfin un nouveau thème par défaut exploitant toutes les nouvelles fonctionnalités.

Bref peu de choses qui m’intéressent vraiment, tant que je garde mon thème actuel… mais cela peut donner l’envie de partir d’un nouveau thème et de le personnaliser, probablement en utilisant les widgets, ce qui n’est pas le cas pour l’instant.

Toujours est-il que la migration s’est plutôt mal passée. La phase de mise à jour en elle-même s’est bien passée, deux clics une fois les fichiers copiés… la base de données est mise à jour… et hop, retour au blog, oui mais :

• Tous les caractères accentués sont mal affichés (articles, titres, catégories, etc…)
• Impossible d’afficher la page d’administration (page blanche)

Continuer la lecture… Mise à jour WordPress 3.0.1 difficile →

Je n’étais pas vraiment satisfait de la manière dont les résultats d’un recherche sur le blog étaient rendus : tous les articles concernés étaient listés mais affichés en entier, ce qui pouvait nécessiter plusieurs pages selon le nombre d’articles correspondants, et n’était pas vraiment pratique.

En fait, WordPress met à notre disposition deux fonctions : the_content() ou the_excerpt().

La première affiche tout l’article sauf s’il y a un tag <!–more–> dans l’article, ce qui correspond au « Lire la suite », et qui permet de n’afficher par défaut que le début de l’article. Mais je ne l’utilise que pour les articles très longs.

La seconde ne va afficher que les 55 premiers caractères, sans images, et ajoute à la fin un […].

J’ai donc modifié le fichier search.php de mon thème, en remplaçant dans la boucle principale la fonction the_content() par the_excerpt().

Voilà, c’est aussi simple que cela.

La fonction the_excerpt() n’accepte pas de paramètres, on peut toutefois modifier le nombre de caractères renvoyés ainsi que le […] ajouté à la fin en déclarant de nouvelles fonctions dans le fichier functions.php du thème. Voir cette page pour le détail, en ce qui me concerne, j’ai laissé les valeurs par défaut.

Voilà longtemps que je voulais améliorer la façon dont les commentaires sont affichés sur le blog. Je m’étais contenté de ce qui était fourni pour le thème utilisé, modifiant simplement la police, les couleurs… Bref, voilà ce que cela donnait :

Après un peu de recherche sur le net pour voir ce qui se faisait, de modifications sur la feuille de style et le fichier comments.php (pour défnir les styles à utiliser et ajouter l’avatar), de retouche d’images avec Gimp, voilà ce que ça donne maintenant : c’est quand même plus joli, non ?

Réalisation

Au départ, j’ai voulu copier-coller des styles tels que trouvés sur le web… Mauvaise méthode (de fainéant) qui n’a donné aucun résultat probant. Il faut partir du thème existant, identifier les styles utilisés, et les modifier tranquillement.

Pour ce faire, je me suis replongé dans le livre « CSS 2 – Pratique du Design web », que j’avais lu quand j’ai commencé à faire mon site. Un très bon livre pour s’initier et comprendre le CSS et les feuilles de style.

Le cadre des commentaires est réalisé avec deux images de fond : j’ai récupéré des images sur un site, puis avec Gimp, les ai ajusté à mes besoins : largeur, hauteur, couleur, fond transparent.
Puis il faut définir deux blocs, l’un servant à afficher l’image du haut et un second pour l’image du bas. Cette dernière doit être d’une hauteur suffisante pour couvrir un long commentaire, car elle glissera pour accompagner le bloc du texte (je l’ai mis à 1500 pixels, ça devrait aller !).

Dans le fichier comments.php de mon thème je vais ensuite modifier l’affichage des commentaires en appelant deux classes « top_comment » et « bloc_comment », le second étant imbriqué dans le premier) :

<div class="top_comment">
<div class="bloc_comment">
<?php comment_text() ?>
<?php if ($comment->comment_approved == '0') : ?>
Votre commentaire est en attente de modération.
<?php endif; ?>
</div>
</div>

Et voilà les deux classes définies dans le fichiers style.css :

.top_comment {
 padding-top: 55px;
 margin-top: 5px;
 background: url('images/top-comment.png') left top no-repeat;
 }

.bloc_comment {
 padding-bottom: 15px;
 padding-top: 10px;
 background: url('images/bloc_comment.png') left bottom no-repeat;
 }

Les valeurs de padding et de margin permettent d’ajuster l’affichage des images selon les besoins. Et voilà, le tour est joué !