WordPress に PDF ファイルを埋め込む方法

WordPress に PDF を埋め込む方法がわかりませんか?それとも、まだそうするかどうかを決めようとしていますか?投稿やページに PDF ファイルを埋め込みたい場合があります。

本の著者は、読者に無料で提供したいと考えるかもしれません。
Web サイトに製品カタログを追加します。
デザインを PDF 形式でクライアントと共有するため。
旅行代理店を経営していて、ツアーパッケージの旅程を表示したいと考えているかもしれません。

しかし問題がある！

WordPress ではオーディオ、ビデオ、そしてもちろん画像を埋め込むことができますが、PDF ファイルを投稿やページに埋め込むことはできません。この機能は今のところ利用できませんが、将来追加される可能性があります。

PDF ファイルを追加する場合は、[メディアの追加] オプションを使用してファイルをアップロードし、挿入すると、そのファイルへのリンクがページに追加されます。また、訪問者は、Web サイトから離れてファイルをダウンロードしたり、Web ブラウザでファイルを表示したりできます。

しかし、PDF ファイルを投稿に埋め込み、訪問者が Web サイトから離れることなく閲覧できるようにしたい場合はどうすればよいでしょうか?それに対する解決策はありますか?簡単に言うと「はい」です。

そこでこの記事では、WordPress の投稿またはページに PDF ファイルを埋め込む方法を説明します。作業を始める前に、PDF エディターを使用して、適切にフォーマットされたきちんとした PDF ドキュメントを作成する必要があるでしょう。これで、プラグインを使用するかどうかに関係なく、投稿にそれを追加する準備が整います。始めましょう。

プラグインを使用して PDF ファイルを埋め込む方法

PDF ファイルを WordPress 投稿に追加するために使用できるプラグインが多数あります。

ただし、PDF Embedder というプラグインを使用します。これは WordPress プラグインディレクトリから入手できる無料のプラグインですが、より多くの機能を利用するにはプラグインのプロバージョンにアップグレードすることができます。このプラグインの最も優れた点は、サードパーティのサービスや iframe ではなく、JavaScript を使用して機能することです。

ステップ 1: PDF Embedder プラグインをインストールする

WordPress ダッシュボードにログインし、[プラグイン] > [新規追加] に移動します。次に、検索ボックスで「PDF Embedder」を検索します。プラグインを見つけたら、インストールして有効化するだけです。シンプルですね。

ステップ 2: プラグインをセットアップする

このプラグインをインストールしたら PDF ファイルの埋め込みを開始できますが、最初に設定を変更して、埋め込まれたファイルの見栄えを良くすることができます。このプラグインの設定ページを開くには、WordPress ダッシュボードの左側のサイドバーから設定 > PDF エンベッダーに移動します。

このプラグインの無料版では、以下を変更できます。

幅と高さ – PDF ビューアの幅と高さを変更できます。整数値（ピクセル単位）または最大値（100%幅）を受け入れます。
ツールバーの場所 – この PDF ビューアのツールバーを使用すると、視聴者はズームインまたはズームアウトして次のページまたは前のページに移動できます。ツールバーは上部、下部、または両方に配置できます。
ツールバーのホバー – ドキュメント上にマウスを置いた場合にのみツールバーを表示するかどうかを選択できます。

さて、これらは普遍的な設定です。しかし、特定のファイルの設定を変更したい場合はどうすればよいでしょうか?そうですね、ショートコードを使えばそれが可能です。以下に例を示します。

