Ajax в WordPress. Получение строковых данных

Использование Ajax в WordPress  полезно, если вы не хотите, чтобы поисковые роботы (или парсер) имели доступ к какой-нибудь информации, например email (защити email от спама 🙂 ). Ajax позволяет получать такую информацию по запросу (например клик по ссылке), или после загрузки страницы, кому как удобнее. В данном примере мы будем получать телефон и email после клика по ссылке. И стилизуем наше действие прелоадером (чтобы пользователь понимал, что мы что-то делаем, после его клика).

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

wp_localize_script('script', 'myajax',
    array(
        'url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('myajax-nonce'),
        )
);

Традиционно начнем с html-разметки:

<a href="get_phone" id="get_phone" class="get_data">Телефон</a><span class="preloader get_phone">&nbsp;</span>
<a href="get_email" id="get_email" class="get_data">Email</a><span class="preloader get_email">&nbsp;</span>

Одинаковые значения в атрибутах ссылки нам будут нужны потом, когда мы будем обрабатывать запрос с помощью JavaScript. Так же обратите внимание, что мы дублируем значение в класс элемента span — это нужно будет нам для того, чтобы указать к какому span’у добавлять класс, который будет показывать нам прелоадер. Если этого не сделать, изображение будет добавлено ко всем прелоадерам которые есть на странице.

CSS для прелоадера:

.preloader {
  position: relative;
  display: inline-block;
}

.preloader_img {
  content: '';
  z-index: 99999;
  width: 24px;
  height: 24px;
  overflow: visible;
  background: transparent url('//cdnjs.cloudflare.com/ajax/libs/file-uploader/3.7.0/processing.gif') no-repeat center center;
}

.color-info {
  color: rgba(255, 0, 0, 0.6);
  font-weight: bold;
}

Класс .preloader_img — мы будем добавлять к ссылке после того, как вставим в нее полученные данные. .color-info — c помощью этого класса выделим данные цветом, после получения.

JavaScript код:

function getAjaxData() {
  jQuery(document).ready(function($) {

    var get_data = $(".get_data"); // добавим в переменную все ссылки на странице, которые нужно обработать

    get_data.click(function(event) { //по клику выполняем функцию

    event.preventDefault(); //отменим стандартное поведение

    var string_data = $(this).attr("href"); // возьмем ссылку которую нужно обработать
    var class_preloader = '.preloader.' + $(this).attr("href"); //класс прелоадера, к которому добавим изображение загрузки
    var id_link = "#" + $(this).attr("href"); // id ссылки в которую запишем данные, которые получим
    var data = { // переменная с данными для отправки запроса на сервер
            action: 'get_data',
            nonce: myajax.nonce,
            string: string_data
        };

    $(class_preloader).addClass('preloader_img'); // добавляем изображение загрузки перед началом отправки данных, то есть сразу после клика на ссылку

    jQuery.post( myajax.url, data, function(response) { // отправляем запрос
        $(class_preloader).removeClass('preloader_img'); // после получения данных удаляем изображение загрузки
        $(id_link).text(response).addClass('color-info'); // перезаписываем текст в ссылке и добавляем к ней класс со своим цветом, чтобы выделить данные
        });
    });
  });
}

getAjaxData(); //запуск функции

Этот код позволит нам обрабатывать несколько ссылок на странице, только меняя их id и href, также не забывайте дублировать id в span класс с прелоадером.

Функция, которая будет обрабатывать данные на сервере:

add_action('wp_ajax_get_data', 'get_data_callback'); // вешаем нужные действия
add_action('wp_ajax_nopriv_get_data', 'get_data_callback');
function get_data_callback() {
    $nonce = $_POST['nonce'];

    // проверяем nonce код, если проверка не пройдена прерываем обработку
    if ( !wp_verify_nonce( $nonce, 'myajax-nonce' ) ) {
        die ( __( 'Stop!', 'ardeyarus' ) );
    }

    switch ( $_POST['string'] ) { //обрабатываем параметр string - это те id и href, которые мы записывали в ссылку
        case 'get_phone' :
            echo esc_html( 'Позвоните нам: +7 978 910-58-51' );
            break;
        case 'get_email' :
            echo esc_html( 'manager@ardeya.ru' );
            break;
    }
    wp_die();
}

Этот код позволит обрабатывать неограниченное количество ссылок на странице, за которыми мы хотим спрятать какие-либо данные. Просто добавляем новые ссылки с уникальными идентификаторами и href-атрибутами, класс «get_data» нужно указывать в каждой ссылке. Пример работы скрипта можно посмотреть в выплывающем сбоку меню на этом сайте, или на главной странице сайта. При написании этих функций мне очень помогла эта статья на сайте wp-kama.ru, в ней подробно описана работа Ajax. Также очень полезна была документация jquery, конкретно по функции .post