動きのあるホームページブログ!!

  • TOP
  • ブログ
  • WordPress上で本をめくるような電子カタログプラグインのご紹介!!
20160630_1

動くホームページブログ!!

WordPress上で本をめくるような電子カタログプラグインのご紹介!!

WordPress(ワードプレス)上でつくる「本をめくるような電子カタログプラグイン」第2弾のご紹介です。

前回のブログ記事で画像を本のようにパラパラページをめくるJQueryをご紹介させて頂きましたが、今回はワードプレスで実装するFlipプラグイン!!
今回はこちらのプラグインのインストールから実装までをご紹介します!

ワードプレスの管理画面メニューのプラグインから新規を選択し、
Digital Publications by Supsystic」を検索。
以下のURLからそのままダウンロードできます。
https://downloads.wordpress.org/plugin/digital-publications-by-supsystic.zip

 

インストール後、有効化すると管理画面上に「Digital Publications」から
Publicationsを選択します。
20160630_2

 

カタログ名、幅、高さを入力後に「Add New Publication」をクリック!

 

20160630_3

 

 

赤枠右の一覧に先程作ったカタログ名があるので、そちらをクリックします。

 

 

20160630_4

 

 

以下の設定内容からページをめくるときの交換音やメニューバーの設定、ズームまで細かく設定することが可能です。

 

 

20160630_5

 

Add from WP Gallery」を選択!「SelectImages」をクリックするとメディアライブラリから画像を選択することができます。

 

 

20160630_6

 

 

・1番目に選択した画像は表紙になります。

・最後に選択した画像は裏表紙になります。

 

 

20160630_7

 

選択した画像はドラッグアンドドロップで順番を変更することができます。

最後にSeveをクリックします。

 

 

20160630_9

 

ShortcodeまたはPHPcodeをコピーをし、新規固定ページを開きます。

 

 

20160630_10

 

ドキュメント内に先程コピーしたショートコードを貼り付け!

 

 

20160630_11

 

 

固定ページの内容をみると以下のようなページをつくることができます。

ページはクリックや引っ張ってページをめくることもできます。

作成したカタログはダウンロードすること可能です。

 

20160630_12

 

今回の記事はここまでです。
前回の記事を合わせて読みたい方はこちらへ

PDFファイルから手軽に電子カタログ作成できる記事はこちら

この記事が気に入ったら
いいね!お願いします。

最新情報をお届けします

関連記事

  1. bsN695_ipadwosousasurute

    動くホームページブログ!!

    背景動画を用いたWEBサイト!!

    背景動画を用いることによってサイトの雰囲気、サービスの具体的な内容を動…

  2. 20160825blog

    動くホームページブログ!!

    PDFファイルを手軽に電子カタログに変換できるWEBサービス紹介!!

    今回ご紹介させて頂くのは誰でも手軽にPDFファイルを本のようにめくれる…

  3. 20160204blog

    動くホームページブログ!!

    WEB上で本をめくるような電子カタログプラグインのご紹介!!

    本をめくるような電子カタログプラグイン「turn.js」のご紹介です。…

  4. 20161004blog_img1

    動くホームページブログ!!

    スクロールする際に画像をフェードさせるJavascriptプラグインのご紹介!!

    サイト上のぼかされた画像をスクロールに合わせて画像を表示してくれるja…

  5. ice_screenshot_20160831-012703

    動くホームページブログ!!

    RTLテキスト対応JQueryのコンテンツスライダー・グライダーの作成方法

    グライダーとは自動再生やカスタムスライドコントロール、無限ループ、自動…

  6. 20160921blog_img

    動くホームページブログ!!

    レスポンシブ対応!!自動フルスクリーン背景スライドの作成方法!!

    レスポンシブ対応の自動フルスクリーン背景スライドの作成方法のご紹介です…

おすすめ記事

  1. ice_screenshot_20160831-012703
  2. 20160825blog
  3. CoverVid
  4. 20160810blog1
  5. 9eebd6ae3e003dafbcb134405e540da0_s
  6. 20160801blog
  7. 20160630_1

最近の記事

  1. ドラッグ&ドロップ機能を可能にするモーダルポップアッププラグ…
  2. スクロールする際に画像をフェードさせるJavascriptプ…
  3. レスポンシブ対応!!自動フルスクリーン背景スライドの作成方法…
  4. Googleが公表するSEOランキングの3大要素!
  5. RTLテキスト対応JQueryのコンテンツスライダー・グライ…

アーカイブ

  1. CoverVid

    動くホームページブログ!!

    背景にフルスクリーン動画を表示させる「covervid.js」の紹介です!
  2. 05

    SEO対策

    SEO上メリットの大きいタイトル要素とホームページの特徴づけについて
  3. 05

    SEO対策

    SEOの対策に欠かせないブログ機能!!ブログの6つのポイント!!
  4. 201601190

    制作ツールブログ!!

    ワードプレスを運営するなら入れておきたいお勧めのプラグイン③
  5. 8b5c6a43c12ceeea8b4844a8fe15efc8_s

    SEO対策

    SEO対策を行う上で知って得する検索順位が決まる仕組みについて!!