メインコンテンツへ移動

WP Media Folder: フォルダーからのWordPressギャラリー

WordPressにはネイティブのギャラリー機能が搭載されています。この機能をフォルダベースで拡張することにしました。フォルダから、または選択した画像からギャラリーを作成できるようになります。Gutenbergエディタをお使いの場合は、 6. Gutenbergのギャラリーブロック

 

ギャラリーを作成

 

フォルダを開くか画像を選択すると、「フォルダからギャラリーを作成」というボタンが表示されます。ギャラリーを作成すると、WordPressのデフォルトのオプションに加えて、以下のような新しいオプションがいくつか利用できるようになります

  • ギャラリーテーマ:ギャラリーのレイアウト
  • 列:テーマの列数
  • ギャラリー画像のサムネイルサイズ: WordPressのデフォルトの画像サイズ変更から選択
  • ギャラリー画像ライトボックス（大）サイズ
  • 画像をクリックしたときのアクション:ライトボックスを開く、別のページを読み込む、何もしない、またはカスタム リンクにリンクする (単一の画像をクリックしてリンクを選択することもできます)

アクションクリックギャラリー

  • 画像の自動挿入:このフォルダに画像を追加すると、ギャラリーに自動的に追加されます
  • 並べ替え:日付、タイトル、カスタム、ランダムで画像を並べ替えることができます
  • 順序:昇順、降順

大きなサムネイル表示（たとえば、2 列の広い幅のギャラリー）で画像の品質が悪い場合は、中サイズまたは大きいサイズの画像を読み込むことをお勧めします。.

 

ギャラリーパラメータ

 

デフォルトのギャラリーは、WordPressのデフォルトのギャラリーテーマを上書きします。テーマに既にWordPressギャラリーのスタイル設定オプションがある場合は、この機能を無効にすることができます。.

- ギャラリーショートコードを使用するには、 「設定」> WP Media Folder >「Wordpressギャラリー」>「ショートコード」タブ。オプションを選択すると、ページの下部にショートコードが表示されます。

 

wp-gallery-ショートコード

 

サンプルのショートコードは次のとおりです。

[ギャラリー wpmf_autoinsert="1" wpmf_folder_id="8" display="default" columns="3" size="medium" targetsize="large" link="file" wpmf_orderby="post__in" wpmf_order="ASC" gutterwidth="10" border_style="solid" img_border_radius="10" border_width="1" border_color="#dd3333" img_shadow="1px 1px 10px 2px #cecece" autoplay="1"]

- 属性:

+ 'wpmf_autoinsert': 1,
+ 'wpmf_folder_id': フォルダーの ID,
+ 'display': デフォルト || スライダー || ポートフォリオ ||masonry,
+ 'columns': 1 -> 9,
+ 'size': 画像のサイズ,
+ 'targetsize': ライトボックス画像のサイズ,
+ 'link': ファイル || 投稿 || なし || カスタム, // 画像をクリックしたときにライトボックスを表示する場合は 'file' を使用します
+ 'wpmf_orderby': post__in || ランダム || タイトル || 日付,
+ 'wpmf_order': ASC || DESC,
+ 'gutterwidth': 画像間のパディング (px),
+ 'border_style': 実線 || 点線 || dashed, ....
+ img_border_radius (px), border_width (px), border_color,
+ img_shadow: shadow には H offset, V offset, blur, spread (px) and color が含まれます,
+ 'autoplay': 1 || 0 // 自動再生スライダー,
+ 'include_children': 1 || 0 // サブフォルダ内の画像も含めます

ギャラリー内の画像ごとにカスタム リンクを定義できます。これは、ページまたは投稿にリダイレクトするギャラリーに基づいてホームページ レイアウトを作成する必要がある場合に非常に便利です。.

ギャラリーを編集しているときに、画像をクリックして右側の列のオプションを確認します。.

 

リンクギャラリー画像

 

WordPressのデフォルトのリンクマネージャーを使用して、この画像への内部リンクまたは外部リンクを定義できます。また、リンク先を同じウィンドウに開くか、新しいウィンドウ（新しいタブ）に開くかを指定することもできます。.

 

画像の詳細

 

最初のギャラリーオプションはテーマの選択です。デフォルトテーマはWordPressのデフォルトテーマを拡張したもので、画像にライトボックスを追加できます。.

 

デフォルトテーマ

 

Masonry 、固定幅と可変高さの画像の壁を表示します。.

 

Masonryテーマ

 

ポートフォリオ テーマは、ホバー効果、タイトル、キャプションを備えたスタイリッシュなギャラリーです。.

 

ポートフォリオテーマ

 

スライダー テーマは、タイトルとキャプションが付いた水平スライダーです。.

 

画像28

 

4. 画像オプション

各画像にはギャラリー内のオプションがいくつかあります。画像をクリックするとオプションが表示されます。.

  • 選択したテーマに応じて、タイトルとキャプションをギャラリーに表示できます
  • リンクを使用すると、例えば画像にライトボックスを追加したり、ギャラリー内の個々の画像にカスタムリンクを追加したりできます。WordPressのリンクマネージャーが役立ちます。
  • リンクターゲットは、リンクが同じウィンドウに読み込まれるか、新しいウィンドウに読み込まれるかを定義できます。

各ギャラリーでは、次の基準で画像を並べ替えることができます。

  • カスタムオーダー
  • ランダム順
  • タイトル
  • 日付

WP Media Folder にはNextGENギャラリーインポーターが搭載されています。プラグインをインストールすると、 WP Media Folder NextGENギャラリーのインストールを検出し、ギャラリーをインポートするための通知が表示されます。.

各ギャラリーは、ギャラリーの名前がフォルダー名として付けられた単一のフォルダーとしてインポートされます。.

 

画像32

 

Gutenberg エディターでギャラリーを表示できるようになりました。.

Gutenbergエディターでギャラリーを表示するには、 WP Media Folderの WP Media Folder Gallery」 「メディア」からフォルダーを選択し、 「ギャラリーを作成」ボタンをクリックします。また、メディアライブラリから画像を選択したり、PCから直接アップロードしたりして、独自のギャラリーを作成することもできます。

 

wpmfギャラリー

 

次に、上部の「ギャラリーの編集」下部の「画像のアップロード」

ギャラリーのすべての設定は右側のパネルにあります。たとえば、テーマ、フォルダーの選択、列、ライトボックス、順序付け、フォルダー コンテンツの更新などです。.

 

ギャラリーブロック設定

 

ギャラリーが作成されると、画像をクリックすると、右側のパネルでタイトル、キャプション、カスタム リンク、またはリンク ターゲットをすばやく編集できます。.

 

画像設定ブロック