ライトボックス効果のあるギャラリーを追加することで、画像を大きく表示することができ、美しく展示することができます。
これにより、訪問者はページから移動することなく画像を見ることができるため、ユーザーとのインタラクションが向上し、サイトのコンテンツがよりダイナミックになります。
しかし、WordPressのデフォルトのギャラリーブロックはライトボックスをサポートしていません。
過去数年間、Envira Galleryを使用して、テストサイトやクライアントのウェブサイトを構築する際に、ライトボックス効果のあるイメージギャラリーを作成してきました。
初心者に優しく、信頼性が高いため、専門的な知識がなくても誰でも簡単に素晴らしいギャラリーを設置できることがわかりました。
この投稿では、WordPressでギャラリーをライトボックス効果で簡単に追加する方法を順を追って紹介します。
なぜWordPressのギャラリーにライトボックス効果を追加するのか？
WordPressウェブサイトのギャラリーにレスポンシブライトボックス効果を追加することで、画像をよりプロフェッショナルに展示することができます。このエフェクトを使用すると、ユーザーが写真をクリックしたときに、ウェブサイト上のポップアップウィンドウに写真を表示することができます。
ライトボックスは、訪問者により没入感のある表示体験をもたらし、ソーシャルメディアで画像を共有したり、コンピューターにダウンロードしたりすることも容易にします。
写真サイトをお持ちの場合、ライトボックス効果を追加することで、ユーザーは気が散らないモードで高解像度の画像を表示することが有効化され、エンゲージメントが高まります。
同様に、WooCommerceストアをお持ちの場合、商品ギャラリーにライトボックス効果を追加することで、カスタマが商品を間近で見ることができ、十分な情報を得た上で決断することができます。
それでは、ライトボックス効果のあるWordPress画像ギャラリーを簡単に追加する方法を順を追って見ていきましょう。
WordPressのギャラリーをライトボックス効果で追加する方法
Envira Galleryを使って、ライトボックス効果のあるWordPressギャラリーを簡単に追加することができます。
これは、あなたのサイトに完全にレスポンシブでモダンな画像ギャラリーを作成できる最高のWordPressギャラリープラグインです。
また、Envira Galleryは超高速で、ドラッグアンドドロップビルダー、プロフェッショナルなギャラリーテンプレート、タグの追加、音声ファイル、ソーシャル共有、ライトボックスなどの多くの機能を備えています。
まず、Envira Galleryプラグインをインストールして有効化する必要があります。詳しい手順については、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
注：Envira Galleryには、このチュートリアルで使用できる無料のプラグインもあります。しかし、有料プランにアップグレードすることで、より多くの機能にアクセスできるようになります。
有効化した後、WordPress管理サイドバーからEnvira Gallery ” 設定ページにアクセスし、ライセンスキーを入力してください。
この情報はEnvira Galleryサイトのアカウントから取得できます。
その後、WordPressダッシュボードからEnvira Gallery ” 新規追加ページにアクセスし、新しいギャラリーの作成を開始します。
ここから、イメージギャラリーのタイトルを入力します。次に、’コンピュータからファイルを選択’ボタンをクリックして画像をアップロードします。メディアライブラリの画像をギャラリーに追加したい場合は、’他のソースからファイルを選択’ボタンをクリックします。
これでメディアライブラリが起動し、そこからギャラリー画像をアップロードすることができます。メディアライブラリから一度にアップロードできる画像は1枚だけであることを忘れないでください。
それが完了したら、’現在ギャラリーにあるもの’セクションまでスクロールダウンします。ここで、あなたのギャラリーのプレビューが右側に表示され、左側の列に設定が表示されます。
各画像の上にある鉛筆のアイコンをクリックすると、画面に「Edit Metadata（メタデータの編集）」のプロンプトが表示されます。
ここから、個々の画像のキャプション、状態、タイトル、altテキストを追加できます。
その後、忘れずに「メタデータを保存」ボタンをクリックして、設定を保存してください。
次に、左の列から’設定’タブに切り替えて、お好みに応じてギャラリーのレイアウトを変更してください。ここから、レイアウト、カラム数、画像サイズ、寸法、テーマなどを選択することができます。
詳細な手順については、WordPressで画像ギャラリーを作成する方法についての初心者向けガイドをご覧ください。
そうしたら、左の列から「ライトボックス」タブに切り替え、「ライトボックスを有効化しますか」オプションをチェックする。
その後、「ギャラリーライトボックステーマ」ドロップダウンメニューからライトボックステーマを選択します。レガシー」オプションを選択すると、ライトボックス効果のプロンプトは古いレイアウトになります。
ベース（ダーク）」オプションを設定すると、ライトボックスプロンプトのレイアウトはダークベースになります。
次に、ライトボックスのプロンプトに画像のタイトルまたはキャプションを表示するかどうかを選択する必要があります。両方を表示することも、両方を表示しないこともできます。
ライトボックスの画像サイズをドロップダウンメニューから選択します。
その後、’ギャラリー矢印を有効化’オプションをチェックします。これで、ライトボックスのプロンプトに2つの矢印が表示され、閲覧者がギャラリー内の別の画像に切り替えることができるようになります。
また、トランジション効果、開閉効果、ライトボックススーパーサイズの有効化など、ライトボックスのその他の設定も可能です。
完了したら、上部にある「公開する」ボタンを忘れずにクリックして、変更内容を保存してください。
WordPressのページ/投稿に画像ギャラリーを追加するには、ブロックエディターでページを開きます。
ここで、画面の左上にあるブロックの追加 ‘+’ ボタンをクリックして、ブロックメニューを開きます。次のページ/投稿にEnvira Galleryブロックを追加します。
その後、ブロック自体のドロップダウンメニューから、作成したばかりのイメージギャラリーを選択します。最後に、’更新’または’公開’ボタンをクリックして設定を保存します。
これで、WordPressブログにアクセスして画像ギャラリーを表示し、任意の画像をクリックしてライトボックス効果を見ることができます。
代替案WordPressで画像のポートフォリオやギャラリーを作成するには、NextGENギャラリーを使用します。
Envira Galleryは、WordPressサイトにライトボックス画像を追加するための最良のオプションです。また、NextGEN Galleryを使用すると、WordPressサイトに完全にレスポンシブで視覚的に美しいギャラリーやポートフォリオを作成することができます。
NextGEN Galleryは、幅広いギャラリータイプをサポートし、eコマース関連機能を持ち、ウォーターマーク、ライトボックス、画像コメントなどを追加することができるため、Envira Galleryの代替となる最高のギャラリーです。
さらに、NextGEN Galleryでは、StripeやPayPalを使ったオンライン決済が可能ですので、簡単に画像をオンラインで販売することができます。
プロの写真家、グラフィックデザイナー、ビジュアルアーティストのための機能を備えた高度なギャラリープラグインで、市場で最高のWordPressポートフォリオプラグインの一つです。
詳しい手順については、WordPressサイトにポートフォリオを追加する方法のチュートリアルをご覧ください。
この投稿が、ライトボックス効果付きのWordPressギャラリーを簡単に追加する方法を学ぶのにお役に立てば幸いです。また、WordPressで基本的な画像編集を行う方法についての初心者向けガイドや、ブログ投稿のためのより良い画像を作成するためのベストツールのエキスパートピックもご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Jiří Vaněk
Thanks for recommending Envira Gallery. I make websites on Elementor, and apart from Elemenotr, I only knew NextGen gallery, which does not completely meet my requirements. I will definitely give the plugin a try and probably replace the NextGen Gallery I’ve been using with it.
Muhammad Danial Emran
Hi, I want to ask if using a lightbox effect will affect my website speed.
WPBeginner Support
It should not cause your site to slow down.
管理者
Ahmed Omar
thank you for the post, but here a question would it make difference if I used Using the WordPress Block Editor to add photo gallery than using Envira ?
WPBeginner Support
Envira has more tools and customization options than the default gallery
管理者
E
I’m so glad I found this article and this website. Love you guys right now!
Lynsey
I love you! Is there any way to make the thumbnails smaller?
Editorial Staff
Yes. Go to Settings > Media. Edit the thumbnail size. Then download a plugin called Regenerate thumbnails. Run that plugin, and thats it.
http://wordpress.org/extend/plugins/regenerate-thumbnails/
管理者
Sandeep Singh
I am really Thankful for the suggestion to add Lightbox effect to the gallery. I really appretiate such kind of support and hope same for the future.
Mike
Hello,
This is great, one question though is there a plugin or anything that is out there to make the gallery into a slideshow. For example say the first attached images shows up large and below are the thumbs of all the image in the gallery and you can click on a image to change the large image rather than a lightbox effect.
Thanks,
Mike
Editorial Staff
Not sure if a plugin like that exists.
管理者
Renee
Pretty sure that Fancybox plugin does that. You can enable or disable lightbox and thumbnails.
Emma Beatty Howells
Thanks for a great solution I am new to all this and am trying to work out the easiest way to manage photogalleries on line – this keeps it simple and elegant! Something else I found useful was an App that watermarks photos with the minimum of fuss… ‘ImageBucket’.
Tiaan
Thanks, works like a bomb!
Michael
Seems easy enough. Is there a way to have captions under each picture? Also, when it opens to a lightbox, is there a way to have descriptive text in the lightbox with the image?
Editorial Staff
This plugin should be able to do what you are looking for: http://wordpress.org/extend/plugins/gallery-and-caption/
管理者
Alex
I have a banner at the top of my website which displays a picture. When it opens the lightbox, the banner still appears over it. Is there any way, a code or something, which will stop this?
Thanks
Alex
Editorial Staff
Probably happening because your banner has a very high z-index value set. Lower that value in your CSS. There are a lot of CSS tutorials covering z-index on the web.
管理者
JulieBozza
This is a really cool solution, thank you! So much quicker and neater than what I was doing…
Is there a way, however, to choose which of the images appears as the main thumbnail? That is, the thumbnail that appears in the ‘feed’ before you open up the individual post.
Thank you in anticipation!
wpbeginner
@JulieBozza The thumbnail for the post is selected by using Featured Image feature. In your post editor, look at the right hand side, below publish button there should be a box in that line called Featured image.
JulieBozza
@wpbeginner Hello! Thanks for the reply. Unfortunately when I do that, it changes the banner image, but has no effect on the thumbnail in the post. I’m using the Twenty Eleven WordPress theme, so perhaps it’s giving the banner the priority, as it were.
wpbeginner
@JulieBozza You are referring to these gallery thumbnail images right???
JulieBozza
@wpbeginner LOL! Yes. I created the gallery post exactly as described above.
I don’t know if it would help to visit the post itself, but here’s the URL. Keep in mind that the site is a work in progress!
http://rupertfyoung.com/2011/09/pierrefonds-september-2011/
wpbeginner
@JulieBozza The gallery works like it should.
http://rupertfyoung.com/category/gallery/ << If you are referring to the thumbnail image here, then that is controlled by your Featured Image or the first attachment I believe. Upload a featured image that is low in width (thumbnail size or something)… And it will not take over the header image.
wpbeginner
@ukdazza The problem is with your site rather than this plugin. jQuery issues like these are very common. There is another jQuery that is causing this plugin to not work. You would have to change positions of the other jQuery code.
This is a game of trial and error when you encounter problems like these.
ukdazza
I’m having a problem where we’re using slickr flickr plugin to create thumbnail galleries with lightbox features. However the lightbox isn’t working at all. According to the notes I can find online about this kind of problem with this plugin, it is likely there is more than one lightbox or more than one jQuery running – causing it to not run properly.
Lightbox doesn’t work. If you click a thumbnail it opens the image in the browser, which is rubbish.
Any ideas? I hoped you or someone might have an idea because I tried to install this plugin and it said the destination was already taken.
TGA
Wow. Thank you SO much. I was using NextGEN gallery, but wasn’t allowed to let my client have galleries with thumbnails of various sizes. (Dumb). So I realized using the native gallery that would be possible, but then Highslide wouldn’t create a thumbnail viewer like it would with NextGEN. Point being, this was a lifesaver! It may not be perfect, but it’s A solution and now I can move on with the project!
wpbeginner
@TejSanusi✔ This plugin has a way for users to view the next image as part of the same lightbox.
TejSanusi✔
Is there anyway to create a lightbox gallery that is enabled from one thumbnail. When the user clicks on the thumbnail, the lightbox is created, with a series of gallery images?
cata
Is quite interesting the plugin mentioned in the article. I have also tested with good results this one http://wordpress.org/extend/plugins/lightbox-gallery/
Chris
Thanks for the great writeup. I found this extremely useful. I do have a question though. What if I had a pretty large gallery of about 40 or 50 pics and I only wanted one of them displayed in the post and then when someone clicks on it they’d be able to scroll through the entire gallery? Is this possible? I’d rather not have all 40 pics displayed in my post and I think this would be useful.
Thanks!
Keith Davis
Nice one boys.
Never knew that Wordpress had a gallery function… do you guys know everything?
Might actually use this one day.
jonathan perrodin
Hey thanks for this, I’ve been wanting to get this on my site, but was too lazy to look for a plugin that did it simply. This was perfect.
Mike Roberts
I am an artist and illustrator and I continue to be disappointed by the options for displaying a gallery of images in WordPress. I live in hope that, sometime soon, some bright coder will answer my plea!
Gretchen
I didn’t realize how hard it was to find a lightbox plugin that used the native WordPress gallery function until I started looking for one! I ended up with http://wordpress.org/extend/plugins/lightbox-plus/ because of its ability to specify via shortcode in each post/page gallery whether it was to use the lightbox setting or not. I actually like to use the attachment pages sometimes, and needed a lightbox plugin that would allow me to choose when to use it. I’d be curious to hear if anyone else has found another lightbox plugin with that feature.
Bronson
Thanks for the information.
It’s great to be able to apply the lightbox effect to native galleries trather than having to go and manually recreate them.
Sonu
How this works ? and do we need a lightbox class to every image on gallery ?
Editorial Staff
No you don’t need to lightbox class every image on the gallery. It automatically does that for all images in the gallery. The class should be added on any other image that you have aside from the gallery..
管理者
Binoy
The problem here is all the images in post show up on gallery. Any options to select images?
Editorial Staff
No that is not possible yet.
管理者
Leo
Hi! To select the images to show in the gallery try this plugin: Multiple Galleries, you can find it here > http://goo.gl/kNFer
Bye!
Editorial Staff
Thanks for sharing this plugin. Updating the article to add this
Preston
Each image should have some kind of wordpress number associated with it. I exclude images in the gallery with this code, hopefully it works for you:
[gallery link="file" exclude="Photo#, Photo#, Photo#"]