WordPressにPDFを埋め込むには、組み込みのファイルブロック、専用プラグイン、またはGoogleドライブのiframeを使用するという3つの方法があります。いずれもコードを一切変更する必要がなく、設定も5分以内で完了します。.
WordPressユーザーの多くは、PDFをダウンロード可能なファイルとしてアップロードしてしまい、ページに直接表示できることに気づいていません。WordPressにPDFを正しく追加する方法を知れば、訪問者のサイト滞在時間を延ばし、エンゲージメントを高めることができ、パンフレット、メニュー、レポートなど、ダウンロードせずに閲覧してもらいたいあらゆるドキュメントに最適です。ここでは、その具体的な方法をご紹介します。.
要約
- WordPressでは、プラグインを使わずに組み込みのファイルブロックを使ってPDFを共有できます。.
- ズーム機能、ナビゲーション機能、ダウンロード機能を備えたプロフェッショナルな閲覧ツールが必要な場合は、PDF埋め込みプラグインを使用してください。.
- 大容量ファイルや外部サーバーに保存されているファイルの場合は、Google DriveまたはDropboxのiframeを使用してください。.
- ページの表示速度低下を防ぐため、PDFファイルはアップロード前に必ず5MB未満に圧縮してください。.
- ブラウザの表示はデバイスによって異なるため、公開前にモバイル端末で埋め込みコンテンツをテストしてください。.
WordPressでPDFをリンクするのではなく、埋め込むべき理由とは？
PDFへのリンクを貼ると、新しいタブで開くか、ダウンロードが開始されます。一方、PDFを埋め込むと、訪問者はあなたのページ内に留まり、あなたのレイアウト内で、あなたのブランドが常に表示された状態になります。この違いは、多くの人が想像する以上に重要なのです。.
ほとんどの場合、埋め込み方式の方が優れた選択肢となる理由は以下のとおりです。.
- ユーザーエクスペリエンスの向上： 訪問者はサイトを離れることなくドキュメントを読むことができます。新しいタブを開いたり、ダウンロードしたファイルでデバイスが煩雑になったりすることはありません。
- エンゲージメントの向上： 埋め込みドキュメントはユーザーのページ滞在時間を延ばし、滞在時間を増やし、離脱率を低下させます。
- より詳細な制御： 使用するプラグインや方法に応じて、訪問者がドキュメントをダウンロード、印刷、または閲覧のみできるかどうかを決定できます。
- SEO上のメリット： 埋め込みコンテンツ周辺のページコンテンツ、見出し、および文脈はGoogleによってインデックス登録されます。PDFコンテンツ自体は検索エンジンにとって読み取りにくいため、補足テキストとともに埋め込むことでページ全体の関連性が向上します。
- プロフェッショナルなプレゼンテーション： スタイリッシュでレスポンシブなPDFビューアは、生のダウンロードリンクよりもはるかに洗練された印象を与えます。
始める前に必要なものは何ですか？
ウェブサイトにPDFを挿入する前に、少し準備をしておくと、時間の節約になり、よくあるトラブルを未然に防ぐことができます。エディターを開く前に、この簡単なチェックリストを確認してください。.
- 圧縮されたPDFファイル： を低下させます ページの読み込み速度。アップロードする前に、SmallpdfまたはiLovePDFを使用してファイルを圧縮してください。インラインビューア向けには、5MB未満を目指しましょう。
- WordPressエディターへのアクセス： PDFを表示するページまたは投稿へのエディターまたは管理者権限が必要です。
- WordPressでホストされている場合： メディアライブラリに直接アップロードし、ブロックまたはプラグイン内でファイルURLを参照してください。
- 外部ホストを使用する場合： Google Drive、Dropbox、またはその他のプラットフォームを使用し、iframeまたはプラグインのショートコードを使用してファイルを取り込みます。
- ダウンロード権限に関する決定： 訪問者がファイルをダウンロードできるかどうかを事前に決定してください。これは、選択するメソッドとプラグインに影響します。
WordPressにPDFを埋め込む3つの方法とは？
WordPressでPDFを読み込むには、信頼できる方法が3つあります。最適な方法は、ファイルの保存場所、ビューアに対する必要な制御レベル、プラグインのインストールの有無によって異なります。.
| 方法 | 最適な用途 | プラグインが必要です |
| ファイルブロック | 簡単な埋め込み、設定不要 | いいえ |
| PDF埋め込みプラグイン | コントロール機能を備えたプロフェッショナルビューア | はい |
| iFrameまたはGoogleドライブ | 外部ホストまたは大容量ファイル | いいえ |
方法1：WordPressのファイルブロックを使用する（プラグイン不要）
WordPressでPDFをアップロードして表示する最も簡単な方法は、Gutenbergエディターに組み込まれているファイルブロックを使用することです。この方法はプラグインを必要とせず、 WordPressサイト バージョン5.0以降を実行している
ファイルブロックは、訪問者のブラウザを使用してページ上にPDFビューアを直接表示し、その下にダウンロードボタンを配置します。.
ファイルブロックを使用してPDFを埋め込む方法
- PDFを埋め込みたいページまたは投稿を開きます。.
- ブロックエディタで、プラスアイコンをクリックし、「ファイル」を検索して、検索結果から選択します。.
- ファイルブロックを選択し、「アップロード」をクリックしてPDFファイルを追加するか、メディアライブラリから選択してください。.
- アップロードが完了したら、右側のブロック設定パネルで「インラインファイル表示」をオンに切り替えてください。.
- ドキュメントの長さに合わせて、「高さ（ピクセル）」フィールドを使用してビューアの高さを調整してください。.
- 保存するには、「更新」または「公開」をクリックしてください。.
PDFファイルは、ブラウザに内蔵されているPDFビューアを使用してページコンテンツ内に表示されます。特別な設定は不要です。.
ファイルブロックの制限事項は何ですか？
組み込みのファイルブロックは単純な使用例ではうまく機能しますが、この方法を採用する前に知っておくべきいくつかの制約があります。.
- ブラウザ依存性： このビューアは訪問者のブラウザに依存します。一部のモバイルブラウザでは、インライン表示の代わりにダウンロードを促すメッセージが表示される場合があります。
- スタイル設定の制限： ビューアの外観、ツールバー、ナビゲーションボタンをカスタマイズすることはできません。
- 常にダウンロードボタンが表示される： この方法ではダウンロードを無効にするオプションはありません。
これらの制限事項のいずれかがお客様の利用ケースにとって問題となる場合、方法2はそれらをすべて解決します。.
方法2：PDF埋め込みプラグインを使用する
専用のPDF埋め込み プラグインを 使用すると、ズーム、ページナビゲーション、ダウンロード権限、全画面表示モードなどの操作機能を備えた、適切にデザインされたレスポンシブビューアが利用できます。表示と操作性が重要な場合に最適なオプションです。
WordPressでPDFを埋め込むための最適なプラグインはどれですか？
いくつかのプラグインがこの問題を適切に処理します。これらは現在入手可能な最も信頼性の高いオプションです。.
- PDF埋め込みプラグイン： 軽量でメンテナンスが行き届いたプラグインで、クリーンでレスポンシブなビューアを使用してPDFを埋め込むことができます。ブロックまたはショートコードで動作します。プレミアムバージョンでは、ズームコントロール、フルスクリーンモード、ページジャンプナビゲーションが追加されます。ほとんどのサイトにとって最適な万能プラグインです。
- あらゆるドキュメントの埋め込みに対応： PDF、Word文書、Excelファイル、PowerPointプレゼンテーションをサポートしています。レンダリングエンジンとしてGoogleドキュメントビューアまたはMicrosoft Office Onlineを使用することで、ほとんどのクロスブラウザおよびモバイル互換性の問題を解決します。
- Real3D FlipBook： ページめくりアニメーションを備えた、雑誌スタイルのフリップブックビューアとして最適な選択肢です。視覚的なプレゼンテーションが最優先されるパンフレット、カタログ、ルックブックなどに最適です。
PDF Embedderを使用してPDFを埋め込む方法
- プラグイン→新規追加に進み、「PDF Embedder」を検索してインストールしてください。.
- プラグインを有効化し、「設定」に移動して、デフォルトの幅と高さを設定してください。.
- PDFを表示させたいページまたは投稿を開いてください。.
- 新しいブロックを追加して「PDF埋め込み」を選択するか、ショートコード[pdf-embedder url=”YOUR PDF URL”]を使用してください。
- PDFファイルをメディアライブラリにアップロードし、ファイルURLをコピーしてください。.
- URLをブロックまたはショートコードに貼り付けてください。.
- ページをプレビューして、ビューアが正しく表示されることを確認してから公開してください。.
設定に応じて、ビューアはナビゲーション矢印、ページカウンター、およびオプションのズームコントロールを備えて、あなたのページ上にレンダリングされます。.
方法3：iFrameまたはGoogleドライブを使用してPDFを埋め込む
WordPress以外の場所にホストされているPDFファイル（GoogleドライブやDropboxなど）を埋め込む場合は、iframeを使用するのが最も柔軟な方法です。この方法は、 PDFファイルが 大きすぎて自分のサーバーにホストできない場合にも有効です。
GoogleドライブからPDFを埋め込む方法は？
- PDFファイルをGoogleドライブにアップロードしてください。.
- ファイルを右クリックし、「Googleドキュメントで開く」を選択します。上部の「ファイル」メニューに移動し、「ウェブに公開」を選択します。.
- 「埋め込み」を選択し、表示されたiframeコードをコピーしてください。.
- WordPressエディターで、カスタムHTMLブロックを追加します。.
- iframeコードをブロック内に貼り付けてください。.
- レイアウトに合わせて、コード内の幅と高さの値を調整してください。目安としては、幅=”100%”、高さ=”600″ が良いでしょう。.
- ページを公開する。.
付きのドキュメント全体を閲覧でき ナビゲーションコントロール、レンダリングはGoogleが行います。
DropboxからPDFを埋め込む方法は？
- PDFファイルをDropboxにアップロードして、ファイルを開いてください。.
- 「共有」をクリックして、直接リンクを生成します。.
- 直接ファイルリンクを取得するには、URLのクエリパラメータをdl=0からraw=1に変更してください。.
- PDF埋め込みショートコードでこのURLを使用するか、カスタムHTMLブロックのiframeのsrc属性に貼り付けてください。.
iFrameメソッドはどのような場合に使うべきでしょうか？
の有無という3つの要素によって決まります。 プラグインのインストールこれらを参考に判断してください。
- 外部ホストファイル： PDFファイルはGoogleドライブ、Dropbox、またはその他のプラットフォームに保存されており、サーバー上に複製したくない場合。
- ファイルサイズが大きい： ファイルがメディアライブラリの容量を超えているか、ホスティングのストレージ制限に影響を与える可能性があります。
- クロスブラウザ互換性： プラグインをインストールせずにレンダリングを処理するには、Googleが必要です。
- ドキュメントの自動更新： Googleドライブファイルへの更新は、 WordPressページ。
適切な方法を選ぶにはどうすれば良いですか？
埋め込みコンテンツを公開するだけでは、作業の半分に過ぎません。設定方法によって、ページの表示速度、モバイルでのユーザーエクスペリエンス、そして検索エンジンが周囲のコンテンツを理解できるかどうかが直接的に左右されます。.
これらの実践的なヒントは、本当に効果があります。.
- ファイルブロックを使用する： 素早く埋め込みたい場合、小さなPDFファイルを用意する場合、そしてデフォルトのブラウザビューアにダウンロードボタンが表示されても構わない場合は、この方法を使用してください。
- PDF埋め込みプラグインを使用する： プロ仕様のビューアが必要な場合、ダウンロードを無効にしたい場合、またはより快適な読書体験のためにズームや全画面表示のコントロールが必要な場合に使用します。
- iFrame または Google ドライブを使用する: PDF が外部でホストされている場合、ファイルが大きい場合、またはプラグインなしで Google にクロスブラウザレンダリングを処理させたい場合。
WordPressにPDFを埋め込むためのヒント
適切な方法を採用していても、いくつかの問題は定期的に発生します。ほとんどの問題は、原因さえ分かればすぐに解決できます。ここでは、注意すべき点と、それぞれの問題を迅速に解決する方法をご紹介します。.
- アップロード前に圧縮しましょう： サイズの大きいPDFファイルはページの読み込み時間を長くします。WordPressにアップロードする前に、SmallpdfまたはiLovePDFを使用してファイルを5MB未満に圧縮してください。
- コンテンツに適した高さを設定しましょう。 短い文書であれば、500～700ピクセルの高さが適しています。長めのレポートの場合は、800ピクセルあれば快適に読むことができます。
- 公開前にモバイル端末でテストしてください： モバイル端末のPDFビューアは予期せぬ動作をする場合があります。埋め込みコンテンツをスマートフォンでテストし、モバイル端末での表示が不十分な場合は、ビューアの横にダウンロードリンクを追加することを検討してください。
- 埋め込みコンテンツ周辺に補足コンテンツを作成する： 検索エンジンはPDFコンテンツを確実に読み取ることができません。SEOとアクセシビリティを向上させるため、埋め込みコンテンツの近くにドキュメントの内容を簡単に要約した文章を記述してください。
- 必要に応じてダウンロードを無効にする： PDFに機密情報や機密性の高いコンテンツが含まれている場合は、PDF Embedder Premiumなどのプラグインを使用してダウンロードボタンを無効にしてください。
WordPressにPDFを埋め込む際によくある問題点は何ですか？
適切な方法を導入しても、定期的にいくつかの問題が発生することがあります。ここでは、それらを迅速に解決する方法をご紹介します。.
- PDFがインライン表示されない場合： ファイルブロックの設定でインラインファイルビューが有効になっていることを確認してください。プラグインを使用している場合は、ファイルURLが正しいこと、およびPDFが一般公開されていることを確認してください。
- モバイル端末で白い空白ボックスが表示される場合： これは通常、ブラウザがPDFをインラインでレンダリングしていないことを意味します。モバイル端末での互換性を向上させるには、「任意のドキュメントを埋め込む」に切り替えるか、Googleドライブのiframe方式を使用してください。
- PDFファイルの読み込みが非常に遅い場合： ファイルサイズが大きすぎます。SmallpdfまたはiLovePDFを使用して圧縮してから再アップロードしてください。5MBを超えるファイルサイズは、ページの読み込み速度を著しく低下させます。
- ダウンロードボタンが消えない： 無料のファイルブロックには常にダウンロードボタンが表示されます。これを削除するには、PDF Embedder Premiumなどの有料プラグインが必要です。
- ログイン画面を表示するiFrame： Googleドライブのファイルが公開設定になっていません。Googleドライブを開き、ファイルを右クリックして「共有」をクリックし、埋め込みコードをコピーする前にアクセス権限を「リンクを知っている全員」に設定してください。
結論
WordPressにPDFを埋め込むのは、自分のニーズに合った方法さえ分かれば簡単です。手軽に素早く埋め込みたい場合はファイルブロックを、プロフェッショナルな表示とダウンロード制御が必要な場合はプラグインを、大容量ファイルや外部ホストのファイルの場合はiframeを使用しましょう。.
どの方法を選択するにしても、まずファイルを圧縮し、公開前にモバイル端末でテストを行い、SEO対策として埋め込みPDFの周囲に補足説明文を追加してください。これらの3つの手順だけでも、競合ページのほとんどの埋め込みPDFよりも優位に立つことができます。.
よくある質問
WordPressのページにPDFを表示する最も簡単な方法は何ですか？
ファイルブロックは、ほとんどのユーザーにとって最も簡単なオプションです。WordPressエディターに組み込まれており、プラグインは不要で、設定も2分もかかりません。ファイルをアップロードし、ブロックを追加して、「インラインファイルビュー」をオンにするだけで、ページに直接ファイルが表示されます。.
PDFの見た目を最も細かく制御できる方法はどれですか？
PDF Embedderのような専用プラグインを使えば、最大限の制御が可能になります。ビューアのサイズを設定したり、ダウンロードボタンを有効または無効にしたり、ズームコントロールを追加したり、コードを一切触ることなくナビゲーションをカスタマイズしたりできます。.
ファイルはWordPressにアップロードする必要がありますか、それとも他の場所にホストしても構いませんか？
どちらの方法も有効です。メディアライブラリに保存されているファイルは、サーバーから直接読み込まれます。GoogleドライブやDropboxに保存されているファイルは、iframeを使用して埋め込むことで、大容量ファイルをサーバーから隔離し、ページの読み込み時間を短縮できます。.
私のPDFファイルはすべてのデバイスで正しく表示されますか？
使用する方法によって異なります。組み込みのファイルブロックは訪問者のブラウザに依存するため、モバイル端末では問題が発生する可能性があります。Googleドライブのプラグインまたはiframeを使用すると、スマートフォン、タブレット、デスクトップなど、あらゆるデバイスでより一貫した表示を実現できます。.
PDFファイルがページの表示速度を低下させないようにするにはどうすればよいですか？
SmallpdfやiLovePDFなどのツールを使用して、ファイルを5MB未満に圧縮してからアップロードしてください。ファイルサイズが大きい場合は、WordPressのメディアライブラリに直接アップロードするのではなく、Googleドライブにファイルをホストしてiframeを使用してください。.
