ブログ

ワードプレス pdf 埋め込みの方法:WordPressにPDFを埋め込む手順

最終更新日: 
ワードプレス pdf 埋め込みの方法:WordPressにPDFを埋め込む手順

WordPressでサイトを運営していると、訪問者にPDFを見てもらいたい場面が出てきます。フォームや契約書、パンフレット、メニューなど、その種類はさまざまです。ありがたいことに、PDFをサイトに埋め込む方法はいくつもあり、プラグインを使う方法もあれば、使わない方法もあります。

この記事では、WordPressにPDFを埋め込むための、手軽で確実な4つの方法をご紹介します。それぞれどんなときに向いているのかもあわせて解説するので、読み終わるころには、自分に合ったやり方を選んでPDFを公開できるようになっているはずです。

方法1:Gutenbergブロックエディタを使ってワードプレスにPDFを埋め込む

WordPressにPDFを埋め込むのに、必ずしもプラグインが必要なわけではありません。実は、WordPressに標準で備わっているレイアウトツール、Gutenbergブロックエディタだけでできてしまいます。この方法はシンプルで直感的なので、WordPressの使い方にそれほど詳しくない方でも問題なく進められます。 

ただし、この方法には気をつけたい点もあります。PDFの表示のしかたを細かく調整できないうえ、プレビューの見え方が閲覧者のブラウザやその設定に左右されることがあるのです。そのため、見た目の体験をそこまで重視しない場面に向いています。

手順は次のとおりです。

  1. WordPressを開き、PDFを埋め込みたい投稿またはページに移動します。
  2. +ブロック挿入ツールをクリックし、ファイルを検索してクリックします。続いてアップロードをクリックし、メディアライブラリから埋め込みたいPDFを選びます。パソコンにあるPDFファイルをアップロードすることもできます。
  3. WordPress interface with arrows pointing to the + Block Inserter and File options in the left-hand menu
  1. あとはGutenbergブロックエディタが自動でPDFをWordPressに埋め込み、閲覧者向けのダウンロードリンクも用意してくれます。
  2. WordPress interface showing a PDF embedded via the Gutenberg Block Editor

方法2:プラグインを使ってワードプレスにPDFを埋め込む

プラグインはWordPressの機能を拡張してくれるもので、PDFの埋め込みをもっと使いやすくしてくれるものがいくつもあります。 

ただ文書を表示するだけでなく、より洗練された見やすい体験を届けたいなら、プラグインを使う方法は有力な選択肢です。ただし、プラグインのインストールや設定、利用には、WordPressの有料プランが必要になる点は覚えておいてください。

よく使われているプラグインには、次のようなものがあります。

  • PDF Embedderプラグインを使えば、PDFの見せ方を柔軟に調整できます。表示サイズやデバイスに合わせた表示まで、思いどおりにコントロールできます。
  • Dear Flipbookプラグインなら、PDFを本をめくるような2Dや3Dのフリップブックに変えられます。 
  • Document Embedderプラグインは、レスポンシブなデザインに加えて、PDF内の検索や絞り込み、並べ替えといった高度な機能を備えています。

Pro Tip

PDFの基本的な埋め込みを超えて活用できるのは、プラグインだけではありません。Jotformを使えば、入力可能なPDFフォームをオンラインフォームに変換して、WordPressサイトに埋め込めます。さらに、JotformのPDF Embedderウィジェットを使えば、PDF文書をアップロードして埋め込み、フォーム内にそのまま表示することもできます。

An example form embedded into a WordPress website alongside a PDF

方法3:iFrameコードを使ってワードプレスにPDFを埋め込む

WordPressのフォームや契約書など、さまざまなPDF文書を埋め込むもう一つの方法が、iFrameコードを使うやり方です。 

iFrameはインラインフレームの略で、別のウェブページのコンテンツを今見ているページの中に埋め込めるしくみです。PDFを別の場所に置いている場合や、表示の細かいカスタマイズが不要な場合、プラグインを使いたくない場合に、この方法が向いています。

大まかな流れは次のとおりです。

  1. PDFをWordPressのメディアライブラリにアップロードします。
  2. ファイルのURLをコピーし、カスタムHTMLブロックを追加します。
  3. 最後に、PDFのURLを入れたiFrameの埋め込みコードをWordPressに貼り付けます。

コードの扱いに慣れていないと、この手順は少し難しく感じるかもしれません。

Pro Tip

JotformのPDF Embedウィジェットを使って、WordPressのページ上に直接PDFを表示する方法もあります。これなら、訪問者は新しいタブを開かなくても文書を読めます。ビューアのサイズやズームの動き、ダウンロードの可否を調整でき、コードを書かずにサイトへ追加できます。ノーコードで使えるインタラクティブな機能をもっと知りたい方は、Jotformのウェブサイトウィジェットをのぞいてみてください。

方法4:Google DriveやScribdからワードプレスにPDFを埋め込む

埋め込みたいPDFをGoogle Driveのようなファイル保存サービスや、Scribdのような文書公開プラットフォームに置いている場合は、この方法がうまく機能します。PDFのサイズが大きく、さまざまなブラウザでサイト上にきちんと表示させたいときに向いています。

とはいえ、コードに不慣れな方にはやや手間のかかる手順です。Google DriveやScribdから埋め込みコードを取得し、カスタムHTMLブロックからWordPressに追加する流れになります。これで外部の文書ビューアがWordPressページ内に埋め込まれ、表示の崩れもなく、閲覧者になめらかで快適な体験を届けられます。

Scribd site showing instructions on how to embed Scribd documents in WordPress

ワードプレスへのPDF埋め込み、どの方法を選びますか

これで、標準ツールからプラグイン、コードを使うやり方まで、WordPressにPDFを埋め込む方法がひととおり手に入りました。 

もしWordPressに埋め込みたい文書がフォームなら、いちばん手軽なのはおそらくJotformです。やることは、Jotformのフォームビルダーで埋め込みコードを取得してWordPressに貼り付けるだけ。JotformのWordPress用プラグインを使えば、作業はさらにスムーズになります。 

今すぐJotformを試して、フォームをWordPressに埋め込むのがどれだけ簡単か、実際に確かめてみてください。

ワードプレスへのPDF埋め込みに関するよくある質問

はい、できます。GutenbergブロックエディタやプラグインでPDFを埋め込めます。技術にくわしい方なら、iFrameや埋め込みコードをコピーして貼り付ける方法でも対応できます。

プラグインを使わずにWordPressへPDFを埋め込むなら、標準装備のGutenbergブロックエディタを使うのが一番簡単です。

ウェブページにPDFを埋め込むには、embedタグやiFrameタグを使う方法のほか、外部のツールを利用する方法があります。

iFrameコードでWordPressにPDFを埋め込むには、まずファイルのURLを用意し、GutenbergブロックエディタのカスタムHTMLブロックからWordPressに追加します。

この記事は、サイトにPDFを埋め込む必要があり、文書をオンラインで表示するのに一番シンプルで効果的な方法を選びたいと考えている、WordPressサイトの運営者やコンテンツ担当者、スモールビジネスのオーナーに向けた内容です。

コメントの送信:

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

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