На многих веб-сайтах можно заметить маленький значок рядом с гиперссылками. Чаще всего это указывает на внешние ссылки, такие как те, что присутствуют на страницах Wikipedia.
Кроме того, аналогичные значки можно обнаружить на образовательных или официальных ресурсах, что четко сигнализирует пользователям о том, что они будут перенаправлены на сторонний сайт.
Чтобы добавить значок для внешних ссылок на своем WordPress-сайте, можно воспользоваться простым методом через функции темы или установить специальный плагин. Если хотите сделать это вручную, откройте файл functions.php вашей темы и добавьте следующий код:
function add_external_link_icon($content) {
return str_replace('<a ', '<a target="_blank" rel="noopener noreferrer" aria-label="Внешняя ссылка. Откроется в новом окне.">🔗 ', $content);
}
add_filter('the_content', 'add_external_link_icon');Этот код добавит значок (в данном случае — 🔗) перед каждой внешней ссылкой. Не забудьте протестировать изменения на вашем сайте. Также можно использовать плагины, такие как External Links или WP External Links, которые предоставляют больше возможностей настройки внешних ссылок, включая возможность добавления значков, изменения их стилей и установку атрибутов безопасности.
С добавлением таких значков ваше содержание станет более удобным и понятным для пользователей, позволяя им легко идентифицировать внешние ссылки и повышая общий уровень юзабилити вашего сайта.
Как добавить значок для внешних ссылок?
Чтобы добавить значок, указывающий на внешний ресурс, необходимо активировать опцию Add Icons и затем нажать на кнопку Save Changes.
Сейчас, если вы находитесь в режиме редактирования записи или страницы и вставляете внешнюю ссылку, она будет выглядеть следующим образом:
С помощью плагина также можно заменить стандартную иконку, предоставив свою собственную. Для этого потребуется создать иконку с нуля в любом графическом редакторе. Изображение должно быть в формате PNG с размерами 10х10 пикселей и названием external. После создания иконки, не забудьте загрузить ее в директорию /wp-content/plugins/sem-external-links/. Подробности о том, как подключаться к файлам сайта на хостинге, были упомянуты в одной из предыдущих статей. В результате конечный путь к файлу должен выглядеть следующим образом:
/wp-content/plugins/sem-external-links/external.png
Также стоит обратить внимание, что добавление значка для внешних ссылок не только помогает пользователям легче ориентироваться на сайте, но и улучшает его юзабилити. Пользователи получают визуальный сигнал о том, что ссылка ведет на внешний ресурс, что особенно полезно для повышения доверия и снижения вероятности их недовольства. Вы можете тестировать различные дизайны и размеры иконок, чтобы выбрать наиболее подходящий для вашего сайта стиль.
Не забудьте обновить кэш вашего сайта после внесения изменений, чтобы убедиться, что новая иконка отображается правильно. Если вы используете кэширование на стороне сервера или плагин кэширования, не забудьте очистить кэш, чтобы ваши изменения вступили в силу.
Кроме того, если вы хотите добавить иконку для внутренних ссылок, вы можете применить аналогичный процесс, изменив название иконки и путь к файлу соответственно. Это создаст единый стиль для всех ссылок на вашем сайте.
Методы добавления значков для внешних ссылок в WordPress
wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css');
Затем в редакторе постов необходимо добавить HTML-код с нужной иконкой. Например:
<a href="https://example.com" class="external-link"><i class="fas fa-external-link-alt"></i> Пример ссылки</a>
Также существует возможность использовать плагины. Варианты, такие как «WP External Links», позволяют автоматически помещать картинки рядом с внешними переходами. Плагин предлагает различные параметры настройки, включая выбор изображения и его размеры.
При использовании гутенберга можно добавить дополнительный блок с изображениями и использовать различные настройки видимости. Это подходит для пользователей, предпочитающих визуальные элементы на своей странице. Однако стоит учитывать совместимость с другими блоками.
Важно помнить, что максимальная нагрузка на сайт может увеличиться за счет использования множества иконок. Лучше минимизировать количество запросов.
Существует также возможность через пользовательские функции добавлять значки без использования плагинов. Просто добавьте следующий код в файл functions.php:
function custom_external_links() {
echo '<i class="fas fa-external-link-alt"></i> ';
}
add_filter('the_content', 'custom_external_links');
Таким образом, есть множество подходов к применению иконок для переходов. Выбор метода зависит от ваших технических навыков и требования проекта.