WordPress でPDFを表示させる方法

wordpress,Web開発,画像処理

今日はWordPress でPDFを表示させる方法を考えてみます。

調べてみると「Embed PDF」というプラグインがありました。
Embed PDF を使えば、PDFファイルのリンクをショートコードで囲うことで、投稿や固定ページ内でPDFファイルを表示させることが出来るようになるそうです。
試してみると、、あれ?ヒポラボの環境では表示されませんでした。Basic認証をかけている訳では無し、、なぜだろう?

他の方法も調べてみると、objectを使ってpdfを表示できる方法がありました。
早速、記事内に以下の様に書いてみます。

<object data="ここにURLを入力" type="application/pdf" width="数値" height="数値"></object>

表示されました♪ 以下は表示のサンプルです。

あれ? でも右端が切れている。。orz..

[2017/06/21追記]
あれ? 2017/06/21現在は右端が切れずに正常に表示されていますね。。WordPress 4.7で、PDFのスクリーンショットを自動的に作成する機能が追加された様です。これのおかげかな? 
wordpressは日々進化しています。すぐ情報が陳腐化するのでご注意を。。この記事はもう古いかもしれませんね。

調べてみると、この方法でPDFを埋め込むと、ユーザーが表示を縮小できますが、最初に表示されるのは、100%での表示となるそうです。ただし、パラメーター(〜.pdf#view=Fit)を設定して、強制的に表示を「全体表示」に変更することもできますが、Google Chromeなど一部のブラウザでは、機能しません。

やってみるとクラッシュ。。何も表示されなくなりました。
で、考えたあげくの結論。。

記事上ではPDFではなく画像を表示、その画像をクリックするとPDFが表示される様にする

という方法です。ヒポラボはこれが一番、手っ取り早く確実な方法だと考えます。

以下、サンプルです。



※↑クリックすればPDFが表示されます。

上記のソースコードは以下の通りです。

<a href="PDFファイルのURL" target="_brank">
 <img src="画像ファイルのURL" " />
 </a>

なおPDFファイルを画像に変換するには「SmallPDF」等を使うと便利です。

ローテクですが、これが一番確実かな♪

Print Friendly, PDF & Email