読了時間9分（1886語）

Elementorで画像ギャラリーをプロのように追加・編集する

2024年10月11日金曜日

18502ヒット

Elementor を使用すると、ページや投稿の作成に大いに役立ちますが、完全に機能させるためにはより多くのツールが必要になる場合もあります。これらの重要なツールの 1 つとして、強力なページビルダーを改善できるギャラリーマネージャーが挙げられます。 WP Media folder を使用して Elementor でギャラリーを追加および編集する方法を見てみましょう。.

ギャラリーマネージャや主要なページビルダーとの統合など、素晴らしいツールを使えば、 WP Media Folder を使っていい感じのギャラリーを作成したり、メディアライブラリを数回クリックするだけで整理することができます！

このチュートリアルでは、ギャラリー・マネージャを使用して、Elementorから直接、ギャラリーを最初から作成します。.

WP Media FolderでWordPressギャラリーを作成する
ElementorでWordPressギャラリーを追加する
メディアフォルダーを使用して高速ギャラリーを作成する
お気に入りのビルダーで WP Media Folder を使い始める

WP Media FolderでWordPressギャラリーを作成する

まず、 WP Media Folder Gallery Addonを使用してギャラリーを作成する方法を見ていきます。.

アクセスできます。 WP Media Folder とギャラリーアドオン メディアライブラリ > メディアフォルダギャラリー

この画面では、 + 新しいギャラリーの追加 の上にマウスを置き、 + 新しいメディアギャラリーの作成をクリックする必要があります。

これにより、ギャラリーのタイトルを入力し、テーマを選択できるモーダルが開きます。.

とりあえず、ここでは「マイギャラリー」と名付け、デフォルトのテーマのままにします。.

これにより、多くの設定オプションを備えたギャラリー作成ダッシュボードに移動し、ギャラリーを構築します。まず、ギャラリーに画像を追加します。.

ギャラリーにメディアを追加する方法は数多くありますが、主なものとしては メディアライブラリ と、から直接アップロードする方法があります PCのファイルエクスプローラー。両方の方法を見ていきましょう。

まず、 メディアライブラリ オプションがありますので、それをクリックします。

ここをクリックするとメディアライブラリが開きます。私のメディアライブラリにはフォルダがあることに気づくでしょう。これは WP Media Folder ご覧ください。こちらをただし、それはまた別の記事で説明します ;)

ここで画像を追加するには、追加したい画像を追加したメディアフォルダーに移動し、Ctrl + クリックで画像を選択し、最後に 画像をインポートをクリックします。

これにより、選択したすべての画像がギャラリー・マネージャに追加され、使用したり調整したりできるようになります。.

から直接画像をアップロードするオプションを見てみましょう ファイルエクスプローラー。そのためには、フォルダーアイコンをクリックします。

これを行うと、ファイルエクスプローラーがすぐに開き、フォルダー内を移動してギャラリーに追加する画像を選択できます。.

アップロードしたい画像を選択し、開くをクリックします。

これを行った後、私たちは完了しているはずです！これで、ギャラリー・マネージャ内のすべての画像をギャラリーに使用する準備が整いました。.

すべての画像が配置されたので、ギャラリーの設定を確認しましょう。そのためには、2 番目のタブ「 表示設定とショートコード」。

最初に、8つのギャラリーがあり、それぞれのギャラリーに独自の設定があることがわかります。.

それでは Masonryで確認できるとおり、さまざまなサイズの画像が多数表示された、古典的な壁面です プレビュー 。

設定の下で、すべてのオプションから選択できます。たとえば、画像のサイズや masonry レイアウトなどです。現在の垂直方向から水平方向に編集し、画像を小さくしてみましょう。.

プレビュータブを確認し、現在の表示を確認します。

本当に良いツールであり、すばらしい機能を備えていることがわかります。数回クリックするだけで数秒で変更を加え、外観を確認できます。ギャラリーの作成がこれほど簡単だったことはありません。

