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, afin d'améliorer 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, accédez àé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 la modification d'un article.

Pourquoi ajouter une boîte à lumière à 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électionner "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 pour les 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, vous ferez apparaître un menu déroulant.
4. Sélectionner "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 à sauter à 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 poursuivre l'édition.

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 de ne pas affecter 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 intégrée de lightbox 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.