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

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

La semaine dernière, nous avons vu comment installer Shortcodes Ultimate. Aujourd’hui, je vous propose de le voir en action : comment l’utiliser pour réaliser un diaporama et l’afficher sur votre site WordPress ?

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

  • Durée: 4min 43
  • Niveau: facile | intermédiaire | expert
  • Public: webmaster/chef d’entreprise | développeur |tous

Cliquez ici pour afficher la transcription de la vidéo :
« Créer un diaporama d’articles dans WordPress »

Dans cette démonstration, je vais vous montrer 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. Voilà, 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 ici.

Allons tout de suite voir le résultat sur le front office. Je viens ici. Donc 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 ! :/ 01:01

Donc ça en fait, 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.

Donc, pour cela, il faut aller dans « Articles », « Catégories ». Hop ! Je l’ouvre dans un nouvel onglet. Voilà, 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 donc l’identifiant de cette catégorie, c’est 22.

Donc je retourne ici et voilà, j’écris 22 :

[nivo_slider source="cat=22"]

. Donc je vais lui demander de prendre tous les articles de cette catégorie. Je mets à jour mon diaporama et je vais le voir ici. Donc 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. Donc 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. Donc, ç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 ? 02:50

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 »

Donc moi, 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. Donc c’est très bien ; le fonctionnement est impeccable. C’est exactement ce que nous voulions avoir.

3/ Autre configuration possible pour ce diaporama WordPress 03:40

Maintenant, nous allons regarder rapidement les autres paramètres. Comme par exemple, je peux changer la taille du slider. Donc on va 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. Donc 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. Donc 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.

Dans la prochaine vidéo, nous verrons comment l’afficher dans la sidebar d’un site. À tout de suite !

http://lesdoigtsdanslenet.com

Fin de la transcription

Afficher un diaporama dans une sidebar

  • Durée:3min 15
  • Niveau: facile | intermédiaire | expert
  • Public: webmaster/chef d’entreprise | développeur |tous

Cliquez ici pour afficher la transcription de la vidéo :
« Afficher un diaporama dans la sidebar d'un site WordPress »

Dans cette vidéo, 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 00:15

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 00:31

Pour ça, je vais dans le menu « Apparence », et puis « Widgets ». Voilà. 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. Vous voyez, par exemple ici, moi j’en ai une en haut, une deuxième ici, 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 ? 01:21

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

1/ Widget WordPress de type « texte » 01:28

Alors, pas de panique. Je vous montre tout de suite ce que c’est. Donc on va récupérer le widget de
type « texte ». Je clique dessus et je le glisse. Voilà, je remonte. Voilà, je le glisse et je vais le mettre ici tout en bas. Vous voyez, aux endroits où je peux le mettre, il y a des pointillés qui apparaissent. Donc je lâche ici. En lâchant le bouton de ma souris, hop! 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 ici (F5) et il devrait apparaître dans la sidebar, sur la droite, tout en bas. Ah, et on voit que ça apparaît bien ici. 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 02:30

Donc je vous présente au passage un petit outil que j’adore qui s’appelle « JRuler » et qui permet donc de mesurer les pixels. Alors vous voyez, je le cale ici sur le côté gauche de mon diaporama ; avec ma souris, je vais à l’endroit où je trouve que le diaporama devrait s’arrêter, par exemple ici, et on voit le nombre de pixels qui apparaît, donc 200 pixels.

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 reviens ici, je recharge (F5) et voilà. Le widget s’est bien retaillé, le diaporama est maintenant à la bonne taille.

C’est déjà fini. Nous avons pu mettre un diaporama dans la sidebar de ce site WordPress.

http://lesdoigtsdanslenet.com

Fin de la transcription

Résumé du tutoriel pour créer un diaporama d’articles avec NivoSlider

  • Utilisation du shortcode sans paramètres (configuration de base)
  • Utilisation du shortcode avec paramètres
    • pour une catégorie d’article donnée
    • changer le lien quand on clique sur une image du diaporama
    • Autre paramétrage possible : taille du diaporama, nombre de « diapositive », vitesse, type d’animation…
  • Afficher un diaporama dans une sidebar de WordPress
    • Utiliser un widget « Texte »
    • Modifier la taille du diaporama

