Ajouter une seconde zone de widgets

Depuis la version 2 (il me semble) de WordPress, si le thème est bien fait, on peut depuis le panneau d’administration ajouter des widgets dans certaines zones bien définies. Dans le thème par défaut, il y a une zone unique pouvant accueillir des widgets, qui se trouve dans la barre latérale. Mais on peut vouloir en ajouter d’autres.

Pour ajouter une nouvelle zone, il faut effectuer deux modifications dans le code du thème :

1. premièrement, il faut “enregistrer” une nouvelle zone pour que celle-ci soit disponible dans le menu de sélection des zones. Pour cela il faut en général se rendre dans le fichier functions.php du thème et rechercher où est appelée la fonction register_sidebar (dans le thème par défaut, c’est tout en haut du fichier) et l’appeler une fois de plus pour enregistrer une nouvelle zone.

   Cette fonction peut optionnellement prendre en argument un tableau de paramètres permettant de personnaliser le code HTML qui enrobera la liste de widgets. Dans la plupart des cas on n’en a pas besoin mais au cas où c’est bon de savoir que c’est possible, notamment pour éventuellement spécifier une classe particulière à l’une ou l’autre zone en vu d’appliquer des styles différenciés.

   Une fois cela fait, la nouvelle zone est disponible dans le menu de sélection des zones du panneau d’administration (cf la capture d’écran ci-dessus).

2. dans un deuxième temps, il faut inclure cette zone dans le rendu de la page à un endroit ou un autre (sinon, forcément, ça sert pas à grand chose). Pour cela il suffit d’intégrer le code suivant dans l’un des fichiers de template :
   <?php dynamic_sidebar(n); ?> en prenant garde de bien remplacer le paramètre “n” par un entier représentant le numéro de la zone que vous voulez afficher.

   Par exemple, si vous venez d’ajouter une zone et qu’il y en avait une seule avant, la nouvelle aura fort logiquement le numéro 2 et le code à insérer sera le suivant : <?php dynamic_sidebar(2); ?>.

N’afficher certaines choses que sur la page d’accueil

Afin de ne pas trop surcharger les pages on peut ne vouloir afficher certaines informations et liens que sur la page d’accueil. Par exemple sur ce site, les encarts “Mes autres sites”, “News du serveur” et “Divers” ne s’affichent que sur la page d’accueil (et les pages de contenu fixe).

Pour restreindre l’affichage d’une portion de code d’un fichier de template, c’est très simple :

<?php if ( [CONDITION] ) { ?>
[CODE HTML À RESTREINDRE]
<?php } ?>

WordPress propose quelques fonctions PHP qui testent dans quel type de page on se trouve et qui peuvent servir à composer la condition (qui remplacera la portion “[CONDITION]” du code ci-dessus). Ces fonctions sont définies dans le fichier wp-includes/query.php et comprennent notamment :

• is_home() disant si l’on se trouve sur la page d’accueil.
• is_page() disant si l’on se trouve sur une page de contenu fixe.
• is_search() disant si l’on est dans la page de recherche.
• is_404() disant si l’on se trouve sur la page d’erreur 404.
• etc.

Pour composer la condition, il suffit d’appeler une ou plusieurs de ces fonctions séparées par une double barre verticale (||) qui représente un “ou” en PHP.

Par exemple pour ajouter une zone de widgets qui ne sera affichée que sur la page d’accueil et les page de contenu fixe, on utilisera le code suivant :

<?php if ( is_home() || is_page() ) { // Home and pages only. ?>
   <?php dynamic_sidebar(2); // Home and pages sidebar. ?>
<?php } ?>

Et ça marche que pour la barre latérale ?

Bien entendu ces deux “astuces” sont valable aussi bien pour la barre latérale que pour n’importe quelle autre partie de votre site. Mais c’est dans la barre latérale que c’est le plus souvent utilisé.

SIDPLAY s’installe avec une banque de musiques provenant de plusieurs centaines de jeux et j’y ai retrouvé a plupart des jeux que j’avais joué à l’époque : Boulder dash, Underwurlde, G.I. Joe, Ghostbusters, Fist II, Summer Games… Ça rappelle des souvenirs.

