WordPress管理画面からPDFをアップした投稿記事にPDFアイコンを付けて表示させる方法

  • 15175
    views
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

PDF アイコン画像を用意して、あとはCSS ファイルのカスタマイズするだけで、WordPress 投稿記事にPDFアイコンを付けて表示できるようです。

かなり便利ですのでシェアさせていただきました。

(1)PDFアイコン画像の用意

自作、あるいはフリー素材などでPDF アイコン画像を用意してサーバへアップします。


(2)CSSファイルのカスタマイズ

WordPressの記事に自動でPDF のアイコンを表示させる の記事でも紹介されていましたが、CSSファイルに以下のような記述を追加します。
a[href $='.pdf'] {
    background:url(../img/icon-pdf.png) no-repeat right;
    padding-top: 0;
    padding-bottom: 0;
    padding-right:20px;
    padding-left: 0;
    overflow:hidden;
    margin-top: 0;
    margin-left:0;
    text-decoration:none;
}

a[href $='.pdf'] a {
    text-decoration:none;
    color:#00a0ff
}

a[href $='.pdf'] a:hover{
    text-decoration:none;
    color:#00a0ff
}
PDF アイコン画像のリンク先は、ご利用の環境に合わせて変更します。

また、PDF アイコンをテキストの右側に寄せたい、などの場合は、CSS側でレイアウトを補正してあげます。※今回は、アイコンはテキストリンクの「右に寄せる」スタイルです。

ただし、a[href $=’.pdf’]はIE6 には対応してい ないので、どうしてもIE6 対応が必要な場合は
*html a	{
    background:url(../img/icon-pdf.png) no-repeat right;
}
をベースに補正が必要になります。

※上記のままだと、リンクに全部PDF アイコンがついてしまうので補正が必要です。。。


(3)実際にPDF をアップして、フロント画面に出力してみた

実際にWordPress管理画面よりPDF ファイルをアップしてみます。

メディアアイコンをクリックして、PDF ファイルをドラッグ&ドロップでほりこんで、PDF のタイトルにテキストを流し込みます。
WordPress管理画面からPDFをアップした投稿記事にPDFアイコンを付けて表示させる方法

これで記事を公開して、フロント画面でどのようにみえるかと言うと、こんな感じですね♪
WordPress管理画面からPDFをアップした投稿記事にPDFアイコンを付けて表示させる方法

他にも Word、Excel などのアイコン表示も可能なようですので、この辺は是非またやってみたいと思います。

  • 15175
    views
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

この投稿と関連する記事一覧

この記事に関するコメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください