Сделайте ваш плагин WordPress отзывчивым с помощью AJAX
Опубликовано: 2020-06-02
Последнее обновление — 8 июля 2021 г.
AJAX — это новейшая методология разработки, которая постепенно набирает обороты благодаря простоте использования, которую она предоставляет своим разработчикам. Просто интегрируя AJAX в свои плагины WordPress, вы существенно уменьшаете необходимость постоянной перезагрузки всей веб-страницы. Другими словами, AJAX сделает ваш плагин WordPress отзывчивым и позволит пользователям получать новую информацию, перезагружая только эту конкретную часть, сохраняя при этом остальную часть страницы статической.
Это не только делает веб-страницы или плагины более отзывчивыми, но и вдвое сокращает время ожидания. Существует несколько подключаемых модулей и приложений, которые используют Ajax для улучшения взаимодействия с пользователями. Например, WooCommerce использует функцию Ajax для улучшения поведения «Добавить в корзину».
Учитывая его преимущества, мы научим вас, как сделать ваши плагины WordPress отзывчивыми с помощью AJAX.
Создание плагина
Прежде чем вы сможете творить чудеса с AJAX, вам нужно иметь базовую основу для плагинов, которую вы можете использовать для создания продвинутого и отзывчивого продукта.
Создать плагин несложно, так как все, что вам нужно, это создать файл, содержащий однострочный контент. Для этого первый шаг — перейти к файлу wp-content/plugins и создать новую папку с именем по вашему выбору. Откройте папку и создайте новый файл name_of_the_plugin.php. Теперь просмотрите файл в любом текстовом редакторе и напишите следующую информацию:
<?php
/*
Название плагина: Coolness Inducer
URI плагина: http://coolness-inducer.com
описание: >-
плагин, идеально подходящий для того, чтобы сделать ваш сайт особенно крутым.
Версия: 1.3
Автор: Мисс Вейдер
URI автора: http://msvader.com
Лицензия: GPL2
*/
?>
Прежде чем сделать это, создайте каталог ajaxloadpost в установке вашего плагина WordPress. Как только вы это сделаете, создайте плагин и активируйте его. После этого включите следующую информацию в ваш ajaxloadpost.
определить('AJAXLOADPOSTURL', WP_PLUGIN_URL.”/”.dirname(plugin_basename( __FILE__ ) ) );
функция ajaxloadpost_enqueuescripts() {
wp_enqueue_script('ajaxloadpost', AJAXLOADPOSTURL.'/js/ajaxloadpost.js', array('jquery'));
wp_localize_script('ajaxloadpost', 'ajaxloadpostajax', array('ajaxurl' => admin_url('admin-ajax.php') ));
}
add_action('wp_enqueue_scripts', ajaxloadpost_enqueuescripts);
Затем определите переменную AJAXLOADPOSTURL, потому что она понадобится вам, чтобы направить WordPress на URL-адрес вашего плагина. Теперь вам нужно поставить свои скрипты в очередь, что вы можете сделать, добавив ajaxloadpost_enqueuescripts в wp_enqueue_scripts WordPress.
Имейте в виду, что AJAX никогда нельзя использовать в чистом виде. Он всегда будет использоваться в сочетании с другими языками программирования, например jQuery или JavaScript. В этом случае мы будем работать с JavaScript, поэтому вам нужно иметь некоторое базовое представление о нем.
Двигаясь дальше, добавьте JavaScript в ajaxloadpost.js, который вы найдете в папке \wp-content\plugins\ajaxloadpost\js\. Выполните это действие, создав папку JS и поместив в нее ajaxloadpost.js.
Теперь используйте WordPress wp_localize_script, чтобы добавить необходимую переменную JS. Это действие создаст структуру вашего каталога и поставит ваши скрипты в очередь.
Написание обработчика AJAX
Чтобы написать обработчик AJAX, вам понадобятся следующие коды:
функция ajaxloadpost_ajaxhandler() {
если ( !wp_verify_nonce( $_POST['nonce'], «ajaxloadpost_nonce»)) {
Выход("Неверный одноразовый номер");
}
$результаты = ”;
$content_post = get_post($_POST['postid']);
$results = $content_post->post_content;
умереть ($ результаты);
}
add_action('wp_ajax_nopriv_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler');
add_action('wp_ajax_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler');
Выполнение этого действия приведет к двум результатам. Во-первых, он создаст идентификатор сообщений, который требуется пользователям, а во-вторых, он создаст одноразовый номер. Но это не по делу! После того, как коды обработчика AJAX будут готовы, вам нужно перейти к следующему шагу, который заключается в регистрации обработчика AJAX в каталоге WordPress. Это заставит плагин WordPress реагировать на вызовы AJAX. Вы можете добиться этого с помощью этих кодов:
add_action('wp_ajax_nopriv_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler');
add_action('wp_ajax_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler');
Основы JavaScript и AJAX
Имея вызов AJAX и обработчик AJAX, вам нужно создать функцию JS, которая соединит две точки. Следующий JavaScript поможет вам выполнить это действие, которое вы добавите в свой ajaxloadpost.js:
функция ajaxloadpost_loadpost (postid, одноразовый номер) {
jQuery.ajax({
тип: 'ПОСТ',
URL-адрес: ajaxloadpostajax.ajaxurl,
данные: {
действие: 'ajaxloadpost_ajaxhandler',
постид: постид,
одноразовый номер: одноразовый номер
},
успех: функция (данные, textStatus, XMLHttpRequest) {
var loadpostresult = '#loadpostresult';
jQuery(loadpostresult).html(”);
jQuery (загрузить после результата). добавить (данные);
},
ошибка: функция (MLHttpRequest, textStatus, errorThrown) {
оповещение (сброшена ошибка);
}
});
}
Как и в предыдущем шаге, это действие также создаст два результата, т. е. одноразовый номер и идентификатор сообщения.
Следующий шаг также требует владения jQuery. Итак, если ваши навыки немного деревенские, вы найдете эту статью полезной!
Двигаясь дальше, используйте функцию jQuery.ajax, чтобы сделать вызов AJAX к соответствующим серверам. В приведенных выше кодах URL-адрес — это URL-адрес admin-ajax.php, который можно найти в переменной JavaScript, которую мы зарегистрировали во время постановки сценариев в очередь. Кроме того, укажите это действие с именем обработчика действия, которое было зарегистрировано в WordPress, а также опубликуйте одноразовый номер и идентификатор сообщения.
Если все пойдет правильно, вы можете обновить <div> идентификатора #loadpostresult и заменить полученный контент обработчиком AJAX.
Поместите лицо в свой код
Теперь пришло время создать коды, которые будут отображать соответствующие заголовки сообщений и отображать информацию, которую пользователи хотят получить через вызов AJAX. Вот следующие коды:
функция ajaxloadpost_show_latest_posts ($ число = '5') {
$результаты =”;
$the_query = новый WP_Query('posts_per_page='.$number);
в то время как ($the_query->have_posts()):
$the_query->the_post();
$nonce = wp_create_nonce («ajaxloadpost_nonce»);
$arguments = get_the_ID().», '». $nonce.»'»;
$link = '<a onclick="ajaxloadpost_loadpost('.$arguments.');">'. get_the_title().'</a>';
$результат.= '<li>' . $ ссылка . '</li>';
конец;
wp_reset_postdata();
$result.= '<div id="loadpostresult"></div>';
вернуть $результат;
}
функция ajaxloadpost_shortcode_function($atts){
вернуть ajaxloadpost_show_latest_posts();
}
add_shortcode('AJAXLOADPOST', 'ajaxloadpost_shortcode_function');
Надеюсь, эта статья помогла вам сделать ваш плагин WordPress адаптивным. Оставьте нам комментарий, если у вас есть вопрос.
дальнейшее чтение
- Адаптивный дизайн помогает повысить коэффициент конверсии.
- Лучшие адаптивные темы WooCommerce