コードウェット

ElementorのPDFビューアの使用方法

Blair Jersyer Elementor Oct 19, 2021

ElementorにPDFドキュメントを埋め込む方法をお探しの場合は、適切な場所にいます。 リンクを追加してこれを行う方法についてはすでに説明しましたが、ここでは、 Elementorを使用してWordPressブログにPDFドキュメントを埋め込む方法を説明します。

ElementorのPDFビューアの使用方法

今日のチュートリアルでは、その仕事をする「 PDF ViewerForElementor 」という名前のプラグインに焦点を当てます。

始めましょう。

Elementor用のプラグインPDFビューアをダウンロードしてインストールします

最初のステップは、ダッシュボードからプラグインをダウンロードしてインストールすることです。 プラグインに移動し、「PDF Viewer For Elementor」という名前を使用すると、ダッシュボードからこのタスクを直接実行できます。

素晴らしいウェブサイトを作成します

最高の無料ページビルダーElementor を使用

今すぐ始める

これは、構成を必要としない非常に単純なプラグインです。 WordPressのインストールでElementorをアクティブにする必要があることを思い出させる必要はありません。

PDFを埋め込むためのElementorを使用したページの編集/作成

次に、Elementorを使用して既存のページを作成または編集します。 ElementorのPDFビューアを有効にすると、Elementorの基本要素に2つの新しいコンポーネントが追加されます。

ご覧のとおり、プラグインはElementorに2つの新しい要素を追加しますが、そのうちの1つをいつ使用する必要があります。 それが私たちが以下で理解することです。

PDFビューア要素を使用する場合

要素「PDFViewer」を使用すると、Googleドキュメントプレビューアを使用してPDFドキュメントへのリンクを使用するiframeを追加できます。

URLを入力するか、ファイルをメディアにアップロードするだけです。 プレビューアのサイズと配置を構成することもできます。

このソリューションはかなりうまく機能しますが、いくつかの欠点があります。

  • WordPressブログがローカルでホストされている場合は機能しません
  • それは動作を停止する可能性がある外部のウェブサイトに依存しています
  • PDFの読み込みに時間がかかる場合があります

PDFを表示するために外部サービスを使用しても問題がない場合は、このソリューションが最適です。

PDFjsビューアを使用する場合

このプラグインによって追加された2番目の要素はPDFjsビューアーです。 名前が示すように、このソリューションはJavascriptを使用してPDFドキュメントを埋め込むことに依存しています。 ソリューションの設定は前の要素と同じですが、ローカルで作業できるという利点があります。

ここでは、メディアからファイルを選択して、それをPDFとして埋め込むことしかできません。 このソリューションにはいくつかの欠点もあります：

  • ブラウザがJavascriptを実行しない場合に機能しない場合（最新のブラウザのほとんどはJavascriptを実行します）
  • ダウンロードするファイルを増やし、サーバーへのリクエストを増やす可能性があります。

PDFプレビューの例

ElementorのPDFビューアによって追加された両方の要素のプレビューは次のようになります。

ElementPDFビューアでプレビュー

このプレビューは受け入れ可能であり、ページをナビゲートするのに役立つ下部のナビゲーションボタンで提供されます。

PDFjsビューアでプレビュー

「PDFjsビューア」にはナビゲーションボタンもありますが、前のプレビューにはない検索ボタンが含まれています。

WordPressにPDFを埋め込むための他のプラグイン

このプラグインがあなたが探しているものと正確に一致しない場合は、おそらく次のプラグインがあなたが探している解決策である可能性があります。

WordPress用のPDFビューア

WordPress用のPDFビューアは、2014年から利用可能なCodeCanyon上のWordPress用のプレミアムPDFリーダープラグインです。このプラグインを使用すると、最新のPDFリーダーとFlipBookを使用してWordPressWebサイトのPDFファイルを表示および埋め込むことができます。

主な機能

  • ソーシャル共有を有効/無効にする
  • 印刷オプションの有効化/無効化
  • ダウンロードオプションの有効化/無効化
  • プレゼンテーションモードの有効化/無効化
  • 検索オプションの有効化/無効化
  • ロゴ調整可能の有効化/無効化

  • 任意の投稿/ページのPDFファイルにテキストリンクを追加するためのショートコード
  • 完全レスポンシブPDFビューア
  • すべてのアイテムのスタイルとカスタマイズ。
  • ほとんどのブラウザと互換性があります
  • 高速でスムーズなユーザーエクスペリエンス

詳細

デモ

ホスティング

PDF埋め込み-WordPressPDFViewerプラグイン

Elfsight PDF Embedは、WebサイトのページにPDFファイルを表示する簡単な方法を追加します。 数回クリックするだけで、ドキュメントがサイトに公開され、ユーザーはドキュメントを表示してダウンロードできます。

主な機能

  • ネイティブウィジェット
  • プレミアムテーマと互換性があります
  • 利用可能なショートコード
  • WordPressGuttenbergエディター
  • ビジュアルコンポーザーがサポートされています

詳細

デモ

ホスティング

PDFエンベッダー

PDF Embeddedを使用すると、PDFをアップロードしてサイトに直接埋め込むことができ、画像を追加するのと同じくらい簡単です。 PDFは、自然なサイズと形状に自動的にサイズ変更されるか、大きすぎる場合は使用可能な幅を埋めます。 オプションで、幅を設定でき、高さは自動的に計算されます。 ユーザーがページのサイズを変更するたびに、形状が再計算されます。

このプラグインには、より多くの機能を備えたプレミアムバージョンが付属しています。

詳細

デモ

ホスティング

概要

次のソリューションのどれを使用しますか？ 何かお勧めはありますか？ コメントで教えてください。 FacebookとTwitterのソーシャルメディアアカウントでフォローすることを忘れないでください。

Divi WordPress Theme