wordpressスマホ対応サイト・wpプラグイン・検索体験最適化・SNS・ 動画・bgmやテーマ曲を駆使して、リアルビジネスへの集客を達成するためのコラム!

   

wordpress屋のマルチメディアコンテンツ制作読んどけ☆コラム

【WPプラグイン】PDFで、ワードプレスを電子書籍風にできる『PDF light viewer』

      2018/04/04

こんにちは、管理人@SS_mshpです。

今回は、ワードプレス&WPプラグインを使って、めくれる電子書籍風のページを実装したサイトを作ってみます。

使用するプラグインは『PDF light viewer』。あまり日本語の情報が出てこないので苦戦するかなと思いましたが、ページを作ることができたので、さっそくご紹介していきます。

■下準備・PDFの制作や、『PDF light viewer』のインストール

■まずはPDFを準備しておく

アイデアがあまり思いつかなかったので、とりあえず『飲食店・スペインバルみたいなメニューの電子書籍風ページ』というのを想定しました。料理の画像をならべてメニュー風に。飲食店を運営されている方は、ここで値段やコメント・料理名などを画像に入れておきます。
そして、『PDFエクスポート』を使ってPDFを出力します(無い場合は、PDFプリンターなどのソフトを使います)。

なお、美味しそうな料理の画像は、海外フリー素材サイト『freeimages.com』さんからお借りしました。

■『PDF light viewer』をインストールし、PDFインポート

ワードプレスメニューの『プラグイン→新規追加』で『PDF light viewer』と検索し、インストール&有効化します(PHPのバージョンによって作動しないことがあるかもしれません。PHP5.3以上推奨とされています)。ちなみに有料ライセンスで高機能なプロ版もあるようです。

使える状態になると、横のメニューに『PDFs』がでるので、最初は『import』を選びます。

■『PDF light viewer』電子書籍風のページをやるときの設定

■その1:基本的な設定

ここのページは長いので、分けてみていきますか。まずタイトルはブックのタイトル。『Enable import』で、PDFのインポート許可(チェックします)。
『JPEG compression quality』は画像圧縮率です。画像加工ソフト使ってるとイメージがつかみやすいでしょう。
圧縮するとサイズは小さくなるけど、画像が荒くなる感じ。『JPEG resolution』は解像度。

で、一番重要な『PDF File』というところで、PDFを指定します。まだサーバーに上げていない場合は、ここでメディアアップロード画面になるので、PDFを上げて指定します

ワードプレスの記事編集と同じように、右側に青い『公開』ボタンがあるので、これは設定がおわったあと押して公開します。

■その2:ページレイアウトなど

ここではレイアウト指定。『サムネイル隠す?』や、『ページ最大サイズ』などを指定できます。

『Flipbook page layout』は、『single→そのまま1ページ表示』『double→見開きで2ページ同時表示』『adaptive→通常1ページ・フルスクリーン時2ページのように変動』という機能でした。

■その3:ダウンロードやズームなど

管理人は特にダウンロード許可とかはしませんでしたが『ダウンロード許可・代替ダウンロードリンク』なども指定できます。

その他、見栄えをよくしたいなら『フルスクリーンボタンを隠しておく』とか、特にズームがしなくても見れる場合は『ズームしない』などのような設定を行います。設定が終わったら、『公開ボタン』を押して公開。

■公開が終わったら、ショートコード/PHPでサイトに表示しよう

公開し終わったら、よこのメニュー『PDFs』を押すと、先ほど編集したPDFが表示されていました(設定・公開がすんでいなければ、PDFsを押してもなにも出てきません)。ここでショートコードを表示させたいページに貼り付けることで・・・


ワードプレスでめくれる電子書籍風のページができました。デモサイトはまだできていないから、できたら貼りたいと思います。

■まとめ~『PDF light viewer』活用方法は?

コンテンツとなるPDFさえ準備できていれば、リッチな電子書籍風のページが簡単にできてしまいます。活用例としては・・・

  • 企業の製品カタログ
  • フリーペーパー
  • 飲食店のメニュー
  • webまんがや小節
  • そのほか読み物

などに活用できるかと思います。リッチなコンテンツで、ユーザーにアピールしていただければ幸いです。

*アトリエSS・web制作サービスページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。

【カテゴリ】 - wordpressプラグイン(拡張)情報 【タグ】 -

  関連記事

【WPプラグイン】WordPressにサウンドクラウドみたいな波形表示つけたい→WaveSurfer-WPをどうぞ

今回は、以前すこしDJの練習をしていた管理人が、webサイト(wordp …

wordpressのリビジョンを、プラグインで制御する方法(revision control)【データベースを軽く】

今回は、wordpressで溜まりすぎるとデータベースを圧迫するリビジョ …

【WordPressとGoogleカレンダー連携プラグイン】Simple Calendarの設定・Calendar APIやID取得しての設定

今回は、WordPressサイトに、googleアカウントがある人ならみ …

【wordpressで教室・個別相談・サロン予約受付】プラグインEasy Appointmentsの設定・サイト実装方法を詳しく解説

今回は、特定の形態のビジネスで、『カレンダーつき予約フォームで、お客さん …

【wordpress限界高速化】Pjax技術を使ってサイトを高速表示するプラグインと、エラーの対処

今回は、『遅い』とされていた(過去形)wordpressサイトを『Pja …

【PHPでwpプラグインを改造】all in one seoで、og:descriptionを書かなかったときに、文章が全部出力されてしまうのを直したい

今回は、ワードプレスでよくつかわれるプラグイン『all in one s …

【WPプラグイン・サイト高速化】EWWW Image Optimizerで、画像をサクッと圧縮して表示を速くしよう

今回は、サイトの高速化で、画像を圧縮してくれるものを試します 画像サイズ …

【phpでWPプラグイン改造】What’s New Generatorで、記事タイトル文字数を設定する

今回は、ワードプレスサイトでよく使われる更新情報表示プラグイン『What …

【WPプラグイン】ページ読み込み画面(ローディングアニメ)をサクッと実装できるWP Smart Preloader

今回は、wordpressのサイトで、ページ読み込み時の画面(ローディン …

【wpプラグイン】ワードプレスサイトに、スマホで電話機能をつけられる『Really Simple Click To Call』

今回は、スマホで電話する機能を、ワードプレスサイトに実装できるプラグイン …

【WPプラグイン】月額無料でレストラン・カフェなど飲食店の予約に使える『Restaurant Reservations』

今回は、飲食店でワードプレスサイトを持ったときに効果を発揮する、月額無料 …

ワードプレスサイトに、コメント機能を実装しない/非表示に

今回は、ブログサイトによくある『コメント機能』を、実装しない方法を考えて …