Вопрос или проблема
Я новичок в мире WordPress/PHP. Я хочу, чтобы моя страница могла взаимодействовать с API, который я создаю сам. Для этого у меня есть форма на моей странице WordPress, использующая виджет HTML-кода, который выглядит так:
<html>
<body>
<div>
<form id="myform" action="submit_shortcode">
<input type="text" id="input" placeholder="Input" required>
<input type="submit" value="Ввод">
</form>
</div>
</body>
</html>
И я добавил этот код в functions.php текущей темы:
function get_shortcode($sc) {
$response = wp_remote_get('http://localhost:9000/shortcode/'.$sc);
if (is_array($response)) {
$body = $response['body'];
$data = json_decode($body);
echo $data;
if (! is_wp_error($data)) {
echo "ошибка";
}
}
return;
}
add_action('submit_shortcode', 'get_shortcode');
Но я не вижу, как интегрировать функцию с формой. Когда я отправляю свою форму, меня перекидывает на mypage/submit_shortcode. Как можно вызвать функцию get_shortcode при отправке формы?
PS: Этот “shortcode” не имеет ничего общего с виджетом Shortcode в Elementor
Похоже, вы хотите выполнить AJAX-запрос какого-то рода.
В вашем файле functions.php зарегистрируйте некоторый JavaScript для обработки формы.
wp_register_script( 'my-scripts', get_stylesheet_directory_uri() . '/[путь к вашим скриптам]/myscripts.js', array( 'jquery' ), '1.0', true );
Смотрите этот линк для справки.
Прямо под этим добавьте переменную JavaScript для вашего AJAX URL.
wp_localize_script( 'my-scripts', 'data', array( 'ajax_url' => admin_url( 'admin-ajax.php' ));
Справка по wp_localize_script и admin_url.
После регистрации скрипта добавьте его в очередь, чтобы он был загружен.
wp_enqueue_script( 'my-scripts' );
Под этим добавьте свой код для получения ответа от вашего API.
// ваша функция, подготовленная для AJAX
function get_api_response() {
$response = wp_remote_get('http://localhost:9000/shortcode/'.$sc);
if (is_array($response)) {
$body = $response['body'];
$data = json_decode($body);
echo $data;
if (! is_wp_error($data)) {
echo "ошибка";
}
}
wp_die(); // убедитесь, что вы это делаете
}
add_action( 'wp_ajax_get_api_response', 'get_api_response' );
add_action( 'wp_ajax_nopriv_get_api_response', 'get_api_response' );
Справка здесь.
И наконец, в вашем JavaScript-файле (myscripts.js в этом примере) обработайте отправку формы.
jQuery(document).ready(function($) {
$('#myform').on('submit', function(e) {
e.preventDefault(); // остановите отправку формы
$.post(
data['ajax_url'], // передается из wp_localize_script
{
'input' : $('#input').val()
},
function( response ) {
// делайте что хотите здесь
// ответ будет тем, что возвращает
// функция get_api_response
}
);
});
});
Если вы не хотите использовать AJAX, “shortcode”, который вы используете, нужно превратить в настоящий шорткод и использовать на странице, на которую вы размещаете свою форму. Информация об этом здесь.
Ваш шорткод затем должен будет захватывать значения $_POST из вашей формы и делать с ними что-то. В любом случае убедитесь, что вы очищаете все значения, поступающие с внешнего мира.
Надеюсь, это поможет.
С наилучшими пожеланиями!
Если вам комфортно с JavaScript, один из способов подойти к тому, что, как я думаю, вы пытаетесь сделать, будет зарегистрировать JavaScript-версию вашей функции и просто вызвать ее из формы как атрибут onSubmit. Таким образом:
Введите имя:
и вы зарегистрировали myFunction либо в function.php, либо в плагине:
function load_my_script() {
wp_enqueue_script( 'myFunction', get_template_directory_uri() . '/js/myFunction.js');
}
add_action( 'wp_enqueue_scripts', 'load_my_script' );
Ответ или решение
Как HTML-форма может вызвать функцию PHP в WordPress
Если вы новичок в мире WordPress и PHP, вы, вероятно, сталкиваетесь с задачей интеграции HTML-формы с функциями PHP, чтобы ваше приложение могло взаимодействовать с API. Приведем пошаговое руководство, как это сделать.
Шаг 1: Создание HTML-формы
Для начала, у вас уже есть HTML-форма, размещенная на вашей странице с помощью виджета HTML. Вот как она выглядит:
<div>
<form id="myform" action="submit_shortcode">
<input type="text" id="input" placeholder="Input" required>
<input type="submit" value="Enter">
</form>
</div>Шаг 2: Настройка обработчика формы на стороне PHP
Теперь, когда форма готова, следующим шагом будет обработка её данных на стороне сервера. Вместо того, чтобы перенаправлять пользователя на mypage/submit_shortcode, мы можем использовать AJAX для асинхронного взаимодействия. Это позволит избежать перезагрузки страницы.
2.1 Регистрация и локализация скрипта
В вашем файле functions.php добавьте следующий код:
function load_my_scripts() {
wp_register_script('my-scripts', get_stylesheet_directory_uri() . '/path/to/your/scripts/myscripts.js', array('jquery'), '1.0', true);
wp_localize_script('my-scripts', 'data', array('ajax_url' => admin_url('admin-ajax.php')));
wp_enqueue_script('my-scripts');
}
add_action('wp_enqueue_scripts', 'load_my_scripts');Этот код регистрирует ваш JavaScript-файл и локализует объект data, содержащий URL для AJAX-запросов.
2.2 Создание функции для обработки AJAX-запроса
Теперь необходимо создать функцию, которая будет обрабатывать ваши AJAX-запросы:
function get_api_response() {
$sc = sanitize_text_field($_POST['input']); // Санитизация входного значения
$response = wp_remote_get('http://localhost:9000/shortcode/' . esc_attr($sc));
if (is_array($response) && !is_wp_error($response)) {
$body = $response['body'];
echo $body; // Возврат данных
} else {
echo "Ошибка запроса"; // Обработка ошибок
}
wp_die();
}
add_action('wp_ajax_get_api_response', 'get_api_response');
add_action('wp_ajax_nopriv_get_api_response', 'get_api_response');Эта функция будет вызвана при отправке формы и обрабатывает данные, используя API. Не забудьте доработать обработку ошибок для улучшения надежности.
Шаг 3: Обработка события отправки формы с помощью JavaScript
Теперь время добавить код в вашем JavaScript файле (например, myscripts.js):
jQuery(document).ready(function($) {
$('#myform').on('submit', function(e) {
e.preventDefault(); // Установка предотвращения стандартного поведения формы
$.post(data['ajax_url'],
{
'input': $('#input').val() // Передача значения поля ввода
},
function(response) {
// Здесь вы можете обрабатывать ответ
console.log(response); // Печать ответа в консоль, измените по необходимости
}
);
});
});Этот код перехватывает событие отправки формы, останавливает его, и делает AJAX-запрос к серверу с данными, полученными от пользователя.
Заключение
Следуя приведенным выше шагам, вы сможете зарегистрировать HTML-форму и связать её с обработчиком PHP, использующим AJAX для более плавного взаимодействия пользователя с вашим API. Обратите внимание на важность санитаризации данных на стороне сервера для обеспечения безопасности вашего веб-приложения.
Эти методы позволяют значительно улучшить взаимодействие пользователей с вашим сайтом, обеспечивая быструю и эффективную передачу данных без перезагрузки страницы.