メインコンテンツへ移動
読了時間9分 (1808語)

DIVIに最適なギャラリーマネージャーでスタンングなギャラリーを作成する

DIVIに最適なギャラリーマネージャーでスタンングなギャラリーを作成する_20210609-071125_1

ギャラリーの使用は通常、ウェブサイト上のコンテンツを表示する最も優れた方法の1つであり、画像を追加するだけよりもプロフェッショナルに見えるというのは事実です。しかし、ギャラリーを作成し、スタイルを追加することも、ページに要素を追加してウェブサイトに合うようにするという作業のように、非常に面倒な作業になる可能性があるのも事実です。.

これらのケースで通常使用するのは、完璧なツールを持つ既知のページ ビルダーですが、画像を追加する際に制限される可能性があるため、ここで WP Media Folder が役立ちます。

WP Media Folder とそのギャラリーマネージャを使用すると、DIVIから直接ギャラリーを管理および追加できます。このチュートリアルでは、それがどれほど簡単かを見ていきます;

この投稿では、 DIVIWP Media FolderWP Media Folder アドオン、および WP Media Folder ギャラリーアドオンを使用します。

WordPressとGoogleフォトアルバムを接続して素晴らしいギャラリーを作成する

この投稿のトピックの1つは、Googleフォトアカウントから直接インポートした画像を使用してギャラリーを作成することです。したがって、スマートフォンからGoogleフォトに簡単に画像をアップロードし、WordPressサイトでそれらを使用できます。.

それでは、接続から始めましょう。.

まず最初に、これにはGoogle Dev APPが必要です。ここにアクセスしてください: https://console.developers.google.com/project で新しいプロジェクトを作成します。.

プロジェクトに名前を付けます。好きな名前を付けることができます。.

プロジェクトが作成されるまでしばらくお待ちください。.

これが初めて フォトライブラリAPIを使用する場合、アクティブ化する必要があります。アクティブ化するには、左側のメニューの マーケットプレイス に移動します。

検索ボックスに フォトライブラリAPI と入力して検索します。

クリックして、次に 有効化.

有効になったので、左側のメニューの「API とサービス」をクリックし、このパネルで 「認証情報」

ここに来たら、上部のパネルで 「+ 認証情報の作成」>「OAuth クライアント ID」、求められたら、OAuth 同意画面に名前を追加してください。

次に、以下のように認証情報を設定します:

  • 「Webアプリケーション」を選択し、任意の名前を追加します.
  • 承認されたJavaScriptのオリジン:https://your-domain.com(ドメイン名に置き換えてください。末尾のスラッシュは含めないでください).
  • 承認済みのリダイレクトURI: https://your-domain.com/wp-admin/options-general.php?page=option-folder&task=wpmf&function=wpmf_google_photo_authenticated
(ドメイン名に置き換えます)

Google がポリシーを変更したため、 OAuth 同意画面タブ > アプリの編集

認証済みドメインセクションで、 +ドメインを追加 をクリックしてドメインを追加します。

また、 ドメイン検証 セクションにも追加してください。

完了です! WP Media Folderの設定に必要なIDとシークレットが表示されます :)

それでは、Google フォト アカウントを WordPress サイトに接続しましょう。そのためには、 [設定] > WP Media Folder > [クラウド] > [Google フォト] タブ

最も簡単な自動モードを使用できます。Google アカウントにログインするだけで済みます。そのためには、 「接続モード」で「自動」を選択し、 Google フォトに接続してください

ポップアップが表示されるので、 同意するをクリックします。

最後のステップは、Googleアカウントにログインし、権限を許可して接続を完了することです。.

それで全部です。本当に簡単で速いですね? :)

Google PhotosからWordPress Diviギャラリーへ

タイトル通り、GoogleフォトからWordPressのDiviギャラリーへ。Googleフォトに接続したので、アカウント内のアルバムからギャラリーを作成できます。.

まず、管理者から新しいギャラリーを作成します。.

メディア > メディアフォルダギャラリーに移動します。

ここでは、WordPressサイト、コンピューター、または(この場合は)Googleフォトからの画像のさまざまなギャラリーを作成できます。.

クリックして +新しいギャラリーを追加

これにより、ギャラリーの名前を入力したり、テーマを選択したり、親ギャラリーまたはサブギャラリーとして追加するかどうかなどのその他のオプションを選択できるポップアップが開きます。.

すべてのオプションを選択しますが、ギャラリー作成後に編集できるため、心配する必要はありません;)

この画面では、ギャラリーに画像を追加するための3つのオプションがあります。WordPress(メディアライブラリ)から、コンピューターから、またはGoogleフォトから追加できます。.

このチュートリアルでは、 Googleフォト を選択しますが、好きなものを選択できます。

