[WordPress] Mozilla PDF ViewerのJavaScriptライブラリ

Last Updated: 2023 年 11 月 28 日 댓글

PDF.jsは、Mozillaで開発されたPDFビューアで、ブラウザのプラグインなしでブラウザでPDFファイルを表示できるように処理するJavascriptライブラリです。

Mozilla PDF Viewer JavaScriptライブラリ

WordPressでPDF.jsを使用してPDFビューアを実装すると、他のプラグインを使用するよりも、サイトへの負担を少なくながらまともなPDFビューアを備えるとなります。

次のような形式のURLを使用すると、クリック時、別のウィンドウでPDFビューアが実行されます。

http://www.example.com/js/web/viewer.html?file=http://www.example.com/my-PDF-file.pdf

テーマフォルダの下にjsフォルダの下にPDF.jsサイトからダウンロードしたファイルをアップロードする場合は、次のように viewer.js ファイルをEnqueueさせて使用することができます。

// Enqueue viewer.js from Mozilla in WordPress

add_action( 'wp_enqueue_scripts', 'enqueue_and_register_my_scripts' ); function enqueue_and_register_my_scripts(){ wp_register_script('viewer-script', get_stylesheet_directory_uri() . 'js/web/viewer.js', array('jquery'), '1.0', true); wp_enqueue_script('viewer-script'); }

そして、PDFファイルは、メディアの追加]を使用して、メディアライブラリにアップロードします。

メディアを追加

PDFがメディアライブラリに追加されると、URLをコピーするします。

Copy Media URL

上の図で、URLの部分のパスを選択してコピー(Ctrlキー+ C )して、PDFのパスの部分を置き換えるようにします。

http://www.example.com/js/web/viewer.html?file=위에서 복사한 URL

IFRAME 形式的に挿入することも可能です。 次のような形式にPDFファイルを挿入することができます。





必要に応じてショートコードを使用して挿入することも可能です。 http://www.example.com/js/web/viewer.html?file=위에서 복사한 URLブラウザのアドレスバーに貼り付けて実行してみると次のようにPDFビューアでPDFが実行されます。

PDF Viewer by Mozilla

オペラで実行したところ、きれいにPDFが開かね。 上部のコントロールを使用してページを拡大/縮小するなど、さまざまなタスクを実行することができます。

もっと詳しく この記事を参考にしてみてください。


追加: 上記の方法で満足のいく結果を得られない場合は、PDFビューアプラグインを試してみることができます。

いくつかの有料のプラグインの中 TNC FlipBook - PDF viewer for WordPressというプラグインが評価しながら大丈夫なようです。

PDF viewer for WordPress

Adobe Redearのように、PDFファイルを表示してくれるプラグインです。

プラグインのインストールが負担になるならば この記事「PDF文書を挿入する」に記載されているPDFビューア関連のショートコードをお試しください。 プロのビューアが必要な場合は、上記の方法またはPDF viewer for WordPressのようなプラグインは大丈夫だと思うし、軽くPdfを追加する場合、ショートコード方式が望ましいようです。

メモ:


コメントを残す

コメント