Rainbow Planet (GT×IT×SP×SA)

IT技術を分かりやすく簡潔にまとめることによる学習の効率化、また日常の気付きを記録に残すことを目指します。

01_IT技術 (Technology) 06_WordPress

WordPressの記事でファイルをダウンロードできるようにする方法+ダウンロードボタンの設置方法

投稿日:

(0)目次&概説

(1) 記事の目的
 (1-1) 目的
(2) 実施手順
 (2-1) 前半部:ファイルをメディア登録する手順
 (2-2) 後半部:記事作成とファイルを添付する手順
(3) おまけ:ボタン形式にする方法
 (3-1) ボタン方式にする手順

(1) 記事の目的

(1-1) 目的

・Wordpressの執筆記事にファイル(例えばExcel)を添付して、訪問者がダウンロードできるようにする方法を紹介します。
・またダウンロード「リンク」ではなく「ボタン」にする方法も紹介します。

(図111)最終イメージ

目次にもどる

(2) 実施手順

(2-1) 前半部:ファイルをメディア登録する手順

まずは記事に添付する対象のファイルをWordpressに登録します。

①Wordpressダッシュボードの左ペインメニューで「メディア」を選択します(※メディア=画像、ファイルなどを登録するための機能です)

(図211)①

②アップロードしたいファイルを画面エリアにドラッグ&ドロップします。

(図211)②

③ファイルが登録された事を確認します。
上手く登録できていれば、アップロードしたファイルのアイコンが表示されているはずです。

(図211)③

目次にもどる

(2-2) 後半部:記事作成とファイルを添付する手順

次にテスト記事を作り、そこにファイルを挿入(添付)する方法を紹介します。

①Wordpressダッシュボードの左ペインメニューで「投稿」から「新規追加」を選択します(※新規に記事を作るためのボタンです)。

(図221)①

②タイトルと本文を入力します。
今回はテストなのでダミーデータを入力しています。

(図221)②

③先ほど登録したファイルを挿入するために、パーマリンク下部にある「メディアを追加」のボタンを押下します。

(図221)③

④「メディアを追加」画面で先ほど登録したファイル(RP-IT00xx_本文雛形.xlsx)を選択します。

(図221)④

⑤結果として、ファイルをダウンロードするためのリンクが作成されます。

<a href="http://rainbow-engine.com/wp-content/uploads/2020/07/RP-IT0108_Wordpress_HowToAttachExcel/RP-IT00xx_本文雛形.xlsx">RP-IT00xx_本文雛形</a>

(図221)⑤

⑥右ペインの「プレビュー」を表示する事で、ページのプレビューを表示できます。

(図221)⑥

⑦プレビューページにて貼ったリンクをクリックする事で、ファイルをダウンロードできます。

(図221)⑦

(図221)⑧

目次にもどる

(3) おまけ:ボタン形式にする方法

(3-1) ボタン方式にする手順

上記の手順でダウンロード出来るようにはなりましたが、リンクだと少しリッチさに欠けますし、一見すると他ページへのURL等に見えてしまうため、差別化のためにボタンにしてみます。

上記の手順で作成されたリンクを、ボタンのHTMLタグで挟む事でボタンからのダウンロードが実現できます。

①ボタンのタグで挟んだコマンドで差し替えます。

<button type="button">
<a href="http://rainbow-engine.com/wp-content/uploads/2020/07/RP-IT0108_Wordpress_HowToAttachExcel/RP-IT00xx_本文雛形.xlsx">ダウンロード:RP-IT00xx_本文雛形</a>
</button>

(図311)①

②再度プレビューを確認すると、今度はボタンになっています。

(図311)②

③ボタンを押下するとダウンロードが行われます。

(図311)③

目次にもどる

Adsense審査用広告コード


Adsense審査用広告コード


-01_IT技術 (Technology), 06_WordPress

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

データベースのインデックスの基本と種類とOracleやSQL Serverでの特長について

(0)目次&概説 (1) データベースのインデックスとは (2) インデックスはどのような場面で使う? (3) インデックスの主要な方式  (3-1) B木  (3-2) B+木  (3-3) ビット …

Linux基礎コマンド(第2回) ls・mkdir・cp・mv

初めてLinuxを触る人向けにTeraTermのログイン方法からコマンドを入力する方法まで数回にわたり解説していきます。本記事はその第2弾です!第1弾の記事はこちら(第1弾)です。 (0)目次&概説 …

ファイル転送や読み込みが遅いNW問題時に調査したことやパフォーマンスモニタの基本操作

(0)目次&概説 (1) ネットワークが遅い時  (1-1) 概要  (1-2) 想定シーン (2) ネットワークが遅い時の調査の切り口  (2-1) 転送速度のチェック  (2-2) LANケーブル …

JFreeChartで描画したグラフをJSP/Servlet画面に表示する方法

(0)目次&概説 (1) 記事の目的  (1-1) 目的 (2) 表示方法の概要  (2-1) 表示の仕組み  (2-2) 実装の手順 (3) サンプルプログラム  (3-1) JSPのサンプルプログ …

OracleDBのexpdp/impdpで発生したエラー対処[ORA-39002,ORA-39070,ORA-39087]&[ORA-39083,ORA-01658]

(4) エラー対応  (4-1) エラー1:ORA-39002,ORA-39070,ORA-39087   (4-1-1) 発生状況・エラーメッセージ   (4-1-2) 原因   (4-1-3) 対 …

  • English (United States)
  • 日本語
Top