Tip : intégrer colorbox dans wordpress

Ajouter un système de visualisation de galerie dans son thème est assez simple mais il faut être rigoureux. Une petite marche à suivre est donc utile ici.

Didacticiel ou plug and play ?

Le but de cet article est de parcourir un cas pratique de mise en place d’un plugin javascript manuellement. Pour ceux qui veulent juste employer colorBox dans wordpress, il existe une solution toute faite, un plugin Wordpress beaucoup plus simple et rapide.
Télécharger le plugin "jQuery Colorbox" sur le site officiel de Wordpress

Colorbox ?

Colorbox est un système de type "lightbox". En cliquant sur la vignette dans une page web, on ouvre l’image en grand avec un commentaire et un fond partiellement obscurci. Un grand classique du web 2.0.
Comme les autres systèmes de galerie, colorbox permet de faire entrer dans ces cadres d’autres types de contenu, notamment grace à ajax.

Colorbox n’est pas le seul système existant. Je le prend ici pour ce didacticiel car il est récent, bien conçu et s’appuie sur jQuery, une des bibliothèques javascript (ou framework) les plus utilisées.

Sommaire

Pour placer colorbox dans son theme, on devra
- Télécharger le plugin
- Placer la css, les images et la feuille de script de colorbox dans le theme
- Télécharger éventuellement jQuery et le placer dans le thème
- créer sa propre feuille javascript (pour activer le plugin) dans le dossier de thème encore
- placer les codes d’inclusion javascript et css dans le header du thème

et enfin, dans l’administration de wordpress, incorporer des images (vignettes avec lien vers l’image grand format)

Ooouf. Le tout devrait prendre moins d’un quart d’heure si on fait ça dans l’ordre.

1. Télécharger

On télécharge le module de colorbox ici
Si vous n’avez pas encore utilisé jQuery dans votre thème, téléchargez le à partir du site de jQuery.

Petite remarque de compatibilité : alors que j’écris ce didacticiel (20 avril 2010) les versions de colorbox et jquery sont parfaitement compatible. Il se peut que ce ne soit plus le cas dans quelques années, pour des tas de raisons. Vérifiez donc cette compatibilité, ça évite des pleurs de rage)

2. Installer les fichiers dans le thème

Le plugin colorbox est livré avec de la documentation et des démos, ce qui est bien pratique mais un peu confusant pour le néophyte. Nous allons prendre dans le dossier juste ce qui nous intéresse :
- La version "minifiée" (compressée au maximum) du fichier javascript, qui se trouve dans le dossier "colorbox" et s’appelle jquery.colorbox-min.js.
- La css et le dossier d’images qui se trouve dans le dossier de l’exemple 1.

Nous placerons ces fichiers et dossiers dans le thème, dans un dossier "colorbox" pour ne pas mélanger ces fichiers au reste de votre thème.
Si vous n’avez pas encore jQuery (absolument nécessaire au bon fonctionnement de colobox), placez le au premier niveau de votre thème.

3. Charger Jquery et colorbox dans le code du header

Il faut maintenant charger ces fichiers dans le html, pour pouvoir l’utiliser partout où c’est nécessaire. Pour cela, on ouvrira le fichier "header.php" (si votre thème l’utilise, ce qui est probablement le cas) et on placer les codes suivant à l’intérieur de la balise "head" :

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/jquery.js"></script>
        <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/colorbox/jquery.colorbox-min.js"></script>
        <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/monscript.js"></script>
        <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/colorbox/colorbox.css" />

Ça devrait donner quelque chose comme ça :

4. Activer ColorBox et paramétrer son comportement

Il nous reste a créer un fichier "monscript.js" que l’on placera au premier niveau du thème (on a déclaré dans le head son existance ici plus haut). On y placera le code suivant :

$(document).ready(function(){
$("a[href$='.jpg'],a[href$='.png'],a[href$='.gif']").colorbox({transition:"none", maxWidth:"80%", maxHeight:"80%"});
});

Ce code dit : "lorsque la page est chargée, active colorBox sur tous les liens qui mènent vers une image, que tu affiches dans une fenêtre de maximum 80% de la hauteur et largeur de la fenêtre du navigateur". Ce code va donc affecter automatiquement tous les liens vers des images, qu’ils soient un texte ou une image.

5. Insérer des images dans les articles

La machinerie est en place. Il faut maintenant l’activer en plaçant des images dans vos articles. Attention a bien vérifier que le champ "cible du lien" est rempli avec l’adresse web du fichier, pour que colorBox puisse s’appliquer.
Attention : Si vous voulez placer une légende pour l’image, il faut placer une balise title sur le lien (la balise a) et non sur l’image. Editer dans ce cas le code html du texte de l’article.

Plus loin avec colorBox

ColorBox peut être personnalisé plus loin au niveau de l’affichage.
On peut le modifier niveau des effets, en faire un diaporama, etc. On modifiera pour ça le script d’activation minimal ici plus haut avec des paramètres, voir pour ça la page de documentation ou les exemples.
ColorBox peut aussi ouvrir des pages en ajax plutôt que de simples images, voir encore une fois la documentation à ce sujet.

Il est possible aussi d’ouvrir et de modifier le fichier css du plugin pour modifier bords, couleurs, fond du bloc. et y placer d’autre boutons.

Forum

  • de guedreg par coacmisas , 7 février 2013

    arengaba en la plaza pública, comprar viagra en farmacias se examina la de Catalina, . cet acide eft aireflé par le fel de tartre. generique cialis tre le folecifme que cet auteur a fait en mettant .

  • ran donni par chlecdavo , 7 février 2013

    se reúnen en las bancas de la Alta Escuela con, comprar viagra quieren llegarlos a la boca, . Sarcey fut un brave homme, cialis EST ASSURÉMENT TOUT A FAIT RIDICULE ET INJUSTE, .