В этом руководстве мы дадим вам отправную точку для создания взаимодействия AJAX в вашем блоге. Мы следуем пошаговому процессу, показывая вам, как загружать сообщения на основе прокрутки страницы зрителей. В этом учебнике рассматриваются сценарии постановки в очередь, настройки обработчика AJAX, получения файла вне WordPress для использования функций WordPress и доступа к базе данных, а также логики для загрузки сообщений при прокрутке страницы пользователя.
О чем пойдет этот урок:
- Организация папок.
- Добавление jQuery на ваш сайт.
- Включая новый файл скрипта (js).
- Добавление php-файла обработчика цикла (loop.php или loopHandler.php).
- Копирование цикла из основного индексного файла в наш обработчик цикла.
- Очистка петли.
- Включая wp-load.php (это то, что заставляет все это работать хорошо)
- Хранение данных GET как переменных в нашем обработчике.
- Используя wp-запрос.
- Используя jQuery, создайте нашу функцию вызова AJAX.
- Успех!
- Отображение данных на странице прокрутки.
- Добавление загрузчика GIF.
Предположения:
- Вы знакомы с библиотекой jQuery JavaScript
- У вас есть базовое понимание AJAX
- Вы можете редактировать PHP-файлы WordPress
Почему детская тема?
Поскольку уроки в этом руководстве могут быть применены к любой теме, я не хочу углубляться в создание дочерних тем (так как это сама по себе статья). Однако мы не хотим терять всю тяжелую работу, которую мы будем здесь делать, нам нужно будет создать дочернюю тему. Если вы не знакомы с дочерними темами, вы можете посмотреть, как их создать, выполнив поиск по кодексу WordPress .
Для этого урока мы будем использовать стандартную тему «twentyeleven», которая поставляется в комплекте с WordPress, в качестве родительской для нашей дочерней темы. Все файлы, которые мы будем редактировать и создавать, будут ссылаться на эту тему, но обсуждаемые здесь концепции могут быть применены к любому циклу WordPress, независимо от темы. Хорошо, давайте скомпилируем наши ресурсы и начнем редактирование. По мере продвижения по коду разделы будут повторяться, а новые дополнения будут выделены жирным шрифтом.
Скринкаст
Следуйте инструкциям, шаг за шагом пройдясь по коду, или следуйте приведенным ниже инструкциям.
Шаг 1 Организация папок
Когда вы закончите добавление папки вашей дочерней темы, вы должны увидеть только таблицу стилей, связанную с родительской темой, внутри. Внутри вашей папки добавьте следующее:
- Папка с именем «JS»
- Папка с именем «изображения»
- Пустой php-файл с именем loopHandler.php
- Пустой php-файл с именем functions.php
- В папке «js» добавьте пустой файл js с именем ajaxLoop.js
- Скопируйте индексный файл родительской темы и вставьте его в корневую папку дочерней темы.
Functions.php не переопределяет файл функций родительской темы, а расширяет его. Этот файл позволит нам правильно добавлять скрипты на нашу страницу.
Шаг 2 Добавление jQuery на ваш сайт
По умолчанию jQuery не добавляется автоматически в тему «twentyeleven». Мы можем добавить его в нашу тему, добавив функцию в созданный нами файл functions.php, а затем вызвав add_action (), чтобы зарегистрировать ее. Добавьте следующий код в ваш файл functions.php:
1
2
3
4
5
6
7
8
|
<?php
function register_jquery() {
wp_deregister_script( ‘jquery’ );
wp_register_script( ‘jquery’, ‘http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js’);
wp_enqueue_script( ‘jquery’ );
}
add_action(‘wp_enqueue_scripts’, ‘register_jquery’);
?>
|
С помощью wp_deregister_script () мы обязательно отменяем регистрацию любого предыдущего скрипта jquery (если есть), затем мы переходим к использованию wp_register_script () для добавления jQuery. Мы называем зарегистрированный скрипт в первом аргументе «jquery», а во втором аргументе устанавливаем источник в Google cdn. Затем мы вызываем wp_enqueue_script () с именем, которое мы установили в предыдущей функции («jquery»). Функция add_action (), наконец, зарегистрирует функцию, которую мы создали, используя хук «wp_enqueue_scripts». Согласно кодексу, использование «wp_enqueue_scripts» в качестве хука безопаснее, чем использование хуков, таких как «init», которые могут сломать вещи после обновления.
ОБНОВЛЕНИЕ: «Ядро WordPress 3.2 поставляется с jQuery 1.6.1 из коробки, так что вы можете удалить строки 3 и 4 из этого и просто иметь wp_enqueue_script (‘jquery’); а WordPress 3.3 поставляется с jQuery 1.7.1. Если вы просто делать это в случае, если у пользователя есть кэшированная копия jQuery из CDN от Google, тогда это круто, но если вы делаете это, у вас должен быть запасной вариант на случай, если CDN случится. Я знаю, что вероятность этого очень мала но лучше быть в безопасности «- спасибо Bronson Quick в комментариях к этой заметке! Пересмотренный код будет выглядеть так:
1
2
3
4
5
6
|
<?php
function register_jquery() {
wp_enqueue_script( ‘jquery’ );
}
add_action(‘wp_enqueue_scripts’, ‘register_jquery’);
?>
|
Джап добавляет: «WordPress поставляется с jQuery, и если вы не перерегистрируете его и перерегистрируете его для преимуществ CDN, нет необходимости делать что-то большее, чем ставить jQuery в очередь.
Описанный выше метод описан в Кодексе WordPress в разделе «Загрузка сценария WordPress по умолчанию из местоположения, отличного от местоположения по умолчанию», и на самом деле есть рекомендация против него.
На самом деле, обычно вы включаете jQuery для использования с другим скриптом, поэтому вы можете просто указать jQuery как зависимость для вашего скрипта в enqueue и вуаля! Это также описано на этой странице Кодекса в разделе «Загрузка скрипта из вашей темы, который зависит от скрипта WordPress».
Вы можете прочитать все о правильном использовании сценария enqueue в нашем посте здесь .
Шаг 3 Включение нового файла сценария (js).
Чтобы добавить наш собственный скрипт, мы будем следовать тем же шагам, что и для добавления jQuery. Основным отличием будет то, что мы собираемся добавить локально сохраненный файл, а не тот, который размещен в Google. Поскольку этот скрипт будет зависеть от загрузки jQuery, мы добавим еще один аргумент в наш вызов register_script (). Ниже приведен полный код в вашем файле functions.php:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
|
<?php
function register_jquery() {
wp_deregister_script( ‘jquery’ );
wp_register_script( ‘jquery’, ‘http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js’);
wp_enqueue_script( ‘jquery’ );
}
add_action(‘wp_enqueue_scripts’, ‘register_jquery’);
function register_ajaxLoop_script() {
wp_register_script(
‘ajaxLoop’,
get_stylesheet_directory_uri() .
array(‘jquery’)
);
wp_enqueue_script(‘ajaxLoop’);
}
add_action(‘wp_enqueue_scripts’, ‘register_ajaxLoop_script’);
?>
|
Третий аргумент, array (‘jquery’), обрабатывает любые зависимости, которые может иметь ваш скрипт. Вы можете передавать дополнительные элементы в массиве для каждой дополнительной зависимости. Обратите внимание, что если вы не создали дочернюю тему, вы должны использовать «get_template_directory_uri ()» вместо «get_stylesheet_directpry_uri ()».
Шаг 4 Копирование цикла из основного индексного файла в наш обработчик циклов
Теперь, когда наши сценарии поставлены в очередь, мы можем начать писать наш код. Сначала нам нужно взглянуть на файл index.php внутри папки нашей дочерней темы. Откройте файл и выделите следующий код:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
|
<?php if ( have_posts() ) : ?>
<?php twentyeleven_content_nav( ‘nav-above’ );
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post();
<?php get_template_part( ‘content’, get_post_format() );
<?php endwhile;
<?php twentyeleven_content_nav( ‘nav-below’ );
<?php else : ?>
<article id=»post-0″>
<header>
<h1><?php _e( ‘Nothing Found’, ‘twentyeleven’ );
</header><!— .entry-header —>
<div>
<p><?php _e( ‘Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.’, ‘twentyeleven’ );
<?php get_search_form();
</div><!— .entry-content —>
</article><!— #post-0 —>
<?php endif;
|
Скопируйте этот код и вставьте его в созданный вами файл loopHandler.php. После копирования кода в файл loopHandler.php обязательно удалите этот код из вашего index.php
Шаг 5 Очистка цикла
Теперь мы очистим этот код. Прежде всего, мы будем лишать код того, что нам не нужно. У меня есть личные предпочтения в том, как я форматирую свой код, но вы можете отформатировать его любым удобным для вас способом. Главное, чего мы хотим достичь, это сохранить только необходимое и отказаться от всего остального. Вот чем мы закончим:
01
02
03
04
05
06
07
08
09
10
|
<?php
// our loop
if (have_posts()) {
while (have_posts()){
the_post();
get_template_part( ‘content’, get_post_format() );
}
}
?>
|
Как вы можете видеть здесь, мы разбили код до его основ. Я предпочитаю использовать стандартный синтаксис «если», «еще», но опять же, вы можете отформатировать его по своему желанию. Теперь у нас есть все, что нужно, чтобы получать сообщения из нашей базы данных.
Шаг 6 Включая wp-load.php (это то, что заставляет все это работать хорошо)
На этом этапе нам мешает то, что наш файл loopHandler.php сам по себе не знает функций WordPress или WordPress. Чтобы смягчить это, мы должны добавить пару строк кода, которые будут включать необходимые данные. WordPress упростил нам задачу, предоставив нам файл wp-load.php. Он расположен в главном каталоге нашей установки. Мы добавим код над нашим циклом. Наш файл должен выглядеть следующим образом:
01
02
03
04
05
06
07
08
09
10
11
12
13
|
<?php
// Our include
define(‘WP_USE_THEMES’, false);
require_once(‘../../../wp-load.php’);
// our loop
if (have_posts()) {
while (have_posts()){
the_post();
get_template_part( ‘content’, get_post_format() );
}
}
?>
|
Нам нужно определить нашу константу WP_USE_THEMES равной false, чтобы мы не загружали никаких дополнительных данных, чем нам нужно. Затем мы требуем_once () нашего wp-load.php. Поскольку мы помещаем наш loopHandler.php в корень папки нашей темы, достаточно просто использовать относительный путь к wp-load.php. Это только три уровня вверх :).
«Так как мы поместили наш loopHandler.php в корень папки нашей темы, достаточно легко использовать относительный путь к wp-load.php. Он всего на три уровня выше :)»
Шаг 7 Сохранение данных GET как переменных в нашем обработчике.
Следующим шагом является добавление нескольких строк для получения данных GET, которые мы позже отправим. Мы хотим добавить две переменные: одну, которая будет хранить запрошенное количество страниц, и одну, которая будет хранить номер «страницы». Причина, по которой я написал «страницу» в кавычках, заключается в том, что у нас действительно не будет страниц, а будет одна страница, которая будет продолжать загружать все больше и больше постов при прокрутке вниз. Однако, когда мы запрашиваем базу данных, мы отправляем ей страницу для выборки. Вы увидите, как это работает позже в этом уроке. Давайте добавим наши переменные. Наш код должен теперь выглядеть следующим образом:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
|
<?php
// Our include
define(‘WP_USE_THEMES’, false);
require_once(‘../../../wp-load.php’);
// Our variables
$numPosts = (isset($_GET[‘numPosts’])) ?
$page = (isset($_GET[‘pageNumber’])) ?
// our loop
if (have_posts()) {
while (have_posts()){
the_post();
get_template_part( ‘content’, get_post_format() );
}
}
?>
|
Если вы не знакомы с короткими выражениями «если», это может показаться вам странным, но это то же самое, что создать выражение «если». В скобках у нас есть условие (задано ли значение numPost в глобальной переменной $ _GET?), Затем мы следуем за ним со знаком вопроса. Левая сторона двоеточия означает, что произойдет, если наше условие истинно, а правая сторона означает, что произойдет, если наше условие ложно. По сути это то же самое, что написать следующее:
01
02
03
04
05
06
07
08
09
10
|
if( isset($_GET[‘numPosts’]) ) {
$numPosts = $_GET[‘numPosts’];
} else {
$numPosts = 0;
}
if( isset($_GET[‘pageNumber’]) ) {
$page = $_GET[‘pageNumber’];
} else {
$page = 0;
}
|
Шаг 8 Использование wp-запроса.
Теперь нам нужно добавить еще пару строк кода. Чтобы иметь возможность запрашивать базу данных, нам нужно создать новый запрос с помощью функции query_posts (). Нам нужно передать массив аргументов в запрос, который запросит количество страниц и номер страницы, которую мы хотим получить. Мы сделаем запрос к базе данных, пройдемся по результатам, а затем нам нужно будет сбросить запрос впоследствии для хорошей меры. Наш код теперь будет выглядеть следующим образом:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<?php
// Our include
define(‘WP_USE_THEMES’, false);
require_once(‘../../../wp-load.php’);
// Our variables
$numPosts = (isset($_GET[‘numPosts’])) ?
$page = (isset($_GET[‘pageNumber’])) ?
query_posts(array(
‘posts_per_page’ => $numPosts,
‘paged’ => $page
));
// our loop
if (have_posts()) {
while (have_posts()){
the_post();
get_template_part( ‘content’, get_post_format() );
}
}
wp_reset_query();
?>
|
Шаг 9 Используя jQuery, создайте нашу функцию вызова AJAX.
Теперь, когда у нас есть достойная база для работы, давайте добавим немного javascript в наш ajaxLoop.js. Сначала давайте добавим функцию jQuery, которая ожидает загрузки документа. Затем мы добавим наш скрипт внутри. В вашем файле ajaxLoop.js добавьте следующие строки кода:
1
2
3
4
|
// ajaxLoop.js
jQuery(function($){
// we will insert code here
});
|
Этот перенос функции аналогичен вызову jQuery (‘document’). Ready (function ($) {}) ;. Мы делаем здесь вызов jQuery, а не символа доллара ($), и передачу символа доллара функции, чтобы мы могли использовать его в качестве псевдонима для jquery внутри этой функции. Мы делаем это в случае, если вы используете $ .noConflict () с другими библиотеками скриптов, которые могут использовать символ доллара. Если вы не уверены, что такое $ .noConflict (), вы можете найти дополнительную информацию в документации по jQuery. Далее, давайте настроим некоторые переменные:
1
2
3
4
5
6
7
|
// ajaxLoop.js
jQuery(function($){
var page = 1;
var loading = true;
var $window = $(window);
var $content = $(‘body.blog #content’);
});
|
Переменная «page» будет хранить информацию о том, какую страницу мы будем загружать, и будет увеличиваться при каждой загрузке нового содержимого. Наша вторая переменная «loading» будет отслеживать статус контента. Когда мы напишем нашу функцию для проверки прокрутки окна, мы не хотим, чтобы оно выполнялось, если мы находимся в состоянии загрузки. Так как мы загрузим нашу первую «страницу» автоматически, мы установим загрузку в «true». Следующая переменная «$ window» будет хранить DOM-элемент окна после того, как мы запросим его с помощью jQuery. Хранение этого запроса в переменной полезно, потому что нам не нужно делать дополнительные вызовы jQuery, и это помогает повысить производительность.
Наша последняя переменная «$ content» будет хранить возвращенный элемент контейнера, который мы хотим использовать для загрузки нашего контента. В WordPress нам предоставлен класс для элемента «body» для страницы блога под названием «blog». Здесь я нацелился на контент, который принадлежит только странице блога, чтобы другие страницы не были затронуты. Есть лучшие способы сделать это, но для целей данного урока это самый быстрый способ.
Теперь нам нужно создать нашу функцию вызова AJAX. После настройки функции AJAX ваш код должен выглядеть следующим образом:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
|
// ajaxLoop.js
jQuery(function($){
var page = 1;
var loading = true;
var $window = $(window);
var $content = $(‘body.blog #content’);
var load_posts = function(){
$.ajax({
type : «GET»,
data : {numPosts : 1, pageNumber: page},
dataType : «html»,
url : «http://WWW.YOURSITE.COM/wp-content/themes/YOUR_THEME_NAME/loopHandler.php»,
beforeSend : function(){
},
success : function(data){
},
error : function(jqXHR, textStatus, errorThrown) {
alert(jqXHR + » :: » + textStatus + » :: » + errorThrown);
}
});
}
});
|
Мы сохранили функцию load_posts () как переменную и можем использовать ее по мере необходимости. До сих пор мы только что создали Shell для вызова. Когда мы делаем вызов JQuery AJAX, мы передаем объект в качестве аргумента. Объект состоит из пар ключ-значение, которые будут параметрами, которые мы устанавливаем. Сначала мы устанавливаем тип для использования «GET». Во-вторых, мы устанавливаем опцию «data» для другого объекта пар ключ-значение, состоящего из наших опций (numPosts и pageNumber).
Параметр «dataType» указывает тип данных, которые будут возвращены с сервера. В этом случае это будет HTML. Опция ‘url’ указывает на наш файл loopHandler.php. Это файл, из которого он будет запрашивать данные. Вы должны заменить WWW.YOURSITE.COM на URL своего сайта, а затем заменить YOUR_THEME_NAME именем, которое вы дали своей дочерней теме!
«Вы должны заменить WWW.YOURSITE.COM на URL своего сайта, а затем заменить YOUR_THEME_NAME на имя, которое вы дали своей дочерней теме».
Затем у нас есть параметры настройки для трех обратных вызовов: beforeSend, success и error. Мы передадим параметр (я назвал его «data») в функцию success, и это будет возвращенный объект данных с сервера. Мы скоро настроим эту функцию.
Наш обратный вызов ‘error’ будет обрабатывать любые возвращенные ошибки сервера. Для целей этого урока мы просто выведем сообщения об ошибках. В обратном вызове beforeSend мы добавим логику для создания анимированного GIF загрузки, который будет отображаться во время запроса данных.
Шаг 10 Добавление «Успех!» Перезвони
Теперь нам нужно построить нашу функцию обратного вызова «success». Во-первых, мы хотим спрятать данные перед их отображением, чтобы мы могли красиво их добавить. Затем мы добавим данные к нашему контенту и добавим их. Давайте изменим наш файл ajaxLoop.js, чтобы иметь следующее:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
// ajaxLoop.js
jQuery(function($){
var page = 1;
var loading = true;
var $window = $(window);
var $content = $(«body.blog #content»);
var load_posts = function(){
$.ajax({
type : «GET»,
data : {numPosts : 1, pageNumber: page},
dataType : «html»,
url : «http://WWW.YOURSITE.COM/wp-content/themes/YOUR_THEME_NAME/loopHandler.php»,
beforeSend : function(){
},
success : function(data){
$data = $(data);
$data.hide();
$content.append($data);
$data.fadeIn(500);
},
error : function(jqXHR, textStatus, errorThrown) {
alert(jqXHR + » :: » + textStatus + » :: » + errorThrown);
}
});
}
});
|
Пока что мы передали данные в jQuery ($ (data)) и сохранили их в переменной, которую мы назвали $ data. Мы использовали функцию jQuery, чтобы скрыть данные. Затем мы добавляем данные в наш контейнер содержимого. Как только данные добавлены, мы их постепенно добавляем.
Шаг 11 Отображение данных на странице прокрутки.
Теперь мы добавим еще три пункта. Первой будет функция, которая обрабатывает загрузку сообщений, которая будет вызываться при прокрутке страницы. Второй вызовет нашу функцию load_posts () в первый раз. В нашем обработчике прокрутки страницы нам нужно проверить, ожидают ли данные загрузки, вызвать нашу функцию load_posts () и установить для переменной «loading» значение «true». Для нашего третьего элемента мы установим переменную «loading» в значение «false» в обратном вызове нашего вызова функции fadeIn (). Давайте добавим код следующим образом:
01
02
03
04
05
06
07
08
09
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
|
// ajaxLoop.js
jQuery(function($){
var page = 1;
var loading = true;
var $window = $(window);
var $content = $(«body.blog #content»);
var load_posts = function(){
$.ajax({
type : «GET»,
data : {numPosts : 1, pageNumber: page},
dataType : «html»,
url : «http://WWW.YOURSITE.COM/wp-content/themes/YOUR_THEME_NAME/loopHandler.php»,
beforeSend : function(){
},
success : function(data){
$data = $(data);
$data.hide();
$content.append($data);
$data.fadeIn(500, function(){
loading = false;
});
},
error : function(jqXHR, textStatus, errorThrown) {
alert(jqXHR + » :: » + textStatus + » :: » + errorThrown);
}
});
}
$window.scroll(function() {
var content_offset = $content.offset();
console.log(content_offset.top);
if(!loading && ($window.scrollTop() +
$window.height()) > ($content.scrollTop() +
$content.height() + content_offset.top)) {
loading = true;
page++;
load_posts();
}
});
load_posts();
});
|
Здесь мы вставляем логику, чтобы проверить расположение нашей прокрутки относительно конца контейнера содержимого. Перед каждым вызовом функции load_posts () мы добавляем ее в нашу переменную страницы, чтобы получить новые данные. Причина, по которой мы добавляем на страницу до вызова функции load_posts (), заключается в том, что мы уже вызывали ее один раз во время инициализации скрипта. Мы также устанавливаем загрузку в true, чтобы не делать дополнительных вызовов до загрузки наших новых данных.
Шаг 12 Добавление загрузчика GIF.
Наконец, мы добавим gif-загрузчик, чтобы при каждой загрузке пользователь получал отзывы о том, что страница обрабатывает данные. Мы также включим проверку, чтобы убедиться, что первая загрузка не показывает GIF. В наших функциях обратного вызова success и error мы удалим gif-файл, чтобы он не вращался на экране.
Перво-наперво, нам нужно добавить loader.gif в нашу папку изображений. Я предлагаю посетить http://www.ajaxload.info/, где вы можете загрузить загрузочный GIF по своему вкусу. Сохраните изображение как ajax-loader.gif в папке с изображениями, которую мы создали в корневой папке нашей дочерней темы. Затем мы добавим код в наш файл ajaxLoop.js, который будет обрабатывать этот загрузчик. Наш файл теперь будет выглядеть следующим образом:
01
02
03
04
05
06
07
08
09
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
41
42
43
44
45
46
47
48
49
50
51
|
// ajaxLoop.js
jQuery(function($){
var page = 1;
var loading = true;
var $window = $(window);
var $content = $(«body.blog #content»);
var load_posts = function(){
$.ajax({
type : «GET»,
data : {numPosts : 1, pageNumber: page},
dataType : «html»,
url : «http://WWW.YOURSITE.COM/wp-content/themes/YOUR_THEME_NAME/loopHandler.php»,
beforeSend : function(){
if(page != 1){
$content.append(‘<div id=»temp_load» style=»text-align:center»>\
<img src=»../images/ajax-loader.gif» />\
</div>’);
}
},
success : function(data){
$data = $(data);
if($data.length){
$data.hide();
$content.append($data);
$data.fadeIn(500, function(){
$(«#temp_load»).remove();
loading = false;
});
} else {
$(«#temp_load»).remove();
}
},
error : function(jqXHR, textStatus, errorThrown) {
$(«#temp_load»).remove();
alert(jqXHR + » :: » + textStatus + » :: » + errorThrown);
}
});
}
$window.scroll(function() {
var content_offset = $content.offset();
console.log(content_offset.top);
if(!loading && ($window.scrollTop() +
$window.height()) > ($content.scrollTop() +
$content.height() + content_offset.top)) {
loading = true;
page++;
load_posts();
}
});
load_posts();
});
|
Мы также добавили проверку, чтобы убедиться, что если данных нет, загрузочный gif удаляется. Когда наш последний вызов отправляется на сервер, и сообщений больше нет, мы больше не будем устанавливать для переменной «loading» значение «false». С этого момента мы будем в состоянии загрузки, и наша функция прокрутки больше не будет делать больше вызовов нашей функции load_posts (). В то же время мы позаботимся о том, чтобы очистить последний gif-загрузчик ajax
Завершение
Этот урок был задуман как пример того, что можно сделать с постами внутри WordPress, используя AJAX и jQuery. Мы рассмотрим только базовый пример того, что можно сделать здесь, но предоставили некоторые важные концепции, которые можно от него отказаться. Основные моменты, на которые стоит обратить внимание, — это то, как мы включили wp-load.php, поставили в очередь наши скрипты в WordPress и обрабатывали наши вызовы AJAX.
Об авторах
Денис Баскин
Он специализируется на javascript и jQuery, но пользуется множеством языков программирования. За свою карьеру он разработал множество индивидуальных установок WordPress для клиентов и любит работать с фреймворком. Для получения дополнительной информации вы можете найти его на LinkedIn .
Джерри Бейтс
Джерри Бейтс — независимый разработчик, дизайнер и специалист по WordPress с 2,6 дня. В настоящее время он создает веб-сайты на базе WordPress через свой бизнес, FittingSites , а также публикует видеоруководство для новых пользователей WordPress на своем канале YouTube . Вы можете следить за ним в Твиттере @JerrySarcastic