ブログ

WordPressでPDFを埋め込む方法

最終更新日: 
WordPressでPDFを埋め込む方法

WordPressにPDFビューアを埋め込むことで、ユーザーをサイト内にとどめつつ、より良い体験を提供できます。もう一つの方法であるハードディスクへのダウンロードを強制するやり方では、ファイルを読むためだけにサイトから離れる必要があり、その体験を損なってしまいます。ユーザーをサイト内にとどめておけば、ページ滞在時間は伸び、ブランドへのエンゲージメントが維持され、それでいてユーザーが望めばファイルをダウンロードする選択肢も残せます。 

では、どのようにしてサイトにPDFビューアを追加すればよいのでしょうか。メニューを表示するレストランでも、事例を共有するB2Bエージェンシーでも、WordPress上でシラバスを提供する教育者でも、WordPressでのPDF埋め込みにおいて、標準のGutenbergエディタが常に最適な解決策とは限りません。Gutenbergは、PDFをインラインで表示するために訪問者のブラウザに依存します。さらに、GutenbergのPDF埋め込みブロックにはSafariで動作が壊れるという既知の履歴があり、開発者を悩ませる原因となっています。 

あらゆるブラウザで表示されるナビゲーション機能付きの、信頼性の高いカスタムPDFビューアをWordPressで実現するには、サイト所有者には2つの方法があります。リポジトリからドキュメントビューアのプラグインをインストールする方法か、ページ速度を保護する無料で軽量なサーバーレスのウィジェットを使う方法です。

この記事では、WordPressでのPDF埋め込みのこれら2つの方法を取り上げます。それぞれの選択肢についてステップバイステップのガイドを用意していますので、あなたに最適な解決策を選べます。

方法1:専用のWordPress PDFビューアプラグインをインストールする

WordPressの標準的な方法は、サードパーティ製のPDF埋め込みプラグインをインストールすることです。手順は次のとおりです。

  1. WordPressプラグインディレクトリを検索します。この例では「PDF embed」で検索しました。
  2. PDF埋め込みプラグインのWordPressプラグインディレクトリ検索結果。
  1. プラグインを選び、Downloadボタンをクリックします。
  2. DownloadボタンがハイライトされたPDF Embedderプラグインのページ。
  1. サイドメニューのプラグインから新規プラグインを追加に移動し、プラグインのアップロードをクリックしてファイルを選択することで、WordPressにプラグインをインストールします。ウィンドウが開き、コンピュータのフォルダからファイルを選択できます。
  2. プラグインのアップロードがハイライトされたWordPressの新規プラグイン追加画面。
  1. ファイルを選択をクリックしてコンピュータからプラグインの.zipファイルを選び、今すぐインストールをクリックしてインストールを進めます。
  2. ファイルを選択と今すぐインストールがハイライトされたWordPressのプラグインアップロード画面。
  1. ビューアを表示するためのショートコードを生成します。

この手順自体は十分に簡単です。しかし先ほど述べたように、すべてのブラウザで常に動作するわけではなく、複雑な問題を引き起こしかねない専用プラグインに依存する解決策でもあります。

たとえば、こうしたサードパーティ製プラグインには次のような点があります。

  • ウェブサイトに負荷を加える:これはページ速度やCore Web Vitalsなどに影響する可能性があります。確かに、きちんとしたプラグインと圧縮されたPDFファイルであれば本来こうした問題は起きないはずですが、必ずレビューを確認し、選んだプラグインをインストールした際の影響について他のウェブサイト管理者が述べている内容を読みましょう。
  • 便利な機能を有料プランの裏に隠す:全画面での閲覧モード、連続スクロール、カスタムダウンロードボタンをユーザーに提供したい場合、たいていはプレミアムライセンスの購入を余儀なくされます。

こうした手間をすべて省きたいなら、次に紹介するWordPress PDFプラグインの代替手段がおすすめです。

方法2:無料でカスタマイズ可能なPDF埋め込みウィジェットを追加する(おすすめ)

プラグインの年次更新料を支払うことも、ブラウザ依存の不安定なレンダリングに頼ることも、フロントエンドを遅くすることもなく、信頼性が高く機能の充実したPDFビューアが欲しいなら、最適な解決策はホスト型の埋め込みです。

