※ 2016/04/25 この表示例によってページ数が水増しされてSEO的に悪影響の懸念があったので、サンプルの表示をオフにしました
※ 10/25 アルバム表記とタグでのソート表示に関して、バグと注意点を追記しました。
いつの間にか、NextGEN Galleryのデフォルト設定で可能なギャラリー表示例が増えていたので
今回はそれを紹介します。
今回もひとつのページで6種類、全ての表示方式で出力されているため、
PC環境によってはページ全体が重くなっているかと思いますので注意してください。
現時点でのNextGEN Gallery最新版1.3.6のデフォルトで可能なギャラリーの種類
今回はNextGEN Gallery1.3.6にアップデートが完了している前提で話を進めています。
最新バージョンで表示できるギャラリー方法は、以下の8種類です。
1.ノーマルギャラリー
2.スライドショー
3.イメージブラウザー
4.タグによってソートされたノーマルギャラリー
5.PicLens
6.シングルピクチャー
7.アルバム
8.タグによってソートされたアルバム
1と2に関しては、以前にポストした以下の記事を参考にしてください。
NextGen Galleryのギャラリー表示例 – hycko.blog
今回の記事では、３～８の表示例及び設置方法を説明します。
また、画像をクリックした際の画像表示効果に関しては、このサイトではFancybox for wordpressを使用中のため、Fancyboxにて表示されます。
イメージブラウザーの表示例
表示タグは [imagebrowser id=ID] です。
IDの部分には、表示したいギャラリーのID番号の数字が入ります。
記入例： [imagebrowser id=5]
画像上部にはギャラリー内で登録したそれぞれの「画像のAlt&titleテキスト」が挿入され
画像下部には登録したそれぞれの「画像のdescription」が挿入されます。
widthなどは指定できず、画像のオリジナルサイズで出力しようとします。
ですが、ギャラリーを出力するコンテナ内の最大値にフィットするため、
divなどでコンテナを作り、その中にイメージブラウザーを展開すると良いと思います。
To show image sorted by tagsの表示例
タグによってソートされたノーマルギャラリーです。
[スライドショーで表示]や[View With PicLens]は表示されません。
全てのギャラリーから、指定したタグを持つ画像を抽出、表示します。
複数指定をした場合は、いずれかのタグを持つ画像を抽出します。
カーソルを乗せた時にはギャラリー内で登録した「画像のAlt&titleテキスト」が
Altとしてポップアップします。
Ver1.3.6現在、タグは半角英数のみ対応しています。
日本語でタグを設定・指定すると、ギャラリーが表示されません。
表示タグは [nggtags gallery=TAGS] です。
tagsの部分には、抽出したい画像のタグが入ります。
記入例： [nggtags gallery=cats,animal]
View with PicLensの表示方法及び表示例
管理画面 → ギャラリー → オプション → General Options内
「Activate PicLens/CoolIris support」にチェックを入れることにより、ノーマルギャラリーを
表示する際に「View with PicLens」というメニューが増えます。
View with PicLensのリンクのみを作る方法
裏技ですが、ギャラリーを表示せずに、View with PicLensのリンクのみを作る事も可能です。
タグは以下の通りです。
<a class=piclenselink href="javascript:PicLensLite.start({feedUrl:'http://example.com/wp-content/plugins/nextgen-gallery/xml/media-rss.php?gid=5&mode=gallery'});">PicLens Link</a>
各々のURLにあわせて、タグ内容を変更してください。
記入例
<a class=piclenselink href="javascript:PicLensLite.start({feedUrl:'http://blog.hycko.net/wp-content/plugins/nextgen-gallery/xml/media-rss.php?gid=5&mode=gallery'});">ミーの写真集</a>
シングルピクチャーの表示例
表示タグは [singlepic id=8 w=width h=height mode=web20|watermark float=left|right] です。
IDの部分には、ギャラリーID番号ではなく、ピンポイントで表示したい「イメージID番号」が入ります。
記入例： [singlepic id=8 w=250 h=190 mode=web20 float=left]
id以外はオプションなので、不必要なら記入しなくてもOKです。
wはwidth、hはheightの数値を入力します。
modeは「web20」と「watermark」の二つから選ぶことができます。
web20は、この表示例の様に、下部を水面に映る様に反転させるエフェクトです。
watermarkは、自分で設定した画像もしくは文字を署名の様に画像に埋め込むエフェクトです。
watermarkの設定は
管理画面 → ギャラリー → オプション → Watermark
にて変更できます。
floatはスタイルシートのfloatと同じ効果で、画像の左側(left)か右側(right)に
文章を回りこみさせたい時に指定します。
しかし、ここでfloatを指定しても、floatを閉じるタグが自動で発行されないため
手動で <br clear=”all”> などのfloatを終了させるタグを挿入しないと
レイアウトが崩れる可能性があります。
カーソルを乗せた時にはギャラリー内で登録した「画像のAlt&titleテキスト」が
Altとしてポップアップします。
アルバム表示に関して注意点
今回、アルバムでの表示方法を
1.extend
2.compact
3.sort by tags
3通り説明します。その都合上、この一つの記事に3パターンのアルバム出力がされています。
しかし、一つの記事に二つ以上の表示方法を設定すると
アルバムクリック後のリンクが正常に機能しません。
例えばこのページだと、この一つの記事にextendとcompactでのアルバムが
挿入されているため、競合で不具合が発生しており、compactで出力したアルバムをクリックしても
extendのアルバムが展開されるというバグが発生しています。
よって、アルバムでの出力は、一つの記事につき1パターンまでにしてください。
ひとつの記事に1パターンの出力であれば、正常に動作します。
wordpressのパーマリンク設定を変更している場合におけるアルバム出力の設定
wordpress本体の設定で、パーマリンク設定をカスタムしている場合、アルバム表示をするために
以下の手順で設定を行う必要があります。
1.NextGEN Gallery管理画面 → オプション → General Options内「Activate permalinks」にチェックを入れ、保存する
2.wordpressの設定「パーマリンク設定」を開き、保存をしなおす
アルバムの表示例 – extend
表示タグは [album id=x template=extend] です。
IDの部分には、ギャラリーIDではなく、表示したい「アルバム」のID番号の数字が入ります。
記入例： [album id=1 template=extend]
アルバムの表示例 – compact
※前述の通り、この記事ではextendと競合しているため、compactのアルバムをクリックしても画像が展開できないバグが発生しています。一つの記事にcompactのみを出力する場合には問題ありません。
表示タグは [album id=x template=compact] です。
IDの部分には、ギャラリーIDではなく、表示したい「アルバム」のID番号の数字が入ります。
記入例： [album id=1 template=compact]
ギャラリーの登録名がそのままアルバム名となります。
写真数もギャラリーに登録されている画像数と同じ数になります。
To show tag albums の表示例
タグによってソートされた画像別のアルバムです。
アルバムですが、NextGEN Galleryで設定するalbumとは別です。
全てのgalleryより指定したタグを持つ画像を抽出し、アルバムとして表示をします。
例えば今回は「dog」と「cat」の二つをタグ指定したので、アルバムが2個作成され
それぞれ「dog」のタグが付いた画像、「cat」のタグが付いた画像のアルバムが生成されています。
Ver1.3.6現在、タグは半角英数のみ対応しています。
日本語でタグを設定・指定すると、アルバムの表紙は表示されますが、
クリック後に中身のギャラリーを展開する事ができません。
よって、必ずタグは半角英数でのみ設定してください。
表示タグは [nggtags album=TAGS] です。
tagsの部分には、抽出したい画像のタグが入ります。
記入例： [nggtags album=cat,dog]
タグがアルバム名になり、タグのヒット数が画像数になります。
以下のサイトを参考に解説しました。
参考：WordPress › NextGEN Gallery « WordPress Plugins
コメントを残す