WordPressでPDFを扱うときの見せ方を考える。添付・表示名・複数ファイルの導線

2026年10月5日

WEB

WordPressへPDFをアップロードし、リンクを置けば添付自体はできます。しかし、実際に使う画面では「PDFがあると分かる」「複数のファイルを区別できる」「スマートフォンでも開きやすい」ところまで考える必要がありました。

社内向けのWordPressでPDFを使った通知機能を作ったときも、最初から使いやすい形になったわけではありません。ファイル選択欄の文字が見切れ、PDFを2個付けると本文にファイル名が出ない問題が、実際の発行から見つかりました。

この記事では、PDFを「添付できる機能」で終わらせず、発行する人と確認する人の両方が迷わない導線へ整えた過程をまとめます。

PDFを置くだけでは、確認の流れにならない

作ったのは、定型の通知をPDFと一緒に発行する仕組みです。権限のある利用者が種類を選び、PDFを指定して発行すると、WordPressが決められたタイトルと本文の投稿を作ります。

このとき必要なのは、管理画面へファイルが登録されることだけではありません。

発行画面、投稿本文、PDFを開く操作を一本につなげて、初めて確認の導線になります。

発行画面では、一つのPDF選択欄と、通知の種類を選ぶボタンを近くに配置しました。利用者はファイルを選び、その内容に合う発行ボタンを押します。

当初はカードの上部を左右半分に固定し、片側へタイトル、もう片側へPDF選択欄とボタンを置きました。しかし、表示幅が狭く、ファイルを選んでいないときの案内文が途中で見切れました。今後ボタンが増える場合も窮屈です。

そこで固定した二分割をやめ、選択欄の幅を段階的に調整しました。最終的には320pxにし、案内文と選択したファイル名を確認しやすくしました。

幅を広げること自体が目的ではありません。発行前に「どのファイルを選んだか」を見直せることが目的です。画面幅が狭いときは周囲の要素と重ならず、必要に応じて縦へ並べられる構成にします。

PDFは投稿本文へ埋め込み、記事を開いた場所から内容を確認できるようにしました。それと同時に、本文の先頭へPDFの表示名を載せました。

埋め込みだけでは、読み込み前や小さな画面で何の資料か分かりにくいことがあります。ファイル名だけのリンクでも、通知本文との関係が見えにくくなります。表示名と閲覧部分を近くに置くことで、内容を判断してから開けます。

表示名は、読む人が内容を区別できる文字列にします。内部管理用の分かりにくい名前を、そのまま大きく見せる前提にはしません。

運用中、一つの通知へPDFを2個付けて発行しました。記事の添付としては両方確認できましたが、本文先頭にPDFの名前が表示されませんでした。

調べると、添付を作る処理は複数ファイルを扱えていても、本文先頭の表示名を作る処理が1ファイル前提になっていました。アップロードの成功だけを確認していたため、読む側の表示で問題が残っていた形です。

そこで、この通知ではPDFを最大2個まで選べることを明確にし、選択した各PDFの表示名を本文へ並べるようにしました。表示名用のスタイルも加え、どのPDFが添付されているかを本文で確認できるようにしました。

複数添付に対応するときは、ファイル入力の数だけでなく、表示名、埋め込み、開くリンク、並び順まで同じ個数で出るかを見る必要があります。