Bon après rapidement ça saoule et je coupe le son

Sinon, pour les nostalgiques du Commodore 64, y a aussi l’affichage en mode “Nostalgie” sur le navigateur web Opera…

Que dire ? Pas grand chose… Si ce n’est que WordPress s’est avéré plutôt pas mal : je me suis essayé au développement de plugins et c’est assez sympathique (comparé à développer des MODs pour phpBB2, c’est un vrai plaisir : le code est organisé dans cette optique !).

C’était mon premier site avec WordPress, entre temps deux autres ont vu le jour :

• d’une part la page d’accueil du serveur dédié qui héberge ce site ainsi que mes divers forums.
• d’autre part, depuis quelques semaines, un petit site associé à EDForum : Cultur-ED. Fort logiquement il parle de séries TV et un peu de cinéma, au travers d’articles écrits par les membres du forum.

Voilà voilà, un petit site sans prétention qui fait son chemin.

J’ai intégré la correction de ce bug à aux différentes corrections regroupées ici.

J’ai souvent constaté en recherchant des plugins pour WordPress ou en lisant des discussions sur des forums que pour afficher des balises “en clair” sans qu’elles soient traduites, les gens ajoutaient dedans une étoile ou un point. C’est une ruse qui fonctionne, certes, mais ça nuit à la lisibilité et en cas de copié/collé, il faut retoucher le code, c’est pas pratique.

Première solution

Une autre solution que j’ai longtemps utilisée consiste à intercaler une autre balise dedans qui empêchera le parser de reconnaitre la balise que l’on veut afficher.

Par exemple, pour afficher les balises bbcodes

[b]bla[/b]

sur un forum, on peut mettre

[b[b][/b]]bla[[b][/b]/b]

Cependant cela produit un code non-valide XHTML, puisqu’on se retrouve avec une balise HTML vide, ce n’est donc pas très élégant.

Seconde solution

Une autre façon de faire, est d’utiliser les entités HTML pour remplacer les crochets, chevrons ou accolades qu’on veut ne pas voir interprétées. Pour afficher

[b]bla[/b]

on écrira donc

[b]bla[/b]

Les différentes entités sont facilement trouvables sur le net, notamment ici.

Les plus intéressantes étant :

[ -> [
] -> ]
&#60; ou &lt; -> <
&#62; ou &gt; -> >

L’inconvénient c’est que suivant les scripts, les entités sont automatiquement remplacées par les caractères qu’elles représentent et dans ce cas, ben… ça sert à rien \o/

En tout cas sur WordPress, ça marche et ça me semble plus élégant que les deux autres solutions.

• la prise du chargeur est quand même sacrément bien pensée. En effet, elle est aimantée et non “clipsée”, vissée ou autres, ce qui a deux avantages : d’une elle est nettement plus facile à brancher, même à tâtons dans le noir et de deux, si on l’accroche, elle se débranche sans dommages et sans emporter l’ordinateur avec elle (tout en étant bien fixée quand même). Juste ce qu’il faut, quoi.
• le touchpad qui avec deux doigts gère l’équivalent de la molette de la souris, c’est cool et on s’y habitue très vite. De plus, pour remplacer le bouton droit, on peut activer une option qui le simule en posant deux doigts sur le touchpad et en cliquant (nettement plus simple que de passer par la touche cmd)
• la barre de menu séparée de la fenêtre et toujours placée en haut de l’écran, j’ai encore un peu de mal à m’y faire : j’ai l’habitude de l’avoir à portée de main pour les petites fenêtre. Là il faut aller la chercher ailleurs… Globalement, je n’y vois d’intérêt que pour les applis ayant une toute petite fenêtre (genre messagerie instantanée) et encore…
• autre truc un peut chiant : le clavier qui n’affiche pas tous les caractères qu’on trouve sur un clavier classique PC, dont certains quand même vachement importants, surtout pour un développeur : crochets, accolades, pipe… Certes, sur PC ils sont aussi pour la plupart accessibles par des combinaisons tordues à base de alt gr mais au moins ils sont affichés sur le clavier… Bon, à l’usage on s’y habitue surement, comme pour les majuscules accentuées sur PC où il faut connaitre le code ASCII (sur Mac elles sont accessibles via des combinaisons de touches), mais les avoir écrits sur le clavier, ça faciliterait quand même grandement l’apprentissage…
• quand on vient du monde PC, c’est chiant de devoir remplacer toutes les combinaisons ctrl + touche qu’on connait par cmd + touche… surtout quand la touche ctrl existe et est placée au même endroit que sur PC.

