Сделайте ваш плагин WordPress отзывчивым с помощью AJAX

WordPress — отличная платформа для создания веб-сайтов; однако инструмент управления контентом имеет свои недостатки. Если вы создали свой веб-сайт на WordPress, то нередко сталкиваетесь с проблемой низкой скорости загрузки. Из-за большого количества плагинов, добавленных вместе с притоком баз данных и кодовых баз, это на самом деле не редкость. Однако важно сосредоточиться на решении. Вы не хотите, чтобы ваша аудитория потеряла терпение и ушла из-за низкой скорости и потеряла потенциальный бизнес!

Что, если бы мы сказали вам, что вы можете оптимизировать скорость своего веб-сайта WordPress, интегрировав в свои плагины простую функцию, известную как AJAX. Термин AJAX является сокращением от асинхронного JavaScript и XML. AJAX поможет вам улучшить скорость вашего сайта. Он будет загружать только определенную часть страницы, а остальная страница останется статической, тем самым сократив время загрузки. Несколько плагинов и приложений уже сегодня используют эту функцию, чтобы повысить скорость своих веб-страниц.

Всего за небольшой промежуток времени AJAX завоевал отличную репутацию в мире цифрового маркетинга и используется большинством владельцев веб-сайтов. К счастью, WordPress обеспечивает отличную поддержку AJAX, что упрощает написание подключаемых модулей, интегрированных в AJAX. Благодаря поддержке WordPress и нашей статье вы сможете быстро интегрировать AJAX в свои плагины.

Ниже приведено пошаговое руководство, которое проведет вас через весь процесс.

Шаг №1 – Создайте свой плагин

Первый шаг — создать простой плагин, который затем можно использовать для разработки более продвинутого продукта, который будет более отзывчивым и сократит время загрузки вашей веб-страницы. Хорошей новостью является то, что вам не составит труда создать плагин, потому что все, что вам нужно сделать, это создать файл, содержащий однострочные данные.

Вы можете сделать это, выполнив поиск в файле «wp-content/plugins» и сгенерировав папку с любым удобным вам именем. После того, как вы это сделали, вам нужно открыть папку и создать файл с именем: «name_of_the_plugin.php». Открыв этот файл в текстовом редакторе, введите в текстовом редакторе следующий код.

<?php
/*
Plugin Name: Your choice
Plugin URI: http://yout-choice.com
Description: This loads post via ajax
Author: Your name
Author URI: http://yourname.com
Version: 1
*/

Шаг № 2 — Добавьте библиотеку JavaScript

Вы начинаете этот шаг с создания каталога «ajaxloadpost». Как это сделать? Это довольно просто, так как вы можете установить его вместе с плагином WordPress. После завершения этого шага вы можете создать плагин, который вы закодировали, и запустить его. Затем вам нужно добавить приведенный ниже код в свой ajaxloadpost:

