WordPressの記事に自動でPDFのアイコンを表示させる記事更新日2011年5月30日

WordPressは、管理画面からpdfをアップロードすると記事内にテキストリンクが現れ、ダウンロードできるようになりますが、テキストリンクだけなので下記のようにとてもさびしい感じになります。

Webコンサルティングの手引き

今回はテキストだけでなく左側にPDFのアイコンを入れたいというクライアントのご要望がありました。昔はプラグインで実現できましたが今はWordpressのバージョンアップで使えなくなりましたので、CSSにて実現をしてみました。

下記のような感じになります


Webコンサルティングの手引き

 

導入手順

 
①CSSに以下のソースコードを追加します。

a[href $=’.pdf’] {
font-size: 14px;
background:url(images/pdf.png) no-repeat;
margin-top: 30px;
padding-left: 60px;
padding-top: 23px;
padding-bottom: 130px;
}
a[href $=’.pdf’] a {
color:#0000FF;
}
a[href $=’.pdf’] a:hover{
color:#0000FF;
text-decoration:underline;
}

②PDFアイコンを『名前をつけて画像を保存』する。※ファイル名はpdf.png。
下記のPDFアイコン画像を現在使用中のテーマのimageフォルダに入れる。
 

③あとは、管理画面からpdfをアップロードすると自動でPDFアイコンが出現します。Wordの場合は、a[href $=’.pdf’] の.pdfの箇所を.docに変更。エクセルの場合は.xlsに変更してください。※各アイコンは用意してください。