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

公開: 2022-05-17

WordPressは、Webサイトを公開するための最新の柔軟なプラットフォームです。 これを見る方法の1つは、メディアへのアプローチです。 メディアライブラリを介してほとんどすべてのタイプをサイトにアップロードできますが、一部のファイルでは、追加のサポートが必要です。 PDFファイルをWordPressに埋め込む方法を学びたい場合は、単純な画像やビデオの埋め込みよりもいくつかの手順が必要になります。

WordPressは一般的な埋め込み機能のみを提供するため、サーバーを使用してファイルをホストするか、ほとんどのユースケースでプラグインをインストールする必要があります。 幸いなことに、これらのソリューションはどちらも適切であり、最も重要なのは、実装が簡単なことです。

この記事では、Googleドライブ、WordPressブロック、およびプラグインの両方を使用して、WordPressにPDFファイルを埋め込む方法を紹介します。 ただし、最初に、PDFを埋め込みたい理由について説明し、単純なアップロードと埋め込みの違いを指摘する価値があります。

WordPressにPDFファイルを埋め込みたい理由

受けるメリットを理解していないかもしれませんが、WordPressにPDFファイルを埋め込みたい理由はすでにご存知かもしれません。 たくさんあります、そしてここにほんの少しがあります:

  • PDFは、完全な製品またはサービスのサンプラーとして使用するのに最適です。 たとえば、グラフィックデザイナーまたはライターの場合は、PDFをダウンロードできるようにすることができます。
  • 一部のPDFは、コンテンツによっては再利用可能な要素として適切に機能します。 サインアップフォームは良い例、または利用規約のドキュメントです。
  • ホワイトペーパーやレポートを委託する場合は、WordPressに入力する必要はありません。 代わりに、ファイルをダウンロードまたは表示するために提供できます。

最後のポイントは、PDFの一般的なユースケースを示しています。 たとえば、変換には時間がかかるため、貴重なPDFをサイトの投稿として再作成したくない場合があります。 ただし、ファイル埋め込んで、ネイティブコンテンツの動的でインタラクティブな要素をすべて保持することはできます。

PDFファイルの埋め込みとアップロードの違い

一部の人には明白に思えるかもしれませんが、PDFファイルの埋め込みとアップロードには違いがあります。 はい、WordPressに任意のファイルをアップロードできます(現在の執筆時点のSVGを除く)が、これはファイルを表示できるという意味ではありません。

これを行うには、WordPressがファイルを表示するためにファイルと「通信」するための何らかの方法が必要になります。 ここで、専用のPDFビューアが役立ちます。 埋め込みファイルに関しては、WordPressは最高ではありませんでした。 ただし、ブロックエディターの登場により、WordPress内の他のメディアタイプに沿った、より一貫性のあるワークフローが得られます。これについては後で詳しく説明します。

WordPressにPDFファイルを埋め込む方法(3つの方法)

PDFファイルをWordPressに埋め込むためにカバーする3つの方法があります。 それぞれが異なるアプリケーションとワークフローに適合します。 そのため、選択するのは個人的な決定です。

  1. Googleドライブを使用してファイルをホストしている場合は、埋め込みコードをWordPressのHTMLに追加することをお勧めします。
  2. WordPressブロックエディターにはPDFを表示する方法があり、フロントエンドに表示するために必要なのはこれだけです。
  3. PDF Embedderなどのプラグインを使用すると、PDFを表示し、読者にフル機能のエクスペリエンスを提供できます。

私たちが提供するソリューションは順不同であり、他のソリューションよりも「正しい」ソリューションはありません。 そのため、それぞれを見て、全体的な目標に合わせて1つを選択してください。

1.Googleドライブを使用してファイルを埋め込む

多くのサイト所有者がGoogle製品を使用しており、エコシステムに投資している人にとっては、Googleドライブがいかに重要であるかを理解できます。

Googleドライブのロゴ。

PDFファイルをクラウドでホストしていて、それらを移動したくない場合は、比較的簡単にWordPressWebサイトに埋め込むことができます。 まず、Googleドライブ内で選択したファイルに移動し、[その他の操作]メニューの[共有]オプションをクリックします。

Googleドライブ内の共有オプション。

希望するエクスペリエンスに一致する設定のブレンドを選択できます。 ここで終了したら、[その他のアクション]メニューに戻り、新しいウィンドウでファイルを開きます。

Googleドライブ内の[新しいウィンドウで開く]オプション。

そのメニュー内のオプションが変わることに気付くでしょう。 [その他のアクション]メニューを開くと、[埋め込みアイテム... ]リンクが表示されます。

Googleドライブの[アイテムを埋め込む...]オプション。

これをクリックすると、HTMLコードを含むダイアログボックスが表示されます。 これをコピーしてから、WordPressに戻る必要があります。

Googleドライブの[アイテムを埋め込む]ダイアログボックス。

この時点で、WordPressに戻って、PDFを埋め込みたいページを開くことができます。 今回は、ブロックエディタの[その他のアクション]メニューで、コードエディタを開きます。

WordPress内のコードエディタオプション。

ここでのあなたの仕事は、埋め込みコードの正しい場所を見つけて、それを次の場所に貼り付けることです。

WordPressコードエディタにHTMLコードを追加します。