Sinon, un petit mot sur le magazine Compétence Mac qui en est à son premier numéro actuellement et dont j’ai appris l’existence grâce à Nico : ben c’est pas mal.

• déjà il doit y avoir maximum trois pages de pub dans tout le mag qui fait plus de 100 pages ce qui est un bon début.
• ensuite c’est visuellement bien présenté, ce qui ne gâche rien.
• enfin c’est bien expliqué et assez complet (ce premier numéro est une sorte de “Léopard pour les nuls” mais sans le jaune moche sur la couverture ).

Seul bémol : 7€, c’est un peu cher pour un magazine. Mais bon, quand la qualité est là et qu’on ne paye pas pour des pubs, ça passe ^^

Ça ne fait que quelques jours que je l’ai donc je n’ai testé que très superficiellement mais globalement, même si certaines choses me paraissent un peu bizarres voire laborieuses (l’absence du 2e bouton, c’est quand même pas franchement pratique, notamment), d’autres sont carrément puissantes par rapport à Windows :

• la recherche dans les fichiers est incomparablement plus performante : on tape dans le champ de recherche et on a les résultats quasiment en temps réel ! Eh oui, exit le chien qui patauge pendant trois minutes pour retrouver le fichiers hosts (celui qui est tellement bien paumé dans l’arborescence de Windows que je ne le retrouve jamais sans lancer une recherche), là on a les résultats quasiment dans la secondes et si on tape une autre lettre, le filtrage est tout aussi rapide, pas besoin de relancer la recherche. Et surtout, on trouve… ce qui est loin d’être toujours le cas avec celle de Windows. Bref, même si je n’ai pas encore testé ce que ça donne avec beaucoup de données, c’est nettement mieux sur ce point.
• la recherche… ailleurs aussi. Par exemple, dans les préférences système (équivalent du panneau de configuration de Windows), on a également un champ de recherche qui met en surbrillance les icônes correspondant à des sections qui contiennent le mot recherché. Ou bien dans l’aide des applications où l’on ouvre directement le menu concerné avec une flèche indiquant l’entrée correspondante.
• un autre truc assez sympathique : les coins d’écran actifs. Cette fonctionnalité permet en plaçant le pointeur dans un coin de l’écran d’effectuer une opération (afficher le bureau, mettre en avant toutes les fenêtre de l’application en cours, afficher une mosaïque des différentes fenêtres ouvertes…).
• le dashboard permet d’afficher des petites applications du genre météo, flux RSS, etc. sur un unique tableau de bord (je n’ai pas encore testé à fond mais apparemment l’éditeur de widgets fourni semble relativement intuitif et bien foutu).
• la gestion du multi-bureaux (du même style que ce qu’on trouve sur la plupart des environnements graphiques Linux semble pas mal également.

Bon, je ne sais pas ce que vaut Vista sur ces points (je ne l’ai pas testé et ça ne me tente pas plus que ça…) mais par rapport à XP, c’est un bien grand pas en avant.

Maintenant on va voir à l’usage si cette première impression très positive va se confirmer mais a priori c’est bien parti ^^

• la localisation de l’attribut title sur l’icône dans l’éditeur qui, de base, ne tient pas compte de fichiers de localisation autres que allemand et anglais).
• la gestion des cas où l’on ne peut pas afficher de lien dans la popup de l’éditeur (Dailymotion et Garage Tv) qui, de base, désactive le champ lien lorsque l’on sélectionne un portail pour lequel ce n’est pas géré mais ne le réactive pas quand on en sélectionne un autre.
• ajout de la gestion des liens pour Dailymotion.
• la gestion des accents dans les titres de vidéos (je vois pas trop ça marche pas de base… à tous les coups c’est encore php qui se vautre avec l’UTF-8…).

