Для повышения привлекательности сайтов пользователи часто желают добавлять графические иконки рядом со ссылками на загрузку. Это не только добавляет визуальной привлекательности, но и помогает посетителям мгновенно определить, что именно они будут скачивать. Однако стандартные функции WordPress не позволяют реализовать эту идею.
Давайте для примера загрузим два файла в формате PDF и выведем ссылки на них. Согласитесь, такие ссылки выглядят крайне неинформативно.
Чтобы решить данную задачу, воспользуемся сторонним решением – плагином MimeTypes Link Icons.
Этот плагин позволяет легко настроить иконки для различных типов файлов. После установки и активации плагины сделайте следующие шаги:
- Перейдите в настройки плагина, где вы сможете выбрать иконки для разных расширений файлов.
- Выберите иконки для форматов, которые вы планируете использовать на своем сайте (например, PDF, DOC, XLS и т.д.).
- Сохраните изменения и проверьте, как иконки отображаются рядом с вашими ссылками на файлы.
Кроме того, вы можете использовать собственные изображения для иконок, загружаемых через медиабиблиотеку WordPress, что позволит сделать ваш сайт более уникальным и соответствующим его стилю.
Имейте в виду, что правильное оформление элементов страницы не только улучшает восприятие, но и способствует повышению конверсии, поскольку пользователи будут относиться к вашим материалам более серьезно и быстрее находить нужные им файлы.
Способ 1. Плагин MimeTypes Link Icons
После установки и активации плагина необходимо перейти в админ-панели по адресу Настройки -> MimeType Icons, чтобы попасть на страницу его настройки.
Как видно, все настройки ясны и интуитивны. Давайте подробнее рассмотрим каждую из них.
Параметр Image Size позволяет установить размер иконок, по умолчанию это 16х16 пикселей. Вы также можете настроить размер в зависимости от дизайна вашего сайта, чтобы иконки гармонично вписывались в общую стилистику.
В разделе Image Type вы сможете выбрать, какой тип графического файла будет использован для значков. Рекомендуется использовать формат PNG для лучшего качества и прозрачности значков.
Опция Display images on left or right позволяет выбрать место отображения значка (слева или справа от ссылки). Убедитесь, что выбрали то положение, которое лучше всего подходит для пользовательского интерфейса вашего сайта.
В большом блоке Image Setting представлен перечень всех поддерживаемых форматов файлов с соответствующими значками. Вы можете выбирать значки по одному, а также воспользоваться кнопкой Check All, чтобы отметить все сразу. Это особенно полезно, если ваш сайт поддерживает множество типов файлов.
Чтобы изменения вступили в силу, необходимо нажать кнопку Сохранить изменения. Не забудьте также протестировать изменения на нескольких устройствах, чтобы убедиться, что иконки отображаются корректно.
После активации плагина и выбора формата PDF наши ссылки теперь имеют следующий вид:
Кроме того, рекомендуется периодически проверять обновления плагина, так как разработчики могут добавлять новые функции или исправлять ошибки, что улучшит функциональность вашего сайта.
Способ 2. Плагин Better Font Awesome
Метод, который мы используем, включает популярные шрифтовые иконки. Первым делом следует установить и активировать бесплатный плагин.
Чтобы вставить иконку, нужно установить курсор в том месте, где она будет отображаться, и нажать кнопку Вставить иконку. В появившемся окне можно выбрать иконки из предложенного списка.
В результате к вашей ссылке будет добавлен специальный код, который и отобразит соответствующий значок.
После нажатия на кнопку Обновить, вы сможете увидеть изменения на сайте.
Кроме того, вы можете настраивать размер и цвет иконок, используя CSS. Например, вы можете изменить размер с помощью свойства font-size или цвет через свойство color. Это позволит вам лучше интегрировать иконки в общий стиль вашего сайта.
Не забудьте проверить совместимость иконок с мобильными устройствами, чтобы они отображались корректно на всех экранах. Использование векторных иконок позволяет им оставаться четкими и ясными независимо от разрешения.
Способ 4. Ручное добавление значков через функции темы
Чтобы реализовать отображение графических файлов для различных типов контента, требуется внести изменения в файл functions.php вашей темы. Используйте хук wp_enqueue_scripts для подключения необходимых ресурсов. Пример кода:
function custom_file_icons() {
wp_enqueue_style( 'custom-icons', get_template_directory_uri() . '/css/custom-icons.css' );
}
add_action( 'wp_enqueue_scripts', 'custom_file_icons' );
Создайте файл custom-icons.css и добавьте нужные стили для отображения иконок. Важно помнить, что классы должны совпадать с типами файлов, например: .pdf-icon для PDF-документов. Затем свяжите иконки с соответствующими расширениями в коде обработки вложений. Этот метод требует внимательности, но он позволяет получить полный контроль над визуальным отображением.