• HOME > 
  • WordPress > 
  • ワードプレスでPDFを埋め込む方法【初心者にもわかりやすく解...

ワードプレスでPDFを埋め込む方法【初心者にもわかりやすく解説】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像
広告
広告

WEBサイトでPDFを扱う場面は?

WEBサイトでPDFを扱う機会には、次のようなパターンが挙げられます。

  • ・PDFを別タブで開いて表示する
  • ・PDFをダウンロードできるようにする
  • ・PDFをページ内に埋め込んで表示する

ワードプレスでPDFを扱う方法

ワードプレスでは2021年現在、デフォルトのブロック機能が充実し、「ファイルブロック」を使用すれば上記のどの形式にも対応することができます。

このページではワードプレスの「ファイルブロック」の使い方と従来のHTMLタグの記述による方法も併せて説明します。

なお、あらかじめPDFファイルをメディアにドラッグアンドドロップでアップロードしておいてください。

ワードプレスはバージョン5.8、テーマはTwentyTwentyOneを使用しています。各バージョンやお使いの環境によっては機能が異なる場合がありますのでご了承ください。

ファイルブロックの使い方

ワードプレスのエディターの機能にある「ファイル」ブロックの機能を使えば「PDFを別タブで開いて表示する」「PDFをダウンロードできるようにする」「PDFをページ内に埋め込んで表示する」といったことが可能です。

リンク先のサムネイル
ワードプレスのエディターの使い方

ワードプレスで投稿ページや固定ページを新規作成し公開するために必要な編集画面でのエディターの使用方法や設定、一覧画面でのページ管理の仕方を説明します。...【もっと読む】

ファイルブロックをページに挿入する

まずはファイルブロックを追加しましょう。ブロックの追加から「ファイル」を選択します。

PDFをダウンロードさせる

メディアライブラリからアップロードしてあるPDFファイルを選択してください。

PDFをダウンロードさせる

ビジュアルエディター内でも下図のようにPDFの中身が表示されます。

PDFをダウンロードさせる

実際のページ内でもPDFが見れるようになり、ダウンロードボタンを設置されます。

PDFをダウンロードさせる

ページ内でのPDF表示形式はブラウザによって異なります。ブラウザによっては正しく表示されない場合もありますので注意して下さい。

詳細設定も可能

ブロック設定により、PDFの表示だけにしたり、ダウンロードボタンだけにしたりといったカスタマイズも可能です。

ブロックの上にある「・・・」をクリックし、「追加設定を表示」をクリックします。

PDFをダウンロードさせる

右側にブロックの設定が表示されるので必要に応じて変更してください。

PDFをダウンロードさせる

従来の方法でPDFを埋め込む

ここでは前述したワードプレスの機能であるファイルブロックを使わずに、HTMLタグの記述による従来の方法で「PDFを別タブで開く」「PDFをダウンロードする」「PDFを埋め込む」手順について説明します。

なお前述のファイルブロック利用した方法も、ワードプレスによって直感的に操作できるようになっているだけで、仕組み(HTMLのソースコード)自体は従来の方法と同じになっています。

PDFを別タブで開く

aタグに「 target="_blank" rel="noreferrer noopener"」を追記することで別タブで開くことができます。ブロックの機能でリンクを設置した際に、「新しいタブで開く」を有効にしたときと同じものになります。

PDFをダウンロード

aタグにdownload属性を記述すれば。ファイルは開かれずにブラウザによるダウンロードが始まります。

PDFをダウンロードさせる方法

PDFを埋め込んで表示する

PDFを埋め込んで表示するにはiframeタグを使用します。iframeを使用するとPDFファイルはダウンロードボタンや印刷ボタンが付いたツールバーと共に表示されます。iframeはGoogleマップやYoutubeなどの外部コンテンツを埋め込む際にも使用するタグです。

iframe以外にも、objectタグ・embedタグでも同様に埋め込みが可能です。なお前述の「ファイルブロック」にはobjectタグが用いられています。

下図のように記述することで埋め込んで表示することができます。

iframeでPDFを埋め込み

サイトで確認すると下図のように表示されます。

iframeでPDFを埋め込み

ツールバーを非表示にする

srcで記述したファイルパスの末尾に「#toolbar=0 &navpanes=0」を付けることでツールバーを非表示にすることができます。

iframeのツールバーを非表示にする

サイトで確認すると下図のようにツールバーが表示されなくなりました。

iframeのツールバーを非表示にする

まとめ

以上がワードプレスでPDFを扱う方法です。ブロック機能の充実により、プラグインに頼ることなく直感的な操作でPDFを埋め込むことができるようになりました。ちなみに1枚だけのPDFファイルの場合などは、無料のオンラインサービスなどを利用してJPGやPNGに変換して画像として表示させた方が良いかもしれません。

関連する記事

サムネイル

ワードプレスの固定ページにPHPファイルを読み込む方法【ショ……

2023年12月04日
ワードプレスの固定ページ(投稿ページ)内にPHPを書いたり、PHPファイルを読み込ませることができたら便利ですよね。「PHPファイルを作成して、ショートコードを使って固定ページ内に読み込ませる」という方法をご紹介します。
サムネイル

コンタクトフォーム7のショートコードをテーマファイル内に埋め……

2023年11月24日
テーマファイル(PHPファイル)内にコンタクトフォーム7のショートコードをそのまま記述しても、フォームを呼び出すことはできません。
サムネイル

ワードプレスで前後の記事の公開日を取得して表示する方法【ge……

2023年10月01日
最終更新日:2023年09月12日
ワードプレスの投稿ページで前後の記事の公開日を表示させたいときはget_previous_postとget_next_post関数を使います。
サムネイル

Elementor(エレメンター)の使い方を徹底解説【ページ……

2023年03月09日
最終更新日:2023年03月10日
Elementorは直感操作でワードプレスのサイトを構築できるページビルダープラグインです。ウィジェットをドラッグアンドドロップしていくだけでページのレイアウトを作成することが可能です。
サムネイル

ワードプレスのログイン画面をカスタマイズする方法【プラグイン……

2023年03月07日
最終更新日:2023年12月08日
ワードプレスのログイン画面はカスタマイズしてロゴや背景を変更することができます。ログイン画面のカスタマイズはプラグインを使うかfunctions.phpを編集して行います。
サムネイル

ワードプレスのコンタクトフォーム7で自動返信メールを設定する……

2023年02月28日
最終更新日:2023年03月10日
ワードプレスのContact Form 7プラグインを使って自動返信メールを設定する手順を解説します。フォームの編集画面で「メール(2)を使用」にチェックを入れると、設定項目が表示されて自動返信ができるようになります。
サムネイル

ワードプレスでログイン履歴を確認する方法【SiteGuard……

2023年01月26日
最終更新日:2023年03月10日
多くのセキュリティ対策プラグイン「SiteGuard WP Plugin」を使ってログイン履歴を確認する方法について解説します。