WordPress фильтр постов по категориям, а так-же Ajax подгрузка постов • фриланс-работа для специалиста • категория PHP ≡ Заказчик Алексей Титенко
3 из 3
истекло время актуальности
публикация
прием ставок
истекло время актуальности
Добрый день!
Мне необходимо сделать фильтр на сайте https://thecreativemarketer.net/, и при прокрутке сайта должны бесконечно подгружаться посты. И ещё в PopUp открываются посты с elementor, в них не работает часть стандартного функционала, карты и т.д. работают, а например аккордеон Elementor не запускается
Подскажите пожалуйста 2 стоимости:
1. Сделать фильтр, и починить вывод постов в PopUp
2. Сделать фильтр, и починить вывод постов в PopUp + сделать Ajax подгрузку постов так чтоб не испортить функционал PopUp
- Ставки 8
дата онлайн рейтинг стоимость время выполнения
3316
54 4
Григорій П.
3 дня3000 UAH
Сделать фильтр, указал.
А ещё Ajax — плюс одна треть.
Фильтр по каким параметрам делать?2 дня1500 UAH
2 дня1500 UAH
Опытный веб-разработчик, специализируюсь на WP, готов приступать прямо сейчас. Сделаю быстро и качественно.
Предлагаю обсудить детали, пишите.
Последние работы:
https://logprof.ru/
https://medved-print.ru/
https://veranovitskaya.com/- 1 день1300 UAH
1 день1300 UAH
Готова обсудить задачу.
Пишите в лс. Буду рада сотрудничеству!
2 дня2000 UAH
2 дня2000 UAH
Доброго дня вам, напишите в ЛС параметры для фильтра . Стоимость за 1 задачу. подходит, дальше проясним
Спасибо ,3 дня3000 UAH
3 дня3000 UAH
Добрый день
Опыт разработки на WP 6 лет
Смотрите мои отзывы.1 день1000 UAH
1 день1000 UAH
Здраствуйте можно увидеть тз и подробней ознакомиться с задачей?
3 дня2500 UAH
3 дня2500 UAH
Добрый день! Я специализируюсь на качественной разработки сайтов на WordPress+Elementor.
Опыт работы более 4-х лет.
Обращайтесь, буду рад сотрудничеству!ставка скрыта фрилансером
1 год назад
93 просмотра
- Javascript
- ajax
- WordPress
- jquery
- веб-программирование
- сайт на WordPress
Метка: ajax | WordPress.org Русский
Перейти к содержимомуПерейти к содержимому
- WP_Query() — ломается пагинация
Начато: elena11
- 2
- 1
- 1 год назад
qwert555
- Ajax обновление корзины
Начато: conscience5
- 0
- 0
- 1 год назад
conscience5
- Отображение Ajax формы
Начато: conscience5
- 3
- 5
conscience5
- Обновление кнопки «Добавить в корзину»
Начато: imaggg
- 1
- 0
- 1 год, 5 месяцев назад
imaggg
- Как правильно вывести посты с ajax?
Начато: avearthasz
- 1
- 0
- 1 год, 7 месяцев назад
avearthasz
- Admin-ajax 400 и возвращяет 0
Начато: avearthasz
- 3
- 9
- 1 год, 7 месяцев назад
avearthasz
- Не работает wordpress + ajax + $wpdb->get_results?
Начато: zexelconnect
- 2
- 1
- 1 год, 7 месяцев назад
Yuri
- Проблема Use of undefined constant ‘UPLOADS’
Начато: kots93
- 2
- 2
- 2 года назад
kots93
- Пагинация постов по категории через Ajax
Начато: nnovosad19
- 0
- 0
- 2 года, 1 месяц назад
nnovosad19
- Какой плагин регистрации посоветуете?
Начато: Triptikon
- 2
- 8
- 2 года, 1 месяц назад
dsoboleva
- Ajax загрузка определённого списка товаров
Начато: calebelt
- 0
- 0
- 2 года, 2 месяца назад
calebelt
- Ajax-форма, белый экран, в чем ошибка?
Начато: dartleft4protocreed
- 6
- 8
- 2 года, 9 месяцев назад
Otshelnik-Fm
- Стандартный для WP ajax плагин подгрузки
Начато: rsl89
- 2
- 4
- 2 года, 10 месяцев назад
rsl89
- Обязательные поля woocommerce и методы доставки
Начато: ravavilen
- 1
- 0
- 2 года, 11 месяцев назад
ravavilen
- Связанные списки Ajax
Начато: Dmitry Kohan
- 2
- 9
- 3 года назад
Dmitry Kohan
- Не создаются посты без перезагрузки
Начато: bazilvazz
- 3
- 13
- 3 года назад bazilvazz
- ajax или есть встроенные решения?
Начато: samourai
- 3
- 6
- 3 года, 1 месяц назад
Flector
- Исправить PHP скрипт для обработки CSV
Начато: maxmatveevv
- 3
- 5
- 3 года, 3 месяца назад
AlexF
- Как обновить доставку после ввода адреса?
Начато: jnextremo
- 1
- 0
- 3 года, 3 месяца назад
jnextremo
- Обновление результатов фильтра кнопкой
Начато: sasha_booth
- 2
- 3
- 3 года, 4 месяца назад
wpgear
- Почему ajax возвращает 0?
- 2
- 1
- 3 года, 4 месяца назад
Yuri
- Почему wp_insert_post выдает 0 при $wp_error = true?
Начато: gerbulov
- 2
- 2
- 3 года, 4 месяца назад
gerbulov
- Проблемы с php при отправке формы
Начато: vvs10
- 4
- 5
- 3 года, 4 месяца назад
vvs10
- Не работают ajax плагины на псевдоподдомене
Начато: genm
- 1
- 1
- 3 года, 5 месяцев назад
genm
- Не отправляются письма CF7
Начато: kaloid
- 1
- 0
- 3 года, 5 месяцев назад
kaloid
- Не выводяться ошибки валидации CF7
Начато: kaloid
- 1
- 0
- 3 года, 5 месяцев назад
kaloid
- Валидация данных формы
Начато: kindmonster
- 2
- 1
- 3 года, 7 месяцев назад
wpgear
- Не срабатывает всплывающее окно после подгрузки AJAX
1
2
Начато: anginsan
- 3
- 21
- 3 года, 8 месяцев назад
tuxfighter
- Пагинация WordPress,обработка на сервере?
Начато: alexkomarov
- 1
- 0
- 3 года, 10 месяцев назад
alexkomarov
- init and plugin loaded
Начато: mi13
- 1
- 0
- 3 года, 12 месяцев назад
mi13
- WP_Query() — ломается пагинация
Как динамически загружать сообщения WordPress с помощью AJAX
AJAX (асинхронный JavaScript и XML) — это способ «разговора» с сервером и отображения результатов без перезагрузки страницы.
Этот метод позволяет нам обновлять счетчики «Нравится», добавлять товары в корзину, создавать динамические формы и многое другое — и все это без перезагрузки страницы.
В этом посте я покажу вам, как загружать сообщения на месте с помощью AJAX, используя тему по умолчанию Twenty Fifteen в качестве основы.
Мы рассмотрим, почему используется AJAX, и начнем с простого примера, создав функциональность загрузки AJAX в Twenty Fifteen.
- Зачем использовать AJAX?
- Начало работы: создание дочерней темы
- Привет, АЯКС!
- Постановка в очередь нашего Javascript
- Создание события
- Создание вызова AJAX
- Общение с WordPress
- Обзор
- Загрузка сообщений с помощью AJAX
- Примечание об AJAX-вызовах
- Лучший пользовательский опыт
- Подводные камни AJAX
Примечание. Если у вас возникнут проблемы с настройкой AJAX на вашем сайте, мы можем помочь! Наша служба поддержки доступна круглосуточно и без выходных, чтобы помочь вам с любой проблемой WordPress (а не только с вопросами о наших собственных плагинах!), поэтому, если у вас возникли проблемы с AJAX или вам нужен совет по настройке CSS, свяжитесь с нами!
Зачем использовать AJAX?
Когда WordPress загружает первую страницу сообщений на сайте WordPress, он запрашивает их из базы данных и использует цикл для их отображения с использованием добавленной нами разметки. Помимо этого загружаются навигационные меню, виджеты, графика и другие медиафайлы, файлы javascript, таблицы стилей и куча других вещей.
Как видно на изображении выше (взято из инструментов разработчика Chrome), загружено довольно много ресурсов. Здесь есть место для оптимизации, и некоторые ресурсы, такие как скрипты, будут кэшироваться, но даже тогда это много.
Когда загружается вторая страница наших постов, все повторяется снова. WordPress извлекает сообщения и отображает их, используя нашу разметку. Он также загружает все внешние элементы страницы снова и снова. Во многих случаях (но не во всех) это является пустой тратой полосы пропускания и вредит пользовательскому опыту. В конце концов, никто не любит ждать загрузки страниц.
Приступая к работе: создание дочерней темы
Прежде чем изменять Twenty Fifteen, нам нужно создать дочернюю тему. Это гарантирует, что мы можем продолжить обновление темы без потери наших изменений. Вы можете прочитать все о том, как это сделать, в нашем руководстве «Как создать дочернюю тему WordPress».
Привет, AJAX!
Начнем с простого примера, демонстрирующего, как работает AJAX. Мы нацелимся на ссылки внутри полосы разбивки на страницы в нижней части страницы, чтобы при нажатии на номер страницы он динамически загружал эту страницу с помощью AJAX. При нажатии на ссылку разбивки на страницы мы отправим запрос на сервер и предупредим о результате.
Мы будем ориентироваться на числовые ссылки внутри раздела пагинации.Постановка в очередь нашего Javascript
Первым делом нужно создать файл JavaScript и поставить его в очередь через файл functions.php нашей темы.
Я создал папку js
и файл ajax-pagination.js
в ней. Сделав то же самое, откройте файл функций и добавьте скрипт в уже существующую функцию theme_enqueue_assets()
:
Loading gist c7a2a7f4b269975a3f88af9e5885b4ac
Если вы не знаете, как поставить в очередь, прочитайте нашу статью о правильном добавлении скриптов и стилей в WordPress. В двух словах, мы сказали WordPress, как мы хотели бы назвать наш скрипт (первый параметр), где он находится (второй параметр), каковы предварительные условия (третий параметр), номер версии (четвертый параметр) и что мы хотели бы загрузить его в нижний колонтитул (параметр пять).
Обратите внимание, что при постановке таблицы стилей в очередь я использовал get_template_directory_uri()
. Эта функция всегда указывает на каталог родительской темы. При постановке нашего скрипта в очередь я использовал get_stylesheet_directory_uri()
. Это указывает на каталог дочерней темы, если он используется в дочерней теме.
Поскольку мы загружаем скрипт в нижний колонтитул, вы можете вставить alert('Script Is Enqueued')
в ajax-pagination.js
и перезагрузить страницу, чтобы проверить, работает ли она. Если это так, текст должен быть предупрежден должным образом.
Создание события
Следующая задача — создать событие, которое инициирует вызов AJAX. В нашем случае событием является переход по определенной ссылке. Чтобы нацелить ссылку, нам нужно немного узнать о классах элементов и идентификаторах вокруг нее.
Если вам интересно, как это появилось, я нажал S hift + Command + C на своем Mac (S hift + Control + C на Windows), навел курсор на элемент, который хотел проверить, и щелкнул по нему.
Это говорит мне, что наши ссылки на страницы имеют класс номеров страниц
, следующая ссылка также имеет класс next
, и все они содержатся в элементе nav
с классом nav-links
. Здесь не показана предыдущая ссылка, которая имеет класс prev
в дополнение к обычному классу номеров страниц .
На данный момент давайте не будем об этом беспокоиться, давайте просто нацелимся на любую ссылку в контейнере разбиения на страницы. Мы можем создать простое оповещение, подобное этому:
Загрузка gist 7241e43cccb37803a6d406b754963b92
Обратите внимание, что все упаковано в анонимную функцию. Я рекомендую вам сделать то же самое. Взгляните на эту тему, почему это полезно. Я создал событие щелчка, предотвратил срабатывание функции по умолчанию (т. е. загрузку страницы) и предупредил некоторый текст.
Создание AJAX-вызова
Вместо работы с данными на стороне клиента (оповещение с предустановленным текстом) мы должны получить некоторые динамические данные со стороны сервера. Нам нужно будет сделать небольшую подготовительную работу. И вот почему: нам нужно дать вызову AJAX URL-адрес для работы. Наш файл Javascript ничего не знает о нашей среде, поэтому мы не можем использовать что-то вроде get_stylesheet_directory_uri()
там. Однако мы можем использовать метод локализации для передачи переменных в наш JavaScript. Давайте сделаем это сейчас в нашем файле функций: (параметр 2). Объект получит свои элементы в соответствии с массивом, указанным в качестве третьего параметра в wp_localize_script() 9.Функция 0068. Другими словами, после добавления этого кода мы сможем использовать
ajaxpagination.
для определения URL-адреса ajaxurl
admin-ajax.php
, который мы используем для обработки вызовов AJAX.
Причина, по которой это работает, заключается в том, что функция локализации выводит определение этого объекта до загрузки нашего JavaScript. Это выглядит примерно так:
Loading gist 7eb58ab22333ceecd7987a9e957b7244
Вернемся к нашему файлу JavaScript. Теперь у нас есть все, что нужно для создания AJAX-вызова. Вот как:
Loading gist 21aa6faadcadea600708da225de3a76a
Как видите, здесь мы используем функцию $.ajax()
. Существуют специальные функции для методов post и get, но я предпочитаю использовать эту функцию из-за ее гибкости. Вы можете прочитать обо всех параметрах в документации jQuery.
С помощью параметра url
мы передаем URL-адрес скрипта, которому мы хотим отправить данные. Это должен быть файл admin-ajax.php
, который можно найти в папке 9.0067 каталог wp-admin . Мы определили это выше с помощью функции wp_localize_script() .
Тип устанавливается на после
. Мы также можем использовать get
, наш запрос не слишком чувствительный, но я предпочитаю публиковать данные, если пользователю не нужен доступ к параметрам.
Параметр data
— это объект, который содержит данные, которые вы хотите передать. В нашем случае я смогу получить доступ к переменной $_POST['action']
, значение которой будет равно ajax_pagination
. Конечно, вы можете передать столько, сколько требует ваше приложение.
Наконец, параметр success
представляет собой функцию, которая сообщает о результате нашего вызова AJAX. Мы сделаем это немного красивее ниже, пока этого достаточно для тестирования. Если вы попытаетесь щелкнуть ссылку сейчас, она на самом деле работает, но не будет очень полезной, поскольку мы не определили код на стороне сервера. На самом деле, то, что вы должны увидеть в предупреждении, это
0.
Так почему же это происходит? Когда я сказал, что «мы не определили серверный код», я был не совсем правдив. У нас нет, а у WordPress есть. В используемом нами файле admin-ajax.php
есть некоторый контент. Если вы посмотрите на исходный код этого файла, то увидите, что скрипт использует die('0')
в нескольких случаях.
Если мы не предоставим действие, скрипт admin-ajax.php
умрет и вернет 0. Если мы предоставим действие, но не подключимся к требуемым крючкам WordPress, ничего не произойдет, и в самом конце файл мы снова умираем, возвращая 0. В заключение мы — это , которые уже обмениваются данными с сервером.
Взаимодействие с WordPress
Чтобы получить осмысленный ответ от WordPress, нам нужно определить некоторые действия WordPress. Делается это с помощью установленного шаблона. Давайте углубимся, продолжив наш пример в файле функций нашей темы:
Loading gist 608b44151fbfc140d3a0316375ddcaf6
Я подключил функцию к двум хукам. Хуки, которые принимают формат
wp_ajax_[action_name]
, выполняются только для зарегистрированных пользователей. Крючки, которые берут на wp_ajax_norpiv_[action_name]
выполняются только для незарегистрированных пользователей. Большим преимуществом этого является то, что вы можете очень легко разделить функциональность.
Имена действий, которые я упомянул выше, относятся к действию, определенному в нашем вызове AJAX в Javascript ( действие: 'ajax_pagination'
) — они должны совпадать. Имя функции может быть любым, я использовал my_ajax_pagination
для ясности.
Сама функция может содержать что угодно. Вы можете выходить из пользователей, собирать их данные, публиковать сообщения и так далее. Что бы вы ни хотели вернуть в Javascript, вам должен эхо . В приведенном выше примере я повторил название блога, полученное динамически с помощью функции get_bloginfo()
.
Последний шаг — использовать die()
. Если мы не определим это, сработает функция die, определенная в
admin-ajax.php
в самом конце файла, и вы в конечном итоге будете повторять 0
в дополнение к ко всему, что вы повторяете. Если вы попробуете приведенный выше код, вы должны увидеть возвращенное название вашего веб-сайта.
Обзор
На этом наш базовый пример закончен! Прежде чем мы перейдем к загрузке сообщений с помощью AJAX, давайте кратко повторим шаги, необходимые для выполнения действия AJAX:
- Поставьте в очередь файл Javascript, если у вас его еще нет
- Используйте
wp_localize_script()
для передачи URL вашегофайла admin-ajax.php
- Создать вызов AJAX в Javascript
- Перехватите функцию, используя соответствующее имя перехватчика
- Код функции, которая может возвращать данные обратно в Javascript
Загрузка сообщений с помощью AJAX
А теперь самое интересное! Я начал этот проект, написав для него код JavaScript. Без лишних слов, вот базовая версия. В ближайшее время мы расширим его, изменив пользовательский интерфейс.
Загрузка сущности 0cdf1bab1a0dd2153fa38f4eefcbeda9
Это почти то же самое, что и наш базовый пример. Первое, что вы заметите, это то, что я добавил способ определить, какую страницу хочет запросить пользователь. Каждая ссылка содержит элемент span
, который скрыт (он доступен для программ чтения с экрана). Я делаю клон элемента, чтобы убедиться, что не изменяю оригинал, удаляю диапазон и анализирую остаток как целое число. Это дает нам номер страницы, которая нам нужна.
Мне также необходимо знать используемые параметры запроса. На главной странице это довольно просто, это всего лишь параметр page
, так как мы работаем с запросом по умолчанию. Если мы начнем со страницы архива (например, архива категорий), нам также потребуется знать название категории.
Мы будем передавать переменные запроса, используя метод локализации, который мы изучили ранее. Сейчас мы будем использовать
ajaxpagination.query_vars
, хотя это еще не определено. Наконец, в случае успеха мы удаляем все article
элементов из основного контейнера, мы удаляем элемент разбивки на страницы и добавляем возвращаемое значение нашего вызова AJAX к основному контейнеру.
Это возвращаемое значение будет содержать сообщения и новый элемент навигации. Обратите внимание, что я изменил имя параметра с response
на html
, потому что оно имеет больше смысла. Чтобы закончить, мы используем массив локализации для передачи исходных параметров запроса.
Следующая функция должна быть помещена в наш Функция my_enqueue_assets()
, заменяющая локализацию, которая была у нас ранее:
Loading gist 72b60aa3b6b3eeca7f6d413fdf99ce76
Все, что нам сейчас нужно сделать, это конкретизировать функцию my_ajax_pagination()
. Что бы ни повторяла эта функция, оно заменит контент на нашей странице. Вот окончательный код с объяснением ниже:
Loading gist 03d548b6ec833fcf66e7c5d5e5b2c33c
Используя переданные нами параметры, мы создаем собственный запрос. Это включает в себя в основном получение переменных запроса, которые мы передали, и проверку того, что номер страницы, который мы передали, перезаписывает стр.
параметр. Затем мы используем наш окончательный массив $query_vars
для создания нового запроса.
Нам нужно сделать переменную $GLOBALS['wp_query']
равной нашему новому объекту сообщений. Причина, по которой нам нужно это сделать, заключается в том, что функция the_posts_pagination()
использует эту глобальную переменную.
Далее обратите внимание, что я добавил функцию в фильтр editor_max_image_size
и удалил ее несколькими строками ниже. Это было что-то неожиданное, что произошло. На самом деле я создал билет WordPress Trac. Мы можем увидеть некоторый прогресс в этом! Вот проблема:
Когда изображения загружаются в сообщение, все они выглядят нормально. Однако, если вы завершите этот урок без этих фильтров, ваши изображения будут уже, всего 660 пикселей в ширину вместо необходимых 825 пикселей. Причина этого в том, что функция, которая загружает изображения, в конечном итоге вызывает функцию с именем
image_constrain_size_for_editor()
. Эта функция гарантирует, что изображения в редакторе сообщений не будут слишком широкими. Чтобы определить погоду, это уменьшение размера должно иметь место, он использует Функция is_admin()
. Поскольку наш код проходит через admin-ajax.php
, который технически находится в админке, WordPress уменьшает масштаб наших изображений, ошибочно думая, что мы используем их в редакторе.
К счастью, мы можем использовать фильтр editor_max_image_size
, чтобы определить максимальный размер редактора. Поскольку мы хотим оставить все как есть, за исключением того, что во время нашего AJAX-вызова мы добавляем фильтр, используя наши пользовательские значения ( array( 825, 510 )
), а затем немедленно удаляем его, чтобы убедиться, что он не вызывает проблем где-либо еще. .
Следующим шагом будет использование нашего запроса для получения списка наших сообщений. Я многое скопировал из файла index.php
в родительской теме. если сообщений нет, мы используем шаблон, который предназначен для обработки этого, в противном случае мы перебираем сообщения и используем шаблон отображения сообщений. Наконец, мы используем тот же формат разбиения на страницы, что и в индексном файле.
Примечание о вызовах AJAX
Важно помнить, что вызовы AJAX всегда исходят от администратора. Это означает, что черновики, запланированные и личные сообщения могут быть возвращены с этим вызовом. Если вы не хотите, чтобы это произошло, вам нужно контролировать поведение с помощью соответствующих параметров, таких как post_status
.
Лучшее взаимодействие с пользователем
При использовании таких решений AJAX чрезвычайно важно сосредоточиться на удобстве работы пользователей. Я работаю в локальной среде, поэтому все загружается очень быстро, но на рабочем сервере загрузка изображений и других ресурсов может занять больше времени.
В связи с этим нужно как минимум добавить загрузчик или загрузку текста и запретить дальнейшие клики по элементам навигации. Мы позаботимся об этом, сделав сообщения и навигацию исчезающими сразу после того, как пользователь щелкнет, и отобразив текст «загрузка новых сообщений». Когда срабатывает событие успеха, мы удаляем текст загрузки и отображаем сообщения. Вот наш обновленный вызов AJAX:
Загрузка gist 4aaaaefb8d5bfe42e6b0753cb05538d6
Теперь у нас есть отдельная функция beforeSend
и Success
. Первый выполняется, как только вы нажмете на ссылку, прежде чем вызов AJAX будет отправлен на сервер. Последнее выполняется, как только мы получаем данные с сервера.
Перед отправкой звонка удаляем статьи и навигацию. Это гарантирует, что пользователи не смогут продолжать нажимать на навигационные ссылки, пока они ждут загрузки. Затем мы прокручиваем до верхней части документа. Затем мы добавляем уведомление о загрузке, чтобы пользователи могли понять, что происходит. Я использовал ту же разметку, что и Twenty Fifteen, для страниц с сообщением «не найдено». В функции успеха мы удаляем загрузчик и загружаем наш контент, все готово!
Подводные камни AJAX
AJAX чрезвычайно мощен; помимо загрузки сообщений, вы можете выполнять любые действия с помощью вызовов AJAX. Существует довольно много опасностей и вещей, на которые следует обратить внимание при его использовании, вот некоторые из них:
Безопасность может быть серьезной проблемой. Если вы хотите удалить сообщение через AJAX, вам нужно убедиться, что у пользователя есть намерение и разрешение (например, с использованием одноразовых номеров). При использовании обычных методов WordPress в некоторых случаях имеет встроенную защиту, но с AJAX вам обычно приходится думать об этом самостоятельно.
Мягкая деградация — еще одна грань AJAX, хотя она становится менее важной. В основном: никакого JavaScript, никакого AJAX. Если вы сильно полагаетесь на AJAX, пользователи, у которых он отключен, не смогут использовать наше приложение. Javascript стал настолько распространенным, что это почти не имеет значения, но может возникнуть в некоторых ситуациях. В этом случае вам нужно убедиться, что нажатие на фактическую ссылку также будет работать.
Пользовательский опыт очень часто упускается из виду. Функционал AJAX это конечно круто, но надежно работающий сайт еще круче. Пользователи привыкли к загрузке страниц при переходе по ссылкам. Нужно сделать все максимально прозрачным, пользователи должны знать, что происходит и почему. Вы должны использовать AJAX для улучшения своей работы, а не для того, чтобы принести как можно больше побрякушек на стол.
Заключение
Как видите, внедрение AJAX требует некоторой подготовки и практики, но как только это станет вашей второй натурой, вы обнаружите, что это дается легко. Вероятно, вам потребовалось некоторое время, чтобы прочитать это, и еще больше времени потребуется, чтобы сделать это в первый раз, но я написал весь пример примерно за 15 минут.
AJAX — один из тех методов, которые могут быть сложными, поскольку он охватывает почти все языки программирования, используемые в такой среде, как WordPress. Вещи еще больше оживляются необходимостью придерживаться соглашений, таких как крючки и локализация.
Практика делает совершенным. Я гарантирую, что вы полюбите AJAX, если начнете его использовать.
Метки:
- разработчики
- PHP
Как уменьшить нагрузку на сервер admin-ajax.php в WordPress
Вордпресс Эксперт
20 февраля 2023 г.
Лукманул М.
5 минут Чтение
Производительность веб-сайта является критическим вопросом для любого владельца сайта. Проблемы с производительностью могут повлиять на работу пользователей и потенциально снизить рейтинг SEO. Поскольку Google использует время загрузки страницы в своих критериях ранжирования.
Когда мы думаем о производительности веб-сайта, мы часто говорим о времени загрузки страницы. В WordPress распространенный сценарий при работе с проблемой времени загрузки заключается в том, что это может быть вызвано всплеском в файле admin-ajax.php.
В этой статье вы узнаете, как управлять конфликтами плагинов, вызванными пиками в файле admin-ajax.php, и уменьшить количество запросов на обратные вызовы, чтобы оптимизировать время загрузки вашего сайта WordPress.
Что такое файл admin-ajax.php в WordPress?
В 2013 году была представлена версия 3.6 WordPress вместе с API-интерфейсом Heartbeat. 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-адрес своего веб-сайта и нажмите Анализ . Для полного анализа вашего сайта требуется некоторое время.
По завершении вы получите отчет о состоянии вашего веб-сайта, такой как оценка производительности и сведения о странице. Перейдите на вкладку Водопад , чтобы более подробно изучить элементы веб-сайта.
В окне Waterfall будут представлены все элементы вашего сайта. В то время как остальные файлы выглядят нормально, вы замечаете, что POST admin-ajax.php загружается дольше.
Нажмите на POST admin-ajax.php , и вы увидите четыре доступные вкладки: Заголовки , Параметры , Сообщение и Ответ . При диагностике такого рода проблем следует обратить внимание на вкладки Post и Response .
Для этого сайта мы видим подсказку на вкладке Сообщение , поскольку этот запрос имеет какое-то отношение к « count_hit » скрипт.
Эта подсказка заставляет нас подозревать определенный плагин счетчика посещений, который мы установили ранее. Итак, чтобы доказать эту теорию, мы отключаем этот плагин и запускаем второй тест с GTmetrix для нашего сайта.
Оказывается, наше подозрение верно. Отключив этот плагин, нам удалось снизить загрузку нашей страницы на 2 секунды.
Метод B
Вы также можете использовать консоль разработчика Chrome, чтобы найти подозрительный плагин.
Откройте свой сайт. Щелкните правой кнопкой мыши на странице -> Проверить . Кроме того, на вкладке Chrome перейдите к View -> Developer -> Developer Tools .
Нажмите на вкладку Сеть и перезагрузите свой сайт.
В поле фильтра (прямо под красной точкой) введите admin-ajax.php . Вы увидите виновника указанной проблемы. После этого вы можете отключить плагин и проверить, существует ли проблема.
Как владелец веб-сайта, если вам действительно нужно использовать этот плагин, обязательно используйте самую последнюю версию. Если вы сделали это и проблема не устранена, обратитесь к разработчику плагина, упомянув об этом случае.
Если разработчик еще не может решить проблему, вы всегда можете заменить ее на новую. Прелесть WordPress в том, что есть много похожих плагинов на выбор. Просто зайдите в каталог плагинов WordPress и выберите наиболее часто используемый и обновленный плагин, который предлагает ту же функциональность.
Ускорение серверной части вашего сайта WordPress
Иногда WordPress Heartbeat API, запущенный в серверной части вашего сайта, также может вызывать проблемы с производительностью. Как мы отмечали ранее, эта функция помогает автоматически сохранять вашу работу, чтобы избежать потери проектов в случае непредвиденных обстоятельств и правильно управлять одновременным написанием/редактированием.
Например, функция будет срабатывать каждый раз, когда вы пишете сообщение и оставляете вкладку открытой. Это может вызвать высокую загрузку ЦП, как вы видите по количеству обратных вызовов в консоли разработчика ниже.
Использование ЦП является важной проблемой для тех, кто использует план общего хостинга. Некоторые хостинг-провайдеры, вероятно, не потерпят высокой загрузки ЦП, и это может в конечном итоге привести к приостановке, хотя это не относится к Hostinger, особенно к нашим планам WordPress.
Чтобы решить эту проблему, вы можете сделать две вещи: отключить API сердцебиения или увеличить интервалы между проверками. Поскольку первый вариант нецелесообразен, мы рекомендуем вместо него использовать второй.
Заключение
Вы узнали об API Heartbeat и его побочном продукте, admin-ajax. php . Вы также узнали о проблемах, возникающих, когда плагины переполняют функцию и вызывают замедление. Вы также знаете, что сам API-интерфейс Heartbeat может создать проблемы с вашим хостом, если вы не будете управлять им должным образом.
Не забывайте всегда проверять с помощью GTmetrix, когда вы чувствуете замедление работы вашего веб-сайта. Перейдите на вкладку водопада, перейдите к POST admin-ajax.php и посмотреть, как у вас дела. Не отключайте сразу все плагины, так как иногда они могут быть не виноваты. Но если они это сделают, либо замените их, либо ограничьте использование API сердцебиения.
Есть ли у вас подобный опыт работы с admin-ajax.php ? Оставьте комментарий в разделе комментариев ниже, чтобы мир тоже мог извлечь уроки из вашей истории!
Узнайте о других советах и методах WordPress
Ускорьте свой веб-сайт WordPress
Как объединить внешний JavaScript
Как удалить строки запроса из статических ресурсов
Как отложить синтаксический анализ JavaScript
Как устранить блокировку рендеринга JavaScript и CSS
Лукман — самопровозглашенный социолог.