WordPress(ワードプレス)には標準の状態でもサイトに写真ギャラリー表示する機能はありますが、使い勝手としても、美しさとしても今一歩です。そこで今回は写真ギャラリーを作成するプラグイン「 NextGEN Gallery 」を利用してみることにします。

NextGEN Gallery 設定図解 ワードプレスプラグイン

1.NextGEN Gallery とは?

NextGEN Gallery は2007年に登場してから年間150万件を超えるダウンロードを続ける業界標準といっても良いくらいにメジャーなプラグインです。シンプルなフォトギャラリーだけでなく、要求の厳しいフォトグラファー、ビジュアルアーティスト、イメージングのプロにも十分に通用するプロ版もあります。写真の一括アップロード、メタデータのインポート、写真の追加/削除/並べ替え/並べ替え、サムネイルの編集、ギャラリーのアルバムへのグループ化などの機能を備えた完全なWordPressギャラリー管理システムを提供しています。無料版では3つのギャラリースタイル(スライドショー、サムネイル、イメージブラウザーギャラリー)と基本的な機能が使えます。

2.NextGEN Gallery のインストール

ワードプレスダッシュボードの「プラグイン」>「新規追加」から、「NextGEN Gallery」と入力して検索します。下記が検索されるので、「今すぐインストール」をクリックし、インストール後「有効化」します。

インストールすると下記の画面が表示されます。動画は NextGEN Gallery の簡易説明、また、「Launch Gallery Wizard」をクリックすると操作説明(英語ですが)を受けることができます。この画面はいつでも NextGEN Gallery の Overview で見ることができます。

NextGEN Gallery は有料のプロ版にすると、より凝ったデザインのギャラリーや、画像保護、フルスクリーンライトボックス、個々の画像のコメントとソーシャルシェアリング、eコマースといった様々な強力な機能を持ちますが、無料でもかなりの機能が使えます。設定してみましょう。

3.ギャラリーを作成しサイトに設置する

インストールが終わったら、早速ギャラリーを作成してみましょう。

1)サイトに NextGEN Gallery ブロックを追加する

投稿を新規作成しビジュアルディタで「+(ブロックの追加)」をクリックします。

 

NextGEN Gallery ができているので、それをクリックします。

2)ギャラリーを追加する

「ADD NEXTGEN GALLERY」をクリックします。

「Select a Gallery」をクリックして表示させるギャラリーを選びたいところですが、今はまだ画像がありませんので、まず下記で画像をアップロードします。

3)画像をアップロードする

「画像をアップロード」をクリックします。下記の画面が表示されるので、今回は初めてギャラリーを作るので「Create a new gallery」が選ばれたままで「Gallery title」にお好きなタイトルを入力し、「ADD FILES」をクリックします。※タイトルは日本語だとうまく認識されないことがあるので、英語で作成しておいた方が安全です。

ファイルマネージャーが表示されるので、ギャラリーに追加するファイルを選びます。複数選択も可能です。
左のように赤枠の部分にファイルが並ぶので、「START UPLOAD」をクリックします。
アップロードが完了すると左記のように表示されます。

4)INSERT INTO PAGE をクリックします

  1. 「INSERT INTO PAGE」をクリックして上記の画面を表示します
  2. 「Select a Gallery」をクリックして、作成した(表示したい)ギャラリーを選択します
  3. Displays(画面表示)のスタイルを選びます。残念ですがモザイクや石積みのようなデザインのものは有料でないと選択できません
  4. 「INSERT GALLERY」をクリックします

写真ギャラリーの設置が終わると、その場所にはビジュアルエディター上は、下記のように表示されます。

以上でサイトに写真ギャラリーの設置ができます。

3.Displays 設定による画面表示の違い

Displays(画面表示)のスタイルは、それぞれ下記になっています。

← Basic Thumbnails
Basic Slideshow →
← Basic Image Browser

Basic TagCloud については、最初、下記の左の画像のように、画像につけたタグが最初画面に配置され、それをクリックすることで右の画像が表示されます。

4.Gallery の編集

Gallery の Manage Galleries をクリックします。

下記の画面が表示されるので、処理を行いたいギャラリーをクリックします。あるいは複数のギャラリーにチェックをつけて「Bulk actions」をクリックし処理を実行します。

1)Gallery の各画像下のメニュー

  • View:画像を表示
  • Meta:メタデータを表示
  • Edit thumbnail:サムネイルの切り出し範囲設定
  • Rotate:画像の回転
  • Publish:公開情報設定
  • Recover:画像の復元(アップロードの元データに復元)
  • Delete:画像の削除

