PDFをAndroidデバイスでファイルをダウンロードさせずに、直接表示させるためにWordPressを使っていない環境ではPDF.jsをつかっているけど、最近仕事を始めた職場のHPがWordPress環境で、情報発信にPDFファイルを使っている。PDFはAndroidではダウンロードして、ダウンロードしたファイルを確認するという仕様なので、PDF.jsみたいなWordPressでPDFのViewerって無いのかと確認したところ、PDF.js Viewerっていうプラグインがあることがわかったのでテストです。
PDF.js Viewerのテスト
プレビューボタンをクリックして確認しています（Windows)
画像や、動画と同じ手順でPDFを貼り付け
手の厥陰肺経
クリックすると普通に表示される（Windowsだから当たり前）
PDF.jsを使って同じファイルを貼り付け
画面上にViewerが表示されて、View Fullscreenをクリックすると全画面表示になるんだ。Android確認しようっと
2022/10/04追記
Androidデバイスで確認はできたが、画面表示ではなくクリックしたら、リンク先のファイルをPDF.jsで表示できない？？？？
このサイトにはプラグインのPDF.js Viewerではなく、PDF.jsがインストールしてあるので、PDF.jsを使えばいい
手の太陰肺経
PDF.jsを使わないでPDFへのリンクは
<a href="https://www.mahoroba.cc/wp-content/uploads/2022/10/tubo-LU.pdf">手の厥陰肺経</a>
で、
PDF.jsを使ったPDFへのリンクは
<a href="/js/pdfjs/web/viewer.html?file=/wp-content/uploads/2022/10/tubo-LU.pdf" rel="external">手の太陰肺経</a>
こんな感じ
/js/pdfjs/web/viewer.htmlはPDF.jsをインストールしたディレクト
rel=”external”はPDF.jsのサンプルに載っていたおまじないと思っています。よくわかっていない(笑)
PDF.jsをインストールしない、できない場合は
PDF.js Viewerを使って表示させたページへのリンクを貼ればいいんじゃないかな？
色々試しているうちにPDF.js Viewerをフルスクリーンにして表示されるURLをコピーすれば
<a href="/wp-content/plugins/pdfjs-viewer-shortcode/pdfjs/web/viewer.php?file=https://www.mahoroba.cc/wp-content/uploads/2022/10/tubo-LU.pdf&attachment_id=345&dButton=true&pButton=true&oButton=false&sButton=true#zoom=auto&pagemode=none&_wpnonce=8e21ac169b">手の太陰肺経</a>
手の太陰肺経
リンクをクリックすると全画面で表示ができた。
-
- Add PDFボタン（クラッシックエディタの場合。クラッシックエディタじゃない環境は？）でPDFファイルを読み込む（PDFファイルを追加してある前程で）を押下してViewerを追加する。
- 変更をプレビューボタンを押下してプレビューを表示
- 表示されたプレビューでPDFをFull Screen表示にする
- URLのドメイン以外の部分をコピーしてプレビュー画面を閉じる
- 追加したViewerを削除して通常のメディアファイルとして追加する。
- 追加したリンクをクリックして編集ボタンを押下して、コピーした全画面と置き換える
手間はかかるけどAndroidデバイスでも画面表示する様になります。