それをまさに提供するのがJotform PDF埋め込みウィジェットです。使い方は次のとおりです。

  1. 左側のアップロードエリアにPDFファイルをドラッグ&ドロップするか、Upload PDFをクリックしてアップロードします。
  2. PDFがアップロードされプレビュー表示されたJotform PDF埋め込みウィジェット。
  1. Styles設定を使って、サイトの見た目や雰囲気に合うようにビューアを視覚的に設定します。
  2. ビューアをカスタマイズするためのPDF埋め込みウィジェットのStyles設定。
  1. Continueをクリックした後、Copy Codeをクリックして生成されたiFrameスニペットをコピーします。
  2. Copy Codeボタンがハイライトされた埋め込みコードのウィンドウ。
  1. 生成されたコードを、WordPressサイトの標準的な「カスタムHTML」ブロックに貼り付けます。
  2. カスタムHTMLブロックが選択されたWordPressエディタ。

その結果、重いレンダリング処理をすべてサーバー外で完結させる、欠点のないクロスデバイス対応のPDFビューアが完成します。これにより、処理や読み込み時間に影響が出ることはありません。

どれくらい早くセットアップできるかを試すため、自分のウェブサイトでこれを実行してみました。PDFビューアはこのように表示されます。

PDFプレビューとDownloadボタン付きでWordPressページに表示されたJotform PDF埋め込みウィジェット。

PDFの埋め込みにかかった時間は5分未満で、見栄えも素晴らしいです。確かに、新しいファイルをアップロードしたりスタイルを変更したりはしませんでしたが、仮にそうしていたとしても、これは無料でWordPressにPDFを埋め込むための非常に高速な方法です。

Jotformならドキュメントをアップロードでき、あらゆるデバイスとブラウザで一貫したプロフェッショナルな閲覧体験を無料で保証します。スムーズなスクロールやネイティブのコントロールも備えています。さらに、サーバー外の埋め込みであるため、WordPressページの読み込み時間を遅くすることも、メディアライブラリのストレージを圧迫することも、高価なプレミアムプラグインプランへと誘導されることもありません。

Pro Tip

WordPressについてさらにサポートが必要ですか。Jotformのブログ記事「WordPressの使い方」をご覧ください。

スマートでサーバーレスなウィジェットでWordPressサイトを強化する

JotformのPDF埋め込みウィジェットは、はるかに大きなツールキットの中のひとつのツールにすぎません。Jotformの無料ウェブサイトウィジェットのフルラインナップは、ほかにも数多くのよくあるWordPressの悩みをカバーしており、そのすべてが同じくサーバー外で動作します。

  • プラグインのインストール不要
  • メディアライブラリの肥大化なし
  • 本当に欲しい機能との間に立ちはだかる年次ライセンスなし

Jotformを使い始めると、ウェブサイトのユーザー体験を向上させる、ほかの優れたウィジェットの数々にも恵まれていることに気づくでしょう。たとえば次のようなものです。

  • FAQウィジェット:専用のアコーディオンプラグインをインストールすることなく、長いブログ記事やピラーページを、ざっと読める展開式の回答に変えます
  • QRコードウィジェット:メニュー、ダウンロード可能なリソース、印刷物に、サイトへ戻るスキャン可能なリンクを提供します
  • ポップアップウィジェット:スクリプトの多い重いポップアッププラグインをテーマに追加することなく、メールアドレスを収集したりオファーを宣伝したりします

さらに嬉しいことに、JotformとWordPressの連携もあります。これはウィジェットやJotformのWordPressフォームプラグインを単一のアカウントに接続し、すべてを一元管理できるようにするものです。

成長中のビジネスやクリエイターにとって、サーバーのパワーは売上やトラフィックの処理に注がれるべきであり、ドキュメントのレンダリングや重いスクリプトの実行に使われるべきではありません。Jotformのような無料でサーバー外で動作するツールを活用すれば、サイトに必要以上の負荷をかけることなく、訪問者にプレミアムでレスポンスの高いウェブサイト体験を提供できます。

この記事は、ユーザーにダウンロードを強いたり、重いプラグインでサイトを肥大化させたりすることなく、読みやすいドキュメント(ホワイトペーパー、メニュー、スケジュール)をページ上に直接表示したいと考えるWordPressサイト運営者、B2B企業、教育関係者、飲食店向けの内容です。

コメントの送信:

Jotform Avatar
このサイトは reCAPTCHA によって保護されており、Googleのプライバシーポリシーと利用規約が適用されます。

Podo Comment 最初のコメントを投稿してください。