Как использовать AJAX в WordPress

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

В то время как есть много способов использовать AJAX в WordPress — и все “правильные”, в широком смысле этого слова — есть один метод, который вы должны следовать по нескольким причинам: WordPress поддерживает его, это будущее-доказательства, это очень логично, и это дает вам множество вариантов прямо из box.

Что такое AJAX

Если вы не знакомы с AJAX, я предлагаю продолжается до конца эту статью и then читать Википедии статью о AJAX, а затем некоторые tutorials.Это редкий случай, когда я рекомендую прочитать как мало о нем, как возможно, прежде чем пытаться его, потому что он путал черт из меня сначала, и по правде говоря, вы будете редко взаимодействуют с AJAX в “сыром” состоянии — вы, как правило, использовать помощников, таких как jQuery.

В двух словах, AJAX представляет собой сочетание HTML, CSS и JavaScript кода, который позволяет отправлять данные в сценарий, а затем получать и обрабатывать ответ сценария без необходимости перезагрузки page.

Если вы создаете страницу на вашем сайте, где пользователи могут изменять свой профиль, вы могли бы использовать AJAX для обновления профиля пользователя без необходимости постоянно перезагрузите страницу всякий раз, когда они представляют формы.Когда пользователь нажимает кнопку, данные, которые они вступили в виде передается через AJAX на обработку сценария, который сохраняет данные и возвращает строку “Данные сохранены”. Затем можно вывести, что данные пользователя, вставив его наpage.

Вещь, чтобы понять о том, как AJAX not различные это от того, что вы уже делаете.Если у вас есть контактная форма, есть вероятность, что форма размечена с HTML, некоторые стили применяются к нему, и скрипт PHP обрабатывает информацию.Единственная разница между этим и AJAX является how информации, которую пользователь вводит попадает в сценарий и вернуться к пользователю — все остальное same.

Чтобы в полной мере использовать потенциал AJAX и получить максимальную отдачу от этой статьи, вы должны быть знакомы с JavaScript (JQuery будет достаточно), а также HTML, CSS и PHP.Если ваш наличие знаний немного сомнительный, не волнуйтесь, вы все еще будете иметь возможность следить за логикой.Если вам нужны руки, простооставить комментарий, и я постараюсь помочь out.

Как не использовать AJAX

Один из методов, который был вокруг, и которые я использовал сам вернулся в старые недобрые времена, это просто загрузить WP-load.php Файл в верхней части вашего PHP скрипт.Это позволяет вам использовать WordPress функций, выявления текущего пользователя и так далее.Но это в основном рубить и так не будущее.Это гораздо менее безопасным и не дает вам некоторые интересные варианты, что система WordPress does.

Как работает AJAX в WordPress Natively

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

Каждый запрос AJAX проходит через админ-ajax.php файл в wp-admin папки.То, что это файл с именем админ-ajax может быть немного запутанной.Я совершенно согласен, но это только как процесс развития оказалось.Таким образом, мы должны использовать админ-ajax.php для внутренних и пользователю, AJAX.

Каждый запрос должен поставить по крайней мере один фрагмент данных (с использованием GET или POST метод) называется action.Основываясь на этом действии, код в админ-ajax.php создает два крючка, wp_ajax_my_action и wp_ajax_nopriv_my_action, где my_action является значение GET или POST переменная action.

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

Реализация AJAX в WordPress

Давайте построим рудиментарной системы голосования, как быстрый пример.Во-первых, создайте пустой плагин и активировать его.Если вам нужна помощь с этой стороны, посмотрите на учебник по создание plugin.Кроме того, найти __ 4 вашей темы | single.php файла и открытым it.

Подготовка к Отправить AJAX Call

Давайте создадим ссылку, которая позволяет людям, чтобы дать превью к нашим статьям.Если пользователь JavaScript включен, он будет использовать JavaScript, а если нет, то перейдите по ссылке.Где-то в вашем single.php файла, возможно, возле названия статьи, добавить следующий код:

<?php
   $votes = get_post_meta($post->ID, "votes", true)
   $votes = ($votes == "") ? 0 : $votes;
?>
This post has <div id='vote_counter'><?php echo $votes ?></div> votes<br>

<?php
   $nonce = wp_create_nonce("my_user_vote_nonce");
    $link = admin_url('admin-ajax.php?action=my_user_vote&post_id='.$post->ID.'&nonce='.$nonce);
    echo '<a class="user_vote" data-nonce="' . $nonce . '" data-post_id="' . $post->ID . '" href="' . $link . '">vote for this article</a>';
?>

Во-первых, давайте тянуть стоимость votes Мета ключевые, связанные с этой должности.Этот мета поле, где мы будем хранить общего количества голосов.Давайте также убедиться, что если он не существует (т.е. его значение является пустой строкой), мы показываем 0.

Мы также создали обычную ссылку здесь.Единственный дополнительный бит щепотку безопасности, используя nonces, чтобы убедиться, что нет никаких нечестной игре.В противном случае, это просто ссылка, указывающая на админ-ajax.php файл с действиями и ID поста, что пользователю на указанный в форме запроса string.

Для удовлетворения JavaScript пользователей, мы добавилиuser_vote класс, к которому мы будем уделять щелкните событие, и data-post_id собственность, которая содержит идентификатор поста.Мы будем использовать эти передавать информацию, необходимую для наших JavaScript.

Обработка действий без JavaScript

Если вы нажмите на эту ссылку сейчас, вы должны быть предприняты для админ-ajax.php скрипт, который будет выводить -1.Это потому, что нет функции был создан еще для обработки наших действий.Итак, давайте растрескивание

В ваших плагинов, создать функцию, и добавить его к новым крюком, который был создан для нас.Вот как:

add_action("wp_ajax_my_user_vote", "my_user_vote");
add_action("wp_ajax_nopriv_my_user_vote", "my_must_login");

function my_user_vote() {

   if ( !wp_verify_nonce( $_REQUEST['nonce'], "my_user_vote_nonce")) {
      exit("No naughty business please");
   }   

   $vote_count = get_post_meta($_REQUEST["post_id"], "votes", true);
   $vote_count = ($vote_count == '') ? 0 : $vote_count;
   $new_vote_count = $vote_count + 1;

   $vote = update_post_meta($_REQUEST["post_id"], "votes", $new_vote_count);

   if($vote === false) {
      $result['type'] = "error";
      $result['vote_count'] = $vote_count;
   }
   else {
      $result['type'] = "success";
      $result['vote_count'] = $new_vote_count;
   }

   if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
      $result = json_encode($result);
      echo $result;
   }
   else {
      header("Location: ".$_SERVER["HTTP_REFERER"]);
   }

   die();

}

function my_must_login() {
   echo "You must log in to vote";
   die();
}

Прежде всего, мы проверили данное время, чтобы убедиться, что запрос является хорошим и законным.Если это не так, мы просто остановить выполнен� …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Главная → Wordpress → 18.10.2011 by Newsbot