【WordPress】資料ダウンロードページはDownload Monitorで決まり！【カスタムCSSサンプルあり】｜ProgLearn

みなさん、こんにちは。どんぶラッコです。

本日は、Wordpressでファイルダウンロードページを作成する時に使えるプラグイン、Download Monitor をご紹介します！

簡単設定でファイルの一覧を作成することができるのでかなり便利ですよ！

ということで、早速手順を確認していきましょう♪

インストール・ファイルアップロード

上記サイトでダウンロードするか、プラグインの追加ページから「Download Monitor」と検索してインストールします。

すると、ダウンロードというメニューが追加されます。

あとは、「新規作成」からどんどんファイルを追加していくだけです！

ダウンロード可能なファイル/バージョンからファイルを追加を選択します。

すると、このような画面が表示されます。既にファイルがアップロード済みの場合はファイルのURLにURLを入力するだけで完了です。

それ以外の場合は、「ファイルをアップロード」を選択してください。

完了したら記事を保存しましょう。

ダウンロード内の「全てのダウンロード」を表示すると、アップロードされたファイルが確認できます。次のファイル表示で使用するので、IDをメモしておきましょう。

ファイルを表示する

ここまでできたら表示させるまであと一歩です！ download と downloads というショートコードが発行されているので、それを適用した固定ページを作成しましょう。

固定ページを新規作成し、ID の部分に先ほどメモしたIDを貼り付けます。

[download id="ID"]

(例) [download id="111"]

固定ページをプレビューして、ダウンロードリンクが表示されていれば成功です！

レイアウトをいじろう

でも今だとダウンロードリンクだけ…サムネイルも表示したい…というあなたに朗報です！

実は、レイアウトをデフォルトで用意してくれています！

早速設定してみましょう。

ダウンロード → 設定 → デフォルトテンプレートを変更します。

サムネイルがあるのは

ボックス-ボックスサムネイル、タイトル、数、ファイル名とファイルサイズを表示します

だけなので、そちらを設定します。

表示を確認してみましょう。

グランくん

だ…ダサい…

ということでカスタムCSSを当てて以下の形に整形しました。

そのCSSを貼っておくので、参考にしてみてください！

/* ダウンロードファイルを横並び表示する */
.dlm-downloads {
	display: flex;
	flex-wrap: wrap;
}

/* シャドウをオフにする */
.dlm-downloads .download-box {
	box-shadow: none;
	border: 0px;
}

/* ファイル名表示の設定 */
.dlm-downloads .download-box .download-box-content h1{
	display: table-cell;
	height: 3rem;
	vertical-align: middle;
	font-size: 0.8rem;
}

/* サムネイルを一定の大きさで表示する */
.download-box img.wp-post-image {
	border: 1px #ccc solid;
	height: 141px;
	object-fit: cover;
}

/* ダウンロード数カウントを非表示に */
.download-box .download-count {
	display: none !important;
}

/* pタグpaddingの修正 */
.download-box-content p {
	padding-bottom: 0px !important;
}

/* ダウンロードボタンのスタイル */
.download-button {
	border-radius: 50px !important;
	background-color: #3C67A2 !important;
	background-image: none !important;
	font-size: 0px !important;
	box-shadow: none !important;
	text-shadow: none !important;
	border: 0px !important;
	line-height: normal !important;
}

/* ダウンロードボタンの文言をbeforeを使って無理やり書き換える */
.download-button:before {
	font-size: 14px !important;
	font-weight: bold;
	color: #fff;
	content: 'ダウンロード';
}

/* 余計な要素の削除 */
.download-button small {
	display: none !important;
}

めっちゃ便利です！みなさんも使ってみてください♪