ワードプレスのページめくりのプラグイン

カタログなんかを閲覧するときページをめくるUIってありますよね。

マウスや、スクロールに合わせてページがペラっとめくれていく、あのUIです。

かつてはFlashで実現されていた動きですが、iOSがサポートしなくなってからFlashの環境がなくなってきた現在、HTML5とJavaScriptで実現されるようになってきました。

一所懸命、自分でロジックを組んでいたのははるか昔。

今ではTurn.jsを利用すれば、一発でできるようになっています。

では、ワードプレスでする場合って・・・

今回は、ワードプレス用にページめくりプラグインをご紹介します。

ワードプレスで本をめくってみましょう!

その名は、「Digital Publications by Supsystic」

このプラグインは1ページを1画像ファイルで作成していきます。

1)プラグインからインストールしてみましょう。

ワードプレスのレンタルサーバー

⇒メニューに「Digital Publications」が追加されます。

2)Publication(出版と訳せます)を追加します。

 

設定したら「Add New Publication」で追加します。

追加したら右の一覧の表示され、「Edit Publication」画面が表示されます。

3)画像の登録を行います。

ここではワードプレスのギャラリーから追加します。

※プロバージョンではPDFやFacebookからも取り込めるようです。

ワードプレスでレンタルサーバー

手順は、通常のメディア挿入の手順と同じです。

[投稿に挿入]します。

ワードプレスでレンタルサーバー

マウスで画像の順番を変えることができます。

最初の画像は表紙になり、最後の画像がウラ表紙になります。

他の画像は、見開きになるように2ページを一組として表示してくれます。

注意点として、ここで右上の[Preview]をクリックしても表示されません。

同様に[ Save]しても保存されません。

まずは[Create Page]をクリックします。

⇒ページが作成されます。

この状態でプレビューなんかもできます(^^)

また画像を分割したりマージしたりも可能です。意外と高機能です(^^)

削除はできますが、画像を追加したい時は、[Addなんちゃら]から再度追加して下さい。

プレビューするとこんな感じに見えます。

もうぺーじめくりができます。。

OKであれば[Save]をします。

4)ページを表示します。

これはショートコードが表示されていますので、必要なページに貼り付けて下さい。

便利な機能

画面の下に表示されているツールバーのアイコンです。

右左、ページ番号。これはいいとして。。。

1:画像を拡大表示します。

2:[HTML][PDF]のボタンが表示されます。

[HTML]:別ウィンドウで全ページが表示されます。

[PDF]:全ページをPDFでダウンロードします。

3:検索ができます。

4:全画面表示します。

最後に。。。

当たり前ですが、キチンとスマホでも動作してくれます。

今まで苦労していたページめくりがこんなに簡単にできるとは。。

プロバージョン契約しようかなぁと思ったプラグインでした。

 

 


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です