В этой статье мы разберём, как создать собственный шорткод в WordPress, который не просто выводит контент, а также реализует переходы между страницами или разделами сайта. Это особенно полезно для сайтов с большим количеством контента, когда нужно быстро направлять пользователей на нужные разделы прямо из текста.
Что такое шорткод с переходом и зачем он нужен в WordPress
Шорткод — это небольшой тег, который можно вставить в редактор WordPress, и он заменяется на определённый динамический контент. Обычно это какой-то функционал или специальное оформление. В нашем случае мы создадим шорткод, который добавляет ссылку с параметрами перехода на другие страницы вашего сайта.
Например, если у вас магазин или информационный портал, вы можете вставлять в статью кнопки или ссылки, которые ведут на определённые категории, товары или статьи, используя шорткод. Это упрощает редактирование и улучшает юзабилити сайта.
Преимущества использования собственного шорткода с переходом:
- Удобство вставки ссылок без необходимости каждый раз прописывать HTML вручную.
- Возможность динамически формировать URL с параметрами.
- Лёгкое управление стилями и атрибутами через параметры шорткода.
Как создать собственный шорткод в WordPress с переходом — подробный разбор
Для создания шорткода нам понадобится добавить функцию в файл functions.php вашей темы или в отдельный плагин. Рассмотрим пример функции с префиксом wporder_ для уникальности.
Функция будет принимать параметры: url — адрес для перехода, text — текст ссылки, class — CSS класс для стилизации.
function wporder_custom_link_shortcode($atts) {
$atts = shortcode_atts(array(
'url' => '#',
'text' => 'Перейти',
'class' => 'wporder-link'
), $atts, 'wporder_link');
$url = esc_url($atts['url']);
$text = esc_html($atts['text']);
$class = esc_attr($atts['class']);
return '<a href="'. $url .'" class="'. $class .'">'. $text .'</a>';
}
add_shortcode('wporder_link', 'wporder_custom_link_shortcode');Теперь, чтобы вставить ссылку с переходом, достаточно написать в редакторе:
[wporder_link url="https://wporder.ru/category/wordpress" text="Категория WordPress"]
Это создаст кликабельную ссылку с текстом «Категория WordPress» и ссылкой на указанную страницу.
Динамическое добавление параметров для перехода
Иногда важно передавать параметры через URL, например, для отслеживания или фильтрации. Расширим функцию, чтобы она могла автоматически добавлять GET-параметры.
function wporder_custom_link_shortcode($atts) {
$atts = shortcode_atts(array(
'url' => '#',
'text' => 'Перейти',
'class' => 'wporder-link',
'params' => ''
), $atts, 'wporder_link');
$url = esc_url_raw($atts['url']);
$text = esc_html($atts['text']);
$class = esc_attr($atts['class']);
$params = trim($atts['params']);
if ($params) {
// Преобразуем строку параметров в массив
parse_str($params, $params_array);
$url = add_query_arg($params_array, $url);
}
return '<a href="'. esc_url($url) .'" class="'. $class .'">'. $text .'</a>';
}Теперь в шорткод можно добавить параметры так:
[wporder_link url="https://wporder.ru/shop" text="Магазин" params="utm_source=newsletter&utm_campaign=spring_sale"]
Это добавит к ссылке параметры для аналитики или фильтрации.
Стилизация и дополнительные возможности шорткода для переходов
Для удобства пользователей можно добавить стили, которые выделят ссылки визуально. Например, в файл style.css темы добавьте:
.wporder-link {
color: #0073aa;
text-decoration: none;
border-bottom: 1px dashed #0073aa;
transition: color 0.3s;
}
.wporder-link:hover {
color: #005177;
border-bottom: 1px solid #005177;
}Так ссылки будут выглядеть аккуратно и понятно для пользователей. Кроме того, можно расширить функциональность, добавив атрибуты, например, target="_blank" или rel="nofollow", чтобы контролировать поведение ссылок.
Обновим функцию:
function wporder_custom_link_shortcode($atts) {
$atts = shortcode_atts(array(
'url' => '#',
'text' => 'Перейти',
'class' => 'wporder-link',
'params' => '',
'target' => '_self',
'nofollow' => 'false'
), $atts, 'wporder_link');
$url = esc_url_raw($atts['url']);
$text = esc_html($atts['text']);
$class = esc_attr($atts['class']);
$params = trim($atts['params']);
$target = in_array($atts['target'], array('_self','_blank')) ? $atts['target'] : '_self';
$rel = ($atts['nofollow'] === 'true') ? 'nofollow' : '';
if ($params) {
parse_str($params, $params_array);
$url = add_query_arg($params_array, $url);
}
return '<a href="'. esc_url($url) .'" class="'. $class .'" target="'. $target .'" rel="'. $rel .'">'. $text .'</a>';
}Популярные плагины для управления шорткодами и ссылками в WordPress
Если вы хотите работать с шорткодами без программирования или расширить функционал, обратите внимание на следующие плагины:
- Shortcodes Ultimate — богатый набор шорткодов с возможностью вставки кнопок, ссылок, вкладок и пр.
- WP Shortcode by MyThemeShop — простой плагин для создания кнопок и ссылок с параметрами.
- URL Params — плагин для управления и передачи параметров через URL, полезен для динамических ссылок.
Эти инструменты помогут вам быстро добавлять функциональность переходов и ссылок на сайт без глубоких знаний кода.
Когда стоит использовать собственные шорткоды вместо плагинов
Самодельные шорткоды, как в нашем примере, дают полную свободу и оптимизацию под конкретные задачи. Они не нагружают сайт лишним кодом и не создают зависимости от сторонних разработчиков. Если у вас специфические требования к ссылкам и переходам, лучше написать собственный шорткод.
Однако для универсальных и часто используемых функций плагины могут значительно ускорить работу и упростить поддержку.
Итоговые рекомендации по созданию и использованию шорткодов с переходами
Создавая шорткод с переходом, всегда уделяйте внимание безопасности — используйте функции esc_url, esc_html и другие для очистки данных. Это предотвратит XSS-атаки и ошибки в ссылках.
Тестируйте шорткод в разных контекстах: в классическом редакторе, в блоках Gutenberg, в виджетах и т.д. Убедитесь, что ссылки работают корректно и адаптивно.
Не забывайте про SEO: если ссылки ведут на внешние ресурсы, добавляйте атрибут rel="nofollow" или другие, если нужно.
В итоге вы получите мощный инструмент для управления переходами и навигацией на вашем сайте WordPress, который легко масштабируется и настраивается под любые задачи.