define('AJAXLOADPOSTURL', WP_PLUGIN_URL."/".dirname( plugin_basename( __FILE__ ) ) );
function ajaxloadpost_enqueuescripts() {
wp_enqueue_script('ajaxloadpost', AJAXLOADPOSTURL.'/js/ajaxloadpost.js', array('jquery'));
wp_localize_script( 'ajaxloadpost', 'ajaxloadpostajax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}
add_action('wp_enqueue_scripts', ajaxloadpost_enqueuescripts);

Вы должны указать WordPress через URL-адрес созданного плагина; вот почему вам нужно определить переменную по имени AJAXLOADPOSTURL.

AJAX всегда используется с комбинацией языков программирования, мы будем работать с JavaScript в нашей оставшейся статье. Найдите ajaxloadpost.js в папке \wp-content\plugins\ajaxloadpost\js\ и добавьте к нему JavaScript. Теперь вы можете добавить переменную JavaScript в свой скрипт.

Шаг № 3 — Интеграция обработчика AJAX

Как только все вышеперечисленное будет отсортировано, вы, наконец, можете перейти к интеграции обработчика AJAX в свой плагин. Ниже приведен код вашего обработчика AJAX:

function ajaxloadpost_ajaxhandler() {
if ( !wp_verify_nonce( $_POST['nonce'], "ajaxloadpost_nonce")) {
exit("Wrong nonce");
}

$results = '';
$content_post = get_post($_POST['postid']);
$results = $content_post->post_content;

die($results);
}

Приведенный выше код в основном будет выполнять две задачи. Сначала он разработает идентификатор для сообщений, необходимых пользователю. Вторая задача — создать «одноразовый номер». О втором элементе пока можно не беспокоиться (он подробно описан в конце статьи).

Вместо этого вы должны перейти ко второму шагу, который заключается в регистрации вашего обработчика AJAX в каталоге WordPress. Это позволит вызывать функцию AJAX после запроса. Это действие может быть выполнено с помощью кода, указанного ниже:

add_action( 'wp_ajax_nopriv_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler' );
add_action( 'wp_ajax_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler' );

Наличие базовых знаний о JavaScript является огромным плюсом для вас, если вы не разбираетесь в этом языке программирования, обратитесь за помощью к эксперту, который проведет вас через весь процесс. Вы также можете усовершенствовать свои навыки работы с JavaScript с помощью веб-репетитора или прочитав статьи здесь .

Шаг № 4 — Использование JavaScript для AJAX

Следующее, что вам нужно, это написать функцию, которая позволит AJAX вызывать и обновлять данные, которые были возвращены через обработчик AJAX. Функция обычно ajacloadpost.js. Следующий код можно использовать для определения действия, описанного выше.

function ajaxloadpost_loadpost(postid,nonce) {
jQuery.ajax({
type: 'POST',
url: ajaxloadpostajax.ajaxurl,
data: {
action: 'ajaxloadpost_ajaxhandler',
postid: postid,
nonce: nonce
},
success: function(data, textStatus, XMLHttpRequest) {
var loadpostresult = '#loadpostresult';
jQuery(loadpostresult).html('');
jQuery(loadpostresult).append(data);
},
error: function(MLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
});

Вышеупомянутая функция будет принимать два входа, один из которых — идентификатор сообщения, а второй — одноразовый номер. Вы можете использовать функцию jQuery.ajax для вызова сервера. В случае успеха обновите <div> идентификатора #loadpostresult данными, которые были возвращены обработчиком AJAX. Последний бит кода является условием в случае ошибки. При возникновении ошибки система уведомляется всплывающим окном.

Шаг №5 – Отображение списков

После того, как все функции будут отсортированы, вы можете перейти к последнему шагу, который заключается в отображении заголовка сообщения. Имейте в виду, что каждый щелчок может быть направлен на другой заголовок сообщения, и ваш код должен быть в состоянии получить код, который был вызван. Следующий код может помочь вам в этом:

function ajaxloadpost_show_latest_posts($number = '5'){  

$results ='';
$the_query = new WP_Query( 'posts_per_page='.$number );  

while ( $the_query->have_posts() ) :
$the_query->the_post();
$nonce = wp_create_nonce("ajaxloadpost_nonce");  

$arguments = get_the_ID().",'".$nonce."'";  

$link = ' <a>'. get_the_title().'</a>';  

$result.= '<li>' . $link . '</li>';
endwhile;
wp_reset_postdata();  

$result.= '<div></div>';  

return $result;
}  

function ajaxloadpost_shortcode_function( $atts ){
return ajaxloadpost_show_latest_posts();
}
add_shortcode( 'AJAXLOADPOST', 'ajaxloadpost_shortcode_function' );

Что такое «однократно»?

Одноразовый номер используется для проверки того, исходит ли запрос из подлинного источника или нет. Одноразовый номер можно сгенерировать с помощью простой функции WordPress: «wp_create_nonce». Его можно дополнительно проверить через обработчик AJAX, используя функцию: «wp_verify_nonce». Использование этой функции чрезвычайно важно, если вы выполняете важную задачу на своем WordPress.

  Заключение

  Интеграция AJAX с вашими плагинами может заметно улучшить отзывчивость ваших страниц. Если вам не нравится JavaScript, вы можете выбрать язык программирования, на котором вам легче писать код, или найти эксперта, который поможет вам написать код для вашего плагина. Попробуйте интегрировать AJAX в свои плагины, и вы не будете разочарованы!