WordPressサイトでPDFを直接表示することで、ドキュメント、電子書籍、その他の貴重な資料に簡単にアクセスできるようになり、ユーザーエクスペリエンスを向上させることができます。
埋め込みPDFビューアを使用すると、訪問者はウェブサイト上でシームレスにコンテンツを表示し、操作することができます。さらに、訪問者が使用しているデバイスに関係なく、すべてのファイルが同じレイアウトになることが保証されます。
私たちは過去にWPBeginnerや提携ウェブサイトでPDFビューアを使用しており、それがユーザーのアクセシビリティと利便性をどれだけ向上させるかを経験してきました。
この記事では、WordPressにPDFビューアを簡単に追加する方法を説明します。ステップバイステップの説明にはコーディングは不要なので、初心者でも使用できます。
WordPressでPDFビューアが必要なのはなぜですか？
多くのWordPressサイトでは、サービスや製品に関する情報を共有するためにPDFファイルを使用しています。たとえば、レストランウェブサイトをお持ちの場合、メニューをオンラインPDFとして公開するかもしれません。
いつでもPDFをウェブサイトにアップロードし、WordPressにダウンロードリンクを追加できます。ただし、これは、PDFドキュメントをすばやく確認したい人や、ファイル全体をダウンロードしたくない人にとっては、最良のユーザーエクスペリエンスではありません。
代わりに、WordPressにPDFビューアを追加して、ウェブサイトに直接PDFを表示できます。これにより、訪問者はダウンロードせずにドキュメントを確認できるため、スマートフォンやタブレットユーザーにとって特に便利です。
また、訪問者をウェブサイトに留めることができるため、ページビューを増やし、直帰率を減らすことができます。
それでは、WordPressにPDFビューアを簡単に追加する方法を見てみましょう。クイックリンクを使用して、使用したい方法に直接ジャンプしてください。
- 方法1：ブロックエディタを使用してPDFビューアを追加する（簡単）
- 方法2：プラグインを使用してWordPressにPDFビューアを追加する（よりカスタマイズ可能）
- ボーナス：埋め込みPDFから収益を上げる方法
方法1：ブロックエディタを使用してPDFビューアを追加する（簡単）
WordPressウェブサイトにPDFを表示する最も簡単な方法は、Gutenbergエディターの組み込みのファイルブロックを使用することです。
この方法では特別なプラグインは必要ありませんが、ビューアのカスタマイズはごくわずかしかできません。より高度なカスタマイズや機能が必要な場合は、代わりにWordPressプラグインを使用することをお勧めします。
開始するには、PDFビューアを追加したい投稿またはページを開き、「ブロックを追加」（+）ボタンをクリックして新しいブロックを追加します。
その後、「File」と入力し始め、表示されたら正しいブロックを選択します。
PDFをWordPressのメディアライブラリに既にアップロードしている場合は、「メディアライブラリ」ボタンをクリックします。その後、埋め込みたいPDFを選択できます。
まだPDFをアップロードしていない場合は、「アップロード」をクリックしてから、コンピューターからファイルを選択してください。
WordPressは、埋め込まれたPDFのサイズを自動的に選択します。
ファイルのサイズによっては、デフォルトの表示ではドキュメント全体が表示されない場合があります。ただし、訪問者はツールバーの設定を使用してPDFをズームイン/アウトしたり、スクロールしたりできます。
必要に応じて、PDFビューアの高さを変更して、埋め込まれたドキュメントの表示量を増減できます。
これを行うには、右側のメニューにある「ピクセル単位の高さ」スライダーを使用するだけです。
時には、訪問者がPDFをダウンロードして、いつでも手元に置いておきたい場合があります。
例えば、お客様は、最も人気のある商品のユーザーマニュアルや、今後のイベントやカンファレンスのプログラミングスケジュールをダウンロードしたい場合があります。
デフォルトでは、WordPressはツールバーに「ダウンロード」アイコンを表示し、PDFの下にボタンを表示します。
「ダウンロード」ボタンは、PDFツールバーのさまざまなアイコンに慣れていない訪問者に役立つ場合があります。
これを踏まえると、「ダウンロード」ボタンを有効にしたままにしておきたい場合があります。ただし、この重複コンテンツを含めたくない場合は、「ダウンロードボタンを表示」トグルをクリックして無効にすることができます。
PDFのセットアップが完了したら、「更新」または「公開」をクリックして変更を反映させます。
これで、WordPressウェブサイトにアクセスすると、PDFビューアが機能しているのがわかります。
方法2：プラグインを使用してWordPressにPDFビューアを追加する（よりカスタマイズ可能）
WordPressの組み込みファイルブロックは、少数のPDFを埋め込みたいだけであれば良い選択肢です。しかし、ビューアをより細かく制御したい場合は、代わりに無料のプラグインを使用することをお勧めします。
PDF Embedder は、WordPressの最高のPDFビューアプラグインの1つです。PDFファイルのサイズを自動的に調整するか、幅を指定すると、プラグインが自動的に高さを計算します。
また、PDFビューアも付属しており、次の/前のボタンとズームボタンが付いているため、簡単にナビゲーションや表示ができます。これは、オンラインコースなどの参考資料のような長いドキュメントを表示するのに最適です。
プラグインの詳細については、PDF Embedderの完全なレビューをご覧ください。
まず、PDF Embedder プラグインをインストールして有効化する必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。
注意: このプラグインには、WordPressにモバイルフレンドリーなPDFを簡単に埋め込める無料版があります。ただし、このチュートリアルでは、より高度な機能が付属しているプレミアムバージョンを使用します。
有効化後、WordPressダッシュボードから設定» PDF Embedderページにアクセスして、プラグインの設定を構成してください。
「メイン設定」タブから、PDFの幅と高さを設定できます。ほとんどの場合、各PDFを埋め込む際にこれらのデフォルト設定を上書きできます。たとえば、個々のPDFのサイズやスケールを変更できます。
ただし、ご自身の要件によりよく一致するようにデフォルト設定を変更することをお勧めします。これにより、多くの時間と労力を節約できます。
標準では、PDF Embedder は、訪問者がドキュメントの上にマウスをホバーすると、ツールバーを上部に表示します。
ただし、長いドキュメントや複数ページのPDFを含める予定の場合は、デフォルトでツールバーを表示すると役立つ場合があります。これを行うには、単に「ツールバーを常に表示」オプションを選択します。
ドロップダウンメニューをクリックすることで、ツールバーの場所を上、下、または両方に設定したり、完全に無効にしたりすることもできます。
ページを下にスクロールすると、PDFビューアのさらに多くの設定を構成できます。たとえば、スクロールバーを表示したり、連続ページスクロールを有効にしたり、ツールバーにPDF検索ボタンを追加したりできます。
さらに、ツールバーにPDFダウンロードボタンを表示することで、訪問者がドキュメントをダウンロードできるようにすることもできます。また、ビューとダウンロード追跡を有効にすることもできるため、訪問者にPDFがどれだけ人気があるかを測定できます。
プラグインの設定が完了したら、「変更を保存」をクリックします。
これでWordPressにPDFビューアを追加する準備が整いました。PDFを表示したいページまたは投稿を開き、「+」ボタンをクリックするだけです。
これで「PDF Embedder」と入力し始め、表示されたら正しいブロックを選択できます。
次に、リンクをクリックしてWordPressのメディアライブラリを開き、PDFを選択します。次に、ライブラリからPDFを選択するか、コンピューターからファイルをアップロードします。
このプラグインはデフォルト設定を使用してPDFを表示しますが、右側のメニューの設定を使用して、このPDFの外観と動作を微調整できます。
ここで、PDFの高さ、幅、ツールバーの位置、ツールバーのホバー、外部リンク、検索ボタンを変更できます。
PDFの設定が完了したら、「更新」または「公開」をクリックするだけです。これで、WordPressブログまたはウェブサイトにアクセスして、埋め込まれたPDFビューアを確認できます。
訪問者はPDFドキュメントを簡単に表示でき、ツールバーを使用してフルスクリーンモードに入ったり、ズームインしたり、ページを移動したり、PDFをダウンロードしたりできます。
ボーナス：埋め込みPDFから収益を上げる方法
品質が高く、役立つPDFをお持ちの場合は、それらを使用してWordPressでオンラインでお金を稼ぐことができます。
ウェブサイトにPDFドキュメントを埋め込んだ後、そのページまたは投稿を限定メンバーのみのコンテンツにすることができます。訪問者はメンバーシップを購入することで、そのページまたは投稿にアクセスし、埋め込まれたPDFを表示できます。
WordPress をメンバーシップサイトに変える最も簡単な方法は、MemberPress を使用することです。これは、埋め込みPDFを含む、あらゆるページや投稿を限定購読者のみのコンテンツに変えることができる、最高の WordPress メンバーシッププラグインです。
ステップバイステップの手順でWordPressの会員制サイトを作成する方法についての完全ガイドがあります。これで始められます。
また、ウェブサイトでPDFドキュメントを管理および販売するために、Easy Digital Downloadsの使用も推奨します。あらゆる種類のデジタル商品を簡単に販売でき、プレビューとして製品ページにPDFを埋め込むこともできます。
この記事がWordPressにPDFビューアを追加するのに役立ったことを願っています。また、WordPressブログ投稿にPDF、スプレッドシートなどを埋め込む方法に関する初心者向けガイドをご覧になるか、WordPressにTikTok動画を埋め込む方法のチュートリアルを確認することもできます。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
イジー・ヴァネック
私のウェブサイトでは、PDFがEdgeブラウザで開くことが多く、非常に迷惑でした。他のユーザーも、別のPDFビューアを持っていない場合に同様の問題を経験しました。プラグインWP PDF Embedderは、この動作を大幅に軽減するのに役立ちました。このような些細な問題でしたが、この記事だけがそれを解決するのに役立ちました。
WPBeginnerサポート
Glad our guide was able to help
管理者
デニス・ムトミ
素晴らしいガイドです！
ただ一つ質問があります。プラグインを使用して大きなPDFファイルを埋め込む場合、ページの読み込み時間に顕著な影響はありますか？
多くのPDFが埋め込まれているサイト、特に一部のPDFのファイルサイズが大きい場合、考慮すべきパフォーマンス上の問題があるかどうかを知っておくと良いでしょう。
大きなPDFファイルを配信すると、ページの読み込み速度が低下する可能性があります。
WPBeginner コメント
PDFのファイルサイズが大きい場合、ページにPDFが読み込まれるまでに少し時間がかかることがあります。ただし、多くの場合、これは問題になりません。
Mrteesurez
良い、役立つ投稿です。
しかし、PDFを埋め込んで、人々がオンラインで読んでいる間に収入を得ることは可能ですか？Amazon KDPのようなものです。このプラグインはそれを達成するために使用できますか？または、カスタムの方法で、教えてください。ありがとうございます。
WPBeginnerサポート
現時点でお勧めできる方法はありません。
管理者
Christian
最新バージョンでうまく動作します！
WPBeginnerサポート
Thanks for letting us know
管理者
イアン
PDF Viewerが3年間更新されておらず、現在のWordPressバージョン（v4.9.1）でテストされていないことに気づきました。これはまだ使用が推奨されるプラグインですか？誰もメンテナンスしていないように見えますか？
WPBeginnerサポート
こんにちは、イアンさん。
その通りです。WordPress用のPDFプラグインをチェックしてみてください。
管理者
Manoj jidugu
WordPressのウェブページを印刷しようとすると、ページが正しく配置されません。
すべてのURLとコンテンツが混ざって表示されます。
Marek
プラグインページには次のように表示されます。
「このプラグインは2年以上更新されていません。メンテナンスまたはサポートが終了している可能性があり、WordPressの最近のバージョンとの互換性に問題がある場合があります。」
それが一部の人にうまくいかない理由かもしれません。
Kallol Das
私のサイトではPDFビューアが機能しません。実際、ブログ記事にPDFファイルを埋め込むことができません。
rajesh
こんにちは、WordPressサイトに本を公開したいのですが、人々は本を読むだけで、簡単なPDFリーダープラグインをいくつか紹介してもらえますか？
Omar
これはWPの最新バージョンでは機能しません。回避策を知っている人はいますか？または、機能する別のオプションはありますか？
fred
皆さん、こんにちは。
このようなPDFプラグインの問題点は、PDFを生成する際にサイドバーを削除できないことで、スタイルが大きく変わってしまうことです！
このような便利な機能を持つものを見つけたら、ここでお知らせします！あるいは、誰かが見つけましたか？
ibrar
良い情報
Nate Richie
「Embed Any Document」を試してみてください。はるかに優れた代替手段です。
AllyG
おすすめありがとうございます。うまくいきました！！
Piet Marisael
ファイルを110％表示で自動的に開くようにビューアを設定することは可能ですか？また、どのようにすればよいですか？
Wordpress 4.4.2およびtwenty-elevenテーマで使用される完璧なプラグインです
Darron
サイード様、
この件に関するご連絡、誠にありがとうございました。
過去2年間、このプラグインの無料バージョンを使用してきましたが、クライアントのサイトに多数のPDFファイルがあるため、最近プレミアム版にアップグレードしました。
これまでのところ、プレミアムバージョンで問題はまったくありません。また、「ブランド解除」も可能で、ダウンロード/表示回数を追跡することもできます。
Rita
ご指摘いただいた情報を読みました。PDFビューアはwordpress.comでは利用できないようです。残念です。読者が私のURLをクリックしてPDFにアクセスした場合、別のページに移動し、私のブログに戻ってこない可能性があるという問題を理解しています。それは問題です。wordpress.comを始めたとき、PDFを表示する必要があるとは知りませんでした。そうすれば、別の選択をしたかもしれません。
Rita
WordPress.orgが埋め込みプラグインに必要なアプリケーションであるということで合っていますか？もしそうであれば、その情報を要件として明確に記載することをお勧めします。私が確認したすべての参照は一般的なWordPressのものであったため、特定のアプリケーション要件があるかどうかを判断することはできませんでした（見落としましたか？）。これは初心者である私たちが間違いを避け、異なる決定を下すのに役立つでしょう。
ありがとうございます。
Dan
WordPressのDIY（自分でやる）の問題点を特定し、通常はプラグインを使った代替ソリューションを提供するあなたの投稿には本当に感謝しています。
「しかし」、wordpress.orgディレクトリのプラグインページにユーザーが投稿したレビューの一部や、最終更新情報を読む時間を取っていますか？
たとえば、このPDF VIEWERプラグインは「8ヶ月」前に最終更新され、WP 4.2.6まで互換性があります。
また、あるレビューアによると…
「2015年11月4日 WP 4.3.1用
まさにこのプラグインが必要でした。ありがとうございます！
******懸念事項は以下の通りです：
(1) このプラグインはMozilla PDF.JSフレームワークを利用しています。2015年11月現在、このプラグインはそのフレームワークの現在のバージョンから著しく遅れています：
プラグイン設定ページの状態：
PDF.js バージョン 日付
安定版 1.1.1 2015年3月18日
ベータ版 1.1.114 2015年5月7日
PDF.JS ページの状態（2015年11月現在）：
安定版 1.1.366
ベータ版 1.1.469
要約 > 評価が高く、常に更新されており、高く評価されているプラグインを使用するのは良い習慣だと思いますか？もしそうなら、提案されたプラグインがしばらく更新されていないが、現在利用可能なものの中で最良の解決策であるように見えることを認める情報を投稿に含めてください。
WPBeginnerサポート
PDF Viewerを使用すると、設定ページからPDF.jsのベータ版を使用できます。また、WordPressのバージョンでテストされていないプラグインをインストールすべきですか？に関するガイドも参照してください。
管理者
Rita
私はWordpress.comを使用しており、.orgではありません。プラグインを使用してPDFやその他のドキュメントを埋め込むことはできますか？さまざまな参照を見つけましたが、実験して既存のブログを破損する可能性のある前に、確信したいです。
Wordpress.comの編集ページにはプラグインという場所があります。これもそれらを使用できることを示唆していますが、参照では「いいえ」と言われています。説明をお願いします。
ありがとう
WPBeginnerサポート
セルフホスト型WordPress.orgと無料のWordPress.comブログの違いに関するガイドをご覧ください。
管理者
Md Riyaz Alam
サイードさん、こんにちは。
これはWordPressでは初めての種類のポットだと思います。WordPressのPDFに関する投稿は見かけませんでしたが、多くのSEOやブロガーがこのプラグインを探しています。WP業界に紹介してくれてありがとう。チュートリアルにも非常に役立つでしょう。
Rita
WordPress.com（.orgではありません）を使用しています。PDFドキュメントをブログ投稿の他の部分と同じページに表示させたいです。ここに記載されているPDFビューアをWordPress.comブログにインストールできますか？
Prince
この記事をありがとうございます。SEOの目的で、PDFコンテンツをテキストに追加してダウンロードリンクボタンを追加するのと、このビューアプラグインのみを使用してPDFを表示するのと、どちらが良いですか？
WPBeginnerサポート
前述したように、ダウンロードリンクはユーザーにPDFを個別に表示させることを強制します。これにより、あなたのページでの滞在時間が減り、ウェブサイトの閲覧を再開する可能性も低くなります。ダウンロードリンクを追加するのと同じSEO効果が得られます。JavaScriptで記述されており、HTML5と互換性があるため、PDFファイルに画像だけでなくテキストが含まれている場合、検索エンジンはPDFの内容をインデックス化できます。
管理者