■ よくあるお悩み
「HTML（WordPress）内に、PDFをダウンロードするリンクを設置したいのだけど、どう実装すればよいのだろう？」
というお悩み。
PDFをダウンロードさせるリンクを設置する頻度は少ないため、私自身、実装方法を忘れて、毎回のごとく調べるため、自分用の備忘録も兼ねて記事を書きました。
PDFファイルをダウンロードする方法は大きく分けて2つです。
１.リンクをクリックして、ダウンロードする方法
２.リンクをクリックして、ファイルの内容を確認してダウンロードする方法
＜目次＞
リンクをクリックして、ダウンロードする方法
まず１つ目の、リンクをクリックして、ダウンロードする方法です。
サンプルコードは以下になります。
<a href="pdf/dammy.pdf" download>PDFをダウンロードする</a>
href属性には、PDFファイル（〇〇.pdf）をアップロードしている場所までのパスを記述します。
a要素に、download属性を追加で記述します。
ファイル名を指定して、リンクをクリックして、ダウンロードする方法
例えば、アップロードしたPDFのファイル名は、【 dummy.pdf 】だけど、ダウンロードさせたいのPDFファイル名は【 ダミー.pdf 】にしたい場合。
ようするに、アップロードしたPDFのファイル名とダウンロードしたときのPDFのファイル名を変更したい場合。
このような場合は、download属性に【 任意の名前.pdf 】というように記述します。
サンプルコードは以下になります。
（アップロードしたPDFのファイル名は【 dummy.pdf 】、ダウンロードしたときのPDFのファイル名は【 ダミー.pdf 】
<a href="pdf/dammy.pdf" download="ダミー.pdf">PDFをダウンロードする</a>
リンクをクリックして、ファイルの内容を確認して、ダウンロードする方法
次に２つ目の、リンクをクリックして、ファイルの内容を確認して、ダウンロードする方法
サンプルコードは以下になります。
<a href="pdf/dammy.pdf" target="_blank" rel="noopener">PDFをダウンロードする</a>
一度PDFの内容を表示させるため、二度手間ですが、「どんな内容が記載されているのか？」がユーザーに確認していただくことができます。
私が受けている制作案件では、基本的に【 download属性を指定しない（一旦、PDFへリンクさせる） 】ようにしています。
ユーザー視点で考えた時に、PDFファイルをダウンロードする前に「どのようなPDFファイルなのか？」を確認したい場合もあるため、このようにしております。
【 target=”_blank” 】を使用する時の、１つの注意点
【 target=”_blank” 】を使用する際は、セキュリティーの観点から、【 rel=”noopener” 】をセット記述しましょう。
「【 rel=”noopener” 】って何？もう少し深く知りたい！」や「【 rel=”noopener noreferrer” 】ではないの？」という悩みは、以下の記事を参考にしてください。
rel=”noopener noreferrer”の意味とアフィリエイト広告への影響
私の方針としましては別タブで開く際は、WordPressで【 リンクを新しいタブで開く 】で設定した際に、自動付与される【 rel=”noopener” 】に合わせております。
（＊検証環境 ・WordPress 6.0.2 ・旧エディター（クラシックエディター））
