はじめに
WordPressのプラグインの「Dear Flipbook (DearFlip)」。「3D Flipbook」との説明もありますが、WordPressでPDFファイルをかっこよく表示できるプラグインです。立体的なページめくりが特徴です。
簡単なサンプルを作ってみました。
以下のリンクは公式サイトのデモのページになります。
「PDFをWordPressに掲載してほしい」という依頼があり実際に使ってみたのですが、この記事ではその際に気になったことなどをご紹介します。
使い方
● まずはプラグインを追加します。メニューの「プラグインの追加」を開き、「DearFlip」などのキーワードで検索して、該当のプラグインをインストールし、その後有効化します。
● メニューから「DearFlip Books」を選択し、「新規ブックを追加」をクリックします。
● タイトルを適宜入力し、PDFファイルを選択します。細かい設定は色々とありますが、ひとまずこの2つだけで基本的な動作はできます。そして「公開」をクリックしますが、実際は「保存」のようなものでこの段階ではまだ記事に公開はされません。
● ショートコードが生成されます。該当のテキストをコピーします。
● PDFファイルを表示したい記事の編集画面にて、「ショートコード」のブロックを追加します。
● 先ほどコピーしたショートコードを貼り付けます。
● これで完了です。プレビューなどしてみると、PDFが掲載されていることが分かります。
注意点
ショートコードのコピペなどが手間になる
先に説明した通り、DearFlipを記事に掲載する手順は、「DearFlip Books」のメニューを開き、PDFファイルをアップロードして、ショートコードを記事に貼り付けるという流れになります。
固定ページを開発者が作成する場合はそこまでの負荷はなさそうですが、一般的な投稿者が、例えば月1で作成する記事に報告書のPDFファイルを掲載するような場合に、やや手間だし人によっては分かりにくいかと思います。
ものすごく難しいわけではないので、DearFlipでPDFを掲載するのが最適だという状況にも関わらず手間だからとやめるほどでもないような気もしますが、運用の手間は考慮しておきたいものです。
レイアウトが崩れることがある
PDFファイルを横に並べたいな、と思って以下のように記事に設定してみました。
プレビューをしてみたところ、左右でPDFファイルの大きさが変わったり、でもリロードすると大きさが同じになったり…などと挙動が安定しませんでした。
これとは別のケースでレイアウトが崩れた際に、CSSでコーディングして調整できないか試行錯誤したのですが、うまくいきませんでした。どこかで大きさが自動計算され、そちらにひっぱられてしまっているように思われます。
DearFlipは大きくどーんとPDFを掲載するようなスタイルが得意で、柔軟にレイアウトを組むようなことはあまり想定していないようです。
サイトのトップページや、主要な固定ページでPDFをアピールしたいときにはDearFlipはとても効果的ですが、さまざまなページで色んな見せ方をしたいというときにはちょっとおすすめしづらいです。
他のPDF関連のプラグインと干渉する
DearFlipではうまくいかないところは他のプラグインを使ってやってみようかなと考えて、ひとまず「PDF Embedder」というプラグインを入れてみました。
そして、DearFlipとPDF Embedderを使ってPDFファイルを掲載してみました。
プレビューをしてみたところ、DearFlipの方がエラーになってしまいました。
どうやら似たような機能を有するPDFのプラグイン同士なので、干渉し合ってエラーとなるようです。
誤解なきよう補足しておくと、「PDF Embedder」が低品質だからエラーになるわけではありません。評価も高くインストール数も多いプラグインになります。
今回はエラーとなったのですが、他のプラグインだと問題ないのかも知れません。どのプラグインの組み合わせだとOKなのかまでは検証できていないのですが、PDF表示のためのプラグインは1つだけにしておいた方が無難なような気がします。
おわりに
ここまで注意点を書きましたが、制作依頼をいただいたサイトは「商品紹介のPDFをサイト訪問者に見ていただきたい」ということが1番の目的だったため、結局はDearFlipを使うことになりました。
注意点に書いたような、横に並べたいなどは諦めて、PDFはカタログを目立つところに掲載するのみにしました。
公開してからしばらく経過していますが、今のところは大きな不具合もないようです。
