Publié par le 13 octobre 2014 • 75 Commentaires

Aujourd’hui j’accueille Marie-Eve Louvel, la gérante de Feelweb Formation et auteur du site Les doigts dans le net.

En tant que grande utilisatrice de WordPress, Marie-Eve a désiré partager son expérience par la présentation d’un plugin qui me semble bien pratique : Document Gallery.

Je ne vous en dis pas plus et je laisse la parole à Marie-Eve :

À la demande de plusieurs lecteurs, j’ai cherché et testé un plugin pour créer une galerie de documents téléchargeables.

J’avais déjà expliqué la manipulation manuelle pour créer un lien afin de proposer un fichier en téléchargement à ses visiteurs.

Mais ce tutoriel demandait un peu de technique (HTML, CSS, utilisation de FileZilla), ce qui n’est pas du goût de tout le monde (même si ça présente l’avantage de contrôler totalement le rendu).

Voyons une solution automatisée pour proposer des fichiers en téléchargement à vos visiteurs grâce à un plugin pour WordPress.

Présentation et installation de Document Gallery

Document Gallery est le meilleur plugin que j’ai pu trouver pour obtenir cette fonctionnalité. Il a été créé par Dan Rossiter.

Avec plus de 30 000 téléchargements, un support actif (via l’onget Support de la fiche du plugin sur WordPress.org) et une mise à jour récente, ce plugin réunit tous les critères pour un « bon plugin ».

J’entends par là « un plugin qui ne va pas être abandonné dans l’année et/ou qui ne va pas faire planter votre site ».

Il s’installe normalement, comme tout autre plugin :

Installation Document Gallery

  1. Entrez le nom du plugin dans le champ libre en haut de la page
  2. Cliquez sur « Installer maintenant » sur l’encart correspondant au plugin désiré

Note d’Alex : Pour apprendre comment installer un plugin en détail, cliquez ici.

Fonctionnement du plugin Document Gallery

Ce plugin permet d’insérer une galerie de documents dans n’importe quelle page (ou article) au moyen du shortcode :

Remarque : Dans la suite de ce tutoriel, je prendrai pour exemple la construction d’une galerie de documents dans une page. Bien que ce plugin soit également utilisable dans un article, je ne le mentionnerai pas à chaque exemple car mes explications vont vite devenir lourdes ! Retenez simplement que tout ce qui est présenté ici est également valable pour les articles out tout autre type de contenu.

Voici un exemple de galerie :

Document Gallery front office

WordPress insèrera dans la galerie tous les documents (PDF, documents Excel…) qui sont attachés à la page.

Pour qu’un média soit attaché à une page, il suffit de l’envoyer via cette page. Je vous montre comment un peu plus bas dans cet article. Mais avant cela, jetons un oeil à la page de configuration.

Configuration de Document Gallery

Rendez-vous dans le menu Réglages > Document Gallery pour configurer le plugin.

La configuration par défaut fonctionne bien dans la majorité des cas.

Elle permet de créer une gallerie de tous les documents (sauf les images) qui sont liés à une page, classés par ordre d’insertion dans la galerie de médias et téléchargeables en un clic pour le visiteur.

Voyons quand même ce que signifient ces options, cela nous sera utile pour modifier le comportement par défaut.

Configuration Document Gallery

  • attachment_pg : quand votre visiteur clique sur l’un des documents, il sera renvoyé vers une page de votre site contenant le document, plutôt que sur le document lui-même. S’il souhaite le télécharger, il faudra qu’il clique à nouveau sur le document. Comme cette option rajoute un clic, je ne vous la conseille pas dans 80% des cas. Cependant, elle peut s’avérer utile selon votre utilisation. Testez !
  • descriptions : la description (champ « description » du gestionnaire de média) s’affichera sous chaque document au sein de la galerie. Ce champs supporte le code html, ce qui vous permet de modifier l’apparence de la galerie.
  • fancy : les miniatures qui représentent les documents sont générées automatiquement. Selon moi, cette option donne un rendu plus joli, mais c’est à vous de choisir.
  • images : en cochant cette option, vous pourrez aussi proposer des images en téléchargement et non uniquement les documents (nous verrons un exemple plus bas dans cet article).
  • localpost : si vous décochez cette case, la galerie affichera tous les documents présents dans le gestionnaire de média. Sauf exception, je ne vous conseille pas cette option.
  • order: vous pouvez classez par ordre ascendant ou descendant les documents présents dans la galerie.
  • orderby : le critère selon lequel les documents seront classés (note : cette option travaille conjointement avec la précédente).
  • relation : je n’explique pas cette option pour l’instant (j’y reviendrai dans la suite de ce tutoriel).

Le deuxième panneau de configuration de ce plugin pour WordPress permet de contrôler la génération de miniatures.

Ces options sont surtout pour les webmasters qui recherchent la performance, sur un site qui propose de nombreux fichiers à télécharger.

Configuration Document Gallery

Par défaut, c’est WordPress qui s’en occupe. Mais vous pouvez choisir Ghostscript ou Imagick si ces utilitaires sont actifs sur votre serveur (comme vous le voyez, ce n’est pas le cas chez moi) ou si vous avez la main pour les installer vous-même.

Créer la première galerie de documents

