Задача: при нажатии на эту кнопочку возвращать пользователя на предыдущую страницу.
Реализация на 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 так как приходит с сервера, а не формируется на стороне клиента.
