記事内にPDFを表示する時に使用するプラグイン「Embed PDF」!

こんにちは!

内容によっては、記事内にPDFをサムネイルで表示させたいケースなどもあります(今はなくても将来確実にそんな時は来ますよ)。デフォルトの状態でそれを実現するためには、サムネイル用の画像を作成して、そこからPDFのリンクを貼るという、ちょっと面倒な作業が発生してしまいます。出来れば、もっと簡単に実装したいですよね。そんな時に便利なのが、プラグイン「Embed PDF」です。

このプラグインを使用すれば、記事内にPDFをサムネイルで表示することができ、そのサムネイルからPDFを「Google Doc Viewer」で確認することができます。非常に便利ですので、今回はこの「Embed PDF」について記事にしたいと思います。

「Embed PDF」のインストール!

最初に「Embed PDF」をインストールします。

管理画面から「Embed PDF」をインストール!

↓管理画面へログインし「プラグイン」⇒「新規追加」をクリックしてください。

↓「プラグインのインストール」画面が開きますので、「検索」の入力欄に「Embed PDF」と入力し「プラグインの検索」をクリックしてください。

↓プラグインの検索一覧が表示されますので「Embed PDF」の「いますぐインストール」をクリックしてください。

↓「本当にこのプラグインをインストールしてもいいですか?」の画面が表示されますので「OK」をクリックしてください。

↓プラグインがインストールされますので「プラグインを有効化」をクリックしてください。

↓プラグインの画面に戻り「Embed PDF」がインストールされ有効化したのが、確認できます。

以上で「Embed PDF」のインストールが完了しました。

実際に投稿してみる!

では実際にPDFを投稿してみましょう。

管理画面へログインし新規投稿画面を表示!

↓管理画面へログインし新規投稿画面を開きます。今回はテストとして、記事タイトルは「PDFを表示!」と入力します。

↓次に記事入力画面へカーソルを移動させてから、「メディアを追加」をクリックしてください。

↓「メディアを挿入」画面が開きますので、「ファイルをアップロード」をクリックしてください。

↓「ファイルを選択」から該当のPDFを選択してください。

↓PDFを選択すると「メディアライブラリ」が表示されますので「添付ファイルの表示設定」のリンクをコピーしてください。このリンクがサーバーにアップしたPDFのリンク先になります。リンクをコピーしたら右上の「×」から画面を閉じてください。

↓新規投稿画面に戻りますので、投稿入力画面に以下のような形でコードを入力してください。先ほどコピーしたPDFのリンク先のURLを「embed」タグで囲ってください。「width」「height」にはそれぞれ「幅」と「高さ」を指定してください。

↓実際に投稿したPDFのサムネイルです。右上の矢印のボタンをクリックすれば、別ウインドウで画面が開きます。

以上で設定完了です。

プレビューができない原因!

最初に「Embed PDF」を導入した時は、なぜかPDFのサムネイルが表示される箇所に「プレビューできません」と表示され、上手く動作しませんでした。原因を調べてみると、公開前のサイトでBasic認証を掛けていたのが原因でした。

Basic認証が掛かっているとサムネイルが表示できませんので、ご注意ください。

↓こんな感じでサムネイルが表示されません。

最後に!

今までの経験上、カンパニーサイトで報告書などをPDFで表示するようなケースがよくありました。通常のブログで使用することは、ほとんど無いと思いますが、プラグインを使用すれば、PDFをこのような形で掲載できることを知っておいて損はないと思います。

以上「記事内にPDFを表示する時に使用するプラグイン「Embed PDF」!」でした!

それではまた。

コメント