WordPressのコードエディターで、ダウンロードできるファイルを掲載する方法_100143

「ビジュアルエディター」や「メディアライブラリ」また「プラグイン」を使わなくても、配布したいプログラムなどを「コードエディター」で記載して掲載することができます。


まず最初に、配布したいファイルのアップロード方法や、コードを書くときのディレクトリの記載方法などは画像や動画と同じなので、 こちらの記事でご確認お願いします。

WordPressでメディアライブラリを使わずに、コードエディターで画像や動画を掲載する方法


配布したいファイルをアップロードできたら、次のコードを記載します。

<a href="/フォルダー名/ファイル名(拡張子)" download="">ダウンロード</a>

ここでは例として「files」というフォルダーの中に作った「wordpress」というフォルダーの中に「新しいテキスト」というファイル名の「メモ帳」のテキストをアップロードしてみました。
その場合のコードが以下となります。

<a href="/files/wordpress/新しいテキスト.txt" download="">ダウンロード</a>

これを掲載してみると…

 こちらの「ダウンロード」という文字をクリックしていただくと、中に「テスト」とだけ書かれた「新しいテキスト」が保存されると思います。

コードの記載は以上で完了なのですが、これでは少し寂しいので次は「ダウンロード」という文字をボタンにしてみたいと思います。


「ダウンロード」ボタンを掲載する

少しコードが増えますが、このように記載します。

<div class="wp-block-file">
<a href="フォルダー名/ファイル名(拡張子)" class="wp-block-file__button" download="">ダウンロード</a>
</div>

先ほどのテキストファイルを例にすると このようになります。

<div class="wp-block-file">
<a href="/files/wordpress/新しいテキスト.txt" class="wp-block-file__button" download="">ダウンロード</a>
</div>

またこれを掲載してみると…

同じファイルのダウンロードになりますが、ボタンにするだけで随分イメージが変わると思いますので、是非活用してみてください♪

Comment