[コードエディタの終了]リンクをクリックすると、ページに埋め込みが表示されます。

WordPressページ内に埋め込まれたGoogleドライブ。

ただし、これは簡単に実装できますが、PDFはiframeであり、多くのオプションがないため、PDFを表示するための機能的な方法です。 より柔軟なアプローチについては、読み続けてください!

2.WordPressブロックを使用してサイトに表示可能なPDFファイルを追加する

古いクラシックエディタとは対照的に、ブロックエディタでは、さまざまなメディアタイプを一貫した方法で操作できます。 これは、WordPressにPDFファイルを埋め込んだときほど明白ではありません。

ファイルブロックを使用してあらゆる種類のファイルを埋め込むことができますが、この場合は、ファイルブロックを使用してPDFを埋め込むことができます。 目的の投稿またはページに移動すると、ファイルブロックを検索でき、(画像のように)ファイルアップローダーダイアログが表示されます。

[ファイルブロックアップローダー]ダイアログ。

ここにファイルを追加すると、ファイルは見栄えの良いビューアにインライン要素として表示されます。

ファイルブロックを使用した埋め込み。

ファイルの完全なURLパスと[ダウンロード]ボタンも表示されます。 これは、エディターのサイドバーにある専用のブロック設定で変更できます。

WordPressサイドバー内のファイルブロック設定。

私たちの意見では、これはGoogleドライブの埋め込みよりも優れたソリューションですが、それでもプラグインを使用することでより良いエクスペリエンスを提供するだけです。 次に、このオプションについて説明します。

3.プラグインを使用してWordPressにPDFファイルを埋め込む

PDFファイルをWordPressに定期的に埋め込みたい場合、または一流の読書体験を提供したい場合は、プラグインが最適です。 選択できるものはいくつかありますが、実際には、どのオプションでも優れたソリューションが得られます。

ただし、PDF Embedderは、インストール数が多く、肯定的なレビューが多く(したがって、他のユーザーがプラグインを楽しんでいる)、定期的に更新されるため、気に入っています。

PDFEmbedderプラグイン。

プラグインをインストールしてアクティブ化したら、WordPress内の[設定]>[PDF埋め込み]ページに移動します。

WordPress内のPDF埋め込み設定リンク。

視聴者は箱から出してすぐに見栄えがするので、ここにはそれほど多くはありません。 ただし、最小寸法と最大寸法、一部のツールバー固有の設定などの要素を変更できます。

PDF埋め込み設定ページ。

PDFを埋め込むには、PDF埋め込みブロックをコンテンツに追加し、アップローダーからファイルを選択するだけです。

メディアライブラリを開くオプションを示すPDF埋め込みブロック。

ここでブロック設定を確認し、必要に応じて調整することもできます。 以前にグローバル設定に触れなかった場合は、コンテンツに合わせて微調整することをお勧めします。

PDF埋め込みサイドバー。

ただし、これにより、Googleドライブの埋め込みやネイティブのWordPressオプションよりも間違いなく優れたビューアが提供されます。 さらに、PDF Embedderのプレミアムバージョンにアップグレードして、より多くの機能、より優れたレベルのサポートなどを利用できます。

読み取り可能で最適化されたPDFをWordPressに埋め込む方法

画像やビデオを最適化するのと同じように、PDFファイルも最適化する必要があります。 見栄えがよく、豊かさを保つ小さなファイルを提供するのに役立ついくつかの簡単なヒントを次に示します。

  • あなたのタイポグラフィは重要です–あなたのサイトの書体と同じくらい重要です。 全部で2つのフォントに固執し、すべての目に適したサイズに設定することをお勧めします。
  • 画像と同じようにPDFを最適化できます。 PDFのサイズがメガバイトになる場合があるため、PDFをできるだけ小さくしたい場合があります。 ShortPixelには、圧倒的な画像の最適化に対応する優れたPDFコンプレッサーがあります。
  • そういえば、PDFに画像を含める場合は、それらにも適切なレベルの最適化があることを確認してください。

全体として、PDFをサイトの投稿やページと同じように扱います。検索と速度を最適化して、双方向性について心配する必要はありません。 ファイルは適切にレンダリングされ、ネイティブコンテンツと同じダイナミクスを提供します。

結論は

WordPress Webサイトにどのメディアを投入しても、それを使用できます(SVGに耐えられます)。 PDFに関して言えば、WordPressには、必要なすべての素晴らしいネイティブエクスペリエンスがあります。 ただし、WordPressにPDFファイルを埋め込むときに、よりフル機能のエクスペリエンスが必要な場合は、他にも考慮事項があります。

たとえば、Googleドライブ内でファイルをホストする場合、コンテンツに埋め込みHTMLを「ハードコーディング」することができます。 これは優れたビューアを提供しますが、柔軟性がなく、後日ファイルを削除すると、リンクが壊れたり、メディアが失われたりする可能性があります。 代わりに、プラグインは必要なすべての機能を提供します。 PDF Embedderは優れていますが、他の解決策もあります。 ここでのタスクは、ニーズとワークフローに最適なものを選択することです。

PDFファイルをWordPressに埋め込む必要がありますか?もしそうなら、どのアプローチを選びますか? 以下のコメントセクションでお知らせください。