【WP】WEBカタログのようなギャラリーを作成することができる『Page Flip Image Gallery』

page-flip-image-gallery-word

説明書やページ数のあるカタログをサイトに公開するとき、ページをペラペラとめくることができるWEBカタログの形式で公開したいときがあります。

しかしWEBカタログはページをめくるアニメーションやボタン操作などFlashやJavascriptなどを用いた開発が必要となるので時間やコストがかかってしまいます。

また、カタログの内容を更新する場合なども専門スキルがないと難しかったりします。そこで手軽に制作・管理ができないかと方法を探していたら、なんとWordPressにWEBカタログを作成することができるプラグインがありました。有料のプラグイン(確認したとき40ユーロ:2014年2月19日)ですが、一般的なWEBカタログとして問題なく利用できそうなのでご紹介します。

Page Flip Image Gallery

デモサイトとプラグインの購入はこちらの公式サイトより行うことが出来ます。デモ用のフリーバージョンもありますので実際にプラグインをダウンロードして機能を確認してみることもできます。

pageflipgallery-com

Link:http://pageflipgallery.com/

インストール

プラグインをダウンロードしたら、WordPressへアップロードしてインストール後、有効化します。

プラグインの一覧でみてみると「WordPress FlippingBook」となっています。

page-flip-image-gallery-wordpress-plugin-01

有効化するとメニューに「FlippingBook」の項目が追加されます。

page-flip-image-gallery-wordpress-plugin-02

さっそくWEBカタログを作成

このままWEBカタログが作成できるみたいなので、早速作成してみたいと思います。

「FlippingBook」メニュー内の「Manage books and pages」より「Add New Book」をクリックして、WEBカタログを作ってみます。

ものすごく縦長の設定画面が出てきました。カタログの横幅、縦幅、背景画像、メニューの位置、マウスを置いたときの動作、ページのめくるスピードなど細かく設定ができるようです。ページをめくる音の設定もありました。

最初の「Book name」に「サンプルブック」と入力して、他の項目は初期値のままで作成してみたいと思います。

page-flip-image-gallery-wordpress-plugin-03-01

最後に「Add Book」のボタンをクリックして作成は完了です。

page-flip-image-gallery-wordpress-plugin-03-02

「Manage books and pages」の一覧にさきほど作成した「サンプルブック」が追加されました。カタログっぽいですね。

続けてページを作成していくようなので「Add Page」のボタンをクリックしてページを追加してみます。

page-flip-image-gallery-wordpress-plugin-03-03

ギャラリーを追加してとのことなので、「Create New Gallery」ボタンを押してギャラリーを追加してみます。

page-flip-image-gallery-wordpress-plugin-03-04

ギャラリー名に「sample」を入力して作成してみました。

続けて画像をアップロードするみたいので、「Upload New Images」ボタンをクリックしてみます。

page-flip-image-gallery-wordpress-plugin-03-05

画像をアップロードする方法を選んで、画像をアップロードします。

一度に複数の画像をアップロードしてみたいので「Upload Archive」を選び、Zip形式で圧縮してまとめた複数の画像データをアップロードしてみます。

page-flip-image-gallery-wordpress-plugin-03-06

画像が1枚ずつページとして登録できました。

page-flip-image-gallery-wordpress-plugin-03-07

これで準備はOKのようです。この作成した「サンプルブック」を公開してみます。

公開するときは以下のショートコードを利用します。作成したブックのIDを指定して投稿や固定ページに貼り付けます。

[book id='1' /]

公開プレビュー

公開をするとこのような形でWEBカタログができます。ページの動きもスムーズで部分的な拡大、フルスクリーンモード、印刷もOKです。

Flashで稼動しているのでiOSなどのFlashが利用できない環境では表示できないのが残念ですが、メンテナンスなどもページとして登録する画像を差し替える対応ができて、WEBカタログとしては十分機能しそうです。

page-flip-image-gallery-wordpress-plugin-04

関連記事

藤枝おんぱく2019「No33.蓮華寺池公園を着物でおさんぽしながら カメラマンに学ぶ着物姿の撮り方」

藤枝おんぱく2019「No33.蓮華寺池公園を着物でおさんぽしながら カメラマンに学ぶ着物姿の撮り方」のプログラムの案内人をしました。 お気に入りの着物を着て、春の蓮華寺池公園界隈を散策しながら、人物撮影のテクニックを学ぶことができる写真の講座と街歩きを合わせたプログラムを...続きを読む

2019.05.05フォトギャラリー藤枝

【WP】プラグイン『Photospace』の利用方法

以前に紹介をした『Photospace』は、jQueryのサムネイル付のスライドショーギャラリーを実装できる「Galleriffic」を、WordPressの標準ギャラリーのショートコードに対応させることができるプラグインです。インストールと標準設定をご紹介しましたが、今回は...続きを読む

2015.06.29WordPress

【フォト】蓮華寺池公園フォトギャラリー≪冬≫

藤枝市のほぼ中央に位置し、「花・水・鳥・笑顔」がテーマの公園「蓮華寺池公園」。池を囲む公園は、桜や藤の花、蓮の花など季節を通して自然を楽しむことができる憩いの場所です。今回、紹介する冬の蓮華寺池公園の山頂周辺の写真です。自然のなかを歩いたり、眺めの良い見晴台があったり、広場やアス...続きを読む

2018.02.07フォトギャラリー藤枝

【CSS】Googleマップの埋め込み用HTMLコードをレスポンシブに対応させる

Googleマップで、埋め込み用HTMLコードを発行して、ブログやサイトに貼り付けて使うことがよくあると思います。 サイトがレスポンシブ対応の場合、本文中のGoogleマップが、要素からはみ出して見栄えが崩れたり、案内したい所在地のポインタが表示されないということがあります...続きを読む

2015.02.08HTMLコーディング

【WP】管理画面をカスタマイズできるプラグイン「AG Custom Admin」

今回紹介するプラグイン「AG Custom Admin」を使用すると、WordPressの管理画面のログイン、メニュー項目、ダッシュボードなどをカスタマイズできるようになります。 ダッシュボードなど個々にカスタマイズできるプラグインなどはありますが、「AG Custom A...続きを読む

2016.07.08WordPress