OSD propulsé sur wordpress.org

Je profite du répertoire de plugins de WordPress.org pour publier la nouvelle version du plugin OSD. J’ai fait quelques petites modifications car l’ancienne version provoquait un petit bug qui rendait les pages non valides XHTML.

Ce plugin permet de créer un Open Search Document pour votre blog. C’est une norme qui permet d’interfacer le système de recherche de votre blog. Actuellement, Firefox et IE7 utilisent cette norme pour compléter les différents moteurs de recherche.

Installation

  1. Téléchargez le fichier osd.php dans le répertoire /wp-content/plugins/
  2. Activez le plugin à partir de la page Plugins
  3. Remplacez les balises < header > par < header profile="< ?php head_profile(); ? >" > dans vos thèmes
  4. Rechargez vos permaliens à partir de la page Options > Permaliens

Téléchargement osd.zip

Version en perpétuelle évolution

Un petit plugin pour les %category%

J’ai écris un bout de code pour corriger le bug des %category% de WordPress.

Ce petit bout agit comme un patch et permet de corriger d’un bloc tous les bugs relatifs aux permaliens des plugins géniaux, comme Identikit, Ultimate Tag Warriors et plein d’autres.
Il permet aussi de réellement spécifier la base des Catégories. Par défaut, si vous laissiez ce champ vide, WordPress pointe vers une url du type http://example.org/category/uncategorized/. Maintenant, vous pouvez faire http://example.org/uncategorized/.
Enfin il fait des redirection 301 des urls de type category/ vers les nouvelles urls des pages.

Télécharger
Tru Cat Rewrite

Version beta du 14 avril 2007

Le bout du tunnel

C’est presque ça. A l’aveugle, j’ai pu avancer dans l’écriture des nouvelles versions de mes deux plugins fétiches. Ils ont été testé et fonctionnent actuellement sur des sites en production. Il reste essentiellement de la documentation à écrire, et rationaliser / optimiser le code.

Lightbox+

Lightbox+ passe en version 0.1.2 . Il fonctionne aussi bien sur WordPress 2.0 que WordPress 2.1. Cette version est plus lourde que la précédente, mais pour le plus grand bien. Elle permet de garder les attributs des images. Vous pouvez donc bidouiller vos images avec votre WYSIWYG préféré, ça ne sera pas tout cassé.

Tester
lightbox-plus.zip

Version beta du 14 mars 2007

Identikit 2

Alors là c’est carrément une version 2. Ce plugin est le plus abouti pour la gestion de tunings pour le blog. Il devient un plugin hautement configurable d’un nouveau genre. En gros, Identikit est une classe qui propose différentes fonctions pour gérer des images, css et d’autres petites choses. Seul, il ne fait rien. Il faut le surcharger de différents « sujets » qui manipulent un aspect, une notion. Actuellement, j’ai écrit ces sujets :

  1. Utilisateur : Pour télécharger les avatars d’un utilisateur (auteur et commentateur). Ce sujet maitrise ces sources : favatars, gravatars, pavatars, zimavatars, buddy’s icon de FlickR, avatars de 30 boxes, avatars de MyBlogLog. De plus, il a une petite interface d’administration pour censurer des avatars.
  2. Catégorie : Pour assigner une couleur (dont sa CSS correspondante) et une icône a une catégorie.
  3. Articles : Pour assigner des collections d’illustration à des articles
  4. Favicon : Pour afficher le Favicon du site
  5. hCard : pour afficher la hCard de l’auteur d’un article

Ce plugin est toujours en cours de traduction & documentation. Son fonctionnement n’est assuré que sur des sites WordPress 2.1.

Tester
Identikit 2

Version beta G du 5 juin 2007

Dès que possible, je sortirai de belles versions officielles.

Des priorités plus prioritaires

Je pensais mettre à disposition la nouvelle version d’Identikit avant le 1er janvier 2007. Mais il se trouve que j’ai trouvé extrêmement rapidement un nouveau chez moi.

Donc j’attends que mon FAI me connecte dans mon nouveau chez moi, et consacre toute mon énergie à arpenter les magasins d’ameublement. À force de me voir, les caissières d’Ikéa me reconnaissent. Bientôt elles me salueront et me demanderont des conseils sur les canapés.

Mais ceci dit, le nouveau plugin est resté au même point de développement qu’il y a un mois. Je dois corriger un gros bug qui créé un tas d’image à l’insu de l’administrateur, et finir de corriger les anglicismes.

Pour les curieux, je met à disposition la version de développement, mais elle n’est pas à utiliser en production, tout peut-être amené à changer. À priori cette version fonctionne très bien sur un PHP5 et Apache 1.3 avec les permaliens.

Tester
Identikit 2

Version alpha du 19 janvier 2007

