備忘録的に…、CSSに入れておくとファイルをアップロードした時に、勝手にアイコンを表示してくれる方法です。

/* ZIPファイル */
a[href$=".zip"]:before{
  content:"f1c6";
  font-family: FontAwesome;
  margin-right:1em;
}

/* PDFファイル */
a[href$=".pdf"]:before{
  font-family: FontAwesome;
  content:"f1c1";
  margin-right:1em;
}

/* ワードファイル */
a[href$=".doc"]:before{
  content:"f1c2";
  font-family: FontAwesome;
  margin-right:1em;
}

/* エクセルファイル */
a[href$=".xls"]:before{
  content:"f1c3";
  font-family: FontAwesome;
  margin-right:1em;
}
 
/* メールを送る */
a[href^="mailto:"]:before{
  content:"f003";
  font-family: FontAwesome;
  margin-right:1em;
}

また、枠線を入れたい時には

padding: 5px 10px;
border: 1px solid #CA3445;

を足すことにより目立ちます。

これだけで、ファイルをアップロードしておくと… ↓ こんな風に表示してくれます。

xlsx_test

フリー画像などアイコンを使いたい時には

background: url(img/excel-icon.png) no-repeat left center;

画像ファイル名は架空のものです。imgはご自身のテーマの画像フォルダを指定して下さい。

アレンジが色々ききそうですね。

ファイル数をカウントしたい時や、ダウンロードファイルをコントロールしたい時は、Pluginの「WordPress Download Manager」や「Delightful Downloads」を使った方が良い場合があるので、適宜ご自分の目的に合ったものを使用して下さい。