wordpressをCMSとして使う(5) ギャラリーの実装
5回目ではイラストギャラリーの実装を行います。
wordpress自体で実装することも可能ですが、NextGEN Galleryという素敵なプラグインを利用することにしました。
(1)プラグインのダウンロード
NextGEN Galleryのプラグインをダウンロードします。
(3)設定
インストールが完了すると、ダッシュボードメニューの左下に
[Gallery]というメニューが登場します。
NextGEN Galleryは英語のプラグインなので、
日本語化すると設定がしやすくなります。
※設定・日本語化の方法については、別途記事を書きますね。
日本語化してしまえば、設定自体は難しいことではないので、なんとな〜く設定して、画像をアップロードすると、簡単にギャラリーが出来ると思います。
英語版NextGEN Galleryはこんな画面。
日本語化するとこうなります。ちょっと見やすくなりましたよね:D
(4)固定ページの作成・タグの挿入
NextGEN Galleryにアップロードしただけでは、
ギャラリーを表示する場所がありませんので、
表示するための「固定ページ」を作成します。
作成したページに、ギャラリーを表示するためのタグを挿入して更新すると完成です。
ギャラリーを表示するためのタグは、下記のブログに掲載されています。
かなりたくさんの表示方法があるので、一度ご覧ください。
http://nextgen-gallery.com/
今回使用するのは、サムネイル方式の表示です。
固定ページに、下記のタグを挿入してください。
ページを公開すると、該当するIDのギャラリーが表示されます。
[nggallery id=ID]
固定ページ例
表示結果例
NextGEN Galleryで、クリックした際のエフェクトを設定できます。
今回は、jQuery thickboxを使う設定にしました。
エフェクトを設定すると、<a><img>タグに、エフェクトを使う際に必要なコードを自動的に挿入されるようになります。ですが、スクリプト自体は含まれていないので、ご自分で設置していただく必要がございます。
Thickboxをお使いになる際は、jQueryとThickboxをダウンロードし、header〜/headerの中にjsを読み込むタグを記述してください。
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-1.2.6.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/thickbox.js"></script>
これでギャラリーが完成です。
