WordPressにPDFファイルを埋め込む簡単な方法(プラグイン数種例とプラグイン無し)

WordPressのPDFファイルを埋め込み方法・プラグイン有り無し

まずは、どのテーマでもプラグインなしでPDFファイルを表示できる「ファイル」ブロックの使い方からご説明します。

PDFをプラグイン無しで埋め込む方法

「ファイル」ブロックは、どのテーマでも存在します。

まずはブロックエディターで、PDFを取り込みたいところに「+」を探し、

1. ブロックを選択
2. すべて表示を選択
3. 左に出て来るブロックメニューから「ファイル」を選択
4. メディアに取り込んだPDFファイルを選択

後はファイルブロックをクリックしてメディアから表示させたいPDFファイル補選択するだけです。

実際に以下に「ファイル」ブロックで取り込んだPDFを表示させてみました。

ただ、PCだと綺麗にファイルが表示されるのですが、スマホ(Android)からだとダウンロードボタンしか表示されないんですよね。

スマホ(Android)から閲覧する場合はファイル名を1度タップしてもらうというひと手間が生じます。

テストPDFダウンロード

この表示方法が理想だという方は、プラグインなしでOKだと思います。

簡単なカスタマイズは右に表示されるブロックのメニュー「PDF設定」から編集可能です。

1. A 「インライン埋め込みを表示」をオフにするとダウンロードボタンだけが表示されます。
2. B 「ピクセル値での高さ」で表示サイズ(高さ)を調整できます
3. C 「ダウンロードボタンを表示」をオフにするとダウンロードボタンを消すことができます。

先ほども書いたように Android スマホからアクセスしたユーザーにはこんな風に表示されちゃってるはず。

どのサイトもスマホからアクセスするユーザーがほとんどでしょうから、これじゃ困るって方は多そう。

PDF Viewer プラグイン

「PDF Viewer」は有名なプラグインです。これを使用すると、以下のような表示になります。

大きなツールバーが消えて黒い背景が無くなる形ですね。スッキリします。ダウンロードボタンはありませんが、ダウンロードアイコンの枠は表示されています。

PDF プラグイン

そのものずばりですが「PDF」という名前のプラグインです。これを使用すると、以下のような表示になります。

ツールバーもアイコンも完全になくなって、画像が表示されるだけのような形になります。しかしスマホ表示の場合は黒い枠が付きます。

PDF Poster プラグイン

表示は「PDF Viewer」とほぼ同じです。が、このプラグインはあらかじめプラグインの設定でPDFを取り込み、ショートコードで記事に設置する形です。(Contact Form7 のような方式です)。これを使用すると、以下のような表示になります。

PDF Embedder

非常にシンプルに画像のみ埋め込んだような形になります。これを使用すると、以下のような表示になります。

STEP

ただの画像のみ表示に近いフェイス

STEP

ブロックの右設定でツールバーの表示が可能
(本当に画像のみ表示したい場合は”None”を選択)

用途によって使い分けを

基本は訪問者にダウンロードしてもらうことを目的とするのだと思いますが、使い方はオーナーそれぞれ。

使いやすく、希望に合ったPDF埋め込み方法の参考になれば幸いです。

作業を承ります