Компонент ExternalLink в WordPress — это простой React-компонент, предназначенный для создания ссылки на внешний ресурс. Этот компонент автоматически добавляет атрибут rel="noopener noreferrer" к ссылке для повышения безопасности и улучшения производительности, предотвращая потенциальные проблемы с безопасностью при открытии ссылки в новом окне.
Основное использование компонента ExternalLink
Для начала рассмотрим базовое использование ExternalLink. Компонент рендерится как обычная ссылка (<a>), но добавляет настройки безопасности, чтобы защитить ваш сайт при переходе пользователя на внешний ресурс.
import { ExternalLink } from '@wordpress/components';
const MyExternalLink = () => (
<ExternalLink href="https://wordpress.org">Посетите WordPress.org</ExternalLink>
);
В этом примере ExternalLink создает ссылку на WordPress.org с текстом «Посетите WordPress.org».
Описание Props для ExternalLink
Компонент ExternalLink поддерживает всего два основных параметра:
1. children: ReactNode
Содержимое, которое будет отображаться внутри ссылки. Обычно это текст, который пользователь видит и по которому может кликнуть.
- Обязательный: Да
- Тип:
ReactNode
<ExternalLink href="https://example.com">Нажмите для перехода</ExternalLink>2. href: string
URL-адрес внешнего ресурса, на который ведет ссылка. Убедитесь, что указанный URL начинается с http:// или https:// для корректного перенаправления на внешнюю страницу.
- Обязательный: Да
- Тип:
string
<ExternalLink href="https://example.com">Посетите Example.com</ExternalLink>Дополнительно, любые другие параметры, не включенные в этот список, будут переданы в элемент <a> напрямую. Например, вы можете добавить атрибут target="_blank", чтобы ссылка открывалась в новом окне.
Пример 1: Открытие ссылки в новом окне
С помощью атрибута target="_blank" можно настроить компонент так, чтобы ссылка открывалась в новом окне или вкладке. Это полезно для улучшения пользовательского опыта, особенно если вы хотите, чтобы пользователи оставались на текущей странице после перехода на внешний ресурс.
import { ExternalLink } from '@wordpress/components';
const OpenInNewTabLink = () => (
<ExternalLink href="https://developer.wordpress.org" target="_blank">
Посетите документацию WordPress
</ExternalLink>
);
Здесь ссылка откроется в новой вкладке браузера, позволяя пользователю оставить текущую страницу открытой.
Пример 2: Использование ExternalLink с дополнительными CSS-классами
Вы можете добавить CSS-классы к ExternalLink для стилизации ссылки. В этом примере используется пользовательский класс custom-link-style, чтобы применить уникальный стиль к внешней ссылке.
import { ExternalLink } from '@wordpress/components';
const StyledExternalLink = () => (
<ExternalLink href="https://www.example.com" className="custom-link-style">
Перейти на Example.com
</ExternalLink>
);
В данном случае компонент ExternalLink примет класс custom-link-style, который можно использовать для стилизации ссылки в CSS:
.custom-link-style {
color: #0063e5;
font-weight: bold;
text-decoration: underline;
}Пример 3: ExternalLink с иконкой
Вы можете добавить иконку перед текстом ссылки, чтобы визуально указать на то, что это внешний ресурс. Это можно сделать, добавив элемент <span> или иконку из сторонней библиотеки рядом с children.
import { ExternalLink } from '@wordpress/components';
import { Icon, external } from '@wordpress/icons';
const ExternalLinkWithIcon = () => (
<ExternalLink href="https://wpbeginner.com" target="_blank">
<Icon icon={external} style={{ marginRight: '4px' }} />
Посетите WPBeginner
</ExternalLink>
);
В этом примере компонент Icon с иконкой external добавляется перед текстом ссылки. Это помогает пользователю понять, что ссылка ведет на внешний ресурс.
Пример 4: ExternalLink с условным отображением
Если вам нужно динамически отображать внешнюю ссылку в зависимости от состояния приложения, ExternalLink может быть легко интегрирован в условные выражения.
import { useState } from 'react';
import { ExternalLink } from '@wordpress/components';
const ConditionalExternalLink = () => {
const [showLink, setShowLink] = useState(false);
return (
<div>
<button onClick={() => setShowLink(!showLink)}>
{showLink ? 'Скрыть ссылку' : 'Показать ссылку'}
</button>
{showLink && (
<ExternalLink href="https://css-tricks.com">
Узнать больше на CSS-Tricks
</ExternalLink>
)}
</div>
);
}
Здесь кнопка управляет состоянием showLink, которое определяет, отображается ли ссылка. Это полезно, когда вам нужно динамически показывать или скрывать внешний ресурс.
Пример 5: Локализация текста для ExternalLink
Для многоязычных сайтов важно, чтобы текст внутри ссылки был переведен. Вы можете использовать функцию __ из @wordpress/i18n для перевода содержимого компонента.
import { ExternalLink } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
const TranslatedExternalLink = () => (
<ExternalLink href="https://polylang.pro">
{__('Посетите Polylang для управления переводами', 'text-domain')}
</ExternalLink>
);
В этом примере текст ссылки переводится с использованием функции __ и текстового домена 'text-domain'. Этот подход удобен для интеграции компонента в темы и плагины, поддерживающие многоязычность.
Заключение
Компонент ExternalLink — это удобный и безопасный способ добавления внешних ссылок в приложение WordPress. Он автоматически добавляет параметры безопасности, а также позволяет легко настроить поведение и стиль ссылки.
Использование ExternalLink упрощает процесс создания ссылок на внешние ресурсы, улучшая безопасность и позволяя быстро адаптировать ссылки к требованиям интерфейса.