Как добавить иконки типов файлов вложений в WordPress

Видели ли вы сайты, которые показывают иконки файлов рядом со ссылками на скачивание? Недавно один из наших читателей спросил, можно ли отобразить иконки...

Видели ли вы сайты, которые показывают иконки файлов рядом со ссылками на скачивание? Недавно один из наших читателей спросил, можно ли отобразить иконки вложенных файлов в WordPress. Это возможно, и это довольно просто. В этой статье мы покажем вам, как добавить иконки файлов вложений в WordPress.

Когда нужны иконки файлов вложений в WordPress

По умолчанию WordPress позволяет загружать изображения, аудио, видео и другие документы. Вы также можете разрешить загрузку дополнительных типов файлов в WordPress.

Когда вы загружаете файл через загрузчик медиафайлов и добавляете его в пост или страницу, WordPress попытается встроить файл, если это изображение, аудио, видео или файл в поддерживаемом формате.

Для всех других файлов, он просто добавит имя файла в виде обычного текста и ссылку на страницу загрузки или вложения.

Текстовые ссылки для вложений без иконок типа файла

На скриншоте выше мы добавили PDF и Docx файлы. Однако пользователю трудно догадаться, какой файл он скачивает.

Если вы регулярно загружаете различные типы файлов, то вы можете захотеть отобразить иконку рядом со ссылкой, чтобы ваши пользователи могли легко найти нужный им тип файла.

Сказав это, давайте посмотрим, как добавить иконки прикрепленных файлов в WordPress для различных типов файлов.

Метод 1: Добавьте иконки вложенных файлов в WordPress с помощью плагина

Первое, что вам нужно сделать, это установить и активировать плагин MimeTypes Link Icons. Для более подробной информации смотрите наше пошаговое руководство о том, как установить плагин WordPress.

После активации вам необходимо посетить Настройки » MimeType Icons страница для настройки параметров плагина.

Настройки значка ссылки MimeType

Плагин позволяет выбрать размер иконки. Вы также можете выбрать между значками png и gif. Далее вам нужно выбрать выравнивание иконок и то, какие типы файлов будет отображать колонка иконок.

В расширенных опциях вы можете включить классы CSS, чтобы скрыть иконки. Ссылки на скачивание файлов, обернутые в эти CSS-классы, не будут отображать иконки.

Расширенные настройки

Ниже вы найдете возможность показать размер файла рядом со ссылкой на скачивание. По умолчанию он отключен, так как может быть ресурсоемким. Однако если вы хотите, вы можете включить его, а также включить опцию «Кэшировать размеры извлекаемых файлов».

Не забудьте нажать на кнопку Сохранить изменения, чтобы сохранить настройки.

Теперь вы можете отредактировать пост или страницу и добавить ссылку на скачивание файла с помощью медиазагрузчика. Просмотрите свой пост, и вы увидите значок файла рядом со ссылкой на скачивание.

Ссылки на вложения с иконками типов файлов

Метод 2: Использование иконочных шрифтов для вложенных файлов в WordPress

В этом методе мы будем использовать иконочный шрифт для отображения иконки рядом со ссылкой на файл вложения.

Первое, что вам нужно сделать, это установить и активировать плагин Better Font Awesome.

После активации вы можете редактировать пост или страницу, где хотите добавить ссылку на вложение.

Вы заметите новую кнопку «Вставить значок» в верхней части редактора постов. При нажатии на нее появится всплывающее окно, в котором вы можете найти и выбрать иконку, которую хотите добавить.

Вставить иконку в пост WordPress

Font Awesome поставляется с большим количеством иконок и имеет иконки для наиболее часто используемых типов файлов. Нажмите на иконку, которую вы хотите добавить, и плагин автоматически добавит необходимый шорткод в редактор поста.

Теперь вы можете загрузить свой файл и вставить его в пост с помощью загрузчика медиафайлов.

Добавьте ссылки на вложения

Вы также можете добавить свой собственный CSS для иконки файла, добавив свой собственный css класс к шорткоду, как это сделано здесь:

[icon name=»file-pdf-o» unprefixed_class=»pdf-icon»]

Теперь вы можете использовать .pdf-icon class, чтобы изменить размер, цвет и стиль иконки в соответствии с вашими потребностями.

Значки шрифтов, используемые в качестве значков типов файлов вложений

Мы надеемся, что эта статья помогла вам узнать, как добавить иконки прикрепленных файлов в WordPress. Вы также можете посмотреть наше руководство о том, как вставлять PDF, электронные таблицы и другие файлы в сообщения блога WordPress.

Источник: www.wpbeginner.com

Оцените статью
Добавить комментарий