AJAX в админке WordPress (с обработчиком admin-ajax.php) — WordPressify
Сам я совсем недавно познакомился с такой возможностью передачи асинхронных запросов в WordPress. Наткнулся в коде какого-то плагина и сперва никак не мог понять, как оно работает.
Но на деле всё оказалось очень удобным.
jQuery
Тут есть только две вещи, отличающие вордпрессовский ajax-запрос от обычного:
- URL запроса, в данном случае это
/wp-admin/admin-ajax.php
, однако он уже записан в переменнуюajaxurl
— её то мы и будем использовать. - В запросе должен быть передан параметр
action
— что-то вроде идентификатора запроса, чтобы WordPress знал, какая функция должна обрабатывать его.
Как-то так:
jQuery.ajax({ type:'POST', url:ajaxurl, data:'action=myaction&input_val=' + my_value, success:function(data){ jQuery('#response').html(data); } }); |
Или так:
В этом случае в HTML-форму обязательно нужно добавить скрытое поле с параметром action
.
jQuery.ajax({ type:'POST', url:ajaxurl, data:jQuery('#form').serialize(), success:function(data){ jQuery('#response').html(data); } }); |
<form> <input type="text" name="input_val" /> <input type="hidden" name="action" value="myaction" /> <button>Отправить</button> </form> |
PHP
Тут важно учесть только одну деталь — в хуках обязательно должно быть прописано значение параметра action
, в моем примере это myaction
.
А сам код, как обычно — в файл functions.php
:
function true_function(){ update_option('my_settings', esc_attr($_POST['input_val'])); echo 'Привет, значение ' . $_POST['input_val'] . ' сохранено.'; die(); } // wp_ajax_ - только для зарегистрированных пользователей add_action('wp_ajax_myaction', 'true_function'); // wp_ajax_{значение параметра action} // wp_ajax_nopriv_ - только для незарегистрированных, т е для залогиненных он работать не будет (результатом выполнения запроса будет 0) add_action('wp_ajax_nopriv_myaction', 'true_function'); // wp_ajax_nopriv_{значение параметра action} |
Пример. Изменение произвольных полей постов «на лету».
Предположим, в нашем интернет-магазине прямо-таки дофига товаров и при этом приходится часто изменять их цены. Конечно, в таком случае будет удобнее, если редактируемое поле с ценой будет непосредственно в списке товаров, то есть, чтобы можно было изменять цену, не переходя на страницу редактирования.
На самом деле есть два варианта решения, но мы рассмотрим только тот, который по теме.
Шаг 1. Добавление колонки с ценой в список товаров
Более подробно о колонках в списках постов я писал здесь, кстати, возможно плагин магазина, который вы используете (если используете) уже мог сам надобавлять колонок, тогда вам потребуется лишь немного отредактировать их содержимое.
Вот готовый код для колонок.
Обязательно убедитесь, что тип поста на 16-й строчке кода соответствует вашему (слово product
)!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | function true_add_post_columns($my_columns){ $slider = array( 'price' => 'Цена' ); $my_columns = array_slice( $my_columns, 0, 5, true ) + $slider + array_slice( $my_columns, 5, NULL, true ); return $my_columns; } function true_fill_post_columns( $column ) { global $post; switch ( $column ) { case 'price': echo '<input type="text" data-id="' . $post->ID .'" value="' . get_post_meta( $post->ID, '_price', true ) . '" /><p></p>'; break; } } add_filter( 'manage_edit-product_columns', 'true_add_post_columns', 10, 1 ); // manage_edit-{тип поста}_columns add_action( 'manage_posts_custom_column', 'true_fill_post_columns', 10, 1 ); |
Всталяем этот код в например functions.php
, и у вас должно получиться что-то в этом роде:
По скриншоту виду, что никаких кнопок типа «Сохранить» к полю добавлено не было — на самом деле зачем они нам, если цену можно сохранять автоматически (при снятии фокуса), достаточно лишь кликнуть мышью за пределами поля ввода.
Шаг 2. Создание и подключение скриптов
Самый легкий шаг на самом деле, но при этом он очень важен. Итак, сначала нужно создать какой-нибудь пустой js-файл в папке с вашей текущей темой (важно, чтобы он находился в той же папке, что и functions.php
, style.css
). Назовите его как-нибудь, у меня это будет ajax-post-meta.js
.
Теперь в functions.php
добавим:
wp_enqueue_script('jquery'); wp_enqueue_script('ajaxpostmeta', get_stylesheet_directory_uri() . '/ajax-post-meta.js', array('jquery')); |
Шаг 3. Асинхронный AJAX запрос. Содержимое файла ajax-post-meta.js
Если до этого шага вы делали всё в точности так, как я описывал, можете вставлять следующий код в ajax-post-meta.js
, не задумываясь:
jQuery(function($){ $('.this_price').blur(function(){ this_price = $(this); $.ajax({ type:'POST', url:ajaxurl, data:'action=updatePrice&price_val=' + this_price.val() + '&product_id=' + this_price.attr('data-id'), beforeSend:function(xhr){ this_price.attr('readonly','readonly').next().html('Сохраняю...'); }, success:function(results){ this_price.removeAttr('readonly').next().html('<span>Сохранено</span>'); } }); }); }); |
Шаг 4. Функция-обработчик
В functions.php
:
function updatePrice_callback(){ // название не имеет значения, но должно соответствовать названиям в хуках update_post_meta($_POST['product_id'], '_price', esc_attr($_POST['price_val'])); die(); } if( is_admin() ) { add_action('wp_ajax_updatePrice', 'updatePrice_callback'); // wp_ajax_nopriv_ не нужен, так как мы работаем в админке (а в админку не попадают незареганные пользователи) } |
Функция is_admin() нужна в данном случае для того, чтобы подключать обработчик только в бэкэнде и не нагружать остальной сайт.
В итоге у вас всё должно получиться, то есть сначала вводим цену в поле, потом щелкаем где-нибудь на странице (например переходим в другое поле), и цена сохраняется.
Как использовать AJAX в WordPress
За последние несколько лет AJAX стал самым популярным способом создания динамичных, удобных и гибких сайтов. AJAX – это технология, предоставляющая возможность обновлять содержимое на сайте без перезагрузки страниц в браузере. Например, Google Docs использует эту технологию каждые несколько минут для автоматического сохранения Вашей работы.
Несмотря на то, что существует несколько способов использовать AJAX в WordPress, и все они “правильные” в широком смысле слова, мы остановимся только на одном из них. Этот способ официально поддерживается WordPress, он очень логичен, за ним будущее, и он предоставляет очень много опций прямо “из коробки”.
Что такое AJAX?
Если Вы ещё не знакомы с AJAX, то предлагаю Вам по завершении чтения этого руководства обратить внимание на статью из Wikipedia. Это тот редкий случай, когда советуем читать как можно меньше о технологии, прежде чем приступить к практике. На практике всё не так сложно как в теории, потому что мы будем использовать библиотеку jQuery, а не чистый JavaScript.
В двух словах, AJAX представляет собой сочетание HTML, CSS и JavaScript-кода, который позволяет отсылать данные на сервер, а затем получать и обрабатывать ответ без необходимости перезагружать страницу.
Если на Вашем сайте есть страница, на которой пользователи могут изменять свой профиль, то Вы можете воспользоваться технологией AJAX для обновления профиля без перезагрузки страницы всякий раз, когда пользователь отправляет форму. После того как пользователь нажал на кнопку отправки формы, введенные им данные с помощью AJAX передаются на сервер для сохранения. Серверный скрипт возвращает строку: “данные сохранены”. После этого данные пользователя выводятся на страницу.
Чтобы разобраться в AJAX, нужно понять, чем он отличается от стандартного подхода. Если у Вас есть контактная форма на сайте, то, вероятно, она размечена с помощью HTML с применением CSS-стилей. А на сервере хранится PHP-скрипт, обрабатывающий полученную информацию. Единственное различие между AJAX-формой и обычной в том, каким образом информация попадает в скрипт на сервере и обратно к пользователю. Всё остальное идентично.
Чтобы использовать весь потенциал AJAX и получить максимальную пользу от этого руководства, Вы должны быть знакомы с JavaScript (jQuery будет достаточно), а также HTML, CSS и PHP. Если даже Ваши знания в JavaScript сомнительны, не волнуйтесь, Вы всё равно сможете следовать логике. Если Вам нужен будет совет или подсказка, напишите об этом в комментариях, и мы постараемся помочь.
Как использовать AJAX
Один из способов, которые мы использовали ещё в старые добрые времена, заключается в том, чтобы просто подключить файл wp-load.php к Вашему PHP-скрипту. Это позволит Вам использовать функции WordPress, определять текущего пользователя и так далее. Но по сути это хак, и прямо скажем, не лучшее решение. Этот способ не безопасен и не предоставляет Вам такие интересные варианты, которые предлагает система WordPress.
Как AJAX работает в WordPress
AJAX уже используется в движке WordPress и готов для работы. Всё, что от Вас требуется – использовать доступные функции. Давайте сначала посмотрим на этот процесс в общих чертах, прежде чем погрузиться в код.
Каждый AJAX-запрос проходит через файл admin-ajax.php, который находится в папке wp-admin
. Пусть название файла Вас не сбивает с толку.
Каждый запрос должен передавать (используя метод GET
или POST
) информацию о выполняемом действии. Исходя из этого действия, код в файле admin-ajax.php создаёт два хука, wp_ajax_my_action
и wp_ajax_nopriv_my_action
, где my_action
– переменная GET
или POST
, в которой хранится информация о действии.
Первый хук предназначен для авторизованных пользователей, а второй для неавторизованных.
Интеграция AJAX в WordPress
Давайте создадим элементарную систему голосования в качестве примера. Для начала создайте пустой плагин и активируйте его. Если Вам нужна помощь с этой частью, то прочитайте этот урок Как создать плагин для WordPress. После найдите файл single.php Вашей темы и откройте его.
Подготовка для выполнения AJAX-запроса
Давайте создадим ссылку, которая позволит посетителям голосовать за Ваши посты. Если в браузере посетителя включён JavaScript, то он будет использован; иначе – будет совершен переход по ссылке. В файле single.php где-то возле заголовка поста добавьте следующий фрагмент кода:
| <?php $votes = get_post_meta($post->ID, «votes», true) $votes = ($votes == «») ? 0 : $votes; ?> This post has <div><?php echo $votes ?></div> votes<br>
<?php $nonce = wp_create_nonce(«my_user_vote_nonce»); $link = admin_url(‘admin-ajax.php?action=my_user_vote&post_id=’.$post->ID.’&nonce=’.$nonce); echo ‘<a data-nonce=»‘ . $nonce . ‘» data-post_id=»‘ . $post->ID . ‘» href=»‘ . $link . ‘»>vote for this article</a>’; ?> |
Сначала мы получим количество голосов текущего поста с помощью функции get_post_meta
. Если функция нам вернёт пустую строку (в случае, если голосов ещё не было), то покажем пользователям нуль.
Мы создали простую ссылку с единственным небольшим дополнением. Мы используем nonces в целях безопасности для предотвращения атак и ошибок. Иначе это была бы самая обычная ссылка, указывающая на файл admin-ajax.php и передающая через GET-параметры информацию о действии для выполнения и идентификатор поста.
Для удовлетворения посетителей с включенным JavaScript, мы добавили класс user_vote
, к которому мы прикрепили событие (клик левой кнопкой мыши) и параметр data-post_id
, содержащий идентификатор поста. Это поможет нам передать необходимую информацию в JavaScript-код.
Обработка события без JavaScript
Если Вы нажмёте на ссылке сейчас, то будете переадресованы к скрипту admin-ajax.php, который выведет на экран “-1”. Давайте, это исправим!
В своём плагине создайте функцию и добавьте её в новые хуки, которые недавно были созданы. Вот так:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
| add_action(«wp_ajax_my_user_vote», «my_user_vote»); add_action(«wp_ajax_nopriv_my_user_vote», «my_must_login»);
function my_user_vote() {
if ( !wp_verify_nonce( $_REQUEST[‘nonce’], «my_user_vote_nonce»)) { exit(«No naughty business please»); }
$vote_count = get_post_meta($_REQUEST[«post_id»], «votes», true); $vote_count = ($vote_count == ») ? 0 : $vote_count; $new_vote_count = $vote_count + 1;
$vote = update_post_meta($_REQUEST[«post_id»], «votes», $new_vote_count);
if($vote === false) { $result[‘type’] = «error»; $result[‘vote_count’] = $vote_count; } else { $result[‘type’] = «success»; $result[‘vote_count’] = $new_vote_count; }
if(!empty($_SERVER[‘HTTP_X_REQUESTED_WITH’]) && strtolower($_SERVER[‘HTTP_X_REQUESTED_WITH’]) == ‘xmlhttprequest’) { $result = json_encode($result); echo $result; } else { header(«Location: «.$_SERVER[«HTTP_REFERER»]); }
die();
}
function my_must_login() { echo «You must log in to vote»; die(); } |
Прежде всего, мы выполняем проверку с помощью nonce
, чтобы убедиться в безопасности выполнения запроса. Если что-то не так, мы останавливаем скрипт. Иначе мы двигаемся дальше и получаем количество голосов из базы данных. Если голосов ещё не было, то установим значение переменной vote_count
равное 0
. После этого добавим 1
к количеству голосов.
Используя функцию update_post_meta
, обновим количество голосов соответствующего поста. Эта функция создаёт мета-данные поста, если их ещё нет. Она возвращает true
в случае успешного выполнения и false
при возникновении ошибки. Мы создадим массив для обоих случаев.
Нам нравится использовать массив для хранения конечных результатов. Это позволяет стандартизировать обработку этих результатов и облегчить отладку ошибок.
Этот массив хранит только тип конечного результата (ошибка или успешное выполнение) и количество голосов. В случае ошибки используется старое количество голосов, т.к. новый голос не был добавлен. А если же предыдущие действия выполнились успешно, то мы учитываем новый голос.
В завершении функции мы определяем, каким образом было вызвано действие – используя стандартный подход или AJAX-запрос. Если использовался AJAX, то подготовим массив для JavaScript-кода с помощью функции json_decode
. В противном случае мы просто перенаправляем пользователя на страницу, с которой он пришёл.
Всегда заканчивайте выполнение своих скриптов функцией die, чтобы быть уверенным в корректности результатов. Иначе вместе с результатами Вы будете получать строку "-1"
.
Функция для обработки действий неавторизованных пользователей очень проста. Вы можете её расширить, перенаправляя пользователя на страницу регистрации или отображая больше полезной информации.
Подключение JavaScript
Теперь, когда мы настроили обработку пользовательских действий, используя стандартные методы, давайте перейдём к JavaScript. Многие разработчики предпочитают именно этот метод из-за его изящности. Для того чтобы наша система использовала AJAX, нужно подключить библиотеку jQuery и сам JavaScript-код. Чтобы сделать это, добавьте следующий фрагмент кода в Ваш плагин:
| add_action( ‘init’, ‘my_script_enqueuer’ );
function my_script_enqueuer() { wp_register_script( «my_voter_script», WP_PLUGIN_URL.’/my_plugin/my_voter_script.js’, array(‘jquery’) ); wp_localize_script( ‘my_voter_script’, ‘myAjax’, array( ‘ajaxurl’ => admin_url( ‘admin-ajax.php’ )));
wp_enqueue_script( ‘jquery’ ); wp_enqueue_script( ‘my_voter_script’ );
} |
Таким способом в WordPress подключаются внешние файлы. Сначала мы регистрируем файл JavaScript, чтобы WordPress знал о нём (убедитесь в том, что файл создан и находится в папке с плагином). Первый аргумент функции wp_register_script
– уникальный идентификатор нашего скрипта. Второй – путь к скрипту. Третий – массив зависимостей.
Нашему скрипту будет необходима библиотека jQuery, поэтому мы добавили её, как зависимость. jQuery уже зарегистрирован в WordPress, поэтому всё, что нужно было сделать – указать уникальный идентификатор.
Локализация скрипта не обязательна, но это хороший способ объявить переменные, которые мы будем использовать. Мы указываем идентификатор скрипта в качестве первого аргумента. В качестве второго – имя объекта. А в качестве третьего можно указать свойства объекта. Мы делаем это для того, чтобы можно было использовать свойство myAjax.ajaxurl
, содержащее URL-адрес файла admin-ajax.php.
После того, как наши скрипты зарегистрированы, их можно добавить к страницам, используя функцию wp_enqueue_script
. При этом не обязательно соблюдать правильный порядок, WordPress позаботится об этом, опираясь на указанные Вами зависимости.
Затем добавьте следующий код в файл my_voter_script.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
| jQuery(document).ready( function() {
jQuery(«.user_vote»).click( function() { post_id = jQuery(this).attr(«data-post_id») nonce = jQuery(this).attr(«data-nonce»)
jQuery.ajax({ type : «post», dataType : «json», url : myAjax.ajaxurl, data : {action: «my_user_vote», post_id : post_id, nonce: nonce}, success: function(response) { if(response.type == «success») { jQuery(«#vote_counter»).html(response.vote_count) } else { alert(«Your vote could not be added») } } })
})
}) |
Давайте вернёмся к основам. Это будет полезно для тех, кто впервые сталкивается с AJAX и пока не понимает, что происходит во фрагменте кода выше. Если пользователь нажимает на кнопку голосования без включенного JavaScript, то запускается нужный PHP-скрипт и данные передаются с помощью GET
-метода. Если JavaScript включен, происходит всё почти тоже самое, однако с использованием AJAX и без перезагрузки страницы.
Функция my_user_vote
, объявленная в нашем плагине, обработает предоставленные ей данные и вернёт нам результат, закодированный в формате JSON. Благодаря тому, что данные возвращаются к нам именно в формате JSON, мы можем сразу же работать с ними, как с JavaScript объектом без лишних действий.
Вот что происходит в нашем примере: счётчик количества проголосовавших меняет своё значение, и новое количество голосов отображается пользователю. В реальности нам бы следовало добавить информацию о том, что всё прошло успешно и сообщить об этом проголосовавшему. Кроме того, использовать функцию alert
для сообщения об ошибке было бы очень некрасиво, придумайте что-то менее раздражающее на свой вкус.
Выводы
На этом мы заканчиваем это краткое руководство по использованию AJAX в WordPress. В нашем примере ещё многое может быть сделано, но главная цель выполнена – показать Вам, как правильно использовать технологию AJAX в своих плагинах WordPress. Напомним, что это делается в четыре шага:
- Создаём AJAX-запрос;
- Создаём функцию, которая будет обрабатывать этот запрос;
- Добавляем функцию в хук, который был специально создан;
- Создаём обработчики результатов.
Как уже было сказано ранее, обязательно убедитесь в том, что всё отлично работает без включенного JavaScript. Ведь нужно, чтобы голосование корректно работало для пользователей, у которых JavaScript отключен.
Имейте ввиду, что используя хуки, можно без проблем связывать существующие в WordPress функции с нашими AJAX-запросами. Именно это, в сочетании с лёгкостью в использовании, делает систему обработки AJAX-действий в WordPress очень мощным и удобным инструментом для разработчика.
Возможно, Вам будет интересно ↓↓↓
Ajax подгрузка постов WordPress — WordPress плагины
<?php
/*
Plugin Name: Ajaxer
Text Domain: asp01
Domain Path: /languages
Description: Show post by Ajax
Version: 1.0.0
Author: Alex Kuimov
*/
add_action(‘wp_head’, ‘sp_scripts’);
function sp_scripts() {
wp_register_script(‘ajaxer-script’, plugins_url(‘ajaxer-script.js’, __FILE__));
wp_enqueue_script(‘ajaxer-script’);
wp_localize_script(‘ajaxer-script’, ‘ajax_object’, array(‘ajax_url’ => admin_url(‘admin-ajax.php’)));
}
add_action(‘wp_enqueue_scripts’, ‘sp_styles’);
function sp_styles() {
wp_register_style(‘ajaxer-style’, plugins_url(‘ajaxer-style.css’, __FILE__), false, false, ‘all’);
wp_enqueue_style(‘ajaxer-style’);
}
function sp_show_posts(){
$count = sanitize_text_field($_POST[‘count’]);
$first_show = sanitize_text_field($_POST[‘first_show’]);
$posts_per_page = get_option(‘posts_per_page’);
$count = $count + $posts_per_page;
$args = array(
‘orderby’ => ‘id’,
‘order’ => ‘DESC’,
‘post_type’ => ‘post’,
‘post_status’ => ‘publish’,
);
if($first_show == ‘y’){
$args[‘posts_per_page’] = $posts_per_page;
} else {
$args[‘posts_per_page’] = $count;
}
query_posts( $args );
global $wp_query;
$all_post_count = $wp_query->found_posts;
$current_post_count = 0;
while( have_posts() ): the_post();
$current_post_count++;
get_template_part(‘template-parts/single’);
endwhile;
wp_reset_postdata();
if($all_post_count != $current_post_count){
echo ‘<div>Загрузить еще</div>’;
}
}
add_action(‘wp_ajax_sp_show_posts’, ‘sp_show_posts’);
add_action(‘wp_ajax_nopriv_sp_show_posts’, ‘sp_show_posts’);
?>
Как исправить слишком частое использование Admin Ajax WordPress: решение основных проблем
От автора: определение частоты использования admin-ajax.php – очень распространенный сценарий при работе с WordPress. Если вы уже давно работаете с WordPress, то должны были сталкиваться с этим при запуске тестов скорости и проверки логов доступа на сервере. Высокое потребление вызвано сторонними плагинами и частыми некэшируемыми запросами из панели администратора из-за Heartbeat API (например, автосохранение черновиков). Тем не менее, важно диагностировать высокие всплески admin-ajax.php, когда вы видите их, так как они, как известно, замедляют сайт. Ознакомьтесь с приведенными ниже рекомендациями по способам решения проблем с admin ajax WordPress.
Что такое файл admin-ajax.php?
При правильном использовании файл admin-ajax.php не так плох. Это часть ядра, он был добавлен командой разработки WordPress в версии 3.6. Цель admin-ajax.php – создать соединение между браузером и сервером посредством AJAX. Это открывает продвинутую функциональность, такую как улучшенное автосохранение, отслеживание изменений, таймауты авторизации, управление сессией и уведомления о блокировке поста при редактировании несколькими пользователями. Все функции замечательные, особенно для тех, кто работает с несколькими админами и авторами.
«Идея в том, чтобы иметь относительной простой API, посылающий XHR запросы на сервер каждые 15 секунд и запускающий события (или колбеки) при получении данных. Другие компоненты смогут зацепиться или получить уведомление об активности другого пользователя. Это можно использовать для блокирования одновременного редактирования виджетов и меню или для любых других задач, требующих регулярных обновлений с сервера.»
Люди без особых технических навыков могут повлиять на admin-ajax.php только одним образом – они могут попробовать понять, почему этот файл замедляет тесты скорости в инструментах типа Pingdom (см. пример ниже). Или же можно посмотреть тонны запросов к файлу в логах доступа к хосту.
Бесплатный курс «Основы создания тем WordPress»
Изучите курс и узнайте, как создавать мультиязычные темы с нестандартной структурой страниц
Скачать курс
Просмотр admin-ajax.php в тестах скорости и логах доступа – это результат двух разных сценариев. Один на front end и другой на back end. О втором мы поговорим ниже.
1. Плагины могут вызвать резкий скачок в admin-ajax.php
Первая и самая частая проблема, возникающая у людей с admin-ajax.php, связана со сторонними плагинами. Это обычно видно на front end и показывается в тестах скорости. Разработчики используют этот файл и/или AJAX, чтобы добавить функциональность в свои плагины. Но если вы видите запрос к admin-ajax.php , не факт, что он замедляет ваш сайт. AJAX загружается после загрузки страницы, определенные запросы можно грузить асинхронно. Но и это не говорит о том, что разработчик делает все правильно или о производительности кода. Для разработчиков есть статья о том, как правильно использовать AJAX в темах и плагинах WordPress.
Ниже представлены примеры того, как можно быстро диагностировать скачки в admin-ajax.php. Мы будем использовать GTmetrix, так как он позволяет подробно разбирать отдельный пост и ответ. Pingdom, к сожалению, не позволяет просматривать данные из формы запроса. Можно также использовать Google Chrome Devtools или WebPageTest.
Высокие скачки admin-ajax.php из Visual Composer Plugin
Ниже представлен сторонний WordPress сайт с большими скачками в admin-ajax.php. Как видно, GTmetrix показывает скачок до 8 секунд! Остальная часть водопада выглядит нормально, но этот момент владелец сайта должен решить обязательно.
Если кликнуть в POST admin-ajax.php запрос, откроется 3 вкладки: Headers, Post и Response. Во время диагностики таких проблем нас интересуют вкладки Post и Response. На этом сайте можно мгновенно посмотреть подсказки на вкладке Response. Видно, что часть запроса связана со скриптом vc_shortcodes-custom-css.
Быстрая копипаста в google дате нам результат – проблема в плагине/конструкторе страниц Visual Composer для WordPress. Вы удивитесь количеству индексов в google.
Дальше этот человек должен убедиться, что у него установлена последняя версия Visual Composer. Если да, то необходимо связаться с разработчиками плагина и заявить о проблеме с admin-ajax.php. На самом деле, это частая проблема с плагином, как видно из поста на Stack Overflow. Плюс WordPress в том, что если вам не удалось решить проблему с одним плагином, почти всегда есть другие плагины. Например, можно попробовать другие конструкторы страниц Beaver Builder или Elementor.
Высокие скачки admin-ajax.php из Notification Bar Plugin
Ниже представлен второй пример сайта разработчика. После установки какого-то стороннего плагина мы сразу увидели огромный всплеск в admin-ajax.php.
Если кликнуть на запрос POST admin-ajax.php, можно подробно исследовать его. Можно заметить, что в данных поста есть “action=mtsnb_add_impression&bar_id=88&ab_variation=none.”.
Как правило, первая часть действия post также относится к CSS классу в плагине. Опять быстро гуглим «mtsnb», и первым результатом выпадает плагин Notification Bar, который запущен на нашем сайте.
У разработчиков есть и другие способы отслеживания плагинов, которые генерируют POST запрос, но, как мы выяснили, тест скорости и поиск google тоже достаточно эффективны.
Бесплатный курс «Основы создания тем WordPress»
Изучите курс и узнайте, как создавать мультиязычные темы с нестандартной структурой страниц
Скачать курс
Верный способ определить происхождение admin-ajax.php
Выше описано пара легких способов того, как быстро найти плагин в WordPress, который вызывает проблема. По нашему опыту, это работает в 99% случаев. Но в случаях, когда post данные и действия не так ясны, всегда можно пойти старым способом. Просто отключите все плагины в WordPress. Запустите тест скорости. Если admin-ajax.php нигде не найден, включайте по одному плагину и повторно запускайте тесты. Отключение всех плагинов – верный способ найти источник.
Здесь также поможет тестовое окружение Kinsta. Просто скопируйте WordPress сайт в тестовую среду и запустите тесты без воздействия на настоящий сайт. После нахождения причины можно поправить настоящий сайт.
Подобные проблемы также может помочь решить отчет по использованию AJAX на MyKinsta analytics. Там можно смотреть определенные AJAX всплески за определенные периоды.
2. Проблемы CPU с admin-ajax.php на back end
Вторая основная проблема — WordPress Heartbeat API использует admin-ajax.php для отправки AJAX запросов из браузера, что может нагрузить CPU. Каждый AJAX запрос загружает весь back end WordPress и обходит все формы кэширования. Как правило, в тестах скорости этого не увидишь. Это особенно важно знать тем, кто использует дешевые общие хосты, так как у них не так много свободного CPU. WP Tavern испытали это на своей шкуре и мигрировали с HostGator из-за множества зависаний.
Нужно аккуратно подходить к одному сценарию – автосохранение в WordPress и открытые вкладки. Например, мы запустили новый черновик на сайте и оставили вкладку открытой. Heartbeat API по умолчанию каждые 15 секунд будет биться в admin-ajax.php для автосохранения. Если оставить вкладку открытой на компьютере, то один пост может сгенерировать 5 760 запросов за день!
Для одного человека это много запросов на back end. Но что будет, когда на сайте будет несколько редакторов? Эти запросы быстро умножатся. Мы испытали это в нашем недавнем примере DARTDrones, где мы помогали расширить сайт WooCommerce для Shark Tank. За 24 часа они получили более 4 100 запросов в файл admin-ajax.php с 2000 уникальных посетителей. Не самое хорошее соотношение запросов к посетителям. Мы обнаружили это через wp-admin referrer URL, который был создан из-за того, что их админы обновили сайт, чтобы подготовиться к показу.
Есть способы решить проблему с запросами к admin-ajax.php на back end при автосохранении, ревизиях, блокировании и т.д. Здесь нам поможет бесплатный плагин Heartbeat Control plugin от Jeff Matson.
На данный момент The Heartbeat control имеет 70 000+ активных установок с рейтингом 5 из 5 звезд. Последний раз он обновлялся 2 года назад, но за это время работа Heartbeat API почти не поменялась. Можете скачать его с репозитория WordPress или найти в панели WordPress под «Add New plugins».
Плагин позволяет парой кликов управлять частотой WordPress heartbeat API. Первая опция контролирует heartbeat locations, такие как полное отключение или «разрешено только на страницах редактирования постов». Рекомендуем использовать последнее, если вы не уверены, что можете полностью отключить функцию, не сломав плагин, который ее использует.
Вторая опция позволяет выбрать частоту. Если изменить значение с 15 секунд на 60, это кардинально снизит количество запросов, что сэкономит ресурсы сервера (загрузка CPU).
Можно также использовать премиум плагин типа perfmatters (разработан членом команды Kinsta), который позволяет отключать heartbeat, изменять его частоту и менять интервал автосохранения.
Заключение
Как видите, существуют быстрые и легкие способы диагноза и решения проблем с admin-ajax.php. Как правило, они возникают из-за сторонних плагинов, которые могут конфликтовать друг с другом или иметь плохой код. Если у вас загружается CPU на back end из-за admin-ajax.php, подумайте об управляемом WordPress хостинге типа Kinsta. У них больше опыта работы с проблемами производительности такого типа.
А у вас возникали проблемы с admin-ajax.php на сайте WordPress? А, может, у вас есть советы. Будем рады услышать ваши мысли.
Автор: Brian Jackson
Источник: //kinsta.com/
Редакция: Команда webformyself.
Бесплатный курс «Основы создания тем WordPress»
Изучите курс и узнайте, как создавать мультиязычные темы с нестандартной структурой страниц
Скачать курс
Хотите узнать, что необходимо для создания сайта?
Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!
Смотреть
Файл admin-ajax.php и нагрузка на сервер
Нам в редакцию часто пишут с просьбой разобраться с нагрузкой на сайт WordPress, и во многих случаях это связано с файлом admin-ajax.php. В этой статье мы расскажем за что отвечает данный файл и как бороться с его нагрузкой на сервер.
AJAX запросы и admin-ajax.php
AJAX — это асинхронные HTTP запросы выполняемые на странице с помощью языка JavaScript, позволяющие общаться с веб-сервером без полной перезагрузки страницы. Это позволяет делать интерфейсы более быстрыми, отзывчивыми и динамичными.
В WordPress такой подход используется во многих местах: работа с медиафайлами, автоматическое сохранение записей, управление ревизиями, работа с произвольными полями, работа с виджетами и многое другое. И чтобы каждый раз не изобретать велосипед, файл admin-ajax.php в WordPress предоставляет удобный API для работы с AJAX запросами.
В данной статье мы не будем рассматривать сам API, но стоит отметить, что несмотря на присутствие слова «admin» в названии файла, через него могут проходить запросы и с лицевой части сайта, включая анонимные запросы из тем и плагинов WordPress. К сожалению многие источники ошибочно советуют отключить этот файл, или заблокировать его паролем — этого делать не стоит.
Большое количество запросов на admin-ajax.php
Как мы уже упомянули, файл admin-ajax.php вызывается при автоматическом сохранении записей, а также для обновления блокировок, чтобы два пользователя не могли редактировать одну и ту же запись одновременно. Это реализует API в WordPress под названием Heartbeat (сердцебиение), который построен на базе admin-ajax.php.
Запросы на admin-ajax.php
При редактировании записи Heartbeat отправляет запрос на admin-ajax.php каждые 15 секунд (или каждые 60 секунд, в случае если вкладка в браузере не является активной). Поэтому если вы видите в логах вашего веб-сервера большое количество запросов на admin-ajax.php стоит их проанализировать.
- С каких IP адресов приходят эти запросы
- С какой периодичностью они приходят
- Сколько времени в среднем занимает один такой запрос
- Каково содержание запроса
Итак, если эти запросы приходят с вашего IP адреса, или с IP адресов редакторов на вашем сайте, если их периодичность около 15-60 секунд, если каждый такой запрос занимает не более 0.5 сек, и содержание запросов не содержит ничего необычного, то все в порядке — файл admin-ajax.php не является источником нагрузки на ваш сервер, независимо от «большого» количества запросов. А если ваш хостинг-провайдер уверяет вас в обратном, то советуем задуматься о его компетентности и о возможном переезде.
Когда admin-ajax.php действительно является проблемой
Рассмотрим несколько вариантов, когда admin-ajax.php действительно становится источником высокой нагрузки на ваш сервер, и как бороться с этой нагрузкой.
Запросы на admin-ajax.php занимают более 1 секунды
В среднем запросы на admin-ajax.php могут занимать около 300 мс. Если же на вашем сайте данные запросы выполняются более чем за одну секунду, то необходимо разобраться. Используйте средства профилирования, чтобы понять чем именно занят процесс все это время. Наверняка вы найдете медленную функцию в вашей теме или плагине, которая не имеет никакого отношения к AJAX запросам.
Если же вы не владеете средствами профилирования, или у вас нет времени разбираться в чужом коде, то попробуйте отключить все плагины и активировать стандартную тему WordPress. Затем активируйте плагины по порядку, чтобы понять какой из них является причиной медленных запросов на admin-ajax.php.
Бывает и такое, что запросы на admin-ajax.php становятся медленными не из-за конкретных плагинов или тем, а из-за неоптимальной конфигурации сервера MySQL. Такое бывает достаточно редко, и в этом случае следует заняться оптимизацией сервера базы данных.
Подозрительное содержание запроса
Файл admin-ajax.php (и admin-post.php) часто выбирается злоумышленниками для того, чтобы использовать известную уязвимость в каком-нибудь плагине. В качестве примера можно привести недавний инцидент с популярным плагином FancyBox, где именно admin-ajax.php (или admin-post.php) послужил точкой входа.
Эти файлы выбираются не спроста, ведь каждый из них исполняет событие admin_init
даже для анонимных HTTP запросов. Многие разработчики плагинов и тем, ошибочно считают, что раз выполняется событие admin_init
, значит пользователь выполнил вход и имеет права администратора. Это не так. Повторяем — событие admin_init
выполняется даже для анонимных HTTP запросов.
Итак, в случае с уязвимостью плагина FancyBox for WordPress, вот примерно то, как выглядит «подозрительное содержание запроса»:
46.4.76.174 – – [04/Feb/2015:00:25:09 -0500] "POST /wp-admin/admin-ajax.php?page=fancybox-for-wordpress HTTP/1.1" 403 4207 INPUTBODY:action=update&mfbfw%5Bext...
Если вы обнаружили подобный запрос, необходимо понять на какой конкретно плагин или тему он нацелен, что именно он пытается сделать, удалось ли ему это. В подобных случаях мы рекомендуем обратиться к экспертам по безопасности WordPress.
Неузнаваемые IP адреса
Этот пункт тесно связан с предыдущим. Если вы увидели запросы на admin-ajax.php с неузнаваемых IP адресов, то необходимо проанализировать эти запросы, и понять чего именно пытается сделать злоумышленник. IP адреса можно заблокировать, например по шаблону с помощью fail2ban.
Слишком частая периодичность запросов
Как мы уже упомянули, на активной вкладке при редактировании записи, WordPress выполняет AJAX запрос каждые 15 секунд, т.е. для достижения 1 запроса в секунду на сервере, вам необходимо 15 редакторов с открытой вкладкой. Если вы являетесь единственным редакторов на вашем сайте, а запросов на admin-ajax.php с вашего IP адреса более 1 в секунду (мы встречали и 20/с), то стоит с этим разобраться.
Самой частой причиной подобного поведения является тема или плагин, поэтому следует их деактивировать и включать по порядку, чтобы найти источник. Здесь стоит также упомянуть плагин Heartbeat Control, который позволяет изменять стандартную конфигурацию Heartbeat в WordPress, но учтите, что отключив Heartbeat вы скорее временно скрываете проблему, а не устраняете ее.
Заключение
В этой статье мы рассмотрели несколько причин, по которым может возникать высокая нагрузка на хостинг-площадку через файл admin-ajax.php, но не исключено, что могут быть и другие.
В случае с любой «лишней» нагрузкой на сервер, рекомендуем всегда проверять факты, средства профилирования — ваши лучшие друзья. Результаты порой бывают удивительными, когда например некоторые из очень популярных плагинов для WordPress оказываются самыми медленными.
7. AJAX c jQuery и WordPress
Все те небольшие рабочие примеры, построенные на базе .load и .getJSON, с которыми мы познакомились в предыдущих статьях, открывали широкую перспективу использования решений AJAX для WordPress сайтов. Самое…
На данном этапе удовольствие не заканчивается! Теперь, когда вы знакомы с использованием .getJSON, вы можете создавать многочисленные виды мешапов и решений для собственных WordPress сайтов. Понимание JSON и…
Клиенту понравилось наше прошлое улучшение, и теперь он задумывается над тем, как разбавить тяжеловесный текст, размещенный на главной странице. Мы предложили ему добавить в сайдбар шесть последний изображений…
В прошлой статье, насколько вы помните, мы получали только текст твитов, игнорируя остальное содержимое. Ниже представлен пример, что Twitter в действительности отправляет назад через JSON в строке URL:
Параметр URL в нашей функции .getJSON будет иметь следующий вид: Вы можете выбирать один из следующих форматов (мы будем использовать json): atom json rss xml Для начала нам…
В качестве введения к статье я должен заметить, что при работе с API различных сервисов очень важно тщательно изучить их документацию. Сервисы периодически обновляют свои API, расширяя предложенные…
Перед тем как погрузиться в работу с Twitter и другими сервисами, давайте изучим основы JSON, а также посмотрим, как можно интегрировать JSON и jQuery. JSON (часто произносится как…
На сегодняшний день Twitter является довольно популярным интернет-сервисом для ведения микроблогов. Именно поэтому существует множество плагинов, написанных на jQuery, которые позволяют соединиться с Twitter. Я отдаю свое предпочтение…
Давайте предположим, что у нас есть клиент – дизайнер мультимедийных проектов с открытым исходным кодом, – которому требуется выполнить чистую и оригинальную домашнюю страницу. Он желает, чтобы все…
Скажем, мы должны преобразовать часть загружаемого контента. Никаких проблем. Специально для этих целей мы можем использовать функцию обратного вызова:
Использование AJAX с PHP на вашем сайте WordPress без подключаемого модуля
Хороший дизайн незаметен! Это как кондиционер, включенный в автоматический контроль температуры. Пока вам не станет слишком жарко или холодно, вы не обращаете на это никакого внимания, вместо этого сосредотачиваясь на текущей задаче или просто наслаждаясь временем.
Для пользователей веб-серфинга Ajax похож на автоматический кондиционер. Это делает веб-сайты более плавными и быстрыми в использовании, что доставляет удовольствие. А главное, просто работает!
Если вы предпочитаете видео, вам повезло!
Что такое Ajax?
Ajax — это метод веб-разработки, обозначающий A синхронный J avaScript A nd X ML .Он используется для создания динамических интерактивных и увлекательных веб-приложений. С Ajax вам не нужно ждать перезагрузки веб-страницы, чтобы увидеть изменения. Обо всем позаботятся автоматически в фоновом режиме, не мешая тому, что вы делаете, тем самым улучшая ваше взаимодействие с пользователем.
Аякс в действии!
Вы, наверное, уже встречали Ajax в Интернете. Функция автозаполнения в Google Поиске, пожалуй, самая популярная. Карты Google — другое. Обновление твитов, комментариев на Facebook, сообщений Reddit, лайков на YouTube в реальном времени — все эти невероятные возможности для пользователей стали возможными благодаря Ajax и связанным с ним технологиям.
В этом посте я кратко ознакомлю вас с Ajax, перечислю его преимущества, объясню, как он работает в WordPress, а затем мы с головой погрузимся в создание простого плагина WordPress Ajax.
Звучит весело? Давайте начнем.
Основы Ajax
Ajax использует комбинацию языков программирования, таких как HTML / CSS, JavaScript, XML / JSON, и язык сценариев на стороне сервера (PHP, ASP.NET и т. Д.). Он работает, отправляя данные из браузера на сервер, который обрабатывает их и отправляет ответ.Этот ответ используется браузером для обновления веб-страницы без ее перезагрузки.
Вот как обычно бывает:
- Действие пользователя запускает событие в браузере (например, нажатие кнопки).
- Активируется вызов Ajax, который отправляет запрос на сервер с использованием XML / JSON.
- Серверный сценарий обрабатывает этот запрос. Он также может получить доступ к базе данных, если это необходимо.
- Затем сервер отправляет ответ браузеру.
- Вторая функция JavaScript, называемая функцией обратного вызова, получает ответ и обновляет веб-страницу.
Множество преимуществ Ajax
- Минимизирует использование полосы пропускания и оптимизирует сетевые операции, поскольку серверам не требуется обрабатывать большие объемы данных.
- Экономит время как для пользователей, так и для сервера, поскольку пользователь может сразу увидеть ответ от сервера.
- Повышенная производительность. Поскольку полностраничные данные не отправляются, Ajax улучшает производительность, скорость и удобство использования веб-страниц / приложений.
- Повышенная отзывчивость. За счет исключения перезагрузки полной страницы веб-сайты станут более быстрыми и отзывчивыми, а значит, более удобными для пользователя.
Навыки, необходимые для работы с Ajax в WordPress
- Знание HTML, CSS и JavaScript (достаточно jQuery)
- Базовое знакомство с форматами обмена данными XML или JSON
- Ноу-хау PHP для серверных сценариев
Если вы разбираетесь в jQuery или PHP на ощупь, не волнуйтесь! Вы все еще можете следовать логике учебника. Не стесняйтесь заходить в раздел комментариев, если вы застряли или вам что-то понадобится 🙂
Введение в Ajax в WordPress
Ядро WordPress уже использует Ajax, но только на экранах администратора.Например, когда вы модерируете комментарии или добавляете / удаляете элементы из категорий или сообщений, вы можете видеть мгновенные обновления благодаря Ajax. Это также технология, лежащая в основе столь любимой функции автоматического сохранения.
Ajax чаще всего используется с функциями jQuery в WordPress, поскольку он намного проще по сравнению с VanillaJS. Более того, ядро WordPress уже загружено с библиотекой jQuery.
Вот как выглядит процесс использования Ajax в WordPress:
- Пользователь запускает запрос Ajax, который сначала передается в admin-ajax.php в папке wp-admin .
- Запрос Ajax должен предоставить по крайней мере один фрагмент данных (с использованием метода GET или POST). Этот запрос называется действием .
- Код в admin-ajax.php использует действие для создания двух хуков: wp_ajax_youraction и wp_ajax_nopriv_youraction . Здесь youraction — это значение переменной действия GET или POST.
- Первая ловушка wp_ajax_youraction выполняется только для зарегистрированных пользователей, а вторая ловушка wp_ajax_nopriv_youraction обслуживает исключительно вышедших из системы пользователей.Если вы хотите настроить таргетинг на всех пользователей, вам нужно запустить их обоих по отдельности.
- Спланируйте функции перехвата для постепенной деградации. Это гарантирует, что ваш код будет работать даже в браузерах с отключенным JavaScript.
Давайте создадим плагин WordPress Ajax
Каждое большое путешествие начинается с одного шага, как и наше обучение. Давайте создадим базовый плагин WordPress под названием Post Likes Counter со следующими функциями:
- Зарегистрированные пользователи могут лайкать сообщения.
- Плагин ведет подсчет общего количества лайков к постам и отображает их.
- Счетчик лайков поста обновляется мгновенно на интерфейсе.
- Вышедшим из системы пользователям будет показано сообщение об ошибке, если они попытаются лайкнуть сообщение.
Для начала создайте пустой плагин WP и активируйте его. Если вам нужна помощь с этим, вы можете обратиться к нашему руководству по разработке плагинов WordPress. WordPress Codex также имеет подробную страницу по написанию плагина WP.
Шаблон сообщения «Найди свою тему»
После этого вам нужно найти сингл вашей темы.php шаблон сообщения. Он используется, когда запрашивается отдельная запись, и именно здесь мы хотим, чтобы наш счетчик лайков был. Этот файл находится в корневой папке вашей активной темы. Оставьте его открытым для редактирования.
Подготовьте шаблон сообщения для вызова Ajax
Давайте создадим здесь ссылку, чтобы пользователи могли ставить лайки. Если у пользователя включен JavaScript, он будет использовать файл JavaScript, который мы создадим позже; в противном случае он просто перейдет по ссылке напрямую. Поместите приведенный ниже код в свой сингл .php файл.
В качестве альтернативы, вы можете добавить этот код в любую из частей шаблона , которые включает ваш файл single.php . Например, если вы используете официальную тему Twenty Nineteen , вы можете вставить этот код в файл content-single.php вашей темы. Для тестирования этого кода плагина я вставил его в этот файл в самом конце раздела div.entry-content .
Обращение к вызову Ajax без JavaScript
Щелкнув ссылку, созданную выше, вы перейдете к admin-ajax.php , но вы не увидите никаких полезных результатов, так как еще не создали никакой функции для выполнения действия.
Для этого создайте функцию в файле плагина и добавьте ее к двум хукам, которые были созданы WordPress для вас. Следуйте приведенному ниже коду:
Если все проходит успешно, когда вошедший в систему пользователь щелкает ссылку Like this Post , счетчик лайков выше должен автоматически увеличиваться на 1. В браузерах с отключенным JavaScript страница обновится, но на ней по-прежнему будет отображаться обновленное количество лайков.
Функция обработки вышедших из системы пользователей здесь мало что делает, кроме вывода сообщения об ошибке. Это всего лишь пример. Вы, конечно, можете использовать это и дать своим посетителям более полезные варианты.
Наконец, добавлена поддержка JavaScript
Рекомендуется добавлять поддержку JavaScript ближе к концу, так как это значительно упрощает работу. Чтобы использовать Ajax в WordPress, вам необходимо поставить в очередь библиотеку jQuery, а также собственный файл JavaScript вашего плагина.Для этого перейдите в свой плагин и добавьте следующий скрипт:
Как только это будет сделано, пора создать файл JavaScript liker_script.js . Затем вы должны загрузить этот файл в место, указанное в предыдущем коде (подсказка: это корневая папка вашего плагина). Вот код для liker_script.js :
Функция my_user_like () , определенная в нашем плагине, должна отправлять нашему браузеру ответ в виде массива результатов в кодировке JSON, который также можно использовать как объект JavaScript.Используя это, мы можем обновить сообщение, например, count, не перезагружая веб-страницу.
И все! Ура!
Теперь вы включили функциональность Ajax для своего плагина. Конечно, вы можете расширить это и добавить больше функций по своему вкусу. Давай, настраивай его, пока не получишь!
Наш простой пост вроде счетчика. Вы можете добавить стили, анимацию и другие сценарии, чтобы повысить его уровень.
Известные плагины WordPress, использующие Ajax
Вам нужно вдохновение от Ajax, чтобы вдохновить вас? Ознакомьтесь с этими замечательными плагинами WordPress, которые используют мощь Ajax для создания мощных функций и более удобного взаимодействия с пользователем.
- Плагины отложенной загрузки
Ленивая загрузка — это метод веб-разработки, используемый для сокращения времени начальной загрузки страницы. Это достигается за счет задержки загрузки ресурсоемких ресурсов, которые не видны пользователю в области просмотра браузера. Эти ресурсы загружаются автоматически, когда пользователь прокручивает веб-страницу вниз. Бесплатная версия Smush поддерживает отложенную загрузку. - Forminator
Полностью расширяемый плагин для создания форм, который также поддерживает опросы, викторины, формы заказов с вариантами оплаты и т. Д.У него есть возможность включить отправку форм с помощью Ajax, что делает его удобным для пользователей. - Авторизация с помощью Ajax
Добавьте на свой сайт WordPress плавный вход с помощью Ajax и эффекты регистрации с помощью этого многофункционального плагина. Если вы хотите предоставить своим пользователям более удобные возможности входа и регистрации, чем стандартная версия WordPress, не смотрите дальше. - WP-PostRatings
Этот простой плагин добавляет систему рейтинга Ajax для сообщений и страниц вашего сайта WordPress.Он также добавляет поддержку шорткодов для рейтингов, так что вы можете отображать их где угодно. - YITH WooCommerce Ajax Product Filter
Чрезвычайно полезный и мощный плагин для WooCommerce, который позволяет вам применять точные фильтры, необходимые для отображения вариантов продукта, которые вы ищете. Ajax гарантирует, что все это произойдет в мгновение ока. - Ajax Search Lite
Адаптивный плагин для прямого поиска для WordPress, работающий на Ajax. Он также включает автозаполнение Google и предложения ключевых слов.Предоставьте своим пользователям лучший опыт поиска на вашем веб-сайте с помощью этого плагина. - Простой чат Ajax
Вы когда-нибудь задумывались, можете ли вы общаться с другими пользователями на веб-сайте в прямом эфире? Этот плагин на базе Ajax — ответ на этот вопрос. Он совместим с мобильными устройствами и полностью настраивается в соответствии с вашими предпочтениями.
Зайдите в репозиторий плагинов WordPress.org, чтобы найти более блестящие реализации Ajax.
Сохраняйте спокойствие и Ajax!
То, что хорошо для
, хорошо и для пользователя, и для сервера, но вам нужно сбалансировать это.Ajax — это мощный инструмент в вашем арсенале для повышения производительности веб-сайта и удобства пользователей. Но вы должны использовать его только там, где это необходимо. Всегда сосредотачивайтесь на аспекте взаимодействия с пользователем. Поначалу это будет немного грубо, но как только вы овладеете основами Ajax, вас уже не остановить! Бесплатное видео
Почему 100 НЕ является идеальным показателем скорости загрузки страницы в Google (* 5 минут просмотра)
Узнайте, как использовать Google PageSpeed Insights, чтобы ставить реалистичные цели, повышать скорость работы сайта и почему стремиться к 100 баллам — НЕПРАВИЛЬНАЯ цель.
Теги:
Как использовать AJAX именно в пользовательских темах WordPress? | Парта Шаха | Techcompose
AJAX — это комбинация кода HTML, CSS и JavaScript, которая позволяет отправлять данные в сценарий, а затем получать и обрабатывать ответ сценария без необходимости перезагружать страницу. По сути, AJAX не является языком программирования, но если вы хотите использовать AJAX, вы должны быть знакомы с JavaScript / JQuery, HTML, CSS и PHP.
Как использовать AJAX с WordPress?
AJAX уже используется в WordPress, поэтому в папке wp-admin уже есть admin-ajax.php файл размещен. Каждый запрос AJAX проходит через файл admin-ajax.php . Запрос, который вы передаете через метод GET или POST , называется действием. На основе действия admin-ajax. Файл PHP создает два хука, называемых wp_ajax_my_action и wp_ajax_nopriv_my_action , my_action — это значение действия переменной GET или POST .
Разница между wp_ajax_ и wp_ajax_nopriv_
wp_ajax_ запускается для пользователей, которые вошли в систему, в то время как wp_ajax_nopriv_ запускается, пока пользователь не вошел в систему.Вы можете использовать оба хука для своей функции, но здесь вы должны отметить, что ловушка будет запущена один раз в одном запросе.
Итак, вот базовый пример загрузки сообщений с использованием AJAX
Шаг 1. Создайте файл шаблона и поместите в него код ниже.
Здесь тип ввода hidden используется для выборки общего количества страниц, а div id more_posts используется для отображения следующих сообщений при нажатии на него.
Шаг 2: Локализуйте ваш скрипт в functions.php
Шаг 3: Добавьте функцию для загрузки сообщений в файл functions.php.
Шаг 4. Поместите свой AJAX JS в файл ajax.js.
Заключение:
Это краткое руководство по AJAX, вы можете добавить множество методов и функций. Эта статья поможет вам реализовать AJAX на своем веб-сайте.
Четыре момента, о которых следует помнить при использовании AJAX:
1. Создайте файл шаблона для своей логики.
2. Создайте функцию обратного вызова для вызова AJAX.
3. Локализуйте скрипты в function.php
4. Выполните вызов AJAX.
Очень важно выбрать компанию по разработке WordPress для качественной разработки веб-сайта WordPress, которая не только предоставит вам новый улучшенный дизайн, но и будет оптимизирована для SEO, чтобы убедиться, что вы получите хорошую видимость в различных поисковых системах. Свяжитесь с нами, чтобы обсудить проект вашего веб-сайта или нанять выделенного разработчика WordPress. Вы можете связаться с нами по адресу sales @ techcompose.com
Современный способ AJAX в WordPress с использованием REST API
Приблизительное время прочтения: 6 минут
Быстрый поиск в Google показывает, что наиболее распространенный способ вызова AJAX в WordPress по-прежнему использует admin-ajax.php
. В этом посте мы покажем вам современный способ использования AJAX в WordPress с помощью REST API. Этот способ применим для WordPress версии 4.7 и выше.
Pre WordPress 4.7, REST API доступен с помощью плагина. Однако такая зависимость нежелательна.В более поздних версиях WordPress конечные точки содержимого REST API теперь являются частью ядра WP.
Что такое AJAX?
AJAX означает асинхронный Javascript и XML, но очень немногие сегодня используют XML и больше JSON. Однако он по-прежнему называется AJAX
.
. HTTP-запрос возникает при возникновении события. Этими событиями могут быть щелчки мыши, наведение курсора и т. Д. Этот запрос передается через Интернет на сервер, где он обрабатывает его и отправляет ответ обратно исходному браузеру.Браузер обрабатывает полученные данные и обновляет страницу новым содержимым.
Старый способ использования AJAX
Давайте сначала посмотрим на старый способ, используя admin-ajax.php
. Это просто для справки и не должно использоваться.
Постановка в очередь и локализация скрипта (ов)
В основном этот код присутствует в файле functions.php
.
Приведенный выше код очень распространен. Я поставил файл JavaScript в очередь с помощью функции wp_enqueue_script.Теперь сосредоточьтесь на функции wp_localize_script. Эта функция принимает ассоциативный массив и создает объект Javascript, который можно использовать где угодно на стороне клиента.
Другими словами, я использовал функцию wp_localize_script для создания объекта javascript, и этот объект используется в файле path-to-js-file.js, упомянутом в строке 6.
Например, я могу использовать его как myObj.ajaxurl
или myObj.nonce
В строке 9 функция admin_url (‘admin-ajax.php ’)
динамически генерирует ajaxurl и возвращает полный путь к файлу PHP для AJAX.
В строке 10 функция wp_create_nonce (‘my-nonce’) динамически генерирует серийный ключ или одноразовый токен, который мы будем использовать для нашего запроса AJAX.
Использование вызова jQuery
Обратите внимание, что это все еще старый способ сделать это. Сосредоточьтесь на файле path-to-js-file.js, который содержит код, показанный ниже. Любое действие, такое как щелчок, прокрутка, изменение ввода и т. Д., Вызовет этот код.
Есть разные способы запустить запрос AJAX в jQuery.
- $ .ajax ()
- $ .get ()
- $ .post ()
В строках 4 и 9 строки myObj.ajaxurl
и myObj.nonce
получены из строки 7 на рисунке 1.
Данные в строке 6 имеют три свойства. Данные, которые мы будем использовать в функции обратного вызова. Эти данные могут быть выбранным значением, входным значением, всей формой и т. Д.
Вторая — это действие, которое мы предпримем, и его ссылка.Последнее — это одноразовый номер, который может быть произвольным именем.
После получения данных вы можете использовать DOM по своему усмотрению.
Теперь давайте перехватим этот запрос с помощью wp_ajax
API
Перехватчики и соглашение об именах функций должны быть в формате имя_действия
. Например, wp_ajax_action_name, wp_ajax_nopriv_action_name и action_name_callback
function. Как показано в строке 8 рисунка 2, это свойство действия является обязательным и важным для объекта данных в файле javascript.
Я написал перехватчики и функцию обратного вызова для возврата обработанных данных в PHP, как показано на рисунке 3.
Повторяю, что это старый метод вызова AJAX, который сейчас не рекомендуется.
Новый способ AJAX
Теперь давайте посмотрим на современный способ использования AJAX в WordPress с использованием REST API.
Постановка в очередь и локализация скрипта (ов)
Изображение выше не сильно отличается от рисунка 1, за исключением строк с номерами 7 и 8. Мы используем тот же крючок, действие и wp_enqueue_script
.Однако в этом случае мы передаем другие значения в функции wp_localize_script
по сравнению с предыдущим.
Здесь я использовал функцию rest_url (), чтобы динамически получить оставшийся URL для этого конкретного экземпляра.
Мы также получаем конкретный одноразовый номер для этого конкретного экземпляра с помощью wp_create_nonce ('wp_rest')
Старым способом вы могли указать собственное имя для одноразового номера. Однако теперь он должен быть записан как « wp_rest
».
Новый способ вызова jQuery
В строке 3 на изображении выше наш URL отличается. Теперь это комбинация myObj.restURL
и конечной точки, которую мы создали и зарегистрировали с остальным API. Запрос достигает этой конечной точки вместо достижения admin-ajax.php
.
В строке номер 5 мы вводим запрос заголовка в формате «ключ-значение». X-WP-Nonce
— это ключ, а myObj.restNonce
— это значение. Это позволяет нам гибко не иметь дело с одноразовым номером в функции обратного вызова.Остальной API теперь проверит одноразовый номер.
В части данных вы можете передать столько данных, сколько присутствует в формате «ключ-значение».
После получения данных вы можете использовать DOM по своему усмотрению.
PHP с использованием конечной точки REST API
На приведенной выше диаграмме в строке со 2 по 7 показано добавление перехватчика rest_api_init. Это позволяет нам зарегистрировать нашу настраиваемую конечную точку отдыха.
Функция register_rest_route имеет три параметра: baseUrl, конечную точку и массив с двумя методами свойств и обратным вызовом.Обратный вызов содержит имя функции обратного вызова.
Здесь я написал функцию restAPI_endpoint_callback ()
, которая обрабатывает требуемые данные или может принимать запрос и возвращать данные.
Это подытоживает современный способ использования AJAX в WordPress с использованием REST API. Если вам понравился этот пост, вот еще несколько, которые могут вас заинтересовать,
Как диагностировать высокий уровень использования Admin-Ajax на вашем сайте WordPress
Ajax — это веб-технология на основе JavaScript, которая помогает создавать динамические и интерактивные веб-сайты.WordPress использует Ajax для поддержки многих основных функций административной области, таких как автоматическое сохранение сообщений, управление сеансами пользователей и уведомления.
По умолчанию WordPress направляет все вызовы Ajax через файл admin-ajax.php
, расположенный в каталоге сайта / wp-admin
.
Многочисленные одновременные запросы Ajax могут привести к частому использованию admin-ajax.php
, что приведет к значительному замедлению работы сервера и веб-сайта.Это одна из самых распространенных проблем, с которыми сталкиваются многие неоптимизированные сайты WordPress. Обычно это проявляется как медленный веб-сайт или ошибка HTTP 5xx (чаще всего ошибки 504 или 502).
В этой статье вы узнаете о файле WordPress ‘ admin-ajax.php
, о том, как он работает, о его преимуществах и недостатках, а также о том, как вы можете диагностировать и исправить высокий admin-ajax.php
проблема использования.
Готовы к работе? Пошли!
Что такое файл admin-ajx.php файл?
Файл admin-ajax.php
содержит весь код для маршрутизации запросов Ajax в WordPress. Его основная цель — установить соединение между клиентом и сервером с помощью Ajax. WordPress использует его для обновления содержимого страницы без перезагрузки, что делает ее динамичной и интерактивной для пользователей.
Базовый обзор того, как Admin Ajax работает на WordPress
Поскольку ядро WordPress уже использует Ajax для поддержки своих различных серверных функций, вы можете использовать те же функции для использования Ajax в WordPress.Все, что вам нужно сделать, это зарегистрировать действие, указать его на файл admin-ajax.php
вашего сайта и определить, как вы хотите, чтобы оно возвращало значение. Вы можете настроить его на возврат HTML, JSON или даже XML.
файл admin-ajax.php в WordPress
Согласно WordPress Trac, файл admin-ajax.php
впервые появился в WordPress 2.1. В сообществе разработчиков WordPress он также называется Ajax Admin .
Проверка использования Ajax на панели управления MyKinsta
График выше показывает только сумму admin-ajax.php
запросов, а не откуда они могли исходить. Это отличный способ узнать, когда возникают всплески. Вы можете комбинировать это с другими методами, упомянутыми в этом посте, чтобы сузить основную причину.
Проверка количества запросов admin-ajax.php в Chrome DevTools
Вы также можете использовать Chrome DevTools, чтобы узнать, сколько запросов отправлено на адрес admin-ajax.php
. Вы также можете проверить вкладку Timings в разделе Network , чтобы узнать, сколько времени требуется для обработки этих запросов.
Что касается точной причины высокого использования admin-ajax.php
, то в первую очередь есть две основные причины: одна из-за внешнего интерфейса, а другая из-за внутреннего интерфейса. Мы обсудим оба ниже.
Ajax поддерживает многие ключевые функции WordPress … но когда приходит слишком много запросов, он также может значительно замедлить работу вашего сайта. 😱 Узнайте, как решить эту проблему и оптимизировать использование Ajax здесь 👇Нажмите, чтобы написать твит
Как отлаживать высокое использование admin-ajax.php в WordPress
Сторонние плагины — одна из наиболее частых причин высокого уровня admin-ajax.использование php. Как правило, эта проблема обнаруживается на внешнем интерфейсе сайта и часто появляется в отчетах о тестировании скорости.
Но плагины здесь не единственные виновники, поскольку темы, ядро WordPress, веб-сервер и DDoS-атака также могут быть причиной высокого использования Admin Ajax.
Давайте рассмотрим их подробнее.
Как определить источник высокого использования admin-ajax.php для плагинов и тем
Плагины на базе Ajax в репозитории WordPress.org
Ajax часто используется разработчиками WordPress для создания динамических и интерактивных плагинов и тем.Некоторые популярные примеры включают добавление таких функций, как поиск в реальном времени, фильтры продуктов, бесконечная прокрутка, динамическая корзина покупок и окно чата.
То, что плагин использует Ajax, не означает, что он замедлит работу вашего сайта.
Просмотр запроса admin-ajax.php в отчете WebPageTest
Обычно Admin Ajax загружается ближе к концу загрузки страницы. Кроме того, вы можете настроить запросы Ajax для асинхронной загрузки, чтобы это практически не влияло на воспринимаемую пользователем производительность страницы.
Как видно из отчета WebPageTest выше, admin-ajax.php
загружается ближе к концу очереди запросов, но все равно занимает 780 мс. Это много времени для выполнения всего одного запроса.
Отчет GTmetrix, указывающий на серьезный всплеск использования admin-ajax.php
Когда разработчики не внедряют Ajax в WordPress должным образом, это может привести к серьезным проблемам с производительностью. Приведенный выше отчет GTmetrix является прекрасным примером такого поведения.
Вы также можете использовать GTmetrix, чтобы копаться в данных отдельных сообщений и ответов.Вы можете использовать эту функцию, чтобы определить причину проблемы.
Для этого перейдите на вкладку Waterfall отчета GTmetrix, а затем найдите и щелкните элемент POST admin-ajax.php . Для этого запроса вы увидите три вкладки: заголовки, сообщение и ответ.
Данные заголовков запроса POST admin-ajax.php
Просмотр вкладок Post и Response запроса даст вам несколько подсказок, чтобы выяснить причины проблемы с производительностью.Для этого сайта вы можете увидеть подсказки на вкладке Response.
Данные ответа запроса POST admin-ajax.php
Вы можете видеть, что часть ответа имеет какое-то отношение к входному тегу с идентификатором, установленным на «fusion-form-nonce-656».
Подпишитесь на информационный бюллетень
Мы увеличили наш трафик на 1187% с помощью WordPress.
Присоединяйтесь к более чем 20 000 других людей, которые получают нашу еженедельную рассылку с инсайдерскими советами по WordPress!
Подпишись сейчас
Быстрый поиск этой подсказки приведет вас на сайт ThemeFusion, создателя темы Avada.Следовательно, вы можете сделать вывод, что запрос исходит от темы или любого из плагинов, с которыми она связана.
В таком случае вы должны сначала убедиться, что тема Avada и все связанные с ней плагины полностью обновлены. Если это не помогло, попробуйте отключить тему и посмотреть, решит ли это проблему.
В отличие от отключения плагина, отключить тему в большинстве сценариев невозможно. Следовательно, попробуйте оптимизировать тему, чтобы устранить все узкие места. Вы также можете обратиться в службу поддержки темы, чтобы узнать, могут ли они предложить лучшее решение.
Тестирование другого медленного веб-сайта в GTmetrix привело к обнаружению аналогичных проблем с конструктором страниц Visual Composer и плагинами панели уведомлений.
Данные ответа на другой запрос POST admin-ajax.php
Данные публикации запроса POST admin-ajax.php
К счастью, если вы не можете решить проблему с плагином, вам больше всего нравится иметь много альтернативных плагинов, доступных для опробования. Например, когда дело доходит до конструкторов страниц, вы также можете попробовать Beaver Builder или Elementor.
Как определить происхождение высокого уровня admin-ajax.php
Иногда данные о результатах и ответах, представленные в отчетах об испытаниях скорости, могут быть не такими ясными и понятными. Здесь не так просто найти источник высокого использования admin-ajax.php
. В таких случаях всегда можно сделать это по старинке.
Отключите все плагины своего сайта, очистите кеш сайта (если есть), а затем снова запустите тест скорости. Если admin-ajax.php
все еще присутствует, то наиболее вероятным виновником является тема.Но если его нигде нет, вы должны активировать каждый плагин по очереди и каждый раз запускать тесты скорости. Путем устранения вы заблокируете источник проблемы.
Совет: Использование промежуточной среды (например, промежуточной среды Kinsta) — отличный способ запустить тесты на вашем сайте, не влияя на ваш действующий сайт. После того, как вы определите причину и исправите проблему в тестовой среде, вы можете отправить изменения на свой действующий сайт.
Диагностика проблем внутреннего сервера с помощью admin-ajax.php
Вторая наиболее распространенная причина высокого использования admin-ajax.php
— это WordPress Heartbeat API, генерирующий частые вызовы Ajax, что приводит к высокой загрузке ЦП на сервере. Обычно это происходит из-за того, что многие пользователи вошли в панель управления серверной частью WordPress. Следовательно, вы не увидите это в тестах скорости.
По умолчанию Heartbeat API опрашивает файл admin-ajax.php
каждые 15 секунд для автоматического сохранения сообщений или страниц. Если вы используете сервер виртуального хостинга, значит, у вас не так много ресурсов сервера, выделенных для вашего сайта.Если вы редактируете сообщение или страницу и оставляете вкладку открытой в течение длительного времени, это может вызвать множество запросов администратора Ajax.
Например, когда вы пишете или редактируете сообщения, один пользователь может сгенерировать 240 запросов за час!
Частые запросы автосохранения admin-ajax.php
Это много запросов к серверной части от одного пользователя. Теперь представьте себе сайт, на котором одновременно вошли несколько редакторов. Такой сайт может быстро обрабатывать запросы Ajax, вызывая высокую загрузку ЦП.
Kinsta действительно столкнулся с этой проблемой, помогая DARTDrones масштабировать свой сайт WooCommerce для появления на Shark Tank.
Они получили более 4 100 звонков admin-ajax.php
за день, всего 2000 уникальных посетителей. Это слабое соотношение запросов и посещений.
Тяжелое использование admin-ajax.php на dartdrones.com
Команда
Kinsta заметила URL-адрес реферера / wp-admin и правильно определила основную причину. Эти запросы были вызваны тем, что администраторы и редакторы DARTDrones часто обновляли сайт в ожидании шоу.
WordPress частично устранил эту проблему Heartbeat API давно. Например, вы можете уменьшить частоту запросов, генерируемых Heartbeat API на хостах с ограниченными ресурсами. Он также приостанавливается после одного часа бездействия клавиатуры / мыши / сенсорного экрана.
Использование подключаемого модуля Heartbeat Control для уменьшения количества запросов Ajax
Вы можете легко решить эту проблему, используя плагин Heartbeat Control от WP Rocket. Он позволяет отключать или изменять частоту Heartbeat API всего за несколько кликов.
Плагин Heartbeat Control
Установив и активировав плагин Heartbeat Control, вы можете управлять частотой Heartbeat API на панели инструментов WordPress, во внешнем интерфейсе сайта и в редакторе сообщений.
Панель управления «Общие настройки» подключаемого модуля Heartbeat Control
Если ваш сервер имеет ограниченные ресурсы ЦП, я рекомендую вам Отключить Heartbeat как на панели инструментов WordPress, так и во внешнем интерфейсе. Вы также можете Изменить частоту сердцебиения для опции «Редактор сообщений» и увеличить ее до 30 секунд (или даже 60 секунд).Чем выше частота, тем больше экономия ресурсов сервера.
Точные настройки, которые вам нужно будет использовать, будут отличаться от сайта к сайту. Если вы не знаете, что использовать, проконсультируйтесь со своим веб-разработчиком.
Высокий трафик из-за DDoS-атаки или спам-ботов
Перегрузка вашего сайта DDoS-атакой или спам-ботами также может привести к высокому использованию admin-ajax.php
. Однако такая атака не обязательно нацелена на увеличение количества запросов Admin Ajax.Это просто побочный ущерб.
Если ваш сайт подвергается DDoS-атаке, вашим приоритетом должно быть размещение его за надежными CDN / WAF, такими как Cloudflare или Sucuri. Каждый план хостинга с Kinsta также включает Kinsta CDN, который может помочь вам в значительной степени разгрузить ресурсы вашего сайта.
Чтобы узнать больше о том, как защитить свои веб-сайты от подобных вредоносных атак, вы можете обратиться к нашему подробному руководству о том, как остановить DDoS-атаку.
Если вы видите, что сервер и веб-сайт замедляются, это может быть связано с слишком большим количеством запросов Ajax.⏳ Будьте готовы диагностировать и исправить это с помощью этого руководства! Нажмите, чтобы твитнуть
Сводка
WordPress использует Ajax в своем Heartbeat API для реализации многих своих основных функций. Однако при неправильном использовании это может привести к увеличению времени загрузки. Обычно это происходит из-за высокой частоты запросов к файлу admin-ajax.php
.
В этой статье вы узнали о различных причинах частого использования admin-ajax.php
, о том, как определить причину этого симптома и как его исправить.В большинстве случаев, следуя этому руководству, вы сможете восстановить и запустить ваш сайт в кратчайшие сроки.
Однако в некоторых случаях обновление до сервера с более высокими ресурсами является единственным жизнеспособным решением. Особенно для сложных случаев использования, таких как электронная коммерция и сайты членства. Если у вас такой сайт, рассмотрите возможность обновления до управляемого хоста WordPress, который имеет опыт решения подобных проблем с производительностью.
Если вы все еще боретесь с высоким уровнем admin-ajax.php на вашем сайте WordPress, сообщите нам об этом в разделе комментариев.
Если вам понравилась эта статья, то вам понравится хостинговая платформа Kinsta WordPress. Ускорьте свой сайт и получите круглосуточную поддержку от нашей опытной команды WordPress. Наша инфраструктура на базе Google Cloud ориентирована на автоматическое масштабирование, производительность и безопасность. Позвольте нам показать вам разницу в Kinsta! Ознакомьтесь с нашими тарифами
jquery — Правильный способ использования функции WordPress с файлом AJAX PHP
Да, используя admin-ajax.php
— это путь сюда. Чтобы использовать его, вы должны сделать что-то вроде следующего:
в vote_database_update.php
// подключаемся к admin-ajax
// текст после 'wp_ajax_' и 'wp_ajax_no_priv_' в вызовах add_action ()
// следующее - это то, что вы будете использовать в качестве значения data.action в ajax
// вызов в вашем JS
// если вызов ajax будет выполнен из JS, выполненного при входе пользователя в WP,
// тогда используйте эту версию
add_action ('wp_ajax_call_your_function', 'your_function');
// если вызов ajax будет выполнен из JS, выполненного, когда ни один пользователь не вошел в WP,
// тогда используйте эту версию
add_action ('wp_ajax_nopriv_call_your_function', 'your_function');
функция
ваша_функция ()
{
if (! isset ($ _REQUEST ['id'])) {
// устанавливаем желаемое возвращаемое значение при ошибке
// возвращаемое значение может быть ЛЮБЫМ типом данных (например,г., массив ())
$ return_value = 'ваше сообщение об ошибке';
wp_send_json_error ($ return_value);
}
$ id = intval ($ _REQUEST ['id']);
// выполняем нужную обработку на основе $ id
// устанавливаем желаемое возвращаемое значение в случае успеха
// возвращаемое значение может быть ЛЮБЫМ типом данных (например, array ())
$ return_value = 'ваше сообщение / данные об успехе';
wp_send_json_success ($ return_value);
}
в custom-js.js
(функция ($) {
$ ('. товар-голос-кнопка-вверх').click (function () {
var productID = $ (this) .attr ('productID');
$ .ajax ({
URL: '/wp-admin/admin-ajax.php',
введите: 'POST',
dataType: 'JSON',
данные: {
// значение data.action является частью ПОСЛЕ 'wp_ajax_' в
// add_action ('wp_ajax_xxx', 'yyy') в PHP выше
действие: 'call_your_function',
// ЛЮБЫЕ другие свойства данных передаются в your_function ()
// в глобальном PHP $ _REQUEST (или в данном случае $ _POST)
id: productID
},
успех: функция (соответственно) {
если (соотв.успех) {
// если вы хотите использовать установленное вами возвращаемое значение
// в your_function () это можно сделать через
// resp.data, но в этом случае, я думаю, вы этого не сделаете
// нужно это
$ ('# product-' + productID + '.item-product-footer-vote-container'). html ('Спасибо за ваш голос!');
}
еще {
// этот случай "ошибки" означает, что сам вызов ajax выполнен успешно, но функция
// вызываемый возвратил состояние ошибки
alert ('Ошибка:' + соотв.данные) ;
}
},
error: function (xhr, ajaxOptions, thrownError) {
// этот случай ошибки означает, что сам вызов ajax завершился неудачно, например, синтаксическая ошибка
// в your_function ()
alert ('Ошибка запроса:' + thrownError.message);
},
});
});
}) (jQuery);
Надеюсь, это поможет.
Как уменьшить нагрузку на сервер admin-ajax.php в WordPress
WordPress
время доступа
6 августа 2019
песочные часы пустые
5 мин чтения
person_outline
Лукманул М.
Производительность веб-сайта — важная тема для любого владельца сайта. Проблемы с производительностью могут повлиять на пользовательский опыт и потенциально снизить рейтинг SEO. Поскольку Google использует время загрузки страницы в своих критериях ранжирования.
Когда мы думаем о производительности веб-сайта, мы часто говорим о времени загрузки страницы. В WordPress распространенный сценарий, связанный с проблемой времени загрузки, заключается в том, что она может быть вызвана скачком в файле admin-ajax.php . В этой статье вы узнаете, как управлять конфликтами плагинов, вызванными скачками в admin-ajax.php и уменьшите количество запросов на обратные вызовы, чтобы оптимизировать время загрузки вашего сайта WordPress.
Что такое файл admin-ajax.php в WordPress?
В 2013 году была представлена версия WordPress 3.6 вместе с Heartbeat API в его ядре. WordPress Heartbeat API построен как протокол связи между браузером и сервером. Он использует admin-ajax.php для отправки запроса на сервер и запуска событий (или обратных вызовов) при получении данных. Основные особенности Heartbeat API:
Когда вы пишете статью в WordPress, сохраняете ее как черновик и продолжаете работать над ней, WordPress автоматически сохраняет любое добавление, которое вы делаете.
- Сообщение о блокировке и уведомлении о входе в систему
На совместном сайте WordPress вы будете получать всплывающее окно всякий раз, когда попытаетесь написать / отредактировать сообщение, над которым в данный момент работает другой пользователь. Вы также получите всплывающее уведомление, когда срок вашего сеанса истечет, и вам потребуется новый логин, чтобы продолжить работу над своим сообщением.
Проблемы, которые может вызвать admin-ajax.php
Переполнение файла admin-ajax.php может вызвать проблему времени загрузки страницы, что является серьезной проблемой.Золотое правило Интернета заключается в том, что ваш сайт должен полностью загрузиться в течение 3 секунд или меньше. Если это займет больше времени, скорее всего, вы доставите посетителям плохие впечатления и прогоните их.
Низкая скорость страницы также может отрицательно повлиять на ваш SEO-рейтинг. Вы должны знать, что Google использует скорость загрузки как один из показателей в своем алгоритме ранжирования сайтов. Кроме того, низкая скорость страницы означает, что поисковая система может сканировать меньше страниц, используя выделенный для них бюджет сканирования, и это еще больше повлияет на индексацию ваших страниц.
Для некоторых из нас единственный раз, когда мы имеем дело с этим API, — это когда мы используем инструменты проверки скорости, такие как GTmetrix, чтобы выяснить, почему admin-ajax.php замедляет работу наших веб-сайтов.
Причины всплесков могут быть из двух разных источников: либо из-за сторонних плагинов, либо из-за запроса WordPress Heartbeat API в разделе администратора. Мы обсудим это более подробно ниже.
Как плагины могут переполнять файл admin-ajax.php
Сторонние плагины вызывают наиболее частую проблему, когда пользователи видят всплеск на admin-ajax.php . Если все сделано правильно, AJAX определенно полезен, поскольку разработчики обычно используют его для добавления функциональности в свои плагины. Например, разработчики могут использовать запросы AJAX и создать собственный wp_query для отображения динамического содержимого на кэшированной странице.
Но иногда, когда многие плагины используют эти запросы, они могут вызвать переполнение. Таким образом, это может вызвать всплеск и замедлить работу всего веб-сайта. Итак, если вы разработчик, вот ресурс для правильной реализации AJAX в плагинах.
Как владельцу веб-сайта вам может потребоваться сначала диагностировать плагины, прежде чем отключать их. Это важно, чтобы выяснить, вызывает ли конкретный плагин проблему времени загрузки.
Плагины диагностики
Конфликтующие плагины могут вызвать проблемы со временем загрузки. Старый школьный способ заключается в том, что вы всегда можете отключить все плагины, чтобы решить проблему, и повторно включить их один за другим, используя процесс исключения. Но это определенно не лучшее решение.
Мы воспользуемся более подходящим методом, чтобы выяснить основную причину проблемы, в следующем сценарии.
После активации нескольких плагинов вы заметите, что вашему сайту требуется больше времени для полной загрузки. Затем вы диагностируете сайт с помощью GTmetrix. Это мощный бесплатный инструмент для проверки скорости, который позволяет нам просматривать данные отдельных ответов на сообщения.
Метод A
Перейдите на домашнюю страницу GTmetrix, введите URL-адрес своего веб-сайта и щелкните Analyze . Чтобы полностью проанализировать ваш сайт, нужно время.
По завершении вы получите отчет о состоянии вашего веб-сайта, например оценку производительности и сведения о странице.Перейдите на вкладку Waterfall , чтобы более подробно изучить элементы сайта.
В окне «Водопад» будут представлены все элементы вашего веб-сайта. Хотя остальные файлы выглядят нормально, вы заметили, что загрузка POST admin-ajax.php занимает больше времени.
Нажмите POST admin-ajax.php , и вы увидите четыре различных вкладки: Заголовки , Параметры , Сообщение и Ответ .При диагностике такого рода проблемы вам следует обратить внимание на вкладки Post и Response .
Для этого сайта мы видим подсказку на вкладке Post , поскольку этот запрос имеет какое-то отношение к сценарию « count_hit ».
Эта подсказка заставляет нас подозревать некий плагин счетчика посещений, который мы установили ранее. Итак, чтобы доказать эту теорию, мы отключили этот плагин и запустили второй тест с GTmetrix для нашего сайта.
Оказывается, наши подозрения верны. Отключив этот плагин, нам удалось снизить загрузку нашей страницы на 2 секунды.
Метод B
Вы также можете использовать консоль разработчика Chrome, чтобы найти подозрительный плагин.
Откройте свой веб-сайт. Щелкните правой кнопкой мыши на странице -> Осмотрите . В качестве альтернативы, на вкладке Chrome перейдите к View -> Developer -> Developer Tools .
Щелкните вкладку Network и перезагрузите веб-сайт.
В поле фильтра (справа под красной точкой) введите admin-ajax.php . Вы увидите виновника указанной проблемы. После этого вы можете отключить плагин и проверить, сохраняется ли проблема.
Как владелец веб-сайта, если вам действительно нужно использовать этот плагин, убедитесь, что вы используете самую последнюю версию. Если вы сделали это, но проблема не исчезла, обратитесь к разработчику плагина, упомянув об этом случае.
Если разработчик еще не может решить проблему, вы всегда можете заменить ее на новую.Прелесть WordPress в том, что есть много похожих плагинов на выбор. Просто перейдите в каталог плагинов WordPress и выберите наиболее часто используемый и обновленный плагин, который предлагает те же функции.
Ускорение серверной части вашего сайта WordPress
Иногда WordPress Heartbeat API, запускаемый на серверной части вашего сайта, также может вызывать проблемы с производительностью. Как мы отмечали ранее, эта функция помогает автоматически сохранять вашу работу — чтобы избежать потери проектов в случае непредвиденных обстоятельств и правильно управлять одновременным написанием / редактированием.
Например, функция будет запускаться каждый раз, когда вы пишете сообщение и оставляете вкладку открытой. Это может вызвать высокую загрузку ЦП, как видно по количеству обратных вызовов в консоли разработчика ниже.
Использование ЦП
— важная проблема для тех, кто использует план виртуального хостинга. Некоторые хостинг-провайдеры, вероятно, не потерпят высокой загрузки ЦП, и в конечном итоге это может привести к приостановке работы, но это не относится к Hostinger.
Чтобы решить эту проблему, вы можете сделать две вещи: отключить Heartbeat API или увеличить интервалы между проверками.Поскольку первый вариант непрактичен, мы воспользуемся вторым. Чтобы изменить интервал, вам понадобится плагин Heartbeat Control.
Перейдите в панель управления -> Плагины -> Добавьте новый . Найдите плагин по имени, нажмите , установите и активируйте его, .
После активации перейдите к Settings -> Heartbeat Control Settings . Здесь вы можете установить разные правила для разных мест.
Поскольку мы хотим минимизировать частоту обратных вызовов в редакторе сообщений, вы можете проверить это и установить количество запросов больше 15. В этом случае мы установим его на 200.
По завершении нажмите Сохранить изменения .
Заключение
Вы узнали об API Heartbeat и его побочном продукте admin-ajax.php . Вы также узнали о проблемах, которые возникают, когда плагины переполняют функцию и вызывают замедление. Вы также знаете, что Heartbeat API сам по себе может создать проблему для вашего хоста, если вы не будете управлять им должным образом.
Помните, всегда проверяйте с помощью GTmetrix, когда вы чувствуете, что на вашем веб-сайте происходит замедление. Перейдите на вкладку водопада, перейдите к POST admin-ajax.php и посмотрите, как все происходит. Не отключайте сразу все плагины, так как иногда они могут быть не виноваты. Но если они это сделают, либо замените их, либо ограничьте использование API Heartbeat.
Есть ли у вас аналогичный опыт работы с admin-ajax.php ? Оставьте комментарий в разделе комментариев ниже, чтобы мир также мог извлечь уроки из вашей истории!
Уменьшите admin-ajax.php Загрузить на WordPress
Когда мы говорим о лучшем пользовательском опыте, мы думаем об улучшении времени загрузки нашего веб-сайта. Посетитель имеет тенденцию покидать веб-сайт, если загрузка занимает более двух секунд, и почти не возвращается из-за плохого опыта работы с вашим веб-сайтом.
Это серьезная проблема, поскольку компании вкладывают деньги в хостинг для WordPress, управление своим контентом и продвижение его на различных платформах.
Существует множество различных тем и плагинов, которые часто вызывают проблемы, которые трудно устранить. Разработчики в конечном итоге проверяют быстродействие своих веб-сайтов и видят общее предупреждение о задержке времени ответа сервера admin-ajax.php.
При тестировании скорости вашего WordPress с помощью онлайн-инструментов тестирования скорости вы могли заметить, что WordPress admin-ajax.php отвечает за медленную загрузку. В этой статье я расскажу об этом файле и о том, как можно уменьшить время отклика сервера и использование ЦП, уменьшив количество запросов, генерируемых admin-ajax.php.
Что такое admin-ajax.php в WordPress?
Еще в 2013 году WordPress представил WordPress Heartbeat API, который обеспечивал несколько важных функций, таких как функция автосохранения, истечение срока входа в систему и предупреждение о блокировке сообщения, когда другой пользователь пишет или редактирует сообщение WordPress.
Две очень характерные особенности Heartbeat API:
1. Автосохранение
Каждый раз, когда вы сохраняете черновик сообщения и продолжаете работать над ним, WordPress автоматически сохраняет дополнения к сообщению.Существует явная разница между автосохранением и сохранением черновика вручную. Посмотрите на следующий снимок экрана, на котором показаны оба типа сохранений:
2. Почтовый замок
Каждый раз, когда вы пытаетесь отредактировать сообщение, над которым уже работает другой пользователь, появляется всплывающее предупреждение о ситуации. Вам доступны три действия.
Вышеупомянутые функции стали возможными благодаря API-интерфейсу WordPress Heartbeat, который создает соединения между сервером и браузером для соответствующей связи и ответов.
WordPress Heartbeat API генерирует запросы на связь с сервером и запускает события при получении данных / ответа. Обычно это увеличивает нагрузку на сервер и в конечном итоге замедляет работу панели администратора WordPress.
Живой пример
Я вошел в свою панель управления WordPress и начал писать сообщение. Затем я оставлю вкладку открытой на несколько минут и начну просматривать другие вкладки. Панель управления все еще находится в системе, и вы можете видеть, что admin-ajax непрерывно отправляет запросы .
Согласно упомянутому выше тикету, admin-ajax.php в WordPress генерирует запросы каждые 15 секунд. Запрос может быть любой связью с сервером.
Панели администрирования WordPress работают быстрее на управляемом хостинге Cloudways
Попробуйте нашу 3-дневную бесплатную пробную версию
Как плагины перегружают файл admin-ajax.php?
В большинстве случаев проблемы в файле admin-ajax.php возникают из-за запросов установленных плагинов.Эти плагины замедляют серверную часть WordPress, отправляя запросы для достижения определенных функций, таких как запуск всплывающего окна или обновление счетчика обмена в социальных сетях. Эти плагины выполняют множество запросов, чтобы оставаться работоспособными.
Однако выполнение этих запросов не обязательно означает увеличение файла admin-ajax.php. Если запросы обрабатываются правильно и разработчики подключаемых модулей следуют лучшим практикам использования вызовов AJAX в своих подключаемых модулях, это не оказывает негативного влияния на admin-ajax.php файл. Поэтому также важно диагностировать любой плагин перед его деактивацией.
Диагностика подключаемого модуля
Важно правильно диагностировать плагин, чтобы определить его влияние на файл admin-ajax.php, что, возможно, может замедлить работу серверной части WordPress. Для этого мы будем использовать два инструмента GTmetrix и WebPageTest.
Проверьте свой сайт с помощью любого из вышеперечисленных инструментов. В случае GTmetrix перейдите на вкладку «Водопад», чтобы просмотреть полный список запросов. Присмотревшись к списку, вы можете увидеть запросы POST, сделанные admin-ajax.php файл.
В нашем случае эти запросы в основном были сделаны с помощью подключаемого модуля социального обмена . Этот конкретный плагин отправляет ajax-запрос в учетные записи социальных сетей через API каждые 15 секунд для получения обновленного счетчика общего доступа. Разверните вкладку для получения подробной информации. На вкладке ответов можно увидеть точное место, которое вызывает эти запросы.
Chrome поставляется с инструментами разработчика, которые могут помочь вам в анализе запросов, сделанных различными плагинами. Для этого откройте веб-сайт в браузере Chrome, проверьте элемент и перейдите на вкладку «Сеть».
Перезагрузите страницу и посмотрите, как список заполняется обновленными запросами. В поле фильтра введите ajax или admin-ajax, чтобы отфильтровать необходимые файлы. Это дает вам представление о количестве запросов, а также их частоте и источнике запроса.
Затем щелкните файл, чтобы просмотреть дополнительную информацию. На вкладке ответа он дает вам подсказку о плагине, вызвавшем этот запрос. В моем случае на этот раз он был запущен плагином WP Popular (WPP).Плагин, который выделяет самые популярные сообщения за определенный период времени.
Чтобы избежать этого, убедитесь, что плагин, который вы используете, обновлен, а если нет, попробуйте открыть заявку в службу поддержки, чтобы разработчики могли решить проблему. Если возможно, вы также можете заменить его другим плагином, который обновляется и не перегружает файл admin-ajax.php.
Перед тем, как избавиться от любого плагина, важно провести тщательную диагностику, так как некоторые плагины имеют решающее значение для вашего сайта WordPress.Вышеупомянутые инструменты могут помочь вам найти первопричину и выбрать лучшее возможное решение для ее устранения.
В следующем разделе мы увидим, как уменьшить количество таких запросов и предотвратить перегрузку файла admin-ajax.php.
Ускорить панель администратора WordPress
Чтобы ускорить серверную часть WordPress, лучше всего отключить Heartbeat API или, по крайней мере, установить более длительный интервал времени, чтобы он не попадал на сервер каждые несколько секунд.
Установить подключаемый модуль Heartbeat Control
Войдите в панель администратора WordPress, перейдите к Plugins → Add New , найдите Heartbeat Control , Установите и Активируйте it.
Настроить подключаемый модуль контроля пульса
Перейдите в меню Settings → Heartbeat Control Settings . Там вы найдете три раскрывающихся меню для настройки плагина.
1. Разрешить Heartbeat
Вы можете выбрать области, в которых будет работать Heartbeat API.На выбор есть три варианта:
- WordPress Dashboard : Это включит Heartbeat API для панели WordPress.
- Frontend : это включит API во внешнем интерфейсе.
- Редактор сообщений : установите этот флажок, если вы хотите разрешить использование Heartbeat API для функций автосохранения и блокировки сообщений.
2. Отключить Heartbeat
Выберите это, если хотите, чтобы WordPress Heartbeat API отключал в определенных местах.Будьте осторожны при выборе местоположения, потому что другие плагины также могут использовать WordPress Heartbeat API. Если вы единственный пользователь бэкэнда WordPress, я бы посоветовал отключить его везде, а затем проверить, не нарушает ли он работу веб-сайта. Однако, если на вашем сайте несколько пользователей, которые регулярно вносят свой вклад, я предлагаю вам разрешить Heartbeat API только на страницах редактирования сообщений.
3. Изменить Heartbeat
Это раскрывающееся меню позволяет вам установить временной интервал в диапазоне от 0 до 300 секунд для выполнения запросов admin-ajax.Если установить значение 120 секунд , запрос будет генерироваться каждые 120 секунд. Это резко снизит нагрузку на сервер. Отрегулируйте его в соответствии с вашими потребностями.
Создать несколько правил
Вы можете создать несколько правил в зависимости от ваших требований. Например, вы хотите, чтобы панель управления WordPress запускалась через 120 секунд, а редактор сообщений запускался через 60 секунд. Для этого нужно создать два правила. Один для панели управления WordPress, а другой для редактора сообщений и установите частоту 120 и 60 соответственно.
Обнаружение подключаемых модулей, использующих Heartbeat API
Теперь, когда вы все настроили, пора проверить, какие плагины используют файл admin-ajax.php и замедляют работу веб-сайта.
Зайдите в GTmetrix, введите URL вашего сайта. Анализ сайта займет некоторое время. После этого перейдите на вкладку «Водопад», и вы увидите, сколько времени требуется файлу для подключения и ответа. Прокрутите немного вниз и посмотрите, есть ли запись для POST admin-ajax.php . Если да, разверните его и перейдите на вкладку «Опубликовать». Отсюда вы можете определить плагин-виновник. В моем случае плагин «переключатель рабочего стола» использует файл admin-ajax.php и постоянно отправляет запросы на сервер. Пришло время принять решение: либо заменить его другим плагином, либо скрестить пальцы.
Заключительные слова
Учитывая набор функций, Heartbeat API очень полезен на вашем веб-сайте WordPress. Однако при неправильном использовании он может увеличить время загрузки серверной части и клиентской части WordPress, отправляя туда и обратно запросы WordPress admin-ajax.
Есть только два решения этой проблемы. Либо отключите Heartbeat API / включите его только в нескольких местах, либо обновитесь до управляемого облачного хостинга WordPress, который может справиться с нагрузкой запросов, а также сократить время ответа сервера.
Если вы используете какой-либо плагин кеширования, например W3TC, не забудьте отключить кеширование объектов. Это также ускорит работу панели управления WordPress.
Если у вас есть предложения или вопросы, не стесняйтесь оставлять комментарии ниже. Я буду следить за этим как можно скорее!
Часто задаваемые вопросы
В.Что такое admin-ajax.php?
admin-ajax.php — это файл WordPress, содержащий код для обработки запросов AJAX. AJAX уже является важным операционным компонентом архитектуры WordPress, и этот файл действует как центральное место для всех операций, связанных с AJAX.
В. Что такое WordPress AJAX?
AJAX уже реализован в серверной части WordPress, и вы можете просто использовать встроенные функции, чтобы начать использовать возможности AJAX для своих проектов.
В. Что такое AJAX в JavaScript?
AJAX означает асинхронный JavaScript и XML и является отличным методом для обновления содержимого страницы без перезагрузки всей страницы. Как вы понимаете, JavaScript играет важную роль в обработке и анализе пользовательских запросов во время процесса.
В. Что такое WC Ajax get_refreshed_fragments?
WC Ajax get_refreshed_fragments — это важный вызов AJAX, который WooCommerce использует для обновления содержимого корзины и итогов без необходимости перезагружать всю страницу.
Начните расти с Cloudways уже сегодня!
Мы никогда не идем на компромисс в отношении производительности, безопасности и поддержки.
Мустасам Салим
Мустаасам — менеджер сообщества WordPress в Cloudways — управляемой платформе хостинга WordPress, где он активно работает и любит делиться своими знаниями с сообществом WordPress.Когда он не работает, вы можете увидеть, как он играет в сквош со своими друзьями или защищается в футболе и слушает музыку. Вы можете написать ему по адресу [email protected]
×
Получите наш информационный бюллетень
Будьте первым, кто получит последние обновления и руководства.
Спасибо за подписку на нас!
.
Добавить комментарий