Вставка ajax формы в любой пост (запись)

15 Дек 2009

Задался вопросом – можно ли в пост (запись) в WordPress (WP) прикрутить ajax плагин? Вот что получилось.

Цель: создать в посту форму, которая бы без перезагрузки страницы отображала ТИЦ заданного сайта.

Пример:

Введите адрес сайта:

Реализация:
Первым делом подключим библиотеку JQuery. Она предоставляет API функции для работы по технологии AJAX. Проще говоря позволит взаимодействовать со скриптом на сервере без перезагрузки страницы. Есть два способа ее установки, о которых я прочитал в статье jQuery в Wordpress. Первый – использовать библиотеку идущую в комплекте с самим WP, второй – использовать “Google Code”. Второй способ хорош тем что подгружать ее мы будем c гугла, при этом WP будет добавлять в заголовки генерируемых страниц:

1

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>

Браузер посетителя, впервые встретив такой код, сохранит у себя в кэше библиотеку и в дальнейшем для вашего блога и для других сайтов, где используется данный метод подгрузки, будет брать кэшированную копию. В папке \wp\wp-content\Название_Вашей_темы\ находим файл functions.php и в самый конец добавляем:

1
2
3
4
5

if( !is_admin()){
   wp_deregister_script('jquery');
   wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"), false, '1.3.2');
   wp_enqueue_script('jquery');
   }

Далее оформим php скрипт в виде плагина, для этого в папке \wp-content\plugins\ создадим папку wp-tcy, а в ней файл tcy.php (в кодировке UTF-8) со следующим содержимым:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<?php
/*
Plugin Name: Get tCY
Description: Отображает тИЦ заданного сайта
Version: 1.0
Author: Diz
*/
 
//Функция взята отсюда http://www.tigir.com/php.htm
function getTCY($url)
{
  //считываем XML-файл с данными
  $xml = file_get_contents('http://bar-navig.yandex.ru/u?ver=2&#038;show=32&#038;url='.$url);
 
  //если XML файл прочитан, то возвращаем значение параметра value, иначе возвращаем false - ошибка
  return $xml ? (int) substr(strstr($xml, 'value="'), 7) : false;
}
 
if ($_POST["get_tcy_flag"])
{
if (strtolower(substr($_POST["url"],0,7)) != "http://" )
	{$_POST["url"]="http://".$_POST["url"]; }
$tcy=getTCY($_POST["url"]);
if (!$tcy)
	{ echo("Не возможно определить ТИЦ");}
else
	{ echo("тИЦ ".$_POST["url"]." равен ".$tcy); }
}
 
?>

Третьим пунктом делаем следующее: открываем пост на редактирование, в который хотим добавить форму, идем в закладку HTML и размещаем в нужном нам месте следующий код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<script type="text/javascript">
// <![CDATA[
function FormClick ()  
{
var str = $("#get_tcy_form").serialize(); 
$.post("http://diz-blog.com.ua/wp-content/plugins/wp-tcy/tcy.php", str, function(data)  {    $("#display_tcy_div").html(data);  });  
}
// ]]>
</script>
<form id="get_tcy_form"> Введите адрес сайта:
<input name="url" type="text" />
<input name="get_tcy_flag" type="hidden" value="1" />
<input onclick="FormClick(); return false" type="button" value="тИЦ" />
</form>
<div id="display_tcy_div"></div>

Изменяем 6-ю строку, указав свой путь к скрипту и все. Теперь пару слов касательно реализации. В документации WP в главе по созданию плагинов говорится, что для взаимодействия их с ядром используются т.н. hook’и (filters и actions) и Template Tags. Признаюсь, так и не разобрался – можно ли вызвать обработчик (tcy.php) и получить результат используя встроенные механизмы.

Комментарии:

  1. Владимир

    статейка полезной оказалась.
    только вместо конструкции в элементе INPUT – onclick=”FormClick(); return false”, лучше использовать onsubmit=”FormClick(); return false” в элементе FORM

    1 Июнь 2011 в 8:17 пп