WordPress環境下でPDFをAndroidデバイスで表示するには?(クラシックエディター編)

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">手の厥陰肺経&lt/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>

手の太陰肺経

リンクをクリックすると全画面で表示ができた。

    1. Add PDFボタン(クラッシックエディタの場合。クラッシックエディタじゃない環境は?)でPDFファイルを読み込む(PDFファイルを追加してある前程で)を押下してViewerを追加する。
    2. 変更をプレビューボタンを押下してプレビューを表示
    3. 表示されたプレビューでPDFをFull Screen表示にする
    4. URLのドメイン以外の部分をコピーしてプレビュー画面を閉じる
    5. 追加したViewerを削除して通常のメディアファイルとして追加する。
    6. 追加したリンクをクリックして編集ボタンを押下して、コピーした全画面と置き換える

手間はかかるけどAndroidデバイスでも画面表示する様になります。