公開日:

WordPressサイトにPDFを埋め込みたいのに表示されない!

以下を解決していきます。

  • 投稿、固定ページ内にPDFを貼り付けたい
  • PDFをダウンロードせずに中身が見れるビュワーを設置したい
  • PDFをダウンロードさせるボタンも欲しい

無料で解決する方法を紹介します。

WordPressサイトにPDFを埋め込みたいのに表示されない!

WordPressにはPDFをビューワーで表示する機能はありません。
この記事では、無料プラグインを使った簡単な解決方法を解説します。

 

 

PDF Embedderプラグイン

PDF Embedder

PDF Embedderプラグインのインストール方法

PDF EmbedderはWordPress公式ディレクトリーに最新バージョンが公開されています。
以下の方法でワードプレスにインストールできます。

  1. ダッシュボード→プラグイン→新規追加→「PDF Embedder」で検索
  2. 公式サイトからプラグインファイルをダウンロード→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内のハイパーリンク機能をサポート

 

購入は、以下からです。

PDF Embedder Premium

PRO版の料金

プレミアムバージョンの価格はライセンス契約で、20ドルからです。

  • 一つのサイトのみでの利用:20ドル
  • 2-5サイトでの利用:30ドル
  • 制限なしの利用:50ドル

 

Algori PDF Viewerプラグイン

Algori PDF Viewer

Algori PDF Viewerのインストール方法

Algori PDF Viewerプラグインは無料で利用可能は公式プラグインです。
以下の方法でワードプレスにインストールできます。

  1. ダッシュボード→プラグイン→新規追加→「Algori PDF Viewer」で検索
  2. 公式サイトからプラグインファイルをダウンロード→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プラグインはワードプレス公式プラグインです。以下の方法でワードプレスにインストールできます。

  1. ダッシュボード→プラグイン→新規追加→「Embed PDF Viewer」で検索
  2. ワードプレス公式ディレクトリから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 – Embed pdf file in WordPress -Pdf Viewer

PDF Posterのインストール方法

PDF Posterプラグインはワードプレス公式ディレクトリーに公開されています。

以下の方法でワードプレスにインストールできます。

  1. ダッシュボード→プラグイン→新規追加→「PDF Poster」で検索
  2. 公式ディレクトリから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はワードプレス公式ディレクトリーに登録されているプラグインです。
一般的なプラグイン同様に、以下の方法でサイトにインストールできます。

  1. ダッシュボード→プラグイン→新規追加→「PDF Image Generator」で検索
  2. 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万円を稼ぐ!当社スタッフが試してみた方法と成果を公表


この記事を書いた人
うくさ

うくさ IT業界歴18年です。当カスタマイズネット所属エンジニア。
ワードプレス、シスコシステムズ社製ネットワーク機器担当。


この記事の関連記事



新着コラム