[pdf-embedder url=”http://yoursite.com/wp-content/uploads/2019/01/April.pdf” width=”500″ toolsbar=”top” toolbarfixed=”on”]

上記の例では、幅が 500px に設定され、ツールバーの位置が上部に設定され、ツールバーは固定されます。ツールバーを下部に設定し、ツールバーをオフに固定することもできます。

このプラグインには、ダウンロードボタン、トラックビューとダウンロード、連続ページスクロール、新しいウィンドウでリンクを開くなどの機能を提供するプレミアムバージョンもあります。

ステップ 3: PDF ファイルを投稿またはページに埋め込む

設定が完了したら、汚い作業を開始できます。クラシックエディターを使用している場合でも、Gutenberg エディターを使用している場合でも、このプラグインを使用して目的の結果を簡単に得ることができます。

クラシックエディタ を使用している場合、PDF ファイルの埋め込みは画像やビデオの場合と同様です。

まず、新しい投稿を作成するか、既存の投稿を開いて、[メディアの追加] ボタンをクリックします。次に、PDF ファイルをアップロードし、[投稿に挿入] ボタンをクリックすると、ショートコードが投稿に追加されます。

以上です。投稿をプレビューして、正しく機能しているかどうかを確認できます。

グーテンベルクエディター についてはどうでしょうか? PDF Embedder プラグインには特定のブロックが付属しています。新しい投稿を作成し、「ブロックを追加」アイコンをクリックします。次に、PDF Embedder ブロックを検索して選択します。

最後に、ブロックをクリックして PDF ファイルを選択 (またはアップロード) すれば、作業は完了です。

使用しているエディターに関係なく、最終結果は次のとおりです。

PDF Embedder プラグインは優れた機能を果たしますが、代替手段をいくつか用意しておくことは常に良いことです。そこで、いくつかの無料およびプレミアム PDF ビューアプラグインを順不同で紹介したいと思います。

WordPress用のPDFビューア

3900 以上の販売実績を持つ WordPress 用 PDF ビューアは、CodeCanyon で最も売れている PDF ビューアプラグインです。これは完全に応答性が高く、ブラウザー間で互換性のあるプラグインです。このプラグインを使用すると、印刷、ダウンロード、ズーム、ページナビゲーション、ソーシャル共有などのオプションを有効または無効にすることができます。 WordPress で Google Analytics を使用して、PDF を読んだ訪問者の数を追跡することもできます。

Googleドライブエンベッダー

Google Drive Embedder は、WordPress ダッシュボードから Google ドライブにアクセスし、PDF、Word ドキュメント、またはスプレッドシートを投稿やページに埋め込むことができる無料のプラグインです。ただし、このプラグインを使用するには、Google Apps Login もインストールする必要があります。このプラグインの目的は、Google ドライブを WordPress サイトに接続することです。

アルゴリズム PDF ビューア

PDF ファイルを埋め込むための Gutenberg ブロックプラグインをお探しですか? Algori PDF Viewer プラグインを試すことができます。この無料のプラグインは、Google Chrome、Firefox、Safari、Opera、Internet Explorer 11 などのすべての Web ブラウザと互換性があります。これにより、単一ページに複数のファイルをロードでき、プレゼンテーションモードがサポートされます。

Real3D フリップブック WordPress プラグイン

名前が示すように、Real3D FlipBook は、PDF や画像を表示するための、応答性が高くタッチフレンドリーな 3D フリップブックプラグインです。 HTML5 を使用して開発されており、Flash を使用する必要はありません。フリップ速度、フリップサウンド、ズームレベル、カメラアングルなどの設定をカスタマイズできます。このプラグインはライトボックスとフルスクリーンモードもサポートしています。

Any Document Plus を埋め込む

Embed Any Document Plus は、WordPress Web サイトにドキュメントファイル (PDF、Word、PPT、Excel など) を簡単にアップロードして埋め込むことができる独自のプラグインです。このプラグインは、ビジュアルエディターの上に「ドキュメントの追加」ボタンを追加します。これにより、EAD Plus ポップアップが開き、ドキュメントのソースを選択できます。また、Google Drive、Dropbox、Box.com のクラウドサービスとも緊密に統合されています。 WordPress サイト内に留まり、ファイルをクラウドサービスにアップロードし、そこから直接埋め込むことができます。

埋め込むドキュメントをアップロードまたは選択した後、ファイルを埋め込むために選択するドキュメントサービスを選択するオプションも表示されます。プラグインはファイル形式を自動的に認識し、ビューアを提案します。ビューアは最大 5 ～ 8MB サイズのファイルを処理できます。大きなファイルの場合、開発者はファイルを Google ドライブにアップロードし、そこから埋め込むことを推奨します。

プラグインを使用せずに PDF ファイルを埋め込む方法

もしあなたがプラグインを使わない解決策を常に探している人なら、このセクションはあなたのためです。別のプラグインをインストールしなくても、PDF ファイルを WordPress の投稿やページに埋め込むことができます。

考え方は簡単です。PDF ファイルを Google ドライブアカウントにアップロードし、iframe コードを使用してそのファイルをサイトに埋め込む必要があります。この方法は安全ですが、唯一の問題は iframe を使用していることです。

ステップ 1: Google ドライブにアクセスしてアカウントにログインします（無料の Gmail アカウントにサインアップするだけで、15 GB のドライブ容量を無料で入手できます）。

ステップ 2: WordPress 投稿に埋め込みたい PDF ファイルをここにアップロードします。これを行うには、Google ドライブアカウントの左側のサイドバーから [新規] をクリックし、[ファイルアップロード] を選択して、ローカルコンピュータからファイルをアップロードします。

ステップ 3: ファイルがドライブにアップロードされたら、ファイルをダブルクリックしてファイルをプレビューします。次に、右上隅にある 3 つの縦のドット (その他のアクション) をクリックし、新しいウィンドウで開く を選択します。

ステップ 4: 新しいウィンドウで、[その他のアクション] (右上隅にある 3 つの縦のドット) をクリックし、[共有] を選択します。

ステップ 5: [ユーザーやグループと共有] および [リンクを取得] というポップアップが開きます。ここで、[リンクを取得] セクションの [リンクを知っている人に変更] をクリックします。これにより、PDF ファイルのリンクを知っている人は誰でもそのファイルを閲覧できるようになります。これを行わないと、ファイルは非公開のままとなり、Web サイトの閲覧者には表示されなくなります。

次の確認が表示されるはずです。

完了したら、[完了] をクリックします。

ステップ 6: 次に、投稿で使用する埋め込みコードを取得します。これを取得するには、もう一度 [その他のアクション] をクリックし、項目を埋め込むを選択します。

ステップ 7: これにより、iframe コードをコピーできるポップアップが開きます。

ステップ 8: WordPress ダッシュボードに移動し、PDF ファイルを埋め込む投稿またはページを作成または編集します。ここでクラシックエディタを使用している場合は、[テキスト] タブに移動してコードを貼り付けます。

グーテンベルクエディタの場合は、新しいブロックを追加し、カスタム HTML を検索し、最後にカスタム HTML ブロックに iframe コードを追加する必要があります。

ステップ 9: 以上です。投稿またはページをプレビューして、埋め込まれた PDF ファイルを確認します。

WordPress に PDF ファイルを埋め込む方法に関する巻末注

WordPress では PDF ファイルにリンクできますが、埋め込むことはできません。ただし、このチュートリアルではその問題を解決します。プラグインを使用するかどうかにかかわらず、画像や動画と同じように PDF ファイルを投稿やページに埋め込む方法を示します。

この 2 つの方法のいずれかを使用して PDF ファイルをウェブサイトに埋め込んだことがありますか?代替プラグインを念頭に置いていて、それがこの記事で説明されているプラグインよりも優れていると考えていますか?コメント欄であなたのご意見をお聞かせください。