メインコンテンツへ移動
読了時間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 DriveをWordPressサイトに接続するには、こちらの詳細ガイドこちらのプロセスはGoogleフォトのプロセスと似ているため、問題はないはずです。

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

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

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

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

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

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

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

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

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

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

最新情報をお届け

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

関連記事

 

コメント

まだコメントはありません。最初にコメントを投稿してください
既に登録済みですか? こちらからログイン
2026年2月22日日曜日

キャプチャ画像