5 советов использования AJAX в WordPress

Вольный перевод статьи «5 tips for using AJAX in WordPress».

Переводить буду частями, времени перед праздниками катастрофически не хватает.

Под катом первая часть.

Неправильный способ добавления AJAX

Видел код многих плагинов, использующих AJAX. В некоторые AJAX подключен правильно, в большинстве — нет. Самый распространенный способ — отдельный PHP файл для обработки AJAX запроса, и другой PHP файл генерирующий javascript код для выполнения AJAX запроса.

PHP файл,который обрабатывал AJAX запрос, практически всегда начинался с этих строк:

require_once( "../../../../wp-config.php" );
// или require_once( "../../../../wp-load.php" );

Бывает пользователь задавал другую структуру каталогов, что делало относительный путь, заданный таким образом, неверным. Другой недостаток такого способа, если вы используете объектно-ориентированный подход к написанию ваших плагинов (инкапсулируете функции вашего плагина в класс), у вас не будет прямого доступа к необходимым свойствам и частным функциям класса.
Помимо этого PHP файла, нужен будет второй PHP файл для генерации javascript файла, который и будет выполнять AJAX запрос. Вместо обычного javascript файла придется использовать PHP файл и он опять должен будет подгружать wp-config.php (или wp-load.php), для получения абсолютного пути к пхп файлу обрабатывающему запрос или для загрузки дополнительных данных из базы данных. Для загрузки такого «фальшивого» javascript файла нужно будет по новой загружать весь фреймворк WordPress’а.

Теперь перейдем от неправильных советов к правильным 🙂

Используем wp_localize_script() для объявления глобальных javascript переменных

Хотя wp_localize_script() и предназначено для локализации, его так же можно использовать и по другому. Например можно декларировать javascript переменные, указывать им namespace и использовать их в ваших скриптах:

wp_localize_script( $handle, $namespace, $variable_array );

Вот так мы укажем какой файл будет обрабатывать наш AJAX запрос (в этом примере мы будем использовать файл admin-ajax.php, почему объясню чуть позже):

// прикрепляем js файл, который будет инициировать ajax запрос
wp_enqueue_script( 'my-ajax-request', plugin_dir_url( __FILE__ ) . 'js/ajax.js', array( 'jquery' ) );
// указываем ссылку на файл, который будет обрабатывать AJAX запрос (wp-admin/admin-ajax.php)
wp_localize_script( 'my-ajax-request', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

Таким образом мы не будем испльзовать PHP для генерации кода JavaScript файла, что некрасиво и не кешируется. Если теперь посмотреть в HTML код шаблона, в теге будет что-то такое:

&lt;script src="http://example.com/wordpress/wp-content/plugins/myajax/js/ajax.js" type="text/javascript"></script>
&lt;script type="text/javascript">
// <![CDATA[
/* <![CDATA[ */ var MyAjax = { ajaxurl: "http://example.com/wordpress/wp-admin/admin-ajax.php" }; /*  */
// ]]>
</script>

Либо, если вы точно уверены, что расположение файла не изменится, эти строки можно добавить в ручную в ajax.js. Тогда достаточно будет только:

wp_enqueue_script( 'my-ajax-request', plugin_dir_url( __FILE__ ) . 'js/ajax.js', array( 'jquery' ) );

Теперь вы можете использовать переменную MyAjax.ajaxurl, не используя PHP файл и не подключая wp-load.php. Во втором совете рассмотрим как правильно сформировать javascript код, отправляющий запрос, и как правильно этот запрос обработать.

Продолжение в 2й части.