wordpress

WordPressでPDFを埋め込み表示させる方法【ブロガー豆知識】

wordpressでPDFを埋め込み表示させる方法

これからブログで集客したり、商品を売ったりするのであれば、今回紹介する「WordPressでPDFを埋め込み表示させる方法」は大いに役立つ知識になるかと思います。

具体的には、こんな時に使うことができます。

  • PDFファイル化されたイベントのチラシやパンフレットをブログに載せたい
  • PDFの商品をブログで少しだけ公開して、商品購入を促したい

もちろんこれ以外にも用途があるかとは思いますが、今後ブログでWordPress作成のサイトを活用していくためには、必須の知識です。
ではこれから、WordPressでPDFを埋め込み表示させる方法について見ていきましょう。

 

WordPressでPDFを埋め込み表示させる手順

PDFの埋め込み表示は以下の手順で行います。

  1. プラグイン「PDF Embedder」をインストールし、有効化する
  2. PDFファイルをダウンロードする
  3. 投稿、固定ページなどにPDFを埋め込む

それでは、一つ一つ順序を追って説明していきましょう。

 

プラグイン「PDF Embedder」とは

pdf embedder

WordPressの初期状態だと、PDFをリンクにして見られるようにすることは出来ますが、PDFを投稿や固定ページの中に直接埋め込んで表示させることはできません
そこで、WordPressのプラグイン「PDF Embedder」を有効化することで、専用のビューワーというものを用いてPDFをページ内に埋め込み表示させることを可能にします。

 

PDF Embedderの設定方法

パソコンを触る女性
ではこれから、PDF Embedderの設定方法について見ていきましょう。
まずあらかじめ、WordPressプラグイン「PDF Embedder」をインストールし、有効化しておきましょう。
そして、WordPressの管理画面から「設定」の「PDF Embedder」をクリックすると、PDFの埋め込み表示に関する詳細設定をすることができます。

pdf embedderの設定

表示の際の幅と高さを設定する

PDFが表示させる際の幅と高さは、「Default Viewer Setting」から「Width」「Height」で選択することができます。
「max」に設定すると、画面の幅に合わせて自動的にサイズ調整をしてくれるような設定になってます。
またピクセル単位で数値を入力することで、幅や高さを固定して設定することができます。

ツールバーの位置を設定する

PDFのビューワーの中には、今何ページかを知ってページ数を移動したり、PDFを拡大、縮小するなどのための「ツールバー」というものが表示されます。
そして、「Toolbar Location」ではビューワーにおけるツールバーの表示位置を設定することができます。

  • Top…一番上の部分にツールバーを表示する
  • Bottom……一番下の部分にツールバーを表示する
  • Both…ツールバーで挟むようなイメージで、一番上と下の部分に表示されます

ツールバーの表示設定

「Toolbar Hover」の項目では、ツールバーをどんな時に表示させるかを次の2種類から選んで、設定することができます。

  • Toolbar appears only on hover over document…PDFドキュメントの部分にマウスがあてられたときのみ、ツールバーが表示されるようになります。
  • Toolbar appears visible…常にツールバーが表示されている状態にすることができます。

これで、PDF Embedderに関する設定は以上になります。

 

PDF Embedderの設定が終わったら

黒板に書かれた「What's next」

プラグインの設定が終わったら、残りの手順を一挙に紹介します。

  1. 投稿または固定ページの編集画面から「メディアを追加」というボタンをクリックする
  2. ファイルをアップロードのところから、埋め込みたいPDFファイルをアップロードする
  3. アップロードされたら、「投稿に挿入」のボタンをクリックする

こちらに関しては、画像などをページに挿入する手順と同じです。

以上でページにPDFを埋め込み表示させることができます。

 

さいごに

秋のホットチョコレート

今回紹介した方法でWordPressのページに埋め込み表示させることができますので、是非活用してみてください。

投稿、固定ページにPDFを埋め込み表示させる方法
  1. プラグイン「PDF Embedder」をインストール、有効化する
  2. PDFファイルをダウンロードする
  3. 投稿、固定ページなどにPDFを埋め込む