Si vous la téléchargez et que vous la tester, pouvez-vous notifier les bugs dans les commentaires de ce billet ?

Un léger aperçu d’Identikit 2

Trois semaines sans nouvelles. Je travaille trop. Je fignole un petit site interne tout en WordPress. Et pour cela, j’ai réécris le plugin Identikit. J’ai écouté les désidérata de mes petits camarades, j’ai pris mon courage à deux mains, mis à plat mes idées, et ai retenu plusieurs axes d’améliorations : Modularité, Sécurité, Rapidité, Internationalité.

<h3>Modularité</h3>

Pour les bloggueurs, le plugin ne se contentera plus de gérer les avatars utilisateurs. Actuellement, il est capable de gérer les avatars utilisateurs (local, gravatar, pavatar, favatar), de gérer les favicons, d’illustrer les différents articles, et d’illustrer les catégories. Et tout ça est hautement configurable.

Pour les bidouilleurs , j’ai tout cassé pour tout rationaliser. Le script principal est transformé en une seule classe. Dedans s’y trouve toutes les méthodes standardisées et les créations à la volée. L’avantage est de ne déclarer la classe qu’une seule fois, au lieu de créer une nouvelle instance à chaque appel (ceci optimise considérablement les perfs). Tous les traitements sont consolidés. Cette classe monte d’autres classes qui traitent des différentes parties. Les différentes fonctions des thèmes appelleront directement les méthodes de la classe principale.

<h3>Optimiser</h3>

J’ai tout réécris. Rien que ça. Dans le monde de l’invisible, avec le concours de Jeena Paradies, j’ai réécris le script qui débusque les pavatars dans les pages des utilisateurs. Il m’a aussi fait par d’une lacune de sécurité. Maintenant, le script s’assure de ne télécharger que des images. J’ai écris des alternatives pour essayer de rendre les scripts utilisables dans d’autres configurations (curl sinon fgets, imagemagick sinon gd2…).

Dans le monde du visible, l’ancien script ramait lorsqu’une personne laissait un message sur le blog. C’est parce que le script de téléchargement s’effectuait avant le rechargement de la page de réponse. Maintenant il n’y a plus ce soucis par une triche odieusement astucieuse. Au lieu d’afficher immédiatement l’avatar de l’utilisateur il y aura une petite icône de remplacement (c’est ce qui fait toute la différence !). Et c’est cette petite icône qui se chargera de lancer le script, ne pénalisant pas la navigation de l’utilisateur.

Sinon je tente de rendre possible l’usage de ce script avec les pseudos jolies urls avec un index.php Enfin pour être en accord avec les specs des pavatars, je tente d’écrire une interface de modération des avatars.

<h3>Internationalisation</h3>

Puisque la demande internationale est forte, je vais rendre le biniou international.

<h3>The resume in English</h3>

Excuse my English. Three weeks without a word… Well, i’m working to much !

I’m making a little website with WordPress for my job. To make this, i’m rewriting the plugin Identikit. I have listen to wishes from every folks, taken my courage in both hands, sended my ideas back to the drawing board and keep 3 axes for improvement : Modularity, Optimisation and Internationalization

Actually, the prototype can manage users’ avatars and pavicons. add icons to the articles, and icons & colors to the categories. And everything is customisable. I’ve broken everything for rationalize everything. The main script is now a unique class with all methods mutualised. This main class is onl loaded one time by the system, instead of creating a new instance for every calls. This class is overloaded by differents class (one by subject).
I’m optimising the code for making it more flexible and secure. Also i’m optimising the navigation for the visitors. The autodiscoveries functions will not slow down pages. And for the end, i will make this plugin internationalizable.

Open Search Document

Tiens tiens tiens, IE7 et Firefox 2 sortent au même moment. Et ces deux navigateurs supportent l’Open Search Document.

Késako ?

C’est un standard xml qui permet d’ajouter des moteurs de recherches sur ces deux navigateurs. La document est accessible sur le site dédié www.opensearch.org.

Donc comme ça ne mange pas de pain, j’ai écrit le plugin qui le fait bien :)

Installation

  1. Téléchargez le document osd.phps, et renommez le en osd.php ;
  2. déposez le dans votre répertoire des plugins ;
  3. puis via votre interface d’administration, activez-le
  4. enfin, rechargez vos liens permanents ;
  5. voilà !

Maintenant, quand un utilisateur de Firefox ira sur votre site, il aura la possibilité d’installer votre moteur de recherche. Si vous souhaitez afficher la petite image qui accompagne le moteur de recherche, mettez à la racine de votre site soit une favicon.ico, soit une favicon.png. Mais je vous rappelle que j’ai écrit un plugin qui permet de créer ce fameux favicon :)

