WordPress

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

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

こんにちは!

川口でWEBやさんをやっているSeitoです。

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

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

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

https://tedask.jp/wordpress-customize/

 

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[pdf-embedder url="メディアライブラリからコピーしたURL"]

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

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

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

まとめ

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

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

 

WordPressやWEB技術、集客、ChatGPTなど最新技術に関する情報を毎週お届けする
メールマガジンを発行しています。
不定期でWordPressの脆弱性情報も配信していますので、
WEB担当者やWEBを学んでいる方などにオススメの無料メールマガジンです!

メールマガジン案内ページに移動する

この記事を書いた人
Toshi Seito

TEDASK代表
WordPressに関する相談実績のべ300件以上、タイムチケットでのWordPressの立ち上げお手伝いのチケット販実績240件以上!WordPressのカスタマイズから、WEBサービス制作、ホームページ制作のご相談はお任せ下さい。

Toshi Seitoをフォローする

コメント

タイトルとURLをコピーしました