WordPressで添付ファイルのアイコンを表示できないか、と読者からよく質問を受けます。ファイルアイコンを追加することで、ユーザーが一目でダウンロードするファイルの種類を識別することができます。
添付ファイルアイコンを使用することは、サイトをユーザーフレンドリーにする簡単な方法です。訪問者がコンテンツをより理解しやすくなる視覚的な手がかりが加わります。
WPBeginnerでは、ユーザーエクスペリエンスを向上させるために、サイト全体で様々なアイコンを使用しています。ソーシャルメディアのアイコンから添付ファイルまで、アイコンはナビゲーションをより分かりやすく、直感的にします。
このガイドでは、WordPressで添付ファイルアイコンを簡単に追加する方法をご紹介します。この手順で、サイト上のファイルの種類に一致したファイルアイコンを表示することができます。

WordPressで添付ファイルのアイコンが必要なとき
WordPressの初期設定では、画像、音声、動画、その他のドキュメントのアップロードが可能です。WordPressでアップロードできるファイルの種類を有効化することもできます。
メディアアップローダーでファイルをアップロードし、投稿やページに追加すると、WordPressはそのファイルを画像、音声、動画、またはサポートされているファイルフォーマットであるかのように埋め込もうとします。
それ以外のファイルについては、ファイル名をプレーンテキストで追加し、ダウンロードまたは添付ファイルのページにリンクするだけです。

上のスクリーンショットでは、PDFとDocxファイルを追加しました。しかし、ユーザーがダウンロードするファイルの種類を推測することは困難です。
さまざまな種類のファイルを定期的にアップロードする場合は、リンクの横にアイコンを表示するとよいでしょう。そうすれば、ユーザーは探しているファイルタイプを簡単に見つけることができます。
それでは、WordPressでファイルタイプ別に添付ファイルアイコンを追加する方法を見ていきましょう。
方法1:プラグインを使ってWordPressに添付ファイルアイコンを追加する
ファイルタイプのアイコンを追加する最も簡単な方法は、MimeTypes Link IconsのようなWordPressプラグインを使用することです。これは無料のプラグインで、とても使いやすく、さまざまなファイルタイプのアイコンを追加することができます。
最初に行う必要があるのは、MimeTypes Link Iconsプラグインをインストールして有効化することです。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
ℹ️注意:プラグインのダウンロードページには、しばらくテストや更新が行われていないことが表示されている場合があります。私たちのデモサイトでテストしたところ、意図したとおりに動作することがわかりました。WordPressのバージョンでテストされていないプラグインのインストールに関する投稿をお読みください。
有効化した後、Settings ” MimeType Iconsページでプラグイン設定を行う必要があります。

このプラグインでは、アイコンのサイズ、PNGとGIFのアイコンを選択することができます。次に、アイコンの配置とアイコンを表示するファイルタイプを選択する必要があります。
その後、スクロールダウンしてサイトに表示するアイコンを選択できます。例えば、PDF、PPT、CSV、AVI、RPM、TXTなどのファイルタイプのアイコンがあります。

次に、高度な設定セクションまでスクロールダウンします。
ここでは、ダウンロードリンクの横にファイルサイズを表示するオプションがあります。リソースを消費する可能性があるため、初期設定ではオフになっています。

設定が完了したら、忘れずに「変更を保存」ボタンをクリックして設定を保存してください。
投稿やページを編集して、メディアアップローダーを使ってファイルのダウンロードリンクを追加できるようになりました。投稿をプレビューすると、ダウンロードリンクの隣にファイルアイコンが表示されます。

方法2:WordPressの添付ファイルにアイコンフォントを使う
この方法では、添付ファイルリンクの横にアイコンを表示するためにアイコンフォントを使用します。
最初に行う必要があるのは、Font Awesomeプラグインをインストールして有効化することです。WordPressプラグインのインストール方法については、こちらをご覧ください。
有効化した後、WordPressダッシュボードからSettings ” Font Awesomeページに移動できます。ここで、プラグインの一般的な設定を編集することができます。例えば、プロとフリーのどちらのアイコンを使用するかを選択することができます。

次に、添付ファイルリンクを追加したい投稿やページを編集します。
コンテンツエディターに入ったら、表示したいアイコンのHTMLコードを入力する必要があります。
そのHTMLコードを見つけるには、Font Awesomeアイコンライブラリーのサイトをご覧ください。検索バーでアイコンを検索し、画像をクリックしてください。

次に、アイコンのさまざまなバリエーションとそのHTMLコードをご覧ください。
コードをクリックしてコピーしてください。

その後、サイトのWordPressコンテンツエディターに戻り、「+」記号をクリックしてカスタムHTMLブロックを追加します。
ここから、アイコンのコードをブロックに貼り付けるだけです。

完了したら、ページを公開または更新してください。
サイトにアクセスすると、添付ファイルタイプに新しく追加されたアイコンが表示されます。

ボーナス:デジタルファイルを販売してオンラインで稼ぐ
添付ファイルタイプのアイコンを追加する方法がわかったところで、さらに一歩進んで、さまざまなファイルをデジタルダウンロードとして販売することができます。これにより、オンラインでお金を稼いだり、無料のリソースと引き換えにユーザーにニュースレターへの登録を促したりすることができます。
デジタル製品を販売する最善の方法は、Easy Digital Downloadsを使用することです。Easy Digital Downloadsは、WordPressのための最高のeコマースプラットフォームのひとつで、使い方も設定もとても簡単です。
私たちもいくつかのビジネスで利用しています。Easy Digital Downloadsのレビューでさらに詳しくご紹介しています。
Easy Digital Downloadsは、PayPalやStripeなどの様々な決済サービスと簡単に統合できます。

さらに、売りたいデジタルファイルをアップロードするだけで、オンラインでお金を稼ぎ始めることができる。
このプラグインでは、タイトルや説明などの詳細を追加したり、ダウンロードの価格を設定したり、ダウンロード画像を選んだりすることができます。

詳しくは、WordPressでデジタルダウンロードを販売する方法をご覧ください。
ボーナス・リソース
以下は、WordPressサイトやメディアを管理する際に役立つその他のリソースです:
- WordPressを文書管理やファイル管理に使う方法
- WordPressで保存した下書きを検索する方法(初心者ガイド)
- WordPressサイトにPDFファイルをアップロードする方法
- 複数のWordPressサイトを連結する方法(3つの方法)
WordPressで添付ファイルアイコンを追加する方法について、この記事がお役に立てれば幸いです。WordPressのブログ記事にPDFやスプレッドシートなどのファイルを埋め込む方法や、WordPressのアクティビティログとトラッキングプラグインのエキスパートによるベストセレクションもご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Isha Singh
I am not familiar with the WordPress. But while I am going through your post, It seems like I know everything about the WordPress.
Enc
You are seriously recommending a plugin that hasn´t been updated for a year?
WPBeginner Support
Yes, we are. Please see our article should you install plugins not tested with your WordPress version for more on this topic.
Admin