chef d’entreprise, image, tutoriel, vidéo, webmaster

A propos de MarieEve Louvel

Depuis 3 ans, je partage mes connaissances sur ce blog, pour les entrepreneurs désireux de créer leur site vitrine et/ou leur blog professionnel avec WordPress. Mon expérience professionnelle va de l'accompagnement à la formation, en passant par de la création de site ou de logiciel. Retrouvez mes cours en ligne sur mon site FeelWeb Formation [http://feelwebformation.com]

11 commentaires

  1. Superbes vidéos bien utiles pour les débutants en développement ! Nivo slider à l’air d’être mieux que celui que j’utilisais…

    Répondre
  2. Bonsoir,
    Merci beaucoup pour cette démonstration bien détaillés et bien claire, votre blog rend les choses plus facile. Bravo pour l’effort que vous êtes en train de faire.
    Magalie

    Répondre
  3. HAAA super sympa comme article, je changeais justement de design pour le moment et je galère un peu avec le slider…Je vais essayer de mettre ça en place :)

    Répondre
  4. Bonsoir,
    Cette démonstration m’intéresse beaucoup, de plus la vidéo reste la meilleure méthode pour mieux expliquer les étapes à suivre surtout pour les débutants.
    Merci pour l’article

    Répondre
  5. Bonsoir
    Merci pour toutes ces aides… et ces conseils précieux.
    J’aimerai savoir en plus de tout ça si on peut installer un diaporama dans l’entête du thème twenty eleven ?pour dire vrai je ne vois pas ou…mais cela m’aurait plus … alors si jamais…
    merci d’avance et sachez que je vous lis régulièrement… même si je n’arrive pas a tout tester ….une stagiaire de septembre
    claire

    Répondre
  6. Bonsoir,

    je découvre votre site et c’est un plaisir de trouver des tutoriaux vidéos clairs comme les votres.

    Par contre une petite suggestion :

    Peut-être pourriez-vous ajouter une sorte de chapitrage dans la description de votre vidéo avec des liens vers des moments précis de votre vidéo correspondant aux différentes étapes.

    ce serait surtout utile pour les vidéos un peu plus longues, mais autant prendre tout de suite de bonnes habitudes 😉

    Répondre
    • Bonsoir,

      Merci pour la suggestion, j’y avais déjà pensé mais comme les vidéos sont intégrées avec des iframes, je n’ai pas trouvé la solution (point de vue technique). Si vous savez comment faire, je suis 100% preneuse :)

      A bientôt,

      Répondre
  7. bonjour, je viens de découvrir votre blog et j’aime vraiment le qualité des articles; la vidéo est très explicite; merci!

    Répondre
    • Merci pour le lien, j’y jetterais en oeil quand la grippe m’aura quittée!

      Répondre
  8. ah mais c’est très pratique et sympa pour enrichir son blog, jusque là je créais mes diaporama à la mano avec un logiciel externe et payant, je vais adopter ta technique pour l’un de mes blogs

    Répondre

Trackbacks/Pingbacks

  1. Créer un diaporama avec NivoSlider et affichez-le où vous voulez - Les Doigts dans le Net | Votre site avec Wordpress | Scoop.it - [...] Je vous propose de voir une démonstration de Shortcodes Ultimate: comment l'utiliser pour réaliser un diaporama de vos articles…
  2. Créer un diaporama avec NivoSlider et affichez-le où vous voulez - Les Doigts dans le Net | -thécaires | Espace numérique et autoformation | Scoop.it - [...] Je vous propose de voir une démonstration de Shortcodes Ultimate: comment l'utiliser pour réaliser un diaporama de vos articles…
  3. Créez des onglets en 5 secondes avec shortcodes ultimate - Les Doigts dans le Net - [...] plugin très complet : Shortcode Ultimate. Après vous l’avoir présenté et montré comment créer un diaporama, voici, à la…
  4. Le plugin Wordpress indispensable et gratuit...pour tout faire (ou presque) - Les Doigts dans le Net - […] semaine prochaine, nous verrons une démonstration de son fonctionnement, avec la création d’un diaporama. Nous verrons […]

Soumettre un commentaire

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

This Blog will give regular Commentators DoFollow Status. Implemented from IT Blögg

EmailEmail
PrintPrint