「WordPressの記事内にPDFファイルを設置したい」
資料やマニュアルなどに使われることも多いPDFファイルですが、Web上で配布・共有するために、WordPressの記事内に設置したい場合もあると思います。そこで今回はプラグイン無しで、WordPressの記事内にPDFファイルを設置する方法を解説します。
プラグイン無しでWordPress記事内にPDFを設置する方法
WordPressデフォルトのクラシックエディターでは、記事中にPDFを埋め込む方法はありません。埋め込むというのは、設置したページでそのPDFの内容を閲覧できる状態です。
ページ内に設置したPDFをその場で閲覧できるようにしたい（埋め込みたい）場合は、下記のプラグインをご活用ください。
WordPressの記事の中でPDFをそのまま埋め込んで表示したい時がありますよね。メディアの媒体資料やプレゼン資料、企業の業績連絡などのPDFファイルをそのまま埋め込めれば、ユーザーに対しても親切です。 WordPressは初期状態ではPDFの埋め込みができないので、今回はショートコードでP...
今回ご紹介するのは、プラグインを使わずに記事中にPDFを設置する方法です。PDFへのリンクを設置して、そこへジャンプして中身を閲覧できるようにします。単にメディアにPDFファイルをアップして、記事内に挿入するだけでOKです。
ただ挿入するだけだとPDFのファイル名がそのまま表示されるので、以下の手順で設置しましょう。エディター別に解説いたします。なおブロックエディターならプラグイン無しでもPDFファイルを埋め込み可能です。
クラシックエディター
クラシックエディターならビジュアル・テキストどちらのモードでも大丈夫なので、PDFファイルへリンクする旨がわかるテキストを入力します。
次にメディアにアップしたPDFを選択して 「URLをクリップボードにコピー」をクリックします。
あとはエディターの画面へ戻って最初に入力したテキストにリンクとして貼り付けるだけです。
PDFファイルをブラウザで開くので、「リンクを新しいタブで開く」にチェックを入れておく方が親切かもしれません。下記のようにブラウザでPDFファイルが開かれます。
ブロックエディター
ブロックエディターならプラグイン無しでも記事中にPDFを埋め込むことが可能です。「ファイルブロック」を使って、PDFファイルを埋め込みます。
編集画面右側の設定では、埋め込み表示の有無や高さ、ダウンロードボタンの有無なども設定できます。
サイト上にはこのように表示されます。
※ただし、ブロックエディターの編集画面にも記載がある通り、スマホでは埋め込んだPDFが正しく表示されない場合があります。
手元のiPhone11 proで検証したところ、PDFの1枚目が引き延ばされて表示されていました。スマホでは使えないので潔くダウンロードボタンだけ表示する方がいいかもしれません。
以下のようなCSSを追加すれば、スマホ環境でのみ埋め込んだPDFを非表示にできます。
@media screen and (max-width: 750px){
.wp-block-file .wp-block-file__embed {display: none;}
}CSSを編集する方法は下記記事で詳しくご確認いただけます。
WordPressに慣れてくると、サイトのデザインをCSSでカスタマイズしたくなりますよね。この時最も気をつけておきたいのが、CSSの編集方法です。 特に、テーマのスタイルシートを直接編集するのは避けた方がよいでしょう。 当記事では、WordPressでCSSを編集する方法を4つご紹介し...
まとめ
WordPressの記事内にプラグイン無しでPDFファイルを設置することはできます。しかし、PDFを閲覧するにはリンク先へ移動するか、ファイルをダウンロードしなければなりません。ページ内に表示（埋め込み）できるかどうかを基準にまとめると下記の通りです。
| PCで埋め込み表示 | スマホで埋め込み表示 | |
| プラグイン無しクラシックエディター | – | – |
| プラグイン無しブロックエディター | OK | – |
| プラグインあり（両エディター） | OK | OK |
ブロックエディターなら記事内にそのまま埋め込むこともできますが、スマホでは閲覧できないのでCSSで調整が必要になります。ただ、PDFファイルを共有することが目的であれば、デフォルトの機能でも事足りるかと思います。できる限りプラグインは少ない方が望ましいからです。
ユーザービリティの観点からページ内で閲覧できるようにしたい場合はプラグインが必要です。下記プラグインならスマホでも縮小して綺麗に表示されるので、ぜひ検討してみてください。
WordPressの記事の中でPDFをそのまま埋め込んで表示したい時がありますよね。メディアの媒体資料やプレゼン資料、企業の業績連絡などのPDFファイルをそのまま埋め込めれば、ユーザーに対しても親切です。 WordPressは初期状態ではPDFの埋め込みができないので、今回はショートコードでP...
コメント