WordPressサイトへのライトボックスの追加：初心者のための究極のガイド

公開: 2020-04-20

ライトボックスは、画像ベースのWebサイトの多くの興味深い人気のある機能の1つです。しかし、WordPress Webサイトにライトボックスを追加する方法を誰もが知っているわけではありません。特に、初心者の方はそうです。したがって、初心者向けにこのガイドを用意して、WordPressWebサイトにライトボックスを追加できるようにします。

目次を隠す

1.ライトボックスとは何ですか？それを追加する方法は？
2.テーマがサポートしている場合はライトボックスを表示する
3.プラグインを使用したライトボックスの追加
1. 3.1。ステップ1：シンプルなライトボックスプラグインをインストールしてアクティブ化する
2. 3.2。ステップ2：SimpleLightboxプラグインを設定する
3. 3.3。ステップ3：画像/ギャラリーをメディアファイルにリンクしてライトボックスを表示する
4.最後の言葉

ライトボックスとは何ですか？それを追加する方法は？

ライトボックスは、フルスクリーンポップアップを作成し、ページの残りの部分を暗くすることによって画像とビデオを表示するモーダル画像ギャラリーです。例えば：

この美しく派手な効果は、ポートフォリオ、写真、または画像ベースのWebサイトに非常に役立ちます。それはあなたが画像をはっきりと見ることを可能にし、あなたのウェブサイトをより際立たせます。

通常、WordPressWebサイトのライトボックスを使用するには3つの方法があります。

ショートコードの追加
プラグインのインストール
ライトボックスをサポートするテーマを使用します。

初心者の場合、ショートコードの追加は上級ユーザーのみを対象としているため、プラグインを使用するか、その機能を念頭に置いてテーマを見つけることをお勧めします。

テーマがサポートしている場合はライトボックスを表示する

テーマにギャラリー/画像のライトボックスがすでに表示されているかどうかは言うまでもありません。しかし、多くのテーマがそれを示すためにさらにいくつかのステップが必要であることを私たちは知っています。たとえば、このテーマePortfolioはライトボックスをサポートしていましたが、ライトボックスを表示するにはギャラリーをメディアファイルにリンクする必要があります。

通常、2つのオプションがあります：メディアファイルまたは添付ファイルページへのリンク。画像/ギャラリーを添付ファイルページにリンクすると、画像をクリックすると、画像のみを含む新しい別のページが開きます。メディアファイルにリンクすると、次のようにページではなく画像のみが表示されます。

これを行うためのガイドです。

まず、投稿エディタに移動し、次にギャラリーをクリックします。

グーテンベルクエディターを使用している場合は、右側のサイドバーを見てください。[リンク先]セクションが表示されます。

単一の画像の場合、ツールバーの次のアイコンをクリックする必要があります。

クラシックエディタで、ギャラリーと単一の画像を作成または編集すると、[リンク先]セクションが表示されます。

次に、[メディアファイル]を選択し、[ギャラリーの挿入]をクリックして終了します。投稿を更新または公開するときに、そのギャラリー/画像をクリックすると、ライトボックスが実行されていることがわかります。

テーマがライトボックスをサポートしている場合、このアクションにより、必要なギャラリー/画像のライトボックスを有効にできます。それ以外の場合、ライトボックスはまったくありません。

ただし、構成はテーマによって異なる場合があります。たとえば、カスタマイザーでの作業が必要な場合もあれば、メディアファイルの代わりに添付ファイルページへのリンクを挿入する必要がある場合もあります。したがって、テーマを注意深く確認する必要があります。

どちらのテーマを使用する場合でも、以下のプラグインを使用してライトボックスを追加すると役立つため、ギャラリー/画像をメディアファイルにリンクする方法を知っておく必要があります。

プラグインを使用したライトボックスの追加

確かに、ライトボックスを追加することはまったく難しいことではありません。キーワード「ライトボックスプラグイン」を検索すると、この効果のプラグインのホストが表示されます。私たちの調査では、プラグインを2種類に分類しています。複雑なプラグインと、ライトボックスを追加するための単純なプラグインです。

複雑なプラグインに関しては、画像サイズ、境界線の色、ライトボックススタイルなど、ライトボックスを高度にカスタマイズするためのより高度なオプションがあります。たとえば、レスポンシブライトボックス＆ギャラリーやFooBoxイメージライトボックスには、より多くのカスタマイズツールがあります。ただし、初心者の場合は使用が難しくなります。その上、結果は単純なプラグインとそれほど変わりません。そのため、SimpleLightboxのような単純なプラグインを使用することをお勧めします。

Simple Lightbox Author(s): Archetyped Current Version: 2.8.1 Last Updated: July 13, 2021 simple-lightbox.zip 86% Ratings 200,000+ Installs WP 5.3+ Requires

Simple Lightbox Author(s): Archetyped Current Version: 2.8.1 Last Updated: July 13, 2021 simple-lightbox.zip 86% Ratings 200,000+ Installs WP 5.3+ Requires

Simple Lightbox Author(s): Archetyped Current Version: 2.8.1 Last Updated: July 13, 2021 simple-lightbox.zip 86% Ratings 200,000+ Installs WP 5.3+ Requires

このプラグインは使いやすく、200,000以上のアクティブなインストールで非常に人気があり、160の5つ星で評価されています。さらに、ライトボックスのデザインも優れています。

ステップ1：シンプルなライトボックスプラグインをインストールしてアクティブ化する

