初めまして、入社したてホヤホヤでピカピカ?の新人Webデザイナーのtanakaです。
今回はWordPressのプラグインであるDownload Manager（ダウンロードマネージャー）を使って大量のファイルダウンロードリンクをリスト形式で並べる方法をご紹介します。
まずはDownload Managerをご説明します。
既に機能や基本操作を知っている方やインストール済みの方は読み飛ばして『ファイルアップロードする方法』以降にお進みください。
応用編であるショートコードの記載でカテゴリー分けされ、ツリー形式で表示される方法は次回の記事をご参照ください。
CONTENTS
Download Managerとは
WordPressにファイルのダウンロードと管理機能を持たせることができるWordPressのプラグインです。
どのようなサイトに最適か
・法人向けに大量のファイルデータを配布したいとき・・・
・バンド、アイドル等のサイトで音源や動画データを配布したいとき・・・
・製品の説明書やカタログ、お店のクーポン券などを配布したいとき・・・
・会員限定でファイルを配布したいとき・・・
・配布ファイルのダウンロード数の統計をとりたいとき・・・
などなど、挙げたらきりがありません。（笑）
とにかく色々用途があり、使いようによってはマーケティングなどにも役立つとても便利なプラグインだと思います。
主な機能
◆WordPress管理画面からできること
・ファイルデータのアップロード
・アイコンの設置
・ダウンロード数の確認
・ダウンロードできる数の制限
・ダウンロードアクセス制限
など….
◆設置したサイトからできるようになること
・ファイルデータのダウンロード
・ダウンロード数の表示
など….
インストール方法
①WP管理画面から「プラグイン」にカーソルを合わせ、「新規追加」をクリックします。
②検索バーから「download managager」と検索しインストールします。
③「有効化」ボタンをクリックします。
④下記のように「Downloads」が項目に追加されたら完了です！
ファイルアップロードする方法
まずはファイルをアップロードします。
①「Downloads」をクリックし「Add New」をクリックします。
②タイトルを入力します。
③「ファイルを選択」をクリックし、アップロードしたいファイルを選択します。
④「公開」ボタンをクリックします。
⑤「Downloads」の一覧に登録されたことを確認し、Short-codeをコピーします。
⑥アップロードしたいページの任意の箇所にペーストし更新します！
すると下記のように反映されます！
ここまでは基本的な操作であるダウンロードリンクの設置方法のご紹介でした。
リスト形式に並べる方法
ただ先ほどの手順で並べていくと下図のようになります。
項目がぎゅうぎゅうで圧迫感があります・・・（笑）
ここからが本題です！
ショートコードをhtmlとcssでコーディングして整えていきます。
ここからhtmlとcssの知識が必要になります。
例えば下記のようにコーディングします。
html(一例)
<ul class="short_cord"> <li>[ショートコード]</li> <li>[ショートコード]</li> <li>[ショートコード]</li> <li>[ショートコード]</li> <li>[ショートコード]</li> </ul>
※管理画面からリンクを設置した固定ページまたは投稿ページでコーディングします。
css(一例)
.short_cord {
border-bottom: 1px solid #000;
list-style-type: none;
margin-bottom: 20px;
padding-bottom: 10px;
}
・・・するとこのように並べることができます。
もっとシンプルに並べたいっていう場合は下図のようにもできます。
アイコンとサイズを隠すこともできました。
css(一例)
.short_cord {
border-bottom: 1px solid #000;
list-style-type: none;
margin-bottom: 20px;
padding-bottom: 10px;
}
/*「Download」の文字を横並びにします*/
.short_cord li .media-body div {
display: inline-block;
}
/*アイコン、サイズ表示を非表示にします*/
.short_cord li .w3eden .pull-left,
.short_cord li .w3eden .label {
display: none;
}
その他にアレンジしたい場合はブラウザのデベロッパーツールを使い、どの要素がどこに関係して表示されているかという構造を理解すれば色々と組み立てることができます。
実は今回ご紹介した以外により簡単にリスト形式に並べる方法があります。その方法は次回ご紹介させていただきます。
おわりに
ここまで読んでくださりありがとうございました。
WordPressを本格的に触り始めてまだ3ヶ月ぐらいですが、今回の記事のように色々カスタマイズできる・できるようになることに面白みを感じます。
WordPress初心者の方など是非お試しください。
また、次回後編では今回ご紹介したものよりとても簡単なショートコード一発でリスト化する方法をご紹介します。
＊＊＊＊＊＊＊注意事項＊＊＊＊＊＊＊
※WordPressやプラグインのバージョンが大きく異なると仕様の関係で手順などが変わったりし、ご紹介した手順と異なる場合がありますのでご注意ください。
【今回使用したバージョン】
・WordPress 4.7.1
・Download Manager ver2.9.4
