如何在WordPress中添加附件文件类型图标

Have you seen websites that show file icons next to the download links? Recently one of our readers asked if it was possible to display attachment file icons in WordPress. Yes it is, and it’s quite easy. In this article, we will show you how to add attachment file icons in WordPress.

您是否看到在下载链接旁边显示文件图标的网站？ 最近，我们的一位读者询问是否可以在WordPress中显示附件文件图标。 是的，这很容易。 在本文中，我们将向您展示如何在WordPress中添加附件文件图标。

当您需要WordPress中的附件文件图标时 (When You Need Attachment File Icons in WordPress)

By default, WordPress allows you to upload images, audio, video, and other documents. You can also allow additional file types to be uploaded in WordPress.

默认情况下，WordPress允许您上传图像，音频，视频和其他文档。 您还可以允许其他文件类型在WordPress中上传 。

When you upload a file through the media uploader and add it to a post or page, WordPress will try to embed the file if it is an image, audio, video, or in a supported file format.

当您通过媒体上传器上传文件并将其添加到帖子或页面时，WordPress将尝试嵌入该文件(如果它是图像，音频，视频或受支持的文件格式)。

For all other files, it will just add a file name as plain text and link it to the download or attachment page.

对于所有其他文件，它将仅将文件名添加为纯文本并将其链接到下载或附件页面。

In the above screenshot, we have added a PDF and a Docx file. However, it is difficult for a user to guess which file they are downloading.

在上面的屏幕截图中，我们添加了PDF和Docx文件。 但是，用户很难猜测他们正在下载哪个文件。

If you regularly upload different file types, then you may want to display an icon next to the link, so your users can easily find the file type they’re looking for.

如果您定期上传其他文件类型，则可能需要在链接旁边显示一个图标，以便用户可以轻松找到他们要查找的文件类型。

Having said that, let’s see how to add attachment file icons in WordPress for different file types.

话虽如此，让我们看看如何在WordPress中为不同的文件类型添加附件文件图标。

方法1：使用插件在WordPress中添加附件文件图标 (Method 1: Add Attachment File Icons in WordPress Using Plugin)

First thing you need to do is install and activate the MimeTypes Link Icons plugin. For more details, see our step by step guide on how to install a WordPress plugin.

您需要做的第一件事是安装并激活MimeTypes链接图标插件。 有关更多详细信息，请参阅有关如何安装WordPress插件的分步指南。

Upon activation, you need to visit Settings » MimeType Icons page to configure plugin settings.

激活后，您需要访问设置»MimeType图标页面以配置插件设置。

The plugin allows you to choose icon size. You can also choose between png and gif icons. Next, you need to choose the icon alignment and which file types will display the icon.

该插件允许您选择图标大小。 您还可以在png和gif图标之间进行选择。 接下来，您需要选择图标对齐方式以及将显示图标的文件类型。

Under the advanced options, you can enable CSS classes to hide icons. File download links wrapped in these CSS classes will not show the icons.

在高级选项下，您可以启用CSS类来隐藏图标。 这些CSS类中包装的文件下载链接将不显示图标。

Below that you will find the option to show file size next to the download link. It is turned off by default, as it could be resource intensive. However if you like, you can enable it and also enable the option to ‘Cache retrieved file sizes’.

在此之下，您将找到下载链接旁边显示文件大小的选项。 默认情况下，它是关闭的，因为它可能会占用大量资源。 但是，您可以根据需要启用它，也可以启用“缓存检索到的文件大小”选项。

Don’t forget to click on the Save Changes button to store your settings.

不要忘记单击“保存更改”按钮来存储您的设置。

You can now edit a post or page and add an file download link using media uploader. Preview your post and you will see the file icon next to the download link.

现在，您可以使用媒体上载器编辑帖子或页面并添加文件下载链接。 预览您的帖子，您将在下载链接旁边看到文件图标。

方法2：在WordPress中为附件文件使用图标字体 (Method 2: Using Icon Fonts for Attachment Files in WordPress)

In this method, we will be using an icon font to display an icon next to attachment file link.

在这种方法中，我们将使用图标字体在附件文件链接旁边显示一个图标。

First thing you need to do is install and activate the Better Font Awesome plugin.

您需要做的第一件事是安装并激活Better Font Awesome插件。

Upon activation, you can edit a post or page where want to add an attachment link.

激活后，您可以编辑要在其中添加附件链接的帖子或页面。

You will notice the new ‘Insert Icon’ button on top of post editor. Clicking on it will display a popup where you can search and select the icon you want to add.

您会在帖子编辑器顶部看到新的“插入图标”按钮。 单击它会显示一个弹出窗口，您可以在其中搜索并选择要添加的图标。

Font Awesome comes with tons of icons and has icons for the most commonly used file types. Click on the icon you want to add and the plugin will automatically add the required shortcode in the post editor.

Font Awesome带有大量图标，并且包含最常用的文件类型的图标。 单击要添加的图标，插件将在帖子编辑器中自动添加所需的简码。

Now you can upload your file and insert into post using media uploader.

现在，您可以上传文件并使用媒体上传器插入帖子中。

You can also add your own custom CSS for a file icon by adding your own css class to the shortcode like this:

您还可以通过向短代码中添加自己的css类，为文件图标添加自己的自定义CSS ，如下所示：

[icon name=”file-pdf-o” class=”” unprefixed_class=”pdf-icon”]

[icon name =“ file-pdf-o” class =“” unprefixed_class =” pdf-icon“]

You can now use .pdf-icon class to change icon size, color, and style it to your own needs.

现在，您可以使用.pdf-icon类更改图标的大小，颜色，并根据自己的需要设置样式。

We hope this article helped you learn how to add attachment file icons in WordPress. You may also want to see our guide on how to how to embed PDF, spreadsheet, and others in WordPress blog posts.

我们希望本文能帮助您学习如何在WordPress中添加附件文件图标。 您可能还想查看有关如何在WordPress博客文章中嵌入PDF，电子表格和其他内容的指南 。

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.

如果您喜欢这篇文章，请订阅我们的YouTube频道 WordPress视频教程。 您也可以在Twitter和Facebook上找到我们。

翻译自: https://www.wpbeginner.com/plugins/how-to-add-attachment-file-icons-in-wordpress/