Googleフォトを選択すると、 Googleフォトで、以前にサイトに接続したアカウントのアルバムと画像がすべて表示されます。

アルバム全体をインポートするには アルバムをインポート をクリックするか、複数の画像を選択して 選択をインポートをクリックします。

たとえば、ここでは5つの画像を選択し、それらのみをインポートします。.

必要な画像をクリックして選択し、前述のように 選択したものをインポートをクリックするだけです。 

ギャラリーに画像を追加すると、マネージャーでそれらを確認できます。この最初の画面では、画像を並べ替えたり、ギャラリーの表紙として画像を設定したり、画像自体を編集したりするオプションがあります。.

別のタブ 表示設定とショートコードに気づくでしょう。

このセクションでは、ギャラリーから、使用するテーマ、列の数、画像サイズ、クリック時のアクション、ライトボックスをクリック時のアクションとして選択した場合のライトボックスサイズなど、さらに多くの設定を編集するオプションがあります。.

また、使用したい場合に備えて、そのギャラリーのショートコードもあります ;)

Diviではこれらのオプションも利用できるので、ギャラリーの何かを編集するたびに毎回来る必要がないことを心配する必要はありません。.

ギャラリーの作成が完了したら、保存をクリックして編集したいページ/投稿に移動し、 Divi Builderを使用するをクリックします。フロントエンドまたはバックエンドで問題なく使用できます;)

通常どおり列を選択し、 WPMF Gallery Addon モジュールを探します。

次のポップアップでは、既に作成されたギャラリーを追加するオプションと、ギャラリーを簡単に編集できるようにギャラリーマネージャーの表示タブで表示された他のすべてのオプションが表示されます。.

以前に作成したギャラリーを選択します。.

ギャラリーが表示され、ライブプレビューですべての表示設定を編集できるため、すべての変更が自動的に反映されます。.

変更が行われるたびにプレビューをクリックしたりページをリロードしたりする必要なく、状況を確認するのに最適なツールです。.

これで、ページ作成を終了して公開することができ、フロントエンドでのギャラリーの表示を心配する必要がなくなります。.

本当に素晴らしいツールですね。

クラウドからDiviに直接ギャラリーを作成する

おそらくそう思っていたかもしれませんが、答えはノーです!クラウドにホストされた画像でギャラリーを作成することもできます。ストレージ容量を節約し、Diviを使用してギャラリーを配置することもできます;)

ここではGoogleドライブフォルダを使用しますが、 WP Media Folder とAddon(Dropbox、AWS、 OneDrive)で他のクラウド統合を利用できることに留意してください。.

GoogleドライブをWordPressサイトに接続するには、 こちらの 手順はGoogleフォトの場合と似ているため、問題なく接続できるはずです。

Google Driveフォルダの作成/同期後、編集したいページ/投稿に移動し、 Divi Builderを使用するをクリックし、列を追加してモジュール内で WPMFギャラリーと呼ばれるものを探します。

このモジュールを使用すると、Divi Builder 内で直接ギャラリーを作成できます。まず、 画像セクションの「ギャラリー画像を追加」をクリックして画像を追加しましょう。

これにより、メディアライブラリがポップアップとして読み込まれます。追加したい画像が入っているフォルダを探して、そのフォルダをクリックしてください。.

このケースではGoogleドライブフォルダを使用します。.

右側のセクションで、追加したい画像をクリックして選択し、 選択をクリックします。

これにより、Diviモジュールのすべての画像が読み込まれ、テーマ、列、サイズ、クリック時のアクション、境界線、シャドウ、境界線の半径、画像にぼかしを追加するオプションなど、ギャラリー編集で使用できるすべてのオプションが表示されます。.

これが一番良い点なのですが、変更を加えるたびにプレビューに自動的に表示されるので、変更のたびにページを再読み込みしたりテンプレートを保存する必要がありません。.

ご覧のとおり、これらのプラグインは完璧な組み合わせです;)

最高の組み合わせで最もプロフェッショナルなWordPressウェブサイトを手に入れよう

ここでは、 WP Media Folderで利用可能な機能の一部のみを紹介しました。メディアをAWSに完全にオフロードする機能、PDF埋め込み機能、 OneDrive やDropboxなどのクラウド接続機能など、他にも多くの機能があります。さあ、これらの素晴らしい機能の使用を開始しましょう! こちら からメンバーシップを取得してください :)

最新情報をお届け

ブログを購読すると、新しい更新情報があった際にメールでお知らせしますので、見逃すことはありません。.

関連記事

 

コメント

まだコメントはありません。最初にコメントを投稿してください
既に登録済みですか? こちらからログイン
Saturday, June 06, 2026

キャプチャ画像