Créer la page

La première étape va être de créer la page qui accueillera la galerie. Vous pouvez y entrer un texte et le shortcode [dg] qui affichera la galerie.

Etape 1 Créer la page

N’oubliez pas de publier (ou plutôt « planifier ») ou d’enregistrer votre brouillon !

Envoyer les documents

Vous pouvez à présent cliquer sur « Ajouter un média » afin d’envoyer le ou les documents à mettre dans la galerie sur votre serveur.

Attention : il est important d’envoyer les documents depuis la page qui possède le shortcode. De cette façon, vous serez certain que le document est bien attaché à la page et qu’il s’affichera normalement (nous verrons un peu plus loin comment faire si vos documents sont déjà présents sur votre serveur).

Il ne faut pas insérer les documents dans la page. Une fois que les documents sont envoyés, refermez le gestionnaire de média.

Étape 2 Envoi des images

Insérer la galerie dans la page

Vous n’avez rien à faire de plus.

Tous les documents qui ont été envoyés vont s’afficher automatiquement grâce à la présence du shortcode [dg].

La galerie sur le front-office

Document front-office

Mais…? Il manque un document ! J’en avais inséré trois, et n’en voilà que deux ! Que s’est-il passé ?

J’ai envoyé 3 documents : un docx (document Word), un pdf (document PDF) et une jpeg (une image qui est en fait une infographie).

Mais l’infographie n’est pas affichée dans la galerie.

Modifier Document Gallery pour afficher aussi les images

Vous souvenez-vous lorsque que je vous ai parlé d’une option pour afficher les images ? Par défaut, elle n’est pas cochée, si bien que les images ne sont pas affichées dans la galerie.

Pour résoudre cela, allez dans Réglages > Document Gallery et cochez « Inclure les images dans la galerie ». Et voilà le travail :

affichage-images-document-gallery

Cela est bien pratique pour proposer une infographie en téléchargement !

Quand un visiteur veut télécharger un document

Un simple clic sur le document de son choix ouvre le-dit document au sein du navigateur (quand celui-ci peut le lire) ou lance la boîte de téléchargement automatiquement.

Télécharger le document

Un exemple avec un fichier DOCX de Microsoft

Que faire si vous avez déjà envoyé vos documents, sans les avoir liés à une page ?

La premièr solution – et je suis sûre que vous y avez déjà pensé – est de supprimer les documents, afin de les réinsérer. Possible, mais pas pratique :

  • si vous avez beaucoup de documents
  • s’ils sont déjà utilisés ailleurs sur le site (il faudrait alors mettre à jour tous les liens)

Pas de panique ! WordPress et son écosystème de plugins a réponse à tout. Le plugin Attachments par exemple, vous offre la possibilité de relier n’importe quel média à n’importe quel page ou article de votre site.

Créer des shortcodes personnalisés pour une galerie unique

Chaque option dont nous avons parlée précédemment peut être modifiée directement dans le shortcode, grâce au système des attributs.

De cette façon, vous pouvez passer par-dessus la configuration par défaut, au cas par cas.

Par exemple, je peux créer une galerie de document qui affiche aussi les images en écrivant :

Dans cet exemple, « images » est un attribut du shortcode « dg ».

Les autres galeries, insérées via le shortcode [dg] (sans attribut), continueront de ne pas afficher les images, conformément à ce qui est indiqué dans la page de configuration générale.

Voici la liste des attributs (et leurs valeurs) que vous pouvez utiliser :

  • fancy=true / false
  • attachment_pg=true / false
  • descriptions=true / false
  • localpost=true / false
  • order=ASC / DESC
  • orderby=menu_order / title / date / modified / rand / ID / author / name / parent / comment_count / none / post_id
  • category=identifiant_des_catégories
    Il est possible d’indiquer plusieurs catégories en les séparant par des virgules.
  • relation=AND / OR
    Cette option fait référence à la précédente : en choisissant AND, vous ciblez les documents qui appartiennent à toutes les catégories ; en choisissant OR, vous cibles les documents qui appartiennent à au moins une des catégories.
  • IDs=identifiant_des_documents
    Cette option est très particulière puisqu’elle permet de changer complètement le comportement du plugin. En indiquant dans le shortcode des identifiants de documents préalablements envoyés dans la galerie, le plugin ignorera les docuements attachés à la page en cours, et n’afficheront que les documents correspondants aux identifiants.

Personnaliser l’affichage du plugin Document Gallery

Le code CSS peut facilement être modifié grâce à une zone CSS disponible sous les options de configuration du plugin.

Un dernier mot sur le plugin Document Gallery

Etant donné que le plugin n’affiche que les documents qui sont liés à la page en cours, vous pouvez très bien faire des galeries complètement indépendantes les unes des autres.

Grâce aux options à insérer directement dans le shortcode, de grandes possibilités s’offrent à vous.

Rappel : J’ai pris dans ce tutoriel l’exemple d’une page, mais ce plugin fonctionne aussi très bien sur un article.

Si ce plugin vous intéresse, il ne vous reste plus qu’à le télécharger sur le répertoire de plugins de WordPress :

Télécharger Document Gallery

Faites nous vos retours sur ce plugin en laissant un commentaire 😉