Créer un diaporama avec NivoSlider et affichez le où vous voulez

Partagez si vous aimez ->

Créer un diaporama d’articles et l’afficher dans un article (ou une page) WordPress

 

Comment afficher votre diaporama dans le corps d’un article WordPress.

Pour cela, nous allons commencer avec la configuration de base. Nous allons prendre le shortcode sans paramètres, juste en crochets :

[nivo_slider]

Je le sélectionne, Ctrl + C pour le copier, et puis je vais aller donc dans un article, article que je vais ajouter.  J’ai marqué « Mon diaporama » pour le nom de cet article. Donc, dans le corps de l’article, je colle (Ctrl + V) le shortcode que je viens de copier,

[nivo_slider]

et je clique.

Allons tout de suite voir le résultat sur le front office. Nous avons ici l’article « Mon diaporama ». Vous voyez en dessous un message d’erreur : « Nivo slider : aucune miniature d’article ou seulement une image attachée ».

1/ Le plugin WordPress affiche un message d’erreur… ça commence bien !

C’est un message d’erreur qui arrive quand le plug-in ne trouve pas les « posts », donc les articles, à utiliser. Alors pour contourner ce message d’erreur, je vous conseille de ne pas utiliser le shortcode par défaut, mais de toujours indiquer une source et souvent, ce qui se fait le plus souvent en fait, c’est de créer une catégorie spécifique.

2/ Configuration du diaporama

Par exemple une catégorie « diaporama » dans laquelle vous mettrez les articles que vous avez envie de voir apparaître dans vos diaporamas. Et dans la configuration de Nivo slider, on va donc indiquer l’identifiant de la catégorie correspondant à mon diaporama :

[nivo_slider source="cat="]

. Il me faut trouver encore l’identifiant de la catégorie.

Pour cela, il faut aller dans « Articles », « Catégories ». Je l’ouvre dans un nouvel onglet. Ici vous avez toutes les catégories. Vous voyez que j’en ai créé une qui s’appelle « Diaporama » et quand je mets ma souris dessous, en bas de mon écran, je peux lire l’identifiant ici dans « &tag_ID=22& ».

Ça veut dire que l’identifiant de cette catégorie, c’est 22.

J’écris 22 :

[nivo_slider source="cat=22"]

. Je vais lui demander de prendre tous les articles de cette catégorie. Je mets à jour mon diaporama et je vais le voir ici et je recharge avec F5 et tout de suite, on voit bien un changement.

Donc le diaporama s’affiche bien. Il défile automatiquement. Si je passe avec ma souris dessus, j’ai une petite flèche à droite et à gauche. C’est un diaporama complètement normal que vous avez pu déjà voir plein de fois sur Internet et quand je clique sur l’image, vous voyez par défaut, ça m’amène vers une page qui me montre donc mon image. Et ça, ce n’est pas très intéressant. Il vaut mieux que quand on clique sur l’image, on arrive vers l’article en question. Nous allons voir tout de suite comment changer ça.

2/ Comment paramétrer le lien sur chaque image du diaporama ?

Il va falloir rajouter un autre paramètre dans notre shortcode. Nous allons voir dans la documentation du shortcode comment cela se fait. Ici, nous nous rappelons avoir vu « Image links » :

link= »none|image|permalink|caption|meta »

Je vais utiliser le paramètre « link » avec la valeur définie sur « permalink ». Ça va donc donner quelque chose comme ça.

Donc :

[nivo_slider source="cat=22" link="permalink"]

et je mets à jour. On recharge ici (F5) et maintenant donc, si je clique sur une image, où est-ce que je vais être amenée ? Voilà, je suis bien amenée sur l’article correspondant à cette image. Le fonctionnement est impeccable. C’est exactement ce que nous voulions avoir.

3/ Autre configuration possible pour ce diaporama WordPress

Maintenant, nous allons regarder rapidement les autres paramètres. Comme par exemple, je peux changer la taille du slider. Nous allons essayer, on va mettre :

[nivo_slider source="cat=22" link="permalink" size="250x250"]