Et voici la version française (traduite par mes soins) ainsi que le fichier .pot pouvant servir à d’autres traductions du plugin : Embedded video - Version française.

Et voici la version française (traduite par Mya) ainsi que le fichier .pot pouvant servir à d’autres traductions du plugin : Democracy - Version française.

J’ai donc codé ma propre version qui me semble plus complète. Donc qu’est-ce qu’elle fait ?

• elle intègre Open search à Worpress (forcément, c’est un peu le but…).
• elle recherche automatiquement l’icône de favoris, d’abord dans le répertoire du thème courant et ensuite à la racine et à défaut prend l’icône fournie avec le plugin. L’icône recherchée est supposée s’appeler favicon.jpg, favicon.png, favicon.ico ou favicon.gif. Ce qui gère à peu près tous les cas possibles. Y compris mon cas : plusieurs sites tournant avec la même instance de Wordpress.
• le fichier XML Open search est généré à partir du template présent dans templates/open-search-xml.php. Au cas où vous voudriez le changer (c’est peu probable mais bon, à tout hasard…), ce fichier peut être surchargé en ajoutant dans votre thème un fichier open-search-xml.php. Donc pas besoin de modifier directement le plugin, ce qui facilite les mises à jour.
• le plugin est localisé (à l’heure actuelle il n’y a qu’une chaine localisée mais bon). Cf le dossier languages du plugin.

Voilà voilà, l’essentiel est dit, manque plus que le lien pour le téléchargement : Plugin Open search 1.0.

Split browser

Reurrect pages

Tab scope

On peut donc assez facilement ajouter un moteur de recherche à la liste via un simple fichier XML, du moment qu’on a l’URL et les paramètres à passer à la page de recherche.

Format du fichier xml

<?xml version="1.0" encoding="{ENCODAGE}" ?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/" xmlns:moz="http://www.mozilla.org/2006/browser/search/">
   <ShortName>{NOM}</ShortName>
   <Description>{DESCRIPTION}</Description>
   <InputEncoding>{ENCODAGE}</InputEncoding>
   <Image width="16" height="16">{ICÔNE}</Image>
   <Url type="text/html" method="{MÉTHODE}" template="{URL_RÉSULTAT}"></Url>
</OpenSearchDescription>

• {NOM} : nom du moteur de recherche. C’est ce nom qui sera affiché dans la liste de sélection du navigateur, veillez donc à ce qu’ils reste aussi concis que possible.
• {DESCRIPTION} : description du moteur.
• {ENCODAGE} : encodage du moteur et de votre fichier XML.
• {ICÔNE} : icône de 16×16 piels associée à votre moteur. Cette icône doit être encodée en base 64, par exemple via ce formulaire.
• {MÉTHODE} : méthode de passage de paramètre : POST ou GET.
• {URL_RÉSULTAT} : URL où soumettre la recherche.

D’autres paramètres optionnels existent, je n’ai détaillé là que les parties nécessaires.

Et ensuite ?

Une fois le fichier réalisé, il peut être être ajouté dans votre répertoire de Firefox, dans le dossier searchplugins (nécessite de redémarrer Firefox).

Il est également possible s’il s’agit du moteur de recherche de votre site, de faire en sorte que Firefox le détecte automatiquement (de la même manière que pour un flux RSS) en ajoutant la balise title appropriée dans la section head de la page :

<link rel="search" type="application/opensearchdescription+xml" title="{NOM}" href="{URL_DU_FICHIER_XML}">

Où {NOM} correspond au nom indiqué dans le fichier XML et où, vous l’aurez compris, {URL_DU_FICHIER_XML} est à remplacer par l’URL où vous aurez placé le dit fichier…

