WordPressにPDFをファイルリンクではなく中身を表示させる方法

こんにちは！

TEDASKのToshi Seitoです。

WordPressでよくあるご相談でPDFをサイト内に埋め込みたい、表示させたいというご相談があります。

PDFは、WordPressに追加してページに表示しようとするとファイル名のリンクが表示されて、ダウンロードする形で表示されてしまいますが、今回はPDFの内容を表示する方法をご説明します。

ちなみに今回表示例として使うテーマはCocoonです。

ブロックエディタでPDFを表示する場合

もしすでにブロックエディタをお使いの場合はプラグインを使わずPDFの中身を表示することができます。

投稿もしくは固定ページで新規追加を行います。

この状態から、PDFを追加してみます。

まず段落表示にして、右側の「＋」ボタンをクリックして、ブロックメニューが表示されたら「ファイル」と入力してフォルダマークのファイルを選択します。

もしPDFをこれから追加する場合は、「アップロード」をクリックします。（もしすでにメディアライブラリに入っている場合はメディアライブラリ）

するとこんな風にPDFが表示されます。

よく見ると右の方にスクロールバーが表示されており、初期状態ではPDF全体が表示されていない状態です。

なので、右の設定項目の「ピクセル値での高さ」をスクリーンセーバーが表示されなくなる数値まで上げてみます。

今回のPDFの場合は1188でした。

ちなみに、「インライン埋め込みを表示」が右側（オン）になっている事も確認して下さい。

もう少しオプションを見てみると「ダウンロードボタンを表示」がオンになっていると思いますが、もしダウンロードボタンが不要な場合はオフにして下さい。

もう一度PDFの上の方にいくと、人によってはPDF全ページビューになる場合があるので、左のメニューボタンをクリックして、ページナビを非表示時にするとスッキリしますよ。

そうしたら公開して確認してみましょう。

無事PDFの中身が表示されましたね。

ブロックエディタでのPDFの表示方法は以上です。

クラシックエディタでPDFを表示する場合

クラシックエディタの場合は、残念ながらWordPressの標準機能では表示出来ませんので、プラグインを使う必要があります。

PDF Embedderをインストールし、有効化します。

クラシックエディタの状態で、先程と同じ様に新規ページを用意します。

あとは、画像と同じ様に「メディアを追加」からPDFを追加して、PDFを選択します。

そうすると、ショートコードが自動で貼り付けられますので、この状態でプレビューもしくは公開して確認してみましょう。

するとこんな風に、PDFが表示されました。

ブロックエディタ版よりもスッキリした感じではありますね。

クラシックエディタ版でのPDF表示は以上となります。

ブロックエディタでPDF Embedderは使える？

さて、今までクラシックエディタを使っていたけどあるときからブロックエディタに切り換えたあとにPDF Embedderとブロックエディタ版が混在するのも良くないので、PDF Embedderをブロックエディタで使えるかどうかを実験してみます。

ブロックエディタのブロックで「ショートコード」を選んで、ショートコードの書き方でファイルを指定してみます。

そうすると、問題なく表示されましたね。

ただ、このやり方で上手く行かない場合もありましたので、ブロックエディタの場合はWordPress標準のやり方でPDF表示をおすすめします。

まとめ

今回はWordPressにPDFの中身を表示する方法を説明しましたが、ブロックエディタの場合はプラグインなしでPDF表示ができる事とクラシックエディタの場合はプラグイン（PDF Embedder）が必要ということを知っていただければと思います。

以上、「WordPressにPDFをファイルリンクではなく中身を表示させる方法」でした！