【簡単です】ダウンロードボタンの設置方法(ブロックエディター)

WordPress
スポンサーリンク

当ブログは収益を目的としたアフィリエイト広告およびアドセンス広告を使用しており、記事内にそれらの広告が含まれる場合があります。

ファイルブロックを使って、サイト内に「ダウンロードボタン」を設置する方法です。

PDFやzipなどのメディアファイルを1クリックでダウンロードできるようにするために、サイト内にボタンを設置してあるサイトをよく見かけます。

以前にこれをプラグインで設置しようと試みるも、ボタンが正常に動作せず諦めていました。

つい最近になって知ったことですが、WordPressのブロックエディター(Gutenberg)には、ダウンロードボタンを設置する機能が標準で備わっています

今回はその方法について記事にしました。

ダウンロードボタンを設置する方法

ダウンロードボタンを設置するためには、「ファイルブロック」を使用します。

ここに任意のファイルをアップロードします。(またはメディアライブラリから選択)

PDFファイルの場合、ダウンロードボタンなど3つのパーツを含むブロックが、記事内へ自動的に埋め込まれます。

①プレビュー画像

編集画面の右パネルで、表示・非表示や画像の高さを変えることができます。

このプレビューが不要な場合は、「インライン埋め込みを表示」をOFFにします。

②ファイル名

ページを公開後にこの文字列をクリックすると、ブラウザ上でファイルの内容が表示されます。

ここを任意の文字列に書き換えたり、この文字列が不要であれば消してしまっても問題ありません。

③ダウンロードボタン

ページを公開後にこのボタンをクリックすると、ファイルのダウンロードが開始されます。

(下画像はパソコンのGoogle Chromeでダウンロード中のもの)

ボタンの表示・非表示を変えたり、「ダウンロード」を別の文字列に書き換えたりすることも可能です。

ただ 今のところデザインをカスタマイズする機能は備わってないので、そこはcssで弄るしかなさそう。

アップロード可能なファイル形式

ドキュメントファイルはPDFのほかにWordExcelPPTは問題ありませんでした。

音声はMP3、画像はPNGJPEGを確認しましたが、いずれも大丈夫でした。

(※その他の形式は未確認ですが、WordPressに対応していれば問題ないと思われる。)

ダウンロードボタンが正常に動作しない?!

設置した画像ファイルのダウンロードボタンをクリックしたときに、拡大表示になってしまい、ダウンロードが実行されないことがあります。(このブログのWordPressテーマは『Cocoon』です。)

そのような場合、「Cocoon設定」から「画像」のタブの「画像の拡大表示」を「なし」にしておく必要があります。

zipファイルは直接アップロードできない?!

zipファイル(圧縮ファイル)を編集画面上でアップロードしようとすると、「このファイルタイプをアップロードする権限がありません。」の表示が出てしまいます。

zipファイルは埋め込む作業の前に、あらかじめメディアライブラリにアップロードしておく必要があるようです。

まとめると…

zipファイルは、まずメディアライブラリのほうにアップロードし、編集画面ではそこから選択して埋め込む。

zipファイルはどうやって作る?

念のため、Windowsでのzipファイル(圧縮ファイル)の作成方法について。

(※アップロードしたいファイルを、事前に任意のフォルダ内に格納しておきます。)

圧縮したいフォルダを右クリックし、「送る」「圧縮(zip形式)フォルダー」をクリックします。

すると、フォルダがある同じ場所にzipフォルダが作成されます。

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