et je mets à jour. F5.

Et voilà : donc vous voyez, notre slider a bien été retaillé, mais il fonctionne toujours de la même façon. Vous pouvez très facilement jouer sur la taille.

Vous pouvez également jouer sur le nombre de slides (Number of slides). Par exemple, mettons qu’il y ait dix articles dans votre catégorie « Mon diaporama », vous voudriez peut-être n’en afficher que trois. Donc vous pouvez utiliser le paramètre « limit ».

On a également les effets d’animation, la vitesse, le délai. Je ne veux pas aller plus loin dans cette démonstration. Je pense que vous avez compris comment ça marche. Maintenant, à partir de ce fonctionnement, bien vous pouvez créer un diaporama dans WordPress comme vous voulez et l’afficher dans n’importe quel article.

 

Afficher un diaporama dans une sidebar

Ici, nous allons voir comment afficher un diaporama dans la sidebar d’un site WordPress. Alors la sidebar, pour ceux qui auraient des hésitations, c’est la colonne de droite que l’on retrouve dans certains templates de WordPress.

1/ On copie le shortcode du diaporama

Alors comment est-ce que je vais faire ? Mais déjà, je vais utiliser le même shortcode que celui que j’ai créé pour mon article « Mon diaporama » et je vais aller le placer dans ma sidebar :

[nivo_slider source="cat=22" link="permalink" size="250x250"]

2/ On colle le shortcode dans la sidebar

Pour ça, je vais dans le menu « Apparence », et puis « Widgets ». La sidebar se trouve ici sur la droite ; c’est le bloc qu’on appelle « Main Sidebar ».

Vous voyez, avec ces petites flèches, je peux la fermer ou la rouvrir. Vous avez certainement aussi dans votre thème une sidebar. Vous pouvez même en avoir beaucoup plus qu’une. Par exemple, moi j’en ai une en haut, une deuxième, une troisième, une quatrième et une cinquième dont – on le remarque tout de suite – trois dans le « footer », donc dans le pied de page.

Ça aussi, c’est très pratique : vous pouvez tout à fait choisir la sidebar que vous voulez et pas nécessairement celle qui représente la colonne de droite sur votre blog. Vous pouvez prendre n’importe quelle sidebar.

3/ Comment utiliser un shortcode dans une sidebar ?

Toute petite astuce : en fait, il va falloir passer par un widget de type « texte ».

1/ Widget WordPress de type « texte »

Donc on va récupérer le widget de type « texte ». Je clique dessus et je le glisse, puis je remonte. Voilà, je le glisse et je vais le mettre tout en bas. Vous voyez, aux endroits où je peux le mettre, il y a des pointillés qui apparaissent. Et je lâche. En lâchant le bouton de ma souris, je vais donc pouvoir tout simplement coller (Ctrl + V) le shortcode que j’ai copié de l’autre côté et j’enregistre.

Nous allons voir tout de suite ce que ça donne dans la partie technique. Donc je recharge ma page (F5) et il devrait apparaître dans la sidebar, sur la droite, tout en bas. Et on voit que ça apparaît bien. Par contre, c’est un petit peu trop large. Moi, ce que j’aimerais, c’est que ça rentre pile-poil dans la taille de la sidebar. Donc pour ça, je vais devoir mesurer la taille que je vais lui donner.

2/ Mesurer la place pour le diaporama avec JRuler

Je vais tout simplement aller modifier dans mes widgets la taille de mon diaporama : donc 200×200, ça devrait être très bien.

[nivo_slider source="cat=22" link="permalink" size="200x200"]

.

J’ai enregistré mon widget et maintenant, je recharge (F5) et voilà. Le widget s’est bien retaillé, le diaporama est maintenant à la bonne taille.

 

Partagez si vous aimez ->

Youcef

Concepteur de Sites Web et entrepreneur, l'écriture et la pédagogie font aussi partie de mes passions. Mon objectif est de vous aider à trouver la solution idéale pour créer votre propre Site Internet.

Vous aimerez aussi...

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Simple Share Buttons