ElementorでWordPressギャラリーを追加する

を使用してギャラリーを作成する方法を見てきたので WP Media Folder を使用して投稿やページに追加する方法を見ていきましょう Elementor。

これを行うには、ページまたは投稿に移動し（または作成し）、 Elementorで編集 をクリックします。ページ・ビルダーが読み込まれます。

エディターで、 WP Media Folder アドオンギャラリー ブロックを探し、それをコンテンツに追加します。

ブロックが読み込まれ、Media Gallery Addon Blockが追加されたことが通知されます。.

左のタブで、必要なギャラリーを選択したり、調整したりすることができます。.

まず最初に、 「ギャラリーを選択。

以前に作成したギャラリーは、ブロックの下にあるページ・ビルダーに自動的に読み込まれます。.

ここでは、ギャラリー・マネージャで選択した Masonry テーマが表示されています。ブロック設定から直接選択できるテーマで利用できるすべてのオプションを確認してみましょう。.

Masonry

ほぼすべてのページにぴったり合う非常に優れたテーマで、多数の画像を表示できます。.

デフォルト

このテーマでは、画像のタイトルとともにクラシックな方法で画像を表示することができます。.

ポートフォリオ

これにより、デフォルトのテーマと同様の画像を別のフォントで表示でき、アート作品の表示に最適です。.

スライダー

スライドごとに表示する画像の数を絞ることができるクラシックスライダー。.

フロースライド

スライダーテーマに似ていますが、アニメーションが異なり、1つのスライドに1つの画像を表示しますが、他の画像をプレビューすることもできます。.

グリッドフォーマット

画像にマウスオーバーしたときに画像のタイトルを表示する正方形の画像のクラシックギャラリー.

マテリアル

本当に素晴らしいテーマで、正方形の画像をきれいなシャドウとタイトルで表示できます。.

カスタムグリッド

画像のサイズを自由に変更して、望むように表示できるグリッドテーマは、独自の画像サイズ/寸法でギャラリーを作成したい場合に最適なオプションです。Gallery Managerでの動作を簡単に見てみましょう。.

左側のメニューにあるすべてのギャラリーのオプションを見てみましょう。.

まず最初に、 ギャラリー・ナビゲーションがあります。このオプションを有効にすると、 WP Media Folder ギャラリー・アドオンで利用可能なナビゲーション・ギャラリーを使用できるようになり、親ギャラリーやサブギャラリーも使用できるようになります。実際のデモはこちら

2番目のオプションとして、 画像タグの表示があります。多数の画像をギャラリーに保存していて、フロントエンドで WP Media Folderのタグシステムを使って画像をフィルタリングしたい場合に便利です。

次に、 テーマセレクター があり、利用可能なテーマ（以前に表示したもの）から選択でき、テーマに応じてレイアウトやスライダーの遷移時間などの特定の設定も表示されます。

さらに確認を続けると、 ギャラリーの選択 というオプションがあり、メディアギャラリーマネージャで作成したすべてのギャラリーから選択できます。

画像サイズこのオプションを使用すると、利用可能なすべての画像サイズから選択して、画像をコンテンツにぴったり合うように調整できます。

ライトボックスサイズ オプションを使用すると、画像サイズと同様に、クリック時に表示されるライトボックスのサイズを選択できます。

クリック時のアクション Action on Click that will allow us to select between showing a lightbox that is a larger version of the image, going to another page or just doing nothing when clicking on the image.

そして最後のオプションは、画像の表示順序を設定するもので、ギャラリーで画像をどのように表示するかを指定できます。.

もちろん、これらに加えて、画像間の余白の設定、ホバー時の色の変更、枠線や影の追加などの設定も可能です。.

Elementor を使用して、 WP Media Folder ギャラリーを微調整し、ページに合うようにするのは非常に簡単であることがわかります。