PDFファイルを投稿や固定ページに表示させるプラグインPDF Embedder+PDF Image Generator

2017年8月8日

この記事は最終更新日から7年経過しています。内容が古い可能性があります。

Photo by Bram Naus on Unsplash

文書をPDF化するとどのような環境でも同じ内容を見ることができるので、よく使われています。WordPressの投稿や固定ページにPDFを貼り付けてもファイルがアップロードされて、PDFへのリンクはできますが内容を参照したり、アイキャッチに指定したりすることはできません。それができるようになるプラグインを2つ見つけましたのでその使い方について書きます。

記事をざっと見る

投稿や固定ページにPDFをアップロードする

投稿や固定ページにPDFをアップロードしてみます。

PCにあるPDFファイルを投稿画面にドラッグ＆ドロップします。

メディア画面が開いて、ファイルのイメージが表示されています。このまま表示できるのかなと、この画像を投稿に挿入をクリックしてみると

こんな感じで、PDFファイルへのリンクに自動的になってしまいました。

flower というリンクができていて、クリックすると同じ画面で

このように表示されてしまいます。リンクを別タブで開くことは編集から行えるとは思いますが、できれば投稿や固定ページで中も見えると話が早いですよね。理想としては「リンク（PDFダウンロード用）」「中身を表示」の両方ができるといいと思います。

プラグインPDF Embedderで投稿や固定ページでPDFファイルの内容を埋め込んで表示する

PDF Embedderというプラグインを使うとPDFの中身を投稿や固定ページで表示できるようなので、インストールします。

ダッシュボード プラグイン＞新規追加 をクリック

キーワードにpdf embedderと入力すると

このプラグインが表示されますので今すぐインストールをクリック

有効化をクリック。これでインストールが完了しました。

この状態でもう一度先ほどの投稿の編集画面で

メディアを追加をクリック

先ほどと同じく、PDFファイルを選択して投稿に挿入をクリックします。

編集画面に戻ると、先ほどはこの操作でリンク行が追加されましたが、PDF Embedderをいれたあとはこのようにショートコードが追加されています。表示の違いを見てみます。

このように先ほどのリンクの下にPDFの内容が表示されました(^^)/

これであとはPDF表示を別タブにすれば良いので、

<a href="http://wp475/wp-content/uploads/2017/08/flower.pdf">flower</a>

とある部分を

<a href="http://wp475/wp-content/uploads/2017/08/flower.pdf" target="_blank">このPDFをダウンロード</a>

と、書き換えれば別タブでPDFファイルを表示したりダウンロードすることができます。ついでに表示する文字もこのPDFをダウンロードに変更しました。

複数ページあるPDFの貼り付け

このPDFは1ページでしたが複数ページのPDFを貼り付けるとどうなるかやってみました。

PDFの上にマウスを乗せると、下の方にガイドが表示されます。

複数ページのときは、このように矢印をクリックすることで

ページを行き来することができます。

アイキャッチ画像を指定する

ここまでできたのでアイキャッチ画像を指定したいと思いました。

アイキャッチ画像に設定をクリックしましたが、

ここにPDFは表示されません。アイキャッチとしては指定できないようです。

調べてみるとPDFから画像を作ることができる、PDF Image Generatorというプラグインも存在していましたのでインストールします。

ダッシュボード プラグイン＞新規追加 をクリック

PDF Image Generatorと入力すると

このプラグインが見つかりますので、今すぐインストールをクリック

有効化をクリック。これでインストールが終了です。

アップロード済みのPDFのアイキャッチ画像を作る

PDFファイルは既にアップロードしてあるので、そのアイキャッチ画像を作ります。

設定＞PDF画像ジェネレータ をクリック

設定画面になります。一番下の方を見ると

アップロード済みのPDFからサムネイルを作成という項目があるのですべてのPDFの画像を再作成して置き換えるをクリック

処理が終わるとこのように結果が表示されます。

先ほどの投稿画面でもう一度アイキャッチ画像に設定をクリック

このようにアイキャッチ画像が表示されるので、クリックしてアイキャッチ画像に設定をクリック

このようにアイキャッチ画像が指定されて、ホーム画面の一覧でも

アイキャッチ画像として表示されました。

PDF Image Generatorを使う上での注意点ですがPDFファイル名を日本語（2バイト系文字）にするとエラーになりますので英文字で名前をつけるようにしましょう。

余談：アイキャッチを指定したときに画像が1枚しか表示されなかった件

今回は逆に、今生成したファイルでこの投稿に使われているPDFの画像しか表示されませんでしたが

投稿に関連した画像があると、この投稿へのアップロードになっているからのようです。PDFのアイキャッチ以外を使いたいときは、この選択肢を画像などにすれば通常の画像を選択できるようになるようです。

今まで画像などで貼り付けていましたが、このプラグインを使うと投稿や固定画面で見てもらうことができます！

今までPDFは別のタブでリンクを表示するか、PDFを画像にして貼り付けるというようなことしかできないと思っていました。このプラグインを使えばたとえ複数ページあるPDFでも投稿や固定ページに貼り付けることができるのでとても便利だと思います。

アイキャッチを表示するには別のプラグインを使いましたが、PDF Embedderを有料版にするとサムネールも作成するようになるので1つのプラグインで済ませたい方は有料版を検討してみるのも良いと思います！

おまけ：画像での表示で良いなら「PDF Image Generator」だけでも埋め込むことができるようです！

このブログを書き終えてからPDF Image Generatorの解説を詳しく読んでいるうちに「もしかして、画像として表示するだけでいいならPDF Image Generatorだけでできるんじゃないか？」と思いました。そこでPDF Embedderを停止して、PDF画像を投稿に貼り付けてみました。