5.Gallery の設定

Gallery の Gallery Settings をクリックします。

設定を変更したら「SAVE OPTIONS」をクリックして保存します。

1)BASIC THUMBNAILS

  • Override thumbnail settings :「はい」を選ぶと各ギャラリーページの設定をオーバーライドして下記を設定できる
    > Thumbnail dimensions :サムネイルの寸法
    > Thumbnail crop :サムネイルのクロップ
    > Images per page :1ページの枚数
    > Number of columns to display :1カラムの写真枚数
  • Enable AJAX pagination :ページを再表示せずにAJAXで一部だけ読み込む
  • Add Hidden Images :隠れている画像も追加で読み込む
  • Use imagebrowser effect :ブラウザー表示へのリンクを設置する
  • Show slideshow link :スライドショー表示へのリンクを設置する
  • Select View :PHPか従来機能か選択
  • Legacy (Old) Templates :旧スタイルのテンプレート

2)BASIC SLIDESHOW

  • Maximum dimensions :最大表示寸法
  • Autoplay? :自動再生
  • Pause on Hover? :マウスオーバーで停止
  • Show Arrows? :矢印を表示
  • Transition Style :画像遷移スタイル(フェードとスライド)
  • Interval :間隔時間 ms
  • Transition Speed :遷移時間 ms
  • Show thumbnail link :サムネイル表示へのリンクを設置する

3)BASIC IMAGEBROWSER

  • Enable AJAX pagination :ページを再表示せずにAJAXで一部だけ読み込む
  • Select View :PHPか従来機能か選択
  • Legacy (Old) Templates :旧スタイルのテンプレート

6.OTHER OPTIONS

Gallery の Other Options をクリックします。

設定を変更したら「SAVE OPTIONS」をクリックして保存します。

1)IMAGE OPTIONS

  • Where would you like galleries stored? :保存場所
  • Delete Image Files? :NextGEN上でファイルを削除してよいかどうか
  • Automatically resize images after upload :画像アップロード時に自動でリサイズを行うかどうか
  • What should images be resized to? :リサイズする画像のサイズ
  • Backup the original images? :オリジナルをバックアップとして残すかどうか
  • What’s the default sorting method? :デフォルトの画像順

2)THUMBNAIL OPTIONS

  • Default thumbnail dimensions :サムネイル寸法
  • Set fix dimension? :寸法に合わせるかどうか

3)LIGHTBOX EFFECTS

  • What lightbox would you like to use?:ライトボックスの効果の種類
  • What must the lightbox be applied to? :ライトボックスの効果をNextGENに限定するのか、他にも適応するのか選択

4)WATERMARKS

ウォーターマークの設定。テキストか画像かを選択できる。画像はアドレスを絶対アドレスで指定する。

  • How will you generate a watermark? :テキストか画像か選択
  • Position :位置選択
  • Offset :オフセット
  • Text :表示するテキスト
  • Opacity :テキストの透過度(※画像は透過度設定できない)
  • Font Family :テキストのフォント
  • Font Size :フォントのサイズ
  • Font Color :フォントの色

ワードプレスの標準と比べると便利で見栄え良くなります。ただしNextGENも有料ではおしゃれなレイアウトがありますが、無料では一般的なレイアウトのみです。画像ウォーターマークの透過度設定できないのが残念なところです。

pc_writer_oldman_150_01

NextGEN も古くからあってよいのですが、他にも良いのがあります。無料でインストールできる、表示の綺麗な写真ギャラリープラグインを5つ選んでみました。

表示の綺麗な写真ギャラリー 無料プラグイン Top 5 2019 ワードプレス

画質比較 Compress JPEG & PNG プラグインのインストール

WordPress(ワードプレス)に画像圧縮のためのプラグイン「 Compress JPEG & PNG images...

WebM動画に変換する方法 Internet Friendly Media Encoder

今回は無料のアプリを利用して簡単に 次世代フォーマットの WebM に動画を変換する方法について図解します。「 Internet Friendly Media Encoder...
image-quality-test-imagick-logo

ImageMagick の設定方法と写真画質比較

さくらのレンタルサーバーを使い WordPress(ワードプレス)のクイックインストールを行うと、標準で ImageMagick Engine...
photoshop-animation-gif-logo01

Photoshopを使ってコマ送り動画 を作成する アニメーションGif

今回は Photoshop を使って複数の写真からコマ送り動画を作成する方法を図解します。最終的にアニメーション Gif として保存します。Photoshop を使ってコマ送り動画を作成する...

Pin It on Pinterest