WordPressへPDFを埋め込んだのに、公開ページでは読み込み中のまま、白紙になる、途中のページへ進めない、スマートフォンで縦に伸びる。こうした時は、同じPDFを再アップロードする前に、PDFファイル、公開URL、ページ数、縦横比、描画処理、公開表示を分けて確認します。この記事では、WordPressでPDFが表示されない時の原因を順番に切り分ける方法を解説します。
結論：PDFファイルとビューア設定を別々に確認する
PDFビューアは、PDFファイルのURLを読み込み、文書と各ページを解析し、canvasなどの表示領域へ描画します。PDFそのものが開けない場合と、PDFは開けるがブロック設定が合っていない場合では、直す場所が違います。まずPDF URLを直接開き、次にWordPressのブロック設定、最後に公開ページの描画と操作を確認します。
MozillaのPDF.js公式例でも、URLから文書を読み込む処理は非同期で行われ、文書の取得後にページと表示領域を指定して描画します。つまり「ファイルがある」「文書を読めた」「指定ページを描けた」「操作UIが動く」は別の段階です。白紙になった時は、どの段階で止まったかを確認します。
PDF表示を5段階で切り分ける
1. 元のPDFファイルが正常か
最初に、アップロード前のPDFをパソコンで開きます。最初から破損している、パスワードで保護されている、ページ数が想定と違う、特殊な形式で保存されている場合は、WordPress側の設定を変えても直りません。元ファイルの総ページ数、縦横比、ファイル容量を記録し、必要なら一般的なPDFとして書き出し直します。
2. WordPressのPDF URLが公開されているか
メディアライブラリのPDF URLをログアウト状態で直接開きます。HTTP 200でPDFが表示またはダウンロードできれば、ファイルの公開経路は確認できます。404ならURLの誤りやファイルの欠落、403ならアクセス制限やセキュリティ設定を確認します。管理者として開けても、一般の読者が開けるとは限りません。
3. ブロックが正しいPDF URLを持っているか
投稿編集画面でPDF Slide Viewerブロックを選び、意図したPDFが設定されているかを確認します。別のPDF、削除済みの添付URL、下書き環境のURLが残っていないかを見ます。Classic Editorやテンプレートでショートコードを使う場合は、url属性の引用符やURL全体を確認します。
4. ページ数と開始ページが合っているか
ページ数を手動で指定する構成では、実際の総ページ数と設定値を一致させます。8ページのPDFに対してページ数を5と設定すれば、6ページ目以降へ進めません。開始ページが総ページ数を超えていれば、最初から表示できない原因になります。通常は開始ページ1、ページ数は実ファイルと同じ値から確認します。
5. 公開ページで描画と操作を確認する
最後に公開URLを開き、最初のページが表示されるか、前へ・次へ、ズーム、Fitが動くか、最後のページで正しく止まるかを確認します。カルーセルを有効にした場合は、間隔とループも確認します。ブラウザの開発者ツールにPDF読込やJavaScriptのエラーがあれば、エラー文と発生URLを保存します。
| 症状 | 最初に見る場所 | 次の確認 |
|---|---|---|
| ずっと白紙 | PDF URLのHTTP状態 | ブラウザの読込エラー |
| 途中ページへ進めない | ページ数設定 | 実PDFの総ページ数 |
| 最初から表示されない | 開始ページ | URLと権限 |
| 縦長・横長に崩れる | アスペクト比 | 最大高さとテーマCSS |
| スマホだけはみ出す | 公開ページ幅 | テーマ/キャッシュ |
| ボタンだけ動かない | JavaScriptエラー | 最適化プラグインとの競合 |
縦横比と最大高さを調整する
PDFが読み込めていても、表示枠の比率が合わないと、余白が大きい、ページが切れる、縦に長すぎるように見えます。比率が分からない時はPDFから自動判定する設定を使い、意図が明確な資料だけ16:9、4:3、A4横、A4縦などを指定します。見た目だけで比率を推測せず、元PDFのページ寸法を確認してください。
最大高さは、デスクトップだけでなくスマートフォンで1ページ全体を確認できる範囲にします。高さを小さくしすぎると文字が読みにくくなり、大きすぎるとページ送り操作までの距離が伸びます。Fit操作で全体を表示できるか、ズーム後にページ送りが使えるかも確認します。
再アップロード前のチェックリスト
- 元のPDFをパソコンで開ける
- 総ページ数と縦横比を記録した
- PDF URLをログアウト状態で直接開ける
- PDF URLがHTTP 200を返す
- ブロックまたはショートコードが正しいURLを持つ
- 設定ページ数が実PDFと一致する
- 開始ページが1以上、総ページ数以内である
- 自動比率または意図した比率を選んだ
- 公開ページで最初と最後のページを確認した
- PCと390px前後で横はみ出しがない
同じPDFを増やさない: メディアURLが200で元PDFも正常なら、再アップロードの前にブロックのURL、ページ数、開始ページ、比率を確認します。同じファイルを何度も登録すると、どのURLが記事で使われているか分かりにくくなります。
キャッシュと最適化を切り分ける
編集画面では表示されるのに公開ページで白紙になる場合は、ページキャッシュ、JavaScriptの結合・遅延、CDN、テーマの表示処理を確認します。最初にシークレットウィンドウまたはログアウト状態で再現を確認し、キャッシュを一度更新します。最適化機能を無効にして直る場合は、PDF.js関連ファイルやビューアの初期化処理が変更されていないかを調べます。
ただし、本番サイトで複数プラグインを一括停止するのは避けます。変更前の状態を記録し、影響の小さい確認から一つずつ進めます。直った操作と直らなかった操作を残せば、サポート側もPDFファイル、WordPress設定、テーマ、最適化のどこを見るべきか判断しやすくなります。
ACS PDF Slide Viewerで確認できる設定
ACS PDF Slide Viewer v1.0.5は、PDFを記事・固定ページ内で表示する無料のブロックプラグインです。PDF.jsをプラグイン内に同梱し、ページ送り、ズーム、Fit、ページ数、開始ページ、最大高さ、比率、任意のカルーセルとダウンロード表示を設定できます。独立した設定メニューではなく、投稿または固定ページのブロック設定で操作します。
外部CDNや外部APIへPDFを送信する設計ではありませんが、PDF自体はWordPressのメディアURLとして公開されます。非公開資料をアクセス制限なしで置く用途には向きません。ダウンロードボタンを非表示にしても、公開URLへのアクセス制御を代替するものではないため、資料の公開可否を先に判断してください。
向いているケース・向いていないケース
向いているケース
- 公開してよい営業資料や講座資料
- 記事内でページ送りして見せたい図解
- 外部ビューアへ送らず表示したいPDF
- 縦横比と最大高さを記事ごとに調整したい
向いていないケース
- 認証なしでは見せられない機密資料
- PDF URL自体を公開したくない資料
- 複雑な注釈編集をブラウザで行う用途
- 元PDFが破損または特殊保護されている場合
よくある質問
Q. PDF URLを直接開けるのにビューアが白紙なのはなぜですか？
A. PDFファイルの公開は成功しています。ブロックのURL、ページ数、開始ページ、JavaScriptエラー、キャッシュや最適化処理へ確認範囲を絞ってください。
Q. PDFのページ数は自動で合いますか？
A. ショートコード利用時はpages指定が必要です。ブロックでも実PDFの総ページ数と設定値を確認し、最後のページまで進めるか公開面でテストしてください。
Q. PDFが縦に長くなりすぎる時はどうしますか？
A. 元PDFの比率を確認し、迷う場合は自動判定を使います。そのうえで最大高さを調整し、PCとスマートフォンの両方で1ページ全体と操作ボタンを確認してください。
Q. ダウンロードボタンを消せばPDFを非公開にできますか？
A. いいえ。ボタン非表示は公開URLへのアクセス制御ではありません。機密資料は認証や権限管理が必要な別の仕組みを使い、公開メディアURLへ置かないでください。
まとめ
- 元PDFが正常に開けるか確認する
- 公開PDF URLとHTTP状態を確認する
- ブロックが正しいURLを持つか確認する
- ページ数と開始ページを実ファイルに合わせる
- 比率と最大高さをPC/スマホで調整する
- 公開面の描画、ページ送り、ズーム、Fitを確認する
- 直らなければキャッシュとJavaScriptエラーを切り分ける
最初から設置する手順は「WordPress記事にPDFスライドを埋め込む方法」、WordPress.org公開版の機能と入手先は「ACS PDF Slide Viewer公式公開」で確認できます。
PDFを記事内で1ページずつ見せる
ACS PDF Slide Viewerは、PDFをcanvasへ描画し、ページ送り、ズーム、Fit、比率、任意カルーセルに対応する無料のWordPressプラグインです。WordPress.orgからインストールし、投稿または固定ページのブロック設定で利用できます。
公式情報
関連記事: 漫画を連番画像とPDFで使い分け、記事内で1ページずつ読ませる時は「WordPressで漫画をページ送り表示する方法」で確認できます。
この記事は役に立ちましたか？
ありがとうございます！
