Ajax (асинхронный JavaScript и XML) — это веб-технология, позволяющая веб-странице динамически обновлять содержимое без перезагрузки страницы в браузере. Благодаря использованию этой технологии сайт становится более интерактивным и отзывчивым. Ajax поддерживается почти всеми визуальными веб-браузерами … поэтому сегодня мы покажем вам, как настроить магию WordPress Pagination с помощью AJAX.
Знакомство с Ajax
Я собираюсь кратко остановиться на некоторых базовых вещах jQuery AJAX начального уровня, но для еще лучшего учебника, ознакомьтесь с этими двумя статьями:
Имейте в виду, что ни одна статья не посвящена WordPress специально, но она поможет вам промокнуть. Хорошо, давайте начнем с конкретных вещей WP.
Ajax может быть отличной идеей для интеграции в WordPress из-за его отзывчивости с точки зрения переноса контента на страницу без необходимости перезагрузки вашей страницы. Код Ajax не только распознается WordPress, но вы также можете очень легко выполнять вызовы Ajax из WordPress. Эта технология обычно используется для административных целей в WordPress, например, для модерации комментариев, для мгновенного обновления сделанных изменений и т. Д. Она также используется при добавлении / удалении элементов из WordPress.
Возможно, вы знаете, что Ajax стоит за функцией автосохранения в WordPress. В настоящее время Ajax часто используется в темах и плагинах WordPress. Сегодня мы начнем с того, что покажем вам, как реализовать это в вашей теме WordPress.
Давайте начнем!
Давайте начнем с создания кнопки «Отправить» на сайте, которую мы будем использовать для вставки приветствия из скрытого поля в созданный тестовый блок.
Шаг 1. Создание базового фрагмента кода HTML
|
1
2
3
4
|
<p><input type=»hidden» name=»GreetingAll» id=»GreetingAll» value=»Hello Everyone!»
<input type=»submit» id=»PleasePushMe» />
<div id=»test-div1″>
</div></p>
|
Пожалуйста, поместите этот код в шаблон WordPress, с которым вы хотите работать.
«Платформы Ajax могут использоваться для сокращения переписывания общих функций веб-приложений»
Шаг 2: Ответ на Ajax
Теперь давайте создадим файл Javascript, который будет отвечать на вызовы Ajax. Этот файл должен быть помещен в новую папку с именем scripts под выбранной темой. Путь к файлу javascript должен совпадать с wp-content / themes / name-of-your-theme / scripts / ajax-creation.js
, Просто создайте его сейчас, мы добавим к нему наш скрипт.
Шаг 3: Добавление файла сценария Java в тему
Теперь мы будем добавлять файл javascript в нашу тему. С помощью этого метода файл java-скрипта будет включен при загрузке страницы. Мы будем использовать функцию wp_enqueue_script для этого. Эта функция обеспечивает загрузку библиотеки jQuery перед выполнением сценария.
Пожалуйста, поместите этот код в ваш файл functions.php .
|
1
2
3
4
|
function add_myjavascript(){
wp_enqueue_script( ‘ajax-implementation.js’, get_bloginfo(‘template_directory’) . «/scripts/ajax-implementation.js», array( ‘jquery’ ) );
}
add_action( ‘init’, ‘add_myjavascript’ );</p>
|
Здесь мы создали функцию для хранения функции wp_enqueue_script . Add_action используется для закрепления скрипта в CMS.
Шаг 4: добавление «магии» в файл JavaScript
Теперь пришло время добавить немного магии к созданному файлу Javascript … что является причудливым способом сказать, что мы добавим скрипт;). Здесь вызов Ajax будет выполняться с помощью функции jquery ajax () .
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
jQuery(document).ready(function() {
var GreetingAll = jQuery(«#GreetingAll»).val();
jQuery(«#PleasePushMe»).click(function(){ jQuery.ajax({
type: ‘POST’,
url: ‘http://www.yoursitename.com/wp-admin/admin-ajax.php’,
data: {
action: ‘MyAjaxFunction’,
GreetingAll: GreetingAll,
},
success: function(data, textStatus, XMLHttpRequest){
jQuery(«#test-div1″).html(»);
jQuery(«#test-div1»).append(data);
},
error: function(MLHttpRequest, textStatus, errorThrown){
alert(errorThrown);
}
});
}));
});
|
Эта функция Ajax также должна быть создана в файле functions.php .
|
01
02
03
04
05
06
07
08
09
10
|
function MyAjaxFunction(){
//get the data from ajax() call
$GreetingAll = $_POST[‘GreetingAll ‘];
$results = «<h2>».$GreetingAll.»</h2>»;
// Return the String
die($results);
}
// creating Ajax call for WordPress
add_action( ‘wp_ajax_nopriv_ MyAjaxFunction’, ‘MyAjaxFunction’ );
add_action( ‘wp_ajax_ MyAjaxFunction’, ‘MyAjaxFunction’ );
|
Позвольте мне кратко объяснить код. Функция создается для выполнения при нажатии кнопки #PleasePushMe ( из нашего фрагмента HTML в шаге 1 ). В той же функции мы захватили наше скрытое значение поля и затем добавили функцию jQuery ajax (), используя некоторые обязательные и дополнительные параметры.
Самый простой способ работы с Ajax и WordPress — передать функции Ajax в файл admin-ajax.php, расположенный в папке wp-admin. WordPress обрабатывает все функции Ajax через этот файл. Вам просто нужно поместить код в ваш файл functions.php .
Некоторые важные параметры jQuery.Ajax ()
type : объявляет метод, используемый для передачи данных в функцию Ajax.
url : это URL, из которого запрашивается функция Ajax.
data : здесь передается информация о функции Ajax.
Success : функция Success выполняется при успешном вызове Ajax. Именно здесь извлеченные данные будут введены в DOM с помощью JavaScript.
Ошибка : эта функция используется в случае ошибки в коде.
Add_action используется через admin-ajax.php для создания функций Ajax, распознаваемых CMS.
Вы можете прочитать больше о полном списке параметров здесь .
Большой финал создания Ajax WordPress Pagination
Используя те же базовые методы, которые мы только что описали, вы можете легко загружать содержимое, разбитое на страницы, используя Ajax. Вам нужно будет использовать немного больше jQuery, и это будет выглядеть так:
|
1
2
3
4
|
<ul id=’PaginationExample’>
<li><?php next_posts_link(‘« Older Entries’) ?></li>
<li><?php previous_posts_link(‘Newer Entries »’) ?></li>
</ul>
|
Этот код выше создаст предыдущую и следующую страницу для сообщений. Мы добавили идентификатор в неупорядоченные списки, чтобы добавить его с помощью jQuery.
|
01
02
03
04
05
06
07
08
09
10
11
12
|
<script type=»text/javascript» charset=»utf-8″>
jQuery(document).ready(function(){
jQuery(‘#PaginationExample a’).live(‘click’, function(e){
e.preventDefault();
var link = jQuery(this).attr(‘href’);
jQuery(‘#ID’).html(‘Loading…’);
jQuery(‘#ID’).load(link+’ #contentInner’);
});
});
</script></p>
|
Измените #ID с идентификатором div, оборачивающего div #contentInner вашей страницы (div, содержащий ваш контент), и добавьте код в файл header.php вашей темы.
Макет #contentInner div выглядит следующим образом:
|
1
2
3
4
5
|
<div id=’mycontent’>
<div id=’contentInner’>
All the Posts & navigations are located here
</div>
</div>
|
Перед выполнением кодов включите библиотеку jQuery в тему, если она не была включена ранее.
Это оно! Теперь, когда нажимается следующая / предыдущая ссылка, новое содержимое загружается с помощью Ajax.
Лучшие практики для использования Ajax в WordPress
Всегда используйте wp_localize_script () для объявления глобальных переменных JavaScript
|
1
2
3
4
5
|
// code to embed th java script file that makes the Ajax request
wp_enqueue_script( ‘ajax-request’, plugin_dir_url( __FILE__ ) . ‘js/ajax.js’, array( ‘jquery’ ) );
// code to declare the URL to the file handling the AJAX request </p>
wp_localize_script( ‘ajax-request’, ‘MyAjax’, array( ‘ajaxurl’ => admin_url( ‘admin-ajax.php’ ) ) );
|
Всегда используйте admin-ajax.php для обработки запросов AJAX
Все запросы AJAX должны быть направлены в wp-admin / admin-ajax.php. При использовании этого есть обязательный параметр для запросов, отправляемых к admin-ajax. Этот параметр действия будет выполнять одну из этих ловушек в зависимости от того, вошел ли пользователь в систему или нет.
|
1
2
3
4
5
|
// when the user is logged in
do_action( ‘wp_ajax_nopriv_’ . $_REQUEST[‘action’] );
// when the user is not logged in:
do_action( ‘wp_ajax_’ . $_POST[‘action’] );
|
Вы можете использовать встроенный плагин jQuery Form для отправки форм на своей странице WordPress.
Как правило, вы будете использовать Ajax, чтобы избежать перезагрузки страницы, когда вы отправляете формы в WordPress. Чтобы сделать его более эффективным, вы можете использовать плагин Jquery для обработки отправки формы Ajax. Вы можете использовать обработчик: jquery-form
|
1
|
wp_enqueue_script( ‘json-form’ );
|
Теперь отправьте форму, используя Ajax
|
01
02
03
04
05
06
07
08
09
10
11
|
jQuery(‘#form’).ajaxForm({
data: {
// Here you can include additional data along with the form fields
},
dataType: ‘json’,
beforeSubmit: function(formData, jqForm, options) {
// optional data processing before submitting the form
},
success : function(responseText, statusText, xhr, $form) {
}
});
|
Пожалуйста, будьте осторожны с JQuery JSON-анализом по умолчанию!
В jQuery версии 1.3.2 или более ранней версии eval используется для преобразования строки JSON в объект. Это может быть быстро, но это не безопасно.
Лучший способ — включить последнюю версию Jquery во время работы.
Вывод
Используя Ajax, вы можете сделать свой сайт более интерактивным и удобным для пользователя. Настоятельно рекомендуется использовать Ajax при разработке собственных плагинов и тем. Тем не менее, очень важно правильно и безопасно внедрить Ajax, иначе это может иметь катастрофические последствия.