Ressources complémentaires

• Page dédié sur le Mozilla dev center
• Explications sur la base 64 (utilisée pour l’encodage de l’icône).

Bon, ben là j’ai pas grand chose à dire mais bon, vu le nombre de spams que j’efface chaque semaine dans les commentaires (je remercie au passage le plugin Akismet d’en filtrer la plupart), pourquoi pas faire un peu de pub moi aussi ?

Bref, je viens d’ouvrir un nouveau forum sur ce serveur, dédié cette fois-ci aux jeux de cartes à collectionner avec pour nom La Taverne de la Carte d’Or (eh oui, fallait bien un nom… et “Le forum des JCC”, ça faisait un peu trop banal…).

Donc voilà, c’était juste histoire de faire monter un peu son page rank…

Et bon weekend aux rares personnes qui passent par là…

Par ailleurs elle permet d’ajouter des effet aux différents événement sans écraser ceux qui seraient déjà présents, d’appliquer des effets de masquage/affichage progressif aux éléments, etc
Des extensions proposent différents éléments d’interface évolués comme des zones redimensionnables, un datepicker, des onglets…

Mais surtout l’ensemble est multi-navigateur, ce qui évite d’avoir à se préoccuper trop souvent d’Internet Explorer qui constitue un véritable cauchemar dès qu’on veut faire quelque chose d’un peu évolué.

J’ai fait quelques tests ces derniers jours sur le script de mes forums et c’est plutôt concluant : un code nettement plus court et vachement plus propre !

Bref, une bibliothèque qui vaut qu’on lui consacre un peu de temps.

Pour ceux qui ne s’y connaitraient pas trop en développement web, la feuille de style est un fichier qui permet de définir l’apparence d’une page web. Idéalement, lorsqu’on développe un site, la sémantique du contenu est indiquée par le code HTML qui le met en page (par exemple telle ligne est un titre, telle autre est une définition, etc) et on le décore ensuite via une feuille de style. Le langage utilisé pour écrire ces feuilles de style est CSS.

Des feuilles de style personnalisées ?

C’est là que Firefox intervient ! En effet, ce génial navigateur a une fonctionnalité qui bien que peu connue du grand public ouvre d’énormes possibilités : il permet à l’utilisateur averti de définir des feuilles de styles personnelles appliquées soit à tous les sites qu’il affiche, soit à un site, groupe de sites ou même une page en particulier (plus d’explications ici).

De base c’est masqué et pas facile d’accès mais l’extension Stylish permet de les définir très facilement. On peut ainsi modifier soi-même l’affichage des sites que l’on visite (bien entendu, cette modification ne vaut que pour votre navigateur à vous et n’est visible par personne d’autre).

On peut par exemple réorganiser les éléments en occupant l’espace inutilisé par un design prévu pour une résolution plus base, remplacer certaines couleurs insupportables, supprimer certains blocs d’affichage, etc.

Comment ajouter une feuille de style ?

1. Installez Stylish et relancez Firefox.
2. Lancez l’outil de gestion des feuilles de style :
   
3. Cliquez sur le bouton “Écrire” :
   
4. Indiquez d’abord un titre (1) qui vous servira uniquement à reconnaitre cette feuille quand vous en aurez ajouté plein d’autres. Puis copiez/collez le code CSS que vous voulez appliquer dans le cadre texte (2) et enfin cliquez sur “Enregistrer” (3).
   
5. C’est prêt. Il peut cependant s’avérer necessaire de rafraichir la page pour que les modifications apparaissent.

Tout ça c’est bien mais moi j’utilise IE…

Alors ça c’est ballot ! Parce que ça m’étonnerait fortement qu’IE gère un truc pareil, mais bon, on ne peut pas en même temps utiliser un navigateur totalement dépassé, ou plus généralement un produit Microsoft, et espérer qu’il soit à la pointe de l’innovation…

Et je n’en ai pas entendu parler pour les autres navigateurs tels qu’opera ou safari… Cela dit, rien ne vous empêche de chercher et de faire part de vos découvertes.