[ダッシュボード]> [プラグイン]> [新規追加]で、「simple lightbox」と入力し、[プラグインのインストール]をクリックして、[アクティブ化]をクリックするだけです。

ステップ2：SimpleLightboxプラグインを設定する

[プラグイン] > [インストール済みプラグイン]で、[シンプルライトボックス]タブの[設定]をクリックします。

SimpleLightbox設定のアクティベーションタブ

[アクティベーション]タブでは、一部のパラメーターを有効/無効にできます。チェックする必要がある最も重要なボックスは、ギャラリーのライトボックスを有効にする[ライトボックス機能を有効にする]です。このボックスを選択しない場合、他のセクションはすべて無意味です。

残りのボックスはオプションです。チェックマークを付けると、ホームページ、単一の投稿、ページ、アーカイブページ、ウィジェット、およびメニューにライトボックスが表示されます。

ライトボックスが多すぎるとWebサイトが少し派手になる可能性があるため、適切なセクションにライトボックスが本当に必要であることを確認してください。

SimpleLightbox設定のグループ化タブ

下にスクロールすると、[グループ化]タブがあります。スライダーまたは単一の画像の形でライトボックスを表示する方法を決定します。

アイテムをグループ化する：チェックマークを付けると、画像/ギャラリーがスライダーのように表示されます。これにより、ある画像から次の画像に移動できます。この機能をオンにした場合にのみ、このタブの他のセクションが有効になります。そうしないと、他のグループ化セクションが機能しません。

投稿ごとにアイテムをグループ化する：このボックスにチェックマークを付けると、1つの投稿からライトボックススライダーにすべてのアイテムがグループ化されます。投稿内の画像/ギャラリーのみをグループ化し、他の画像/ギャラリーを他の投稿、ウィジェット、およびメニューから除外する場合に実行します。

ギャラリーアイテムを個別にグループ化し、ウィジェットアイテムを個別にグループ化し、メニューアイテムを個別にグループ化します。それぞれにチェックマークを付けて、単一の投稿のギャラリー内のアイテム、ウィジェット内のアイテム、またはメニューアイテムをそれぞれグループ化します。これは、ライトボックススライダーの同じギャラリー、ウィジェット、またはメニュー内の次のアイテムに移動できることを意味します。訪問者を混乱させる可能性のある、さまざまな部分のライトボックスを台無しにしたくない場合は、これを行う必要があると考えています。

シンプルなライトボックス設定のUIタブ

UIタブには、ライトボックスのスタイルを変更するためのセクションがあります。ライトボックスの表示をカスタマイズする場合は、これに注意してください。

テーマ：ライトボックスには2つのスタイルがあります。好みに合ったものを選んでください。

ダークスタイル

ライトスタイル

ウィンドウに収まるようにライトボックスのサイズを変更します。見栄えを良くするために、このセクションをオンにすることを強くお勧めします。そうしないと、画像が全画面表示になり、このように画像全体を表示することはできません。

アニメーションを有効にする：チェックマークを付けると、読み込み効果が有効になります。

チェックを外すと効果が無効になり、ナビゲーションが速くなります。

スライドショーを自動的に開始する：このセクションを有効にすると、スライドショーが自動的に次の画像に移動します。

スライドの長さ：上の自動スライドショーセクションをオンにすると、ここでスライドの長さを選択できます。

アイテムをループする：スライドの1ラウンド後にアイテムを繰り返しますか？はいの場合は、このボックスをクリックします。

オーバーレイの不透明度（0 – 1）：背景のオーバーレイの不透明度を変更できます。不透明度が低いほど、背後の投稿をより鮮明に表示できます。たとえば、不透明度を0,1に設定して、背景が非常にはっきりと見えるようにします。

デフォルトのタイトルを有効にする：このボックスをクリックして、画像のタイトルを表示するように選択できます。タイトルの表示方法は次のとおりです。

SimpleLightboxの[ラベル]タブ

最後に、このタブでは、各ボタンのラベルを変更できます。ただし、テーマの編集時にショートコードを追加しない限り、これらのセクションは有効になりません。したがって、初心者向けのこのチュートリアルでは、このタブを扱う必要はありません。

Simple Lightboxプラグインのすべての設定が完了したら、[ラベル]タブのすぐ下にある[変更を保存]をクリックします。

ステップ3：画像/ギャラリーをメディアファイルにリンクしてライトボックスを表示する

ライトボックスを追加する画像/ギャラリーを決定するには、その画像/ギャラリーへのメディアファイルリンクを挿入する必要があります。メディアファイルへのリンクを追加しないと、ライトボックスを表示できません。

「テーマがサポートしている場合はライトボックスを表示する」のパートで説明したガイドに従ってください。ご覧のとおり、Simple Lightboxプラグインを使用する場合は、その方法を確実に知っておく必要があります。

最後の言葉

上記は、WordPressWebサイトにライトボックスを追加する最も簡単な方法です。特に初心者の場合は、SimpleLightboxプラグインを使用するのが簡単で効果的な方法です。あなたの要求、あなたのウェブサイトとあなたの美学に応じて、あなたは最も望ましい結果を得るために異なるライトボックスプラグインを選ぶことができます。または、ライトボックスをサポートするWordPressテーマを見つけて、その効果を表示するように構成することもできます。

複雑なライトボックスプラグインの詳細については、下にコメントを残して、フォローを続けてください。