Как сделать так, чтобы ссылка открывалась в новой вкладке в WordPress?

Открытие внешних ссылок в новой вкладке браузера — стандартная практика в веб-разработке, улучшающая взаимодействие пользователя с сайтом и помогающая контролировать его путь.

Саммари статьи

ChatGPT

Google AI

Grok

Perplexity

Улучшение пользовательского опыта (UX) и удержание посетителей

Когда пользователь кликает на внешнюю ссылку, открытие ее в новой вкладке позволяет ему ознакомиться с контентом по ссылке, не теряя при этом исходную страницу вашего сайта. Это предотвращает прерывание текущей сессии и облегчает возврат к вашему контенту.

Предотвращение ухода пользователей со страницы

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

Когда следует открывать ссылки в новой вкладке?

Общепринятая практика — открывать в новой вкладке все внешние ссылки, ведущие на другие домены. Внутренние ссылки (ведущие на другие страницы вашего же сайта) обычно открываются в той же вкладке, чтобы обеспечить плавную навигацию внутри ресурса. Однако, ссылки на документы (PDF, DOCX) или специфические разделы, требующие отдельного внимания, также могут быть кандидатами на открытие в новой вкладке.

Способы открытия ссылок в новой вкладке в WordPress

WordPress предоставляет несколько удобных методов для управления поведением ссылок:

1. Визуальный редактор: Стандартные инструменты Gutenberg и Classic Editor имеют встроенные опции.
2. HTML-редактор: Прямое редактирование HTML-кода дает полный контроль над атрибутами ссылки.
3. Плагины: Специализированные плагины могут автоматизировать процесс для всех или определенных типов ссылок.

Открытие ссылок в новой вкладке через визуальный редактор WordPress

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

Gutenberg: Инструкция по настройке ссылки на открытие в новой вкладке

1. Выделите текст, который должен стать ссылкой.
2. Нажмите иконку ссылки (цепочка) на панели инструментов блока.
3. Введите URL-адрес.
4. Нажмите на стрелку вниз или иконку настроек ссылки.
5. Активируйте переключатель «Открывать в новой вкладке».
6. Нажмите Enter или иконку применения ссылки.

Classic Editor: Инструкция по настройке ссылки на открытие в новой вкладке

1. Выделите текст для ссылки.
2. Нажмите кнопку «Вставить/изменить ссылку» (иконка цепочки) на панели инструментов.
3. В появившемся окне введите URL.
4. Нажмите на иконку шестеренки («Параметры ссылки»).
5. Установите флажок «Открывать ссылку в новой вкладке».
6. Нажмите «Обновить».

Различия между редакторами и выбор подходящего варианта

Оба редактора предоставляют схожий функционал. Gutenberg интегрирует опцию более лаконично в интерфейс блока, тогда как Classic Editor использует всплывающее окно с настройками. Выбор зависит от личных предпочтений и используемого редактора на вашем сайте. Функционально результат идентичен.

Редактирование HTML-кода для открытия ссылок в новой вкладке

Для полного контроля или при работе вне стандартных редакторов (например, в виджетах или темах) можно напрямую редактировать HTML-код.

Добавление атрибута target=»_blank» к ссылке

Чтобы ссылка открывалась в новой вкладке, к тегу <a> необходимо добавить атрибут target="_blank".

<a href="https://externalsite.com">Внешний ресурс</a>

Превращается в:

<a href="https://externalsite.com" target="_blank">Внешний ресурс (откроется в новой вкладке)</a>

Рекомендации по безопасному использованию target=»_blank» (rel=»noopener noreferrer»)

Использование target="_blank" без дополнительных атрибутов создает потенциальную уязвимость безопасности (tabnabbing). Страница, открытая по ссылке, получает частичный доступ к исходной странице через объект window.opener. Чтобы предотвратить это, всегда добавляйте rel="noopener noreferrer" к ссылкам с target="_blank".

• noopener: Предотвращает доступ к объекту window.opener.
• noreferrer: Предотвращает передачу HTTP-заголовка Referer на открываемую страницу.

Примеры HTML-кода с открытием ссылки в новой вкладке

Корректный и безопасный HTML-код для ссылки, открывающейся в новой вкладке:

<a 
  href="https://externalsite.com" 
  target="_blank" 
  rel="noopener noreferrer"
>Безопасная ссылка на внешний ресурс</a>

Для внутренних ссылок, которые вы по какой-то причине решили открывать в новой вкладке (например, ссылка на PDF), noreferrer можно опустить, если передача реферера не является проблемой:

<a 
  href="/wp-content/uploads/document.pdf" 
  target="_blank" 
  rel="noopener"
>Открыть документ PDF в новой вкладке</a>

Использование плагинов для автоматического открытия ссылок в новых вкладках

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

Обзор популярных плагинов (например, ‘Open external links in a new window’)

Существует несколько плагинов, решающих эту задачу. Один из популярных — «External Links – nofollow, noopener & new window». Он позволяет автоматически добавлять target="_blank" и rel="noopener noreferrer" ко всем внешним ссылкам, а также управлять атрибутом nofollow.

Установка и настройка плагина

1. Перейдите в раздел «Плагины» > «Добавить новый» в админ-панели WordPress.
2. Найдите плагин по названию (например, «External Links»).
3. Нажмите «Установить» и затем «Активировать».
4. Перейдите в настройки плагина (обычно в меню «Настройки» > «External Links»).
5. Настройте параметры: укажите, применять ли target="_blank" ко всем внешним ссылкам, добавьте исключения, если необходимо, настройте rel атрибуты.

Преимущества и недостатки использования плагинов

Преимущества:

• Автоматизация: Не требует ручной настройки каждой ссылки.
• Глобальное применение: Обеспечивает консистентность по всему сайту.
• Дополнительные опции: Часто включают управление nofollow, noopener, noreferrer, добавление иконок к внешним ссылкам.

Недостатки:

• Дополнительная нагрузка: Как и любой плагин, создает небольшую дополнительную нагрузку на сайт.
• Меньше гибкости: Сложно настроить индивидуальное поведение для конкретных ссылок без использования исключений.
• Потенциальные конфликты: Возможны конфликты с другими плагинами или темой.

Выбор метода зависит от ваших потребностей: для единичных ссылок достаточно визуального редактора или HTML, для глобального автоматического управления — плагин будет оптимальным решением.