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

Programming

今回は、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をアップロードする

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

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

PDFのリンクを確認

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

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

テキストリンクの作成

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

これで完了です。

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

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

ダウンロード

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


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

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

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

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

この記事を書いた人
KEITO

AI × IT × WEB3|関東在住。本職はディレクター 。AIを活用してビジネス開拓。仕事の依頼はTwitterからお願いします。YouTube、Twitter、Instagramもお願い致します。

Programming
この記事を共有する
スポンサーリンク
スポンサーリンク
KT LIFE
スポンサーリンク

暗号資産投資するなら以下

Bybit

国内人気No.1!屈強なサーバー/信頼性抜群!トレーダー御用達の取引所。

通貨数338種以上
レバレッジ最大100倍
現物取引手数料Maker:0%〜0.1%
Taker:0.02%〜0.1%
先物取引手数料Maker:0%〜0.01%
Taker:0.03%〜0.06%
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり・JPY利用可
特典下記から登録で初回ボーナスあり
登録リンクBybitへの登録は こちら
招待コード22295
レビュー記事レビュー記事は こちら
BigBoss&CRYPTOS

最大レバレッジ1111倍・日本円換金ルート

通貨数BigBoss:15種以上
CRYPTOS:15種以上
レバレッジ最大1111倍
スポット手数料Maker:0.02%〜0.18%
Taker:0.05〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設少し敷居が高い
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクBigBossへの登録は こちら
招待コード6690951
レビュー記事レビュー記事は こちら
Nexo

高APYでのステーキング&レンディング

通貨数60種以上
レバレッジ
スポット手数料Maker:0.04%〜0.20%
Taker:0.03%〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクNexoへの登録は こちら
招待コード
レビュー記事レビュー記事は こちら

他おすすめ取引所はこちら

タイトルとURLをコピーしました