Pour IE7, je ne peux pas tester (Mac User). Je vous fait confiance pour me remonter vos remarque concernant ce navigateur.

Téléchargement osd.zip

Version en perpétuelle évolution

Lightbox+

Anne se plaint de son site. Il n’est pas aussi simple que les espaces MSN. Elle aurait aimer que le script Lightbox soit encore plus coool. Soit, je vais le rendre plus cooool que Fonzy.

Le plugin que je propose créé automatiquement des groupes de diapositifs par billet, redimensionne la visionneuse à la taille de l’écran, et permet de changer d’image toutes les 10 secondes. Avec ce système souple, le blog de WordPress n’a pas de soucis à se faire. Il peut gérer ses images très simplement. Enfin, le lecteur n’a qu’à cliquer sur le petit bouton diaporama et se laisser naviguer entre les différentes photos.

Titres et descriptions

Anne aime triturer ses photos, elle passe des heures à réécrire les titres et descriptions (le plugin Tam Attachment permet de le faire très simplement). Seulement, les fonctionnements de Lightbox et de WordPress ne permettent pas de mettre à jour les billets automatiquement avec les nouvelles données éditoriales. Elle était obligée de réécrire ses textes dans ses billets.

C’est fait. J’ai écrit un petit bout de code pour que les attributs de ses liens et de ses images soient automatiquement mis à jour lors de l’affichage sur le site.

Les images sont plus grandes que l’écran

Le second défaut de Lightbox est qu’il ne redimensionne pas les images trop grandes pour les écrans. N’ayant pas de logiciels de manipulation d’image, Anne dépose directement sur son site les photographies originales de son appareil numérique.

Pour cela, j’ai complété le code du javascript pour qu’il redimensionne les images plus grandes que l’écran.

Diaporama

Dernière critique : pourquoi il n’y a pas de diaporama comme sur MSN space ? C’est vrai ça ! Pourquoi ? Bin j’ai encore adapté le code pour qu’il change automatiquement d’image toutes les 10 secondes. Maintenant il y a un petit bouton sur la visionneuse. En cliquant dessus, l’utilisateur active le diaporama.

Installation, Utilisation

Décompressez le répertoire dans votre répertoire des plugins. Puis, via l’interface d’administration, activez le plugin lightbox+. C’est tout ! Il n’y a pas d’autres boutons, d’autres paramètres, utilisez WordPress comme d’habitude. les différents scripts se chargent de formater vos images lors de l’affichage sur votre site.

Il n’y a plus d’excuse ! Testez !

Téléchargement lightbox-plus.zip

Version 0.1.2 du 25 octobre 2006

Corrections

  • 23/10/06 : Correction des urls
  • 25/10/06 : Correction du formatage des descriptions, et mise à jour de la « cartographie » sur le script

Identikit

J’avais déjà publié une série de plugins pour déterminer des avatars distants. Ces plugins fonctionne bien, hormis un problème de performance lors de la soumission d’un commentaire. Seulement, j’avais besoin de souplesse pour administrer ces images. Enfin, j’avais envie d’écrire un plugin qui ne se contente plus de n’afficher que des images, mais qui offre une véritable interface d’administration.

Donc j’écris ce nouveau plugin pour qu’il gère toujours les pavatars, favatars et gravatars, mais qu’il intègre aussi de nouvelles notions : les favicons et les avatars locaux. Voilà ! Concrètement ce plugin est utilisé pour créer les identités visuelles de chaque contributeurs (auteurs et commentateurs). De plus, il permet aux auteurs d’héberger leurs images sur le site (donc sans passer par un site distant), avec une jolie interface privée. Enfin, il insère automatiquement les bonnes balises dans le front site.

Sémantique

J’use et abuse des urls rewritings qu’offre WordPress. En effet, les urls fournies par le plugins ne pointent pas vers le répertoire de stockage, mais vers une url lisible par les humains.

Les xhtml générés comportent toutes les classes css microformatées pour déclarées des images dans les hcard et hresume.

J’ai intégré un widget pour créé une hcard dans les menus de navigations.
le-widget
Le code généré est :

<li id="afficher-lauteur" class="widget widget_author">
    <h3 class="widgettitle">Xavier</h3>
    <ul class="vcard entry-author author">
<li class="fn" style="display:none">Xavier</li>
        <li class="logo">
            <a class="url fn" href="%5B...%5D/author/admin/" title="[...]">
            <img src="%5B...%5D/author/admin/pavatar.png" class="pavatar logo" alt="admin"></a>
        </li>
        <li class="summary">I am the one !</li>
    </ul>
</li>

Enfin, dans le cadre des avatars locaux, ces avatars sont déclarés comme étant des Pavatars.

Performances accrues

