Как сделать кнопку (ссылку) «вернуться назад» в WordPress?

от автора

в ,

Задача: при нажатии на эту кнопочку возвращать пользователя на предыдущую страницу.

Реализация на JavaScript

За отрисовку кнопки, как элемента HTML, отвечает эта строка:

<button id="go-back">Вернуться назад</button>

Единственное, если быть точными и делать всю реализацию на JavaScript, получается по доброму этот элемент нужно создавать тоже при помощи скрипта. Выглядеть это может примерно так:

const button = document.createElement("button");
button.setAttribute("id", "go-back");
button.innerText = "Вернуться назад";
button.type = "submit";
document.body.appendChild(button);

А за функционал на стороне клиента вот этот сниппет на JavaScript, который прослушивает событие клика по элементу с идентификатором «go-back» и вызывает на это событие метод back() принадлежащий интерфейсу History, который предписывает браузеру вернуться на одну страницу назад в истории сеанса.

document.getElementById("go-back").addEventListener("click", () => {
  history.back();
});

Посмотреть код в действии можно тут.

@TODO По доброму ещё можно сделать проверку на существование значения «реффера» и принадлежности к текущему домену.

Мы рассмотрели механизм решения данной задачи на стороне клиента (браузера) при помощи JavaScript. Теперь давайте рассмотрим вариант на стороне сервера, при помощи PHP:

Реализация на PHP

В контексте WordPress, на стороне сервера подобное можно реализовать при помощи функции WP из ядра, которая является обёрткой других функций.

wp_get_referer()

Ознакомиться с функцией можно тут

Под капотом функции у нас происходит проверка на принадлежность URL к текущему домену сайта, возвращает строку или в противном случае булев тип false

Реализацию кода выше на стороне сервера можно представить вот в таком виде:

<?php
$return_url = wp_get_referer();

if ($return_url) { ?>
    <a class="button" href="<?php echo esc_url($return_url); ?>">Вернуться назад</a>
<?php }

Начинающих пользователей могут смутить открывающие и закрывающие теги PHP, часто в этом допускают синтаксическую ошибку. Ниже привожу пример где я вывел обработку (функцию отчистки) URL из атрибута href, тем самым позволив исключить теги PHP:

// получаем реферальную ссылку
$return_url = wp_get_referer();

// если не false продолжаем ...
if ($return_url) {
    // обработка УРЛ (подготовка)
    $url = esc_url($return_url);

    // вывод
    echo"<a class='button' href='{$url}'>Вернуться назад</a>";
}

P.S. тоже «не сахар» вариант 🙂 Будьте внимательнее с кавычками. Чтобы в строке языковой конструкции echo у нас выводилась переменная с нашим УРЛ, необходимо убедиться что сама строка в двойных кавычках, а атрибуты элемента ссылки в одиночных!

Небольшим преимуществом серверного метода можно считать тот факт, что если у клиента будет выключен в браузере JavaScript или возникнут ошибки которые не дадут отработать первому решению (на JS), то наша кнопка всё равно окажется в DOM так как приходит с сервера, а не формируется на стороне клиента.

Буду признателен за Share 🙏


Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *