WordPress SelfVersion 6.5Depuis, il n'est plus nécessaire de s'appuyer sur des plugins tiers pour créer des effets lightbox. Cette fonctionnalité a été intégrée au c?ur de WordPress, en particulier pour ceux qui utilisent l'éditeur de blocs de WordPress (Gutenberg). Par conséquent, l'ajout d'images et l'activation d'effets lightbox pour celles-ci sont désormais plus faciles et plus efficaces.

Dans ce tutoriel, nous verrons comment créer une lightbox WordPress pour votre site web sans plugin.

Qu'est-ce qu'une bo?te à lumière WordPress ?

Une bo?te à lumière est unMéthode d'affichage de l'image pop-upLorsque l'utilisateur clique sur une image dans la page, celle-ci s'affiche en plus grand à l'écran, tandis que le fond de la page s'assombrit pour mettre l'image en évidence. Cet effet est souvent utilisé pour l'affichage d'images ou de produits, ce qui améliore l'expérience de l'utilisateur.

Champ d'application

Ce tutoriel s'adresse uniquement à ceux qui utilisent l'éditeur de blocs de WordPress. Si vous utilisez l'éditeur classique, il est recommandé de passer d'abord à l'éditeur de blocs pour profiter des dernières fonctionnalités de WordPress.

étape 1 : Créer ou modifier un article/une page

Après avoir réussi à vous connecter à WordPress, allez dans le tableau de bord de WordPress. Ensuite, vous pouvez choisir de créer un nouveauécritsou modifier un article existant. En fonction de vos besoins, vous pouvez choisir l'un des chemins suivants :

• Pour créer un nouvel article, naviguez versécrits > Ajouter un nouvel article.

• Pour modifier un article ou une page existant(e), accédez à l'ongletécrits > Tous les articlesRecherchez l'article que vous souhaitez modifier et cliquez sur le bouton "Modifier".
• Si vous souhaitez créer ou modifierpage webVeuillez sélectionnerpage webqui fonctionne de la même manière que la création ou l'édition d'un article.

Pourquoi ajouter une visionneuse à un article ou à une page ?

L'effet "lightbox" est particulièrement adapté à l'affichage de photos, d'images de produits ou de galeries. Avec les bo?tes lumineuses, les utilisateurs peuvent cliquer sur une vignette pour voir une image plus grande sans avoir à passer à une autre page, ce qui améliore l'expérience de navigation de l'utilisateur.

étape 3 : Ajouter des images à l'aide de l'éditeur de blocs

Ajoutez ensuite des images à la page. L'éditeur de blocs offre une solution très simple pour cela.

1. Sélectionnez l'emplacement dans l'éditeur où vous souhaitez insérer l'image.
2. clé dans/imageLe bloc "Image" s'affiche immédiatement.

3. Sélectionnez "imagerie"Le système vous invite à sélectionner une image.

Les images existantes peuvent être sélectionnées dans la médiathèque ou de nouvelles images peuvent être téléchargées.

Choisir la bonne photo

Veillez à choisir la taille de l'imageConvient aux caissons lumineuxAffichage. Les images trop grandes peuvent affecter la vitesse de chargement des pages, tandis que les images trop petites peuvent perdre de leur clarté lorsqu'elles sont agrandies dans la bo?te à lumière.

étape 4 : Ajouter un effet de bo?te à lumière à l'image

Cette étape est le c?ur de la création d'une lightbox WordPress et peut être réalisée sans plugin.

1. cliquer (à l'aide d'une souris ou d'un autre dispositif de pointage)Juste ajoutéà l'article ou à la page dans lephotographie.
2. Dans la barre d'outils au-dessus de l'image, vous verrez une ic?ne de lien.

3. En cliquant sur l'ic?ne de ce lien, un menu déroulant s'affiche.
4. Sélectionnez "S'agrandit lorsqu'on clique dessus"Options.

à ce stade, votre image sera configurée pour s'agrandir lorsqu'on clique sur l'effet "lightbox". La bo?te à lumière fournira automatiquement une vue agrandie de l'image sur le front-end, permettant aux utilisateurs de voir une image plus grande sans avoir à passer à une autre page lorsqu'ils cliquent sur l'image.

Astuce : Si vous ne trouvez pas l'option "Développer au clic", vous pouvez cliquer sur le bouton "Développer".

Assurez-vous que vous utilisez WordPress 6.5 ou une version plus récente. Si vous utilisezversion inférieureIl peut être nécessaire de faire passer leplug-in (composant logiciel)pour mettre en ?uvre la fonction lightbox, ou mettez à jour votre version de WordPress pour profiter de cette nouvelle fonctionnalité.

étape 5 : Prévisualisation et publication de la page

Après avoir configuré l'effet "lightbox" pour l'image, prévisualisez la page pour vous assurer que tout s'affiche correctement.

1. Cliquez sur le bouton "Aper?u" dans le coin supérieur droit de la page et sélectionnez "...".Aper?u du nouvel onglet".

2. Sur la page de prévisualisation, cliquez sur l'image que vous avez ajoutée pour vérifier si l'effet de bo?te lumineuse fonctionne correctement.

Si tout va bien, il est possible depostepage ou de l'article. Si une modification supplémentaire est nécessaire, vous pouvez sélectionnerSauvegarde des brouillonsVous pouvez ensuite continuer à modifier le texte.

Optimisation et mises en garde

1. Optimisation des images

Bien que la fonction lightbox soit pratique, veillez à ce que les images que vous téléchargez soient optimisées afin qu'elles n'affectent pas les performances de votre site web. Des fichiers images trop volumineux peuvent ralentir le chargement des pages, ce qui peut nuire à l'expérience de l'utilisateur et aux performances en matière de référencement. Pour ce faire, vous pouvez utiliser des outils tels queSmushpour compresser et optimiser la taille de l'image.

2. la conception réactive

La fonctionnalité lightbox est tout aussi importante sur les appareils mobiles, et les paramètres lightbox par défaut de WordPress sont réactifs pour garantir que les images s'affichent correctement sur différentes tailles d'écran. Il est recommandé de faire des tests sur les appareils mobiles avant de publier pour s'assurer que l'effet "lightbox" est également fluide sur les appareils mobiles.

3. les tests de compatibilité

Bien que la fonction lightbox intégrée de WordPress soit puissante, elle peut entrer en conflit avec certaines fonctions personnalisées si un thème ou un plugin personnalisé est utilisé. Avant de publier, il est recommandé de vérifier la compatibilité entre les appareils et les navigateurs.

résumés

En utilisant WordPress 6.5 et plus, enConstructeur de site web autodidacte WPL'effet "lightbox" peut être facilement créé sans plug-ins, ce qui offre une meilleure expérience utilisateur pour les images. Cela simplifie non seulement le processus de fonctionnement, mais réduit également la dépendance à l'égard des plug-ins tiers et la complexité de la maintenance du site web.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨詢(xún)：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.