Maintenant, au lieu d’afficher des images distantes, il héberge directement les images qu’il a trouvé. D’autre part, il utilise le système de cache de WordPress pour accélérer le calcul.

En gros, quand quelqu’un poste un commentaire, le système d’abord analyser les caches associés à ses informations personnelles. Si il en trouve un, il l’affiche. Sinon, le système va essayer de trouver un avatar distant. Si il le trouve, il le télécharge et créer un cache avec un long délais avant expiration. Sinon il crée un cache avec un court délais. Ainsi, le système fait l’économie de calcul inutiles à chaque soumission de commentaires.

Utilisation

Pour afficher l’avatar du commentateur il suffit d’insérer l’un de ces codes dans la boucle des commentaire :

comment_author_avatar($r); affiche le code xhtml redimensionné à $r pixels du commentateur actuel.
$avatar = get_comment_author_avatar($r); retourne l’adresse de l’avatar en php

Pour afficher l’avatar pertinent de l’auteur, il suffit d’insérer ce code dans la boucle author ou single :

the_avatar($r); affiche le code xhtml redimensionné à $r pixels de l’auteur actuel.
$avatar = get_the_avatar($r); retourne l’adresse de l’avatar en php

les-commentaires interface-auteur interface-favicon

Enfin

Identikit est aussi le titre du dernier album des Burning Airlines. Pour tous les amoureux du DC Sound, je ne peux que leurs recommander l’écoute de cet album.

Téléchargement identikit.zip

Version 0.1.1 du 15 octobre 2006

Tabindex automatiques

Comme 5000 autres adhérents, je me suis déclaré sur Opquast. Ce site propose une grille d’évaluation de bonnes pratiques. Pour un site naissant, PriceMister s’en tire assez bien, j’ai validé la moitié des questions. Pourtant, je pêche sur la cinquième, qui dit que  » La navigation reste possible sur l’ensemble du site en utilisant exclusivement le clavier ». Soit sans manipuler la souris.

Il existe heureusement des attributs html qui permettent de naviguer avec la touche tabulation, ou des combinaisons de touches du type alt+lettre. C’est pourtant simple de passer cette 5me étape !

Oui et non

WordPress ne gère pas les tabindexs ni les accesskeys en php. Les coder en dur est une solution, mais bien que le PriceMister est épuré, il reste touffu en petits modules (formulaires & groupes de liens). Par exemple, sur certaines pages, Il peut y avoir :

  • le power search dans l’en-tête
  • les pages dans l’en-tête
  • la navigation dans la barre latérale
  • la gestion du compte dans la barre latérale
  • l’upload d’images et le formulaire de commentaires dans le corps de la page

Avec autant d’élément, il est difficile de coder en dur les attributs tabindex de chaque champ. De plus, il n’existe pas de plugin WordPress pour celà, c’est pourquoi je propose le mien. Il suffit d’insérer ce bout de code dans le fichier function.php de votre thème.

function tabindex($arg='') {
if(is_int($arg)) {
$_SESSION['$tabindex'] = $arg;
echo "tabindex='". $_SESSION['$tabindex'] ."'";
} else {
$_SESSION['$tabindex']++;
echo "tabindex='". $_SESSION['$tabindex'] ."'";
}
}
function tabindexStart() {
$_SESSION['$tabindex'] = 0;
}
add_action ('init','tabindexStart');

Une variable de session $_SESSION[‘$tabindex’] qui permet de garder une information persistante. C’est dans cette fonction que je stocke la dernière occurence de ma boucle.
Elle est réinitialisé lors du chargement de la page. Ensuite, à chaque appels de la fonction, elle s’incrémente d’une unité. Il suffit alors de l’intègrer dans mes fichiers de templates ainsi :



qui sera rendu ainsi :



Cette méthode fonctionne parfaitement pour les pages structurées logiquement. En cliquant sur la touche tabulation, le focus saute sur l’élément qui suit dans la page.

La fonction peut accepter comme argument un nombre entier, afin de mentionner l’ordre de recherche par tabulateur. En effet, en passant d’un élément à l’autre avec le tabulateur, c’est d’abord l’élément avec le plus petit chiffre tabindex qui sera trouvé, puis le deuxième…

Par exemple, ma page est structurée ainsi :

  1. en-tête : un power search, des pages annexes,
  2. corps de texte avec un formulaire de commentaires
  3. barre de navigation comporte la réelle navigation

Dans cet exemple, je souhaite que la navigation soit discontinue, donc j’applique ces fonctions dans le 1er éléments de chaque partie :

  1. power search > tabindex(« 1 »);
  2. navigation > tabindex(« 10 »);
  3. pages annexes > tabindex(« 100 »);
  4. formulaire de commentaire > tabindex(« 200 »);

Et là c’est magique !