BLOG

【2019年7月最新版】動画もOK!WordPressにギャラリー機能を追加するプラグイン「Photo Gallery」でギャラリーページを作成する方法

WordPressサイトにギャラリー機能を追加するプラグイン「Photo Gallery」の2019年7月時点での最新版を導入する手順です。

前提条件

  • WordPressバージョン:5.2.2
  • インストールしたPhoto Galleryプラグインのバージョン:1.5.29

インストール

プラグインの「新規追加」より「Photo Gallery」を検索してインストールと有効化を行います。

インストールすると、管理画面のサイドメニューに「PhotoGallery」のメニューが追加されました。

ギャラリーページ作成の大まかな流れ

最初どのようなしくみなのかよくわからなかったのですが、公式サイトを見てみると「ギャラリー」と「ギャラリーグループ」という2つのカテゴリを使用してページを作ることも可能とのこと。

ギャラリーグループを作って固定ページに呼び出す

ギャラリーそのものをそれぞれ呼び出す

今回は後者の「ギャラリー」を固定ページに呼び出すやり方でギャラリーページを作成したいと思います。

ギャラリーの作成方法

ギャラリーに載せる写真をアップロードする

「Add Galleries/Images」の画面より「Add New」をクリックしてギャラリーを新規作成

「Add Images」をクリックするとアップローダーが立ち上がるので、「Upload Files」をクリックして画像をアップロードします

アップロードすると一覧で表示されるので、ギャラリーに掲載したい画像を選択して、「Add」をクリック

画面の下にギャラリーに追加した写真が出てきます。

各画像の設定

ドラッグ&ドロップで画像の順番を変更できます。タイトルやDiscriptionも設定します。

YouTube動画を含めたい時

Youtubeなどの動画もギャラリーに含めることができます。

「Enbed Media」ボタンをクリックして、ポップアップを表示させます

Youtubeの共有URLを入力して、ギャラリーに追加できます。

すべての設定がおわったら画面右上の「Publish」をクリックしてギャラリー設定は完了です。

猫の写真と犬の写真のギャラリーを作成してみました。

固定ページに反映する

「Gallery DEMO」という固定ページを作成して先程作ったギャラリーを呼び出します。

WordPressのエディタがGutenbergに変わってからどこからギャラリーを挿入すればいいのかわかりにくくなってますが、ブロックの種類一覧にPhotoGalleryのアイコンが追加されていました。

設定画面に切り替わりますので、表示したいギャラリーと、表示形式を選びます。

「Use default options」のチェックを外すともっと詳細な設定が可能です。

設定が終わったら右下の「Insert Post」をクリック。

こんなふうにPhotoGalleryのアイコンが追加されました。
このページを公開すると、ギャラリーの完成です!

サムネイルをクリックすると全画面で表示されます。

ギャラリーグループとして公開すると、同じページ内でギャラリーを切り替えてくれます。
デモページを作成してみましたので参考にどうぞ。

WordPressプラグインPhotoGalleryを使用したギャラリーページのデモ