WordPressサイトにPDFを埋め込みたいのに表示されない！
以下を解決していきます。
- 投稿、固定ページ内にPDFを貼り付けたい
- PDFをダウンロードせずに中身が見れるビュワーを設置したい
- PDFをダウンロードさせるボタンも欲しい
無料で解決する方法を紹介します。
WordPressサイトにPDFを埋め込みたいのに表示されない！
WordPressにはPDFをビューワーで表示する機能はありません。
この記事では、無料プラグインを使った簡単な解決方法を解説します。
PDF Embedderプラグイン
PDF Embedderプラグインのインストール方法
PDF EmbedderはWordPress公式ディレクトリーに最新バージョンが公開されています。
以下の方法でワードプレスにインストールできます。
- ダッシュボード→プラグイン→新規追加→「PDF Embedder」で検索
- 公式サイトからプラグインファイルをダウンロード→WordPressサイトにアップロード
PDF Embedderプラグインの使い方
難しい操作はありません。
PDF Embedderを有効化すると、PDFを埋め込むことができる状態です。
固定ページ、または投稿の編集画面から「メディアを追加」をクリックし、表示したいPDFを選択しアップロードするだけです。
PDF Embedderプラグインのオプション
PDF Embedderを有効化すると、ダッシュボード上に管理メニューが表示されます。
設定、→PDF Embedder
ビューワーの設定
表示するサイズの幅と高さを設定できます。
デフォルトの設定が「max」となっていますが、ピクセルで指定可能です。
レスポンシブテーマの場合は、幅と高さを「max」にしておくとPDFの埋め込みエリアも自動的に変化します。
ツールバーの位置オプションは「上部」、「下部、「両方」から選択可能です。
このツールバーでは、PDFの表示サイズ（ズーム）の調整、複数毎のPDFがある場合は、次のページ前のページへの移動が行えます。
PDF Embedderのプレミアムバージョン（有料版）
有料版では以下の機能が使えます。
- PDFダウンロード機能：ツールバーに「ダウンロード」ボタンを追加
- カウント機能:PDFが表示された回数、ダウンロードボタンをクリックされた回数を記録
- ページ間スクロール：複数毎のPDFを閲覧時、スクロールでページ間を移動
- フルスクリーン：PDFをフルスクリーンで表示
- ハイパーリンク：PDF内のハイパーリンク機能をサポート
購入は、以下からです。
PRO版の料金
プレミアムバージョンの価格はライセンス契約で、20ドルからです。
- 一つのサイトのみでの利用：20ドル
- 2－5サイトでの利用：30ドル
- 制限なしの利用：50ドル
Algori PDF Viewerプラグイン
Algori PDF Viewerのインストール方法
Algori PDF Viewerプラグインは無料で利用可能は公式プラグインです。
以下の方法でワードプレスにインストールできます。
- ダッシュボード→プラグイン→新規追加→「Algori PDF Viewer」で検索
- 公式サイトからプラグインファイルをダウンロード→WordPressサイトにアップロード
Algori PDF Viewerプラグインの使い方
このAlgori PDF Viewerプラグインは、Classic Editorを有効化していると、利用できません。
投稿、または固定ページの編集画面上から「PDF Viewer」ブロックを選択し、表示したいPDFを選択するとビューワーが埋め込まれます。
Algori PDF Viewerプラグインのプロ版（有料）
Algori PDF Viewerプラグインは、プロ版が提供されています。
価格は20ドルです。
プロ版では以下の機能が利用できます。
- ズーム：PDFをズーム表示する機能
- サポート：開発者によるサポート
- デフォルトページ：PDFをクリックした際に表示されるページの指定
- 装飾：PDFビューワーの装飾機能
- ツールバー：ページ間の移動、ダウンロードボタンの表示
- 印刷：ツールバー上へ「印刷」ボタンの表示
- 検索：ツールバー上へ、PDF内「検索」ボタンの表示
Embed PDF Viewerプラグイン
Embed PDF Viewerプラグインのインストール方法
Embed PDF Viewerプラグインはワードプレス公式プラグインです。以下の方法でワードプレスにインストールできます。
- ダッシュボード→プラグイン→新規追加→「Embed PDF Viewer」で検索
- ワードプレス公式ディレクトリからZIP形式のプラグインファイルを入手→WordPressサイトにアップロード
Embed PDF Viewerプラグインの使い方
Embed PDF Viewerを有効化した後、メディアを追加から埋め込みたいPDFをアップロードするだけでPDFビューワーが表示されます。
プラグイン用の設定メニューなどは管理画面に追加されません。
このEmbed PDF Viewerプラグインは標準仕様で、以下をサポートしています。
- ページ間スクロール：複数毎のPDFの場合、スクロールでページ間を移動可能
- ページ番号の指定：ページ番号を指定し、指定したページを表示
- ダウンロード：ツールバーにPDFのダウンロードボタン表示
- 印刷：ツールバーにPDFの印刷ボタン表示
- ズーム：PDFの拡大・縮小ズーム機能
ただし、レスポンシブではありません。
PDFビュワー部分をレスポンシブ化したい際は以下のCSSコードに追加しましょう。
サンプルコード
.embed-pdf-viewer{
width:100% !important;
}
CSSコードを設置する場所
- テーマのスタイルシート（style.css）
- 追加CSS（外観→カスタマイズ→追加CSS）
PDF Posterプラグイン
PDF Posterプラグインは、PDFファイルを管理画面に登録し作成されたショートコードを投稿内に貼り付ける仕様です。
PDF Posterのインストール方法
PDF Posterプラグインはワードプレス公式ディレクトリーに公開されています。
以下の方法でワードプレスにインストールできます。
- ダッシュボード→プラグイン→新規追加→「PDF Poster」で検索
- 公式ディレクトリからZIP形式のプラグインファイルを入手→WordPressサイトにアップロード
PDF Posterプラグインの使い方
PDF Posterを有効化すると、ダッシュボード上に管理メニューが追加されます。
この管理メニューからビューワーを作成し、固定ページや投稿ページにショートコードを埋め込むという仕様のプラグインです。
- PDF Posterの機能
- フルスクリーン：PDFをフルスクリーンで表示
- ページ指定：表示したページ番号を指定して表示
- 検索：ツールバーに、PDF内テキスト検索ボックスを表示
- 印刷：ツールバーに印刷ボタンを表示
- ダウンロード：ツールバーに、ダウンロードボタンを表示
- レスポンシブ：スマートフォン対応
- ズーム：PDFの表示縮尺のコントール機能
- ビューワーのサイズ指定：ビューワーのサイズ（幅、高さ）を指定
- スクロール：PDFページ間のスクロール移動
これらの設定を、PDFごとに設定できます。
PDF Image Generatorプラグイン
PDF Image Generatorプラグインは、アップロードしたPDFのサムネイル画像を作成してくれるプラグインです。
これまで紹介したビューワータイプではありません。
PDF Image Generatorプラグインのインストール方法
PDF Image Generatorはワードプレス公式ディレクトリーに登録されているプラグインです。
一般的なプラグイン同様に、以下の方法でサイトにインストールできます。
- ダッシュボード→プラグイン→新規追加→「PDF Image Generator」で検索
- ZIP形式のプラグインファイルを公式サイトからダウンロード→ダッシュボードからアップロード
PDF Image Generatorプラグインの使い方
PDF Image Generatorプラグインを有効化すると、ダッシュボードに設定メニューが追加されます（設定→PDFイメージジェネレーター）。
特に何の設定をしなくても、PDFをアップロードすると自動的にサムネイル画像を表示してくれます。
自動的に生成されるサムネイルの画像は、PDF1の枚目です。
PDF Image Generatorプラグインの懸念事項
最終更新日が3年前です。検証済み最新WordPressバージョンが4.7.16で、今後更新されない可能性がある点が大きな懸念事項です。
PDFをワードプレスに表示する記事のまとめ
WordPressは標準でPDFファイルを画像とは認識しません。
通常の画像のように表示したい場合や、ビューワーを埋め込みPDF内部を表示するには、何かしらの仕組みが必要になります。
今回紹介したプラグインは全て初心者向けです。
特に難しい設定をおこなうことなく、PDFをWordPressに埋め込むことができます。
PDFの表示や管理にお困りの際は、お試しください。
人気記事 初心者でも可能なSEO対策って何？
人気記事 【ゼロから始める】副業ブログで月5万円を稼ぐ！当社スタッフが試してみた方法と成果を公表
この記事の関連記事
新着コラム
