Как вызвать шорткод при нажатии кнопки

Вопрос или проблема

<a href="https://wordpress.stackexchange.com/questions/253796/<?php echo do_shortcode("[wizard id=1]"); ?>" class="btn"> НАЖМИТЕ, ЧТОБЫ ОТКРЫТЬ ШОРТКОД</a>

function my_custom_shortcode( $atts, $content= NULL) {
    функция шорткода
}
add_shortcode ( 'my_custom_shortcode' , 'my_custom_shortcode' );

<a href="https://wordpress.stackexchange.com/questions/253796/<?php my_custom_shortcode(); ?>" class="btn"> НАЖМИТЕ, ЧТОБЫ ОТКРЫТЬ ШОРТКОД</a>

<!-- HTML код для кнопки -->
<a href="#" id="shortcodeButton" class="btn">НАЖМИТЕ, ЧТОБЫ ОТКРЫТЬ ШОРТКОД</a>

<!-- JavaScript код -->
<script>
    // Добавьте обработчик события к кнопке
    document.getElementById('shortcodeButton').addEventListener('click', function(event) {
        // Предотвратите стандартное поведение ссылки
        event.preventDefault();
        
        // Вызовите шорткод с помощью JavaScript
        var shortcodeResult="<?php echo do_shortcode("[wizard id=1]"); ?>";
        
        // Перенаправьте или выполните что-то с результатом
        // Например, вы можете перенаправить на URL результата
        window.location.href = shortcodeResult;
    });
</script>

Ответ или решение

Чтобы вызвать шорткод при нажатии на кнопку или ссылку, нельзя непосредственно использовать PHP внутри HTML атрибутов, таких как href. Однако вы можете использовать JavaScript для реализации этой функциональности. Вот как это можно сделать:

Шаг 1: Создайте кнопку

Сначала создайте HTML-код для кнопки:

<a href="#" id="shortcodeButton" class="btn">НАЖМИТЕ ДЛЯ ВЫЗОВА ШОРТКОДА</a>

Шаг 2: Напишите JavaScript

Затем добавьте JavaScript-код, который будет обрабатывать нажатие на кнопку, чтобы избежать выполнения шорткода сразу при загрузке страницы:

<script>
    // Добавляем слушатель событий на кнопку
    document.getElementById('shortcodeButton').addEventListener('click', function(event) {
        // Отменяем стандартное поведение ссылки
        event.preventDefault();

        // Используем AJAX для вызова шорткода
        var xhr = new XMLHttpRequest();
        xhr.open('GET', '/wp-admin/admin-ajax.php?action=my_custom_shortcode', true); // замените 'my_custom_shortcode' на имя вашего действия
        xhr.onload = function () {
            if (xhr.status === 200) {
                // Обработка полученного результата (шорткод)
                var shortcodeResult = xhr.responseText;
                // Здесь вы можете отобразить результат, например, в модальном окне или в определенном элементе на странице
                alert(shortcodeResult); // пример выводит результат в виде алерта
            }
        };
        xhr.send();
    });
</script>

Шаг 3: Создайте обработчик для AJAX

Вам нужно создать обработчик в functions.php для обработки AJAX-запроса и выполнения шорткода:

function my_custom_shortcode_function() {
    echo do_shortcode("[wizard id=1]"); // Замените на ваш шорткод
    wp_die(); // Обязательно вызываем wp_die() после завершения
}

add_action('wp_ajax_my_custom_shortcode', 'my_custom_shortcode_function');
add_action('wp_ajax_nopriv_my_custom_shortcode', 'my_custom_shortcode_function');

Объяснение

1. HTML-код: Создает ссылку (или кнопку), которая не ведет никуда (href="#").

2. JavaScript-код:

   • Слушает событие клика, отменяет его стандартное поведение при помощи event.preventDefault().
   • Использует AJAX для отправки запроса на сервер, где шорткод будет выполнен.
   • Обрабатывает ответ сервера и выводит результат.

3. PHP-обработчик: Выполняет шорткод и возвращает его результат в ответ на AJAX-запрос.

Таким образом, вы сможете вызвать шорткод по клику на кнопку, не выполняя его сразу при загрузке страницы. Если у вас возникнут дополнительные вопросы или потребуется помощь, не стесняйтесь обращаться!