画像の管理とギャラリー表示のプラグイン『NextGEN Gallery』
§ はじめに
関連記事「あとで後悔しないためのWordPress構築 3大ポイント」にも書いていますが、『NextgenGallary』は、プラグイン独自のタグを記事内に書き込むことになるため、使用回数が多いと、万一、開発がストップしたり（多分、無いと思いますが）、他の画像プラグインに切り替えたりしたい時、プラグインからの離脱が非常に難しくなります。
私個人としては、一つの記事に一つのイメージをアップする程度なら、WordPress付属のメディア管理機能で十分だと思います。
（ギャラリーを作成したい場合は、それ専用のプラグインを使う）
『NextGenGallery』を導入する場合は、「永久に使い続ける」ぐらいの気持ちで、よくよく検討して下さいね。
§ NextGenGalleyの特徴
ここでは、画像ファイルの管理と、Highslide、ThickBoxといったエフェクト、アルバム＆ギャラリーを表示する有名なプラグイン『NextGEN Gallery』の使い方について説明しています。
一見、複雑そうなので、導入を見合わせている方もあるかもしれませんが、一度要領を覚えたら、これ一つで、画像管理やエフェクト、ギャラリー表示などが可能なので、ぜひトライしてみて下さい。
【NextGEN Gallery】は、こんな方に向いています。
・画像（特に、フォト）をよく使う
・ギャラリーを簡単かつ効果的に表示したい
・ハイスライドやシャドウボックスといったエフェクトを取り入れて、お洒落に演出したい。
§ もくじ
- インストールと初期設定
- galleryの作成と画像のアップロード
- galleryの管理と投稿への挿入
- Effects 効果の選択
- ギャラリーとアルバムの表示
- スライドショーの表示
- 画像・スライドショーを任意の場所に表示
- その他の画像プラグイン
まず、配布先からファイルをダウンロードします。
http://alexrabe.boelinger.com/wordpress-plugins/nextgen-gallery/
解凍したら、「wp-contents」→「plugins」フォルダにアップロードして、管理画面で有効化します。
すると、管理画面の左側にGalleryメニューが現れます。
初めて使用する場合は、まず『options』→『General Options』にアクセスします。
後から変更可能ですが、肝心な部分は「Gallery path」です。
「Gallery path」はフォルダの置き場所になります。自分の好きなフォルダを指定してもOKです。
「Delete image files」は、NextGENのアルバム情報から画像を削除した場合、サーバー上からも削除するならチェックを入れます。（入れておいた方が容量の節約になります）
次に、『Image』を開き、Highslideなど画像の拡大効果を用いた場合の、最大画像サイズを設定します。
これは投稿内に表示されるサイズではなく（投稿内におけるサイズ設定は、投稿記事の中で行います）、拡大効果を加えた時の表示サイズです。
また、画像を単一で表示した場合、各画像ファイルに対し、キャッシュを作成するか設定します。
設定した方が、CPUへの負担は軽減されます。（一応、チェックしておきましょう）
最初に『Add Gallery/Images』→『Add new gallery』を開き、galleryの名前を設定し、「Add gallery」をクリックします。
次に、galleryに属する画像をアップロードします。
Zipファイルに圧縮した複数の画像を一気にアップロードする場合は、「参照」でファイル名、in to で、アップロード先のgalleryを選択し、「Start upload」をクリックします。これが一番簡単で、速いです。（アップロードできるファイルの上限はサーバーの仕様に依ります）
ファイルが大きい場合、アップロードには少し時間がかかります。
ファイルが解凍され、galleryデータに追加されると、次のようなメッセージが出てきます。
Create new thumbnailsで自動的にサムネイル画像を作成するので、これが100%完了するまでは、ブラウザを閉じたり、リロードしたりしないよう、注意して下さい！
すでにサーバーにアップロードされている画像をgalleryとして使用する場合は、「Import image floder」を開き、保存先のパスを記入して、「Import folder」をクリックします。
画像ファイルを個別にアップロードする場合は、「Upload Images」を開き、画像を指定して、「Upload images」をクリックします。
アップロードが終了したら、ファイルがきちんと揃っているか、保存先のフォルダを開いて、一度チェックしてみるといいと思います。
『Manage Gallery』を開き、編集したいgalleryの「Title」をクリックします。
ギャラリーの説明を記入します。
固定ページにgalleryを表示したい場合は、「Page Link to :」で、ページを指定します。
「Preview image」は、アルバムの表紙となる画像を選択します。
galleryページを新規作成する場合は、「Create new page」でページを指定します。
これらの設定は後から変更できます。
次に、各イメージのデスクリプションなどを設定します。
絶対的に必要なものではありませんが、あった方が分かりやすいです。
galleryのグループから除外する場合は、excludeにチェックを入れます。
FilenameにはTitleで設定した名称が入りますが、サーバー上のファイル名は変更されません。
たとえば、ID番号2のシングル・ピクチャーを一枚だけ挿入する場合は、
[php][singlepic=2,320,280,center][/php]
「320」「280」は投稿内に表示するサイズの横幅・縦幅、centerは画面の中央を意味します。
（サイズやポジションの記入は特に必要ありません）
投稿内の記入。
実際の画面。マウスをのせると、Gallery Manageで設定したDescriptionが表示されます。
★注意★
公式サイトでは、コードの書き方は、次の通りになっています。
参照URL：http://nextgen.boelinger.com/singlepic/
[singlepic id=x w=width h=height mode=web20|watermark float=left|right]
しかし、私の環境の場合、この書き方では動作しませんでした。
原因は分かりませんが、使用しているテーマやサーバによるのかもしれません。
きちんと表示されない場合は、[singlepic=×,width,height]という書き方と、二通り、試してみて下さい。
また、サイトに紹介されているコードの前後には、わざと空白が挿入されています。
[ 空白single・・空白 ]
投稿に挿入する際は、[single・・]のように、ぴっちり詰めて記入して下さい。
各ピクチャーの表示方法およびデモは公式サイトの次のリンク先で確認することができます。
拡大効果を選択するには、『Options』の『Effects』で設定します。
「ThickBox」「LightBox」「Highslide」「Shuterr」「Costum」の５種類ありますが、デフォルトで動作するのは、「ThickBox」と「shuterr」だけです。「LightBox」と「Highslide」効果を使う場合は、別途にプラグインをインストールする必要があります。
ThickBox。グレーの背景の上に白い囲みで表示されます。
shuterr。グレーの背景の上に、画像が飛び出すような感じで表示されます。
Highslide。画像がスーッとスライドして拡大表示されます。
Highslide効果を取り入れるには、『WP-Highslide』『Highslide JS』という２つのプラグインが必要です。
こちらのURLから、『WP-Highslide』をダウンロードして、解凍、「plugins」フォルダにアップロードします。
http://projects.jesseheap.com/all-projects/wordpress-highslide-js-plugin
次に、『Highslide JS』をダウンロードして、解凍します。（右メニューにあります）
個人が非商用で使う場合は、無料になります。
JSファイルを、『WP-Highslide』フォルダにアップします。
highslide.jsだけでOKだそうですが、一応、念のため。
管理画面の『設定』→『Highslide』を開き、キャプション（Caption Box n|Y）使用するか否かを決定して、Update Optionsをクリックします。
ボックスに表示されたコードを、header.phpの、head ～ /head間に貼り付けます。
『LightBox』に関しては、申し訳ないけど、私の使っているテーマにどうしても組み込めません。
ゆえに、詳しい説明はできませんが、LightBoxの効果を使うには、配布サイトから本体プログラムをダウンロードし、手動でWordPressの中に組み込みます。
参照サイト：
http://esquisse.s317.xrea.com/2007/12/09/10.html
このあたり、なかなか難しいので、また余裕のある時にチャレンジして下さい。
いろいろ試してみてどうしても動作しない場合は、他のプラグインを探してみて下さい。
ここで言う「ギャラリー」とは、グループに属する全写真の表示を指します。
参照サイト：
http://nextgen.boelinger.com/gallery-page/
グループを表示するには、管理画面メニューの『Manage Gallery』を開き、表示したいギャラリーのID番号を確認します。
投稿もしくは固定ページに[nggallery id=×]と記入します。
一例
表示例
[View with PicLens]をクリックすると、次のようなギャラリーが表示されます。
サムネイルの大きさは、『Options』→『Thumbnail』で変更することができます。
またいくつかのグループを『アルバム』として表示したい場合は、『Manage Alubums』を開き、「Add new Album」でアルバム名を指定して、新規に作成します。
次に、album名を選び、アルバムに含めるギャラリーのグループを選択します。サムネイルはドラッグ＆ドロップで移動することができます。
投稿もしくは固定ページの表示したい場所に [album id=x]を記入します。(template=extendは特に記入しなくてもOKです）
記入例
実例
表示されるサムネイルやデスクリプションはManage Galleryで設定することができます。
コンパクトなアルバムを表示する場合は、[album id=× template=compact]と記入します。
記入例
実例
ギャラリーのテンプレートは全部で6種類あります。
参照サイト：
http://nextgen.boelinger.com/templates/
右メニューの「Example」をクリックすると、表示例およびコードを確認することができます。
デモページはこちらです。画像をクリックすると、スライドショーが始まります。
http://nextgen.boelinger.com/slideshow/
スライドショーを表示するには、『JW Image Rotator』というプラグインファイルを別個にダウンロードする必要があります。
http://www.longtailvideo.com/players/jw-image-rotator/
解凍したら、「imagerotator.swf」というファイルだけを、サーバーの分かりやすい場所にアップロードします。
慣れないうちは、public_html直下に置くと分かりやすいです。
次に、『Opstions』→『Slideshow』を開き、imagerotator.swfの置き場所を指定します。
これを間違えると、スライドショーが表示されません。
下記は、public_htmlの直下に置いた場合。
その他、表示サイズや演出などを設定します。
投稿もしくは固定ページの表示したい場所に[slideshow id=×]を記載します。widthとheightは『Slideshow』のオプションで設定した値が有効ですが、変更したい場合は、[slideshow id=x w=width h=height]のように、個別に記載します。
実例
★その他の表示スタイル★
・ギャラリーで指定したタグごとに画像を表示する場合。[nggtags gallery=cologne,wordpress,...]
参照サイト：
http://nextgen.boelinger.com/gallery-tags/
・画像に付けたを、タグクラウドとして表示する場合。[tagcloud]
http://nextgen.boelinger.com/tag-cloud/
・イメージブラウザとして表示する場合。[imagebrowser id=x]
http://nextgen.boelinger.com/image-browser/
他にもいろんな応用があるので、デモサイトをチェックしてみて下さい。
画像やスライドショーをサイドバーやフッターなど、任意の場所に表示する場合は、『Nextgen Gallery Widget』というプラグインを追加して、PHPタグの形で記入すると上手く行きます。
http://wordpress.org/extend/plugins/nextgen-gallery-sidebar-widget/
たとえば、サイドバーに「ギャラリーID＝３、 横幅＝320、縦幅＝250」のスライドショーを表示したい場合。
[php]
<?php if (function_exists("nggSlideshowWidget"))
{ nggSlideshowWidget(3,250,200); }
?>
[/php]
ただし、サイドバー表示にWidgetを使用していない場合は、管理画面の「外観」→「ウィジェット」を操作しないで下さい。
マニュアル編集の場合、sidebar.phpの内容が反映されなくなります。
プラグインをアップロードしたら、有効化するだけで、上記のPHPタグが動作するようになります。
§ あとがき
『NextGEN Gallery』は、これ一つで、ギャラリー作成と表示、各種効果、画像管理、アップロードなど、簡単に出来てしまうので、非常に便利なプラグインには違いないです。
ただ、多くの方が指摘されている通り、使用しているブラウザやテーマ・テンプレート、ヘッダーに挿入している他のJavaScript、その他のプラグインとの競合などにより、上手く動作しない場合があるので、そのあたりを自己解決できるかどうかが、大きなポイントになりますね(´ヘ｀;)
人によってはかなり苦労するかもしれませんが（私もそうです）、きちんと表示された時の悦びはひとしおですし、これが使いこなせれば、見栄えの良いサイトになると思いますので、ぜひチャレンジして下さいね！
Images関連のプラグインは非常にたくさん出ています。
その中で、私が面白いな、と思ったものを幾つかピックアップしておきます。
Yet Another Photoblog
NextGEN Galleryの対抗馬的プラグインです。
エフェクトを使ったアルバムやギャラリーなどは作成できませんが、単純に、イメージを表示・管理するのに向いています。
NextGENほど多機能は要らないという方に向いています。
Advanced Fancybox
いわゆるLightBoxの効果を引き出すプラグインです。
表示の仕方、画像リンクなど、細かい設定が可能です。
画像に関しては、「効果」だけ欲しい方に向いています。
GRAND Flash Album Gallery
とてもグラフィカルでお洒落なギャラリーを演出するプラグインです。
イラストやアート系のサイトに最適です。
スキンの着せ替えもできるので、その方面が好きな方にはおすすめです。
Accordion Image Menu Plugin
画像で構成したサイドバー・メニューを作成するプラグインです。
企業サイトのような、お洒落で、ハイソな演出が可能。
旅行系のブログなら、カテゴリーごとに当地の画像を使うとカッコいいですよ♪
Sidebar Photoblog
サイドバーにフォトアルバムを表示するプラグインです。
「Sidebar Photo blog」というカテゴリーを作成し、そこに属する記事にフルサイズの写真を投稿すれば、自動的に縮小されて、サイドバーに表示されるものです。（サイズの大きさは設定画面で変更できます）
毎日のように写真をアップされる方に向いています。
（※ウィジェット専用です）
Scissors
編集画面上で画像のトリミングやサイズ変更を行ってくれるプラグイン。
他のアプリケーションを立ち上げる必要がないので便利。
自動Watermark挿入機能もあります。
Max Image Size Control plugin
日本人のHiroakiMiyashitaさんによるサイズ調整のプラグイン。
カテゴリーID、ポストIDごとに画像サイズを設定可能。
サムネイル、中サイズ、大サイズに加えてオリジナルの縮小サイズを設定可能。オリジナルサイズはいくつでも設定可能。
トリミングを全ての画像サイズで適用可能。
とのことです。細かな設定が必要な方におすすめです。
WP Smart Image
画像のサイズ変更や回り込み、ポジション修正を簡単にしてくれるプラグイン。
「思う位置にレイアウトできない！」というタグ書き苦手さんにおすすめ。
画像のレイアウトって、結構、面倒ですからね^_^;
この度は私のサイトの記事における修正箇所のご指摘及び、私のサイトへのリンクありがとうございました。
無事に問題箇所を修正できました。
ポーランドに住んでらっしゃるんですね。
東欧、北欧は自分にとって憧れの地で、いつか行ってみたいと思ってます。
日本は気候的に夏も終わり、秋が始まったという感じです。
8月の終わりくらいから、日中でもクーラーが不必要な日が続きました。
気のせいか、年々、猛暑の期間が短くなっている気がしますね。
と、話がそれてしまいましたが、ありがとうございました！
こちらこそ、貴重な情報を頂きまして、ありがとうございました(^^)
情報を提供されているサイトには、WordPressの仕様から、サンプルコードに半角スペースを入れたり、
一部だけを記載したり、手を加えているところが多いので、そのままコピペしても動かないことがあり、
初心者には辛いことが多いです^_^;
このあたりも改善されたら助かるんですけど、それはなかなか難しいのでしょうね。。
東欧は西側とまたひと味違って、人も、町並みも、素朴な感じがいいですよ。
またこちらに来られる時は、観光情報を提供しますので、ぜひご相談下さい♪
日本もぼちぼち秋の気配ですね。もみじの紅葉が懐かしいです。
はじめまして
nextgen gallery導入について色々検索してまして、こちらにたどり着きました。
私も同様にlightboxで躓きましたが、解決したので参考に・・
最新バージョンv2.04 ）では、scriptaculous.js?load=effects の部分が変更になっていて、scriptaculous.js?load=effects,builder と書かないと動作しません。古い書き方のままだとJavaScriptがエラーになります。
とりあえずご報告まで・・^^;
画像をアクティブに魅せるプラグイン NextGEN Gallery
WordPress上で写真をブログに公開するときにとても役立つプラグインです。 私がよく使うテーマConstructorでは、NextGEN Galleryはプラグインをインストールするだけで、Slideshowを配置出来てたの…
[...] 今年の夏、我が湘南海岸をデジカメで写した写真を何枚かアップロードしてギャラリー「2010年夏の湘南海岸」を作成。もちろん、NextGenGalleryなるプラグインは導入済みなので、追加は楽、というとはウソ。すっかりアップロードの方法を忘れていた。また、アルバムとギャラリーの違いにしばし混乱。 グーグル師に相談し、記事「画像の管理とギャラリー表示のプラグイン『NextGEN Gallery』」を参考にさせていただいた。ギャラリーが今後増えていることを考慮し、ギャラリーの入り口は一つ「湘南アルバム」にし、その中でGalleryを追加していく構成に変更。 This entry was posted in 湘南 and tagged Gallery, WordPress. Bookmark the permalink. ← ぼくは簡単な算数はやったことがない [...]