ワードプレスでPDFのダウンロードリンクを作成する方法

WordPress

今回は、WordPressの標準エディタであるGutenbergを使ってPDFのダウンロードリンクが付いたボタンの作成方法を紹介します。

ファイルブロック

PDFリンクボタンを作成する最も簡単な方法はファイルブロックです。

ブロック選択→一般ブロック→ファイルを選択してファイルブロックを展開します。

そこにPDFをデスクトップからドラックして持ってくるorメディアライブラリからPDFを選択します。

次にブロックナビゲーションの「･･･」をクリックして「HTMLとして編集」をクリック。aタグの最後に「download=""」と入れれば完成です。

<div class="wp-block-file">
<a href="https://kt-life.net/wp-content/uploads/2020/03/PDFテスト.pdf" download="">PDFテスト</a>
<a href="https://kt-life.net/wp-content/uploads/2020/03/PDFテスト.pdf" class="wp-block-file__button" download="">
ダウンロード</a>
</div>

実際の見た目は下記のようになります。

PDFテストダウンロード

テキストリンクのみの場合

テキストリンクのみが良い場合は下記の手順でリンクを作っていきます。

PDFをアップロードする

WordPressではPDFも、画像と同じ様にメディアライブラリからアップロードする事が出来ます。

メディアライブラリ→新規追加からデスクトップ上にあるPDFをドラックして持っていくとアップロードする事が出来ます。

PDFのリンクを確認

メディアライブラリからアップロードしたPDFの詳細を確認し、下記の部分を見れば、そのPDFのURLを確認する事が出来ます。

これをコピーしときます。

テキストリンクの作成

あとは通常のテキストリンクを作成するのと同様に、先程コピーしたPDFのURLをテキスト上にペーストします。その後にaタグリンクの後ろに「download=""」を入れるだけです。

これで完了です。

PDFダウンロードボタンをお洒落にしたい場合

ダウンロードボタンをお洒落にしたい場合は、classの「wp-block-file__button」にstyleの追加をすれば可能です。

ダウンロード

上記の様なボタンデザインの見本を下記のページで作ってみたので参考にしてみて下さい。

以上が「ワードプレスでPDFのダウンロードリンクを作成する方法」でした。

企業系のコーポレートサイトではPDFなどの書類があったページが多くあるのでPDFダウンロードボタンはよく使うかと思います。

今回紹介した方法は非常に簡単なので運用担当者は是非使ってみて下さい。

下記の記事では基本的なGutenbergの使い方をまとめています。合わせてどうぞ。

2020年3月30日WordPressGutenberg,WEB,WP

Posted by KT