{"id":236977,"date":"2022-03-29T10:44:00","date_gmt":"2022-03-29T07:44:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=236977"},"modified":"2022-05-16T10:56:52","modified_gmt":"2022-05-16T07:56:52","slug":"comment-ajouter-une-lightbox-a-wordpress-en-5-minutes","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/comment-ajouter-une-lightbox-a-wordpress-en-5-minutes\/","title":{"rendered":"Comment ajouter une Lightbox \u00e0 WordPress (en 5 minutes)"},"content":{"rendered":"<p>Ne faites pas loucher vos visiteurs.<\/p>\n<p>Les images ins\u00e9r\u00e9es dans vos messages ne font que quelques centaines de pixels de large, ce qui peut rendre les petits d\u00e9tails difficiles \u00e0 voir.<\/p>\n<p>Si vous avez des photos magnifiques ou des graphiques d\u00e9taill\u00e9s, laissez vos visiteurs les voir dans toute leur splendeur !<\/p>\n<p>Avec une lightbox ajout\u00e9e \u00e0 votre site, les visiteurs pourront cliquer sur une image et afficher la version en taille r\u00e9elle dans une fen\u00eatre contextuelle, comme ceci\u00a0:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-181201-616f5f07a33d1.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-181201-616f5f07a33d1.png\" alt=\"Comment ajouter une Lightbox \u00e0 WordPress (en 5 minutes)\"><\/a><\/p>\n<p>Tu re\u00e7ois le meilleur des deux mondes. Vous affichez toujours une version plus petite de l&rsquo;image qui s&rsquo;int\u00e8gre bien dans votre message et se charge rapidement, mais vous proposez \u00e9galement une version beaucoup plus grande et en taille r\u00e9elle de l&rsquo;image \u00e0 tous ceux qui souhaitent la voir.<\/p>\n<p>Suivez les \u00e9tapes de ce didacticiel et vous aurez une lightbox ajout\u00e9e \u00e0 votre site WordPress en quelques minutes seulement.<\/p>\n<p>Si vous souhaitez ajouter une lightbox \u00e0 votre boutique eCommerce, consultez <a href=\"https:\/\/www.competethemes.com\/blog\/woocommerce-lightbox-plugins\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">cette collection de plugins de lightbox WooCommerce<\/a>.<\/p>\n<h2>Ajouter des lightbox \u00e0 votre site<\/h2>\n<p>Bien qu&rsquo;il existe des options avanc\u00e9es disponibles, j&rsquo;aime garder les choses simples. C&rsquo;est pourquoi je recommande le plugin <a href=\"https:\/\/wordpress.org\/plugins\/simple-lightbox\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Simple Lightbox<\/a> d&rsquo;Archetyped.<\/p>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/simple-lightbox\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-181201-616f5f09becca.png\" alt=\"Comment ajouter une Lightbox \u00e0 WordPress (en 5 minutes)\" \/><\/a><\/p>\n<p>Ce plugin WordPress sans fioritures vous offre exactement les fonctionnalit\u00e9s dont vous avez besoin sans aucun ballonnement.<\/p>\n<p>Vous pouvez t\u00e9l\u00e9charger le plugin sur wordpress.org ou le rechercher via le menu Plugins pour l&rsquo;installer sur votre site maintenant.<\/p>\n<p>Une fois le plugin Simple Lightbox install\u00e9, vous trouverez un nouveau menu nomm\u00e9 &quot;Lightbox&quot; dans le menu Apparence de votre tableau de bord d&rsquo;administration\u00a0:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-181201-616f5f0c13bec.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-181201-616f5f0c13bec.png\" alt=\"Comment ajouter une Lightbox \u00e0 WordPress (en 5 minutes)\"><\/a><\/p>\n<p>Il suffit de quelques \u00e9tapes pour configurer compl\u00e8tement le plugin pour votre site.<\/p>\n<h3>Configurer la lightbox<\/h3>\n<p>La premi\u00e8re section, Activation, contr\u00f4le quelles images doivent avoir une visionneuse.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-181201-616f5f0e12a76.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-181201-616f5f0e12a76.png\" alt=\"Comment ajouter une Lightbox \u00e0 WordPress (en 5 minutes)\"><\/a><\/p>\n<p>Comme vous pouvez le voir, vous pouvez choisir les types de page que vous souhaitez affecter, et toutes les images trouv\u00e9es dans le contenu de ces pages auront la fonction lightbox activ\u00e9e.<\/p>\n<p>Pour la plupart des gens, cette configuration fonctionnera mieux\u00a0:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-181201-616f5f0fe2fc3.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-181201-616f5f0fe2fc3.png\" alt=\"Comment ajouter une Lightbox \u00e0 WordPress (en 5 minutes)\"><\/a><\/p>\n<p>Avec cette configuration, toutes les images de vos articles de blog auront la visionneuse activ\u00e9e, mais cela n&rsquo;affectera pas les images des autres pages de votre site (comme votre page \u00ab\u00a0\u00c0 propos\u00a0\u00bb et votre page d&rsquo;accueil).<\/p>\n<p>Avant d&rsquo;aller plus loin, il y a un probl\u00e8me que nous devons r\u00e9soudre\u2026<\/p>\n<h3>Le seul probl\u00e8me ennuyeux<\/h3>\n<p>Pour que la lightbox fonctionne, vous devez lier vos images \u00e0 leurs fichiers multim\u00e9dias, comme ceci\u00a0:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-181201-616f5f1212783.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-181201-616f5f1212783.png\" alt=\"Comment ajouter une Lightbox \u00e0 WordPress (en 5 minutes)\"><\/a><\/p>\n<p>Avant que WordPress n&rsquo;ajoute le nouvel \u00e9diteur, vous pouviez configurer toutes vos images pour qu&rsquo;elles soient automatiquement li\u00e9es \u00e0 leurs fichiers multim\u00e9dias, mais vous devez maintenant les lier manuellement \u00e0 l&rsquo;aide de la barre d&rsquo;outils, comme illustr\u00e9 dans la capture d&rsquo;\u00e9cran ci-dessus.<\/p>\n<p>Tous les plugins lightbox fonctionnent de cette fa\u00e7on, il est donc imp\u00e9ratif de lier les images \u00e0 leurs fichiers multim\u00e9dias.<\/p>\n<p>Alors qu&rsquo;est-ce que cela signifie pour votre site ?<\/p>\n<p>Cela signifie que lorsque vous activez la lightbox pour vos publications, les images de vos publications n&rsquo;auront pas de lightbox tant que vous ne les aurez pas li\u00e9es \u00e0 leur fichier multim\u00e9dia et vous devrez le faire pour chaque image pour laquelle vous souhaitez avoir une lightbox.<\/p>\n<p>Cela ralentit les choses par rapport \u00e0 la fa\u00e7on dont cela fonctionnait auparavant, mais cela vous donne un contr\u00f4le total sur les images qui ont une visionneuse.<\/p>\n<p>Ceci \u00e9tant fait, terminons la configuration du plugin.<\/p>\n<p>Bien que l&rsquo;option de lien par d\u00e9faut ne soit pas disponible pour le moment, il y a de bonnes raisons de croire que les d\u00e9veloppeurs de WP l&rsquo;ajouteront dans une future mise \u00e0 jour.<\/p>\n<h3>Cr\u00e9er des diaporamas lightbox<\/h3>\n<p>Vous serez peut-\u00eatre satisfait d&rsquo;une simple lightbox, mais l&rsquo;option de regroupement peut \u00eatre pratique pour certains sites Web.<\/p>\n<p>Le plugin Simple Lightbox peut prendre toutes les images de votre message et les transformer en <a href=\"https:\/\/themewp.inform.click\/fr\/comment-ajouter-un-curseur-dimage-a-votre-page-daccueil\/\" title=\"diaporama\">diaporama<\/a>. Avec cette fonctionnalit\u00e9 activ\u00e9e, lorsqu&rsquo;un visiteur clique sur une image, il verra la <a href=\"https:\/\/themewp.inform.click\/fr\/comment-ajouter-de-beaux-formulaires-contextuels-a-wordpress\/\" title=\"fen\u00eatre contextuelle\">fen\u00eatre contextuelle<\/a> normale mais avec des fl\u00e8ches ajout\u00e9es sur les c\u00f4t\u00e9s afin qu&rsquo;il puisse naviguer \u00e0 travers chaque image de la publication.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-181201-616f5f155dc98.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-181201-616f5f155dc98.png\" alt=\"Comment ajouter une Lightbox \u00e0 WordPress (en 5 minutes)\"><\/a><\/p>\n<p>Le diaporama permet \u00e9galement aux visiteurs de savoir combien d&rsquo;images sont dans la s\u00e9rie en bas \u00e0 gauche, et il y a un bouton lecture\/pause en haut \u00e0 droite ajout\u00e9 \u00e0 c\u00f4t\u00e9 du bouton de fermeture.<\/p>\n<p>La lightbox du diaporama peut ou non avoir un sens pour votre site, mais il est facile de la d\u00e9sactiver dans les param\u00e8tres de regroupement si vous ne l&rsquo;aimez pas.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-181201-616f5f17bd07f.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-181201-616f5f17bd07f.png\" alt=\"Comment ajouter une Lightbox \u00e0 WordPress (en 5 minutes)\"><\/a><\/p>\n<p>Si vous <a href=\"https:\/\/themewp.inform.click\/fr\/comment-creer-une-galerie-dimages-avec-wordpress\/\" title=\"ajoutez\">ajoutez<\/a> souvent <a href=\"https:\/\/themewp.inform.click\/fr\/comment-creer-une-galerie-dimages-avec-wordpress\/\" title=\"plusieurs galeries\">plusieurs galeries<\/a> \u00e0 vos publications, vous pouvez cocher la troisi\u00e8me case pour que Simple Lightbox garde les diaporamas s\u00e9par\u00e9s.<\/p>\n<p>Bien que la conception par d\u00e9faut de la lightbox soit simple et propre, quelques param\u00e8tres de personnalisation sont disponibles.<\/p>\n<h3>Personnalisez les styles<\/h3>\n<p>Il n&rsquo;y a que deux th\u00e8mes (clair et sombre) et le th\u00e8me sombre remplace simplement la bordure blanche par une bordure noire.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-181201-616f5f19b9e1f.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-181201-616f5f19b9e1f.png\" alt=\"Comment ajouter une Lightbox \u00e0 WordPress (en 5 minutes)\"><\/a><\/p>\n<p>Je recommanderais de laisser la plupart des param\u00e8tres tels quels, mais personnellement, je trouve la fonction de diaporama automatique perturbatrice, alors je coche cette option. De plus, vous pouvez activer l&rsquo;affichage des titres des images en d\u00e9sactivant la derni\u00e8re option.<\/p>\n<p>Une fois les personnalisations termin\u00e9es, il ne reste qu&rsquo;une derni\u00e8re petite \u00e9tape pour terminer la configuration.<\/p>\n<h3>Personnaliser les \u00e9tiquettes<\/h3>\n<p>Simple Lightbox inclut des \u00e9tiquettes pour tous les boutons de la lightbox.<\/p>\n<p>C&rsquo;est d\u00e9routant sans quelques informations g\u00e9n\u00e9rales: ces \u00e9tiquettes ne sont pas r\u00e9ellement visibles sur le site, mais plut\u00f4t, elles sont une <a href=\"https:\/\/themewp.inform.click\/fr\/les-7-meilleurs-themes-wordpress-accessibles-wcag-2-1-aa\/\" title=\"fonctionnalit\u00e9 d&#039;accessibilit\u00e9\">fonctionnalit\u00e9 d&rsquo;accessibilit\u00e9<\/a> et sont utilis\u00e9es pour vos visiteurs qui utilisent des lecteurs d&rsquo;\u00e9cran et une technologie d&rsquo;assistance.<\/p>\n<p>Les libell\u00e9s par d\u00e9faut sont raisonnables, mais vous pouvez les personnaliser dans la section Libell\u00e9s si vous le souhaitez\u00a0:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-181201-616f5f1bb2af7.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-181201-616f5f1bb2af7.png\" alt=\"Comment ajouter une Lightbox \u00e0 WordPress (en 5 minutes)\"><\/a><\/p>\n<p>Avec cela, vous avez fini de personnaliser la lightbox maintenant ajout\u00e9e \u00e0 votre site WordPress.<\/p>\n<h2>Profitez de votre nouvelle lightbox<\/h2>\n<p>Les lightbox sont parfaits pour l&rsquo;exp\u00e9rience utilisateur.<\/p>\n<p>Si vous augmentiez la largeur de vos messages pour ajouter des images plus grandes, vous nuiriez \u00e0 la lisibilit\u00e9 de votre texte et les fichiers images plus volumineux ralentiraient votre site.<\/p>\n<p>Avec une visionneuse, vous pouvez offrir \u00e0 vos visiteurs une excellente exp\u00e9rience de lecture et une excellente exp\u00e9rience de visualisation de vos images.<\/p>\n<p>Si vous avez appr\u00e9ci\u00e9 ce didacticiel et que vous souhaitez continuer \u00e0 personnaliser davantage, consultez mon guide ultime: <a href=\"https:\/\/themewp.inform.click\/fr\/31-facons-simples-de-personnaliser-votre-site-web-wordpress\/\" title=\"31 fa\u00e7ons simples de personnaliser votre site WordPress\">31 fa\u00e7ons simples de personnaliser votre site WordPress<\/a>.<\/p>\n<p>Merci de m&rsquo;avoir lu, et n&rsquo;h\u00e9sitez pas \u00e0 partager ce post si cela vous a aid\u00e9.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Source d&rsquo;enregistrement:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/www.competethemes.com\" class=\"external external_icon\">www.competethemes.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Suivez ces \u00e9tapes simples pour ajouter une lightbox \u00e0 votre site WordPress. Options pour les diaporamas lightbox incluses.<\/p>\n","protected":false},"author":1,"featured_media":257377,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[548],"tags":[844],"class_list":["post-236977","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-personnaliser-wordpress","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/236977","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/comments?post=236977"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/236977\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media\/257377"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media?parent=236977"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/categories?post=236977"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/tags?post=236977"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}