. Создание плагина wordpress – часть 3 | Makarou.com - когда сайты превращаются в бизнес

Создание плагина wordpress – часть 3

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

Технология AJAX уже существует на протяжении долго времени. Она позволяет общаться с серверным скриптом без перезагрузки страницы, то есть динамически получать данные и также их отправлять.

В сегодняшнем уроке мы опустим большую часть теории и будем рассматривать только практическую часть, которая нужна для работы с серверным скриптом.

Кстати, мне интересно узнать. А Вы когда-нибудь пробовали морской рис? Если нет, то обязательно должны попробовать, так как морской рис обладает очень ценными питательными веществами, которые не только снимают усталость, восстанавливают обмен веществ и улучшают самочувствие, но и помогают сбросить лишний вес, больше на http://www.chudogrib.ru/products/ris.html.

Но, не будем останавливать на морском рисе и перейдет сразу к делу. :)

Создадим в директории плагина новую папку с названием js-ajax. Дальше создаем в этой папке файл с форматом *.JS, я использую для этого редактор php кода, который мы обсуждали в прошлом уроке. Теперь добавляем в файл следующий код:


/*Create object AJAX*/

var XMLHttp;

function loadXMLDoc(){

if (window.XMLHttpRequest){

try{

XMLHttp = new XMLHttpRequest();

}catch(e){

}

}

else if(window.ActiveXObject){

try{

XMLHttp = new ActiveXObject('Msxml2.XMLHTTP');

}catch(e){

try{

XMLHttp = new ActiveXObject('Microsoft.XMLHTTP');

}catch(e){

}

}

}

}

/*Loading object AJAX*/

loadXMLDoc();

function position_xml(passphrase,host,se){

var httpParams = "p=" + encodeURIComponent(passphrase) + "&h=" + encodeURIComponent(host) + "&s=" + encodeURIComponent(se);

XMLHttp.caching = false;

XMLHttp.open('POST','http://'+document.domain+'/wp-content/plugins/test-plugin/search.php',true);

XMLHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;');

XMLHttp.setRequestHeader('Content-length', httpParams.length);XMLHttp.send(httpParams);

XMLHttp.onreadystatechange = function(){

if(XMLHttp.readyState==1){

document.getElementById("debug").style.display = "";

document.getElementById("debug").innerHTML = "Loading...";

}

if(XMLHttp.readyState==4){

if(XMLHttp.status == 200){

document.getElementById("debug").style.display = "";

document.getElementById("debug").innerHTML=XMLHttp.responseText;

return false;

}else{

document.getElementById("debug").style.display = "";

document.getElementById("debug").innerHTML = XMLHttp.statusText;

}

}

}

}

Правим путь  (название папки плагина вместо: test-plugin) вот в этом месте:


XMLHttp.open('POST','http://'+document.domain+'/wp-content/plugins/test-plugin/search.php',true);

Сохраняем файл с названием functions.

Теперь немного рассмотрим функции этого кода, который мы только что добавили в файл.

var XMLHttp; — устанавливает переменную, которая будет содержать объект XMLHttpRequest или ActiveXObject (в зависимости от Браузера).

loadXMLDoc() – функция, которая устанавливает объект XMLHttpRequest или ActiveXObject.

position_xml(passphrase,host,se) – наша пользовательская функция, которая осуществляет общение с серверным скриптом. Функция принимает всего 3 значения, какие? Мы узнаем чуть позже. :)

Теперь мы открываем наш главный файл плагина, и в функции tp_manage_menu — которая отвечает за интерфейс, пишем код:

function tp_manage_menu(){
?>
<script type="text/javascript" src="<?bloginfo('url');?>/wp-content/plugins/makarou.com-tp/js-ajax/functions.js"></script>
<style type="text/css">
table.header{
border-collapse : separate;
border-spacing : 7px 2px;
margin : 33px 0px 0px 0px;
width : 770px;
background : #f5f5f5;
border-style : solid;
border-width : 1.5px;
border-color : silver;
}
td.header1{
border-bottom: 1px solid #C6C6C6;
padding: 2px 2px 3px 2px;</div>
}
td.header2{
padding: 2px 2px 3px 2px;
}
span.i{
font-size : 12px;
color : #d44747;
text-decoration : none;
font-weight : bold;
}
#debug{
margin : 0px 0px 0px 190px;
margin-top: 5px;
text-align : center;
color : #555555;
font-size : 8pt;
width : 400px;
padding: 2px;
background : #f5f5f5;
border: 1px solid silver;
}
.pluginmenu li {
list-style-type: square;
margin-left: 20px;
padding-left: 5px;
}
</style>
<BR>
<font style='color:#666666;font-size:16pt;'><?_e('Check-up your position in the search engines', 'makarou.com-tp');?></font>
<form method='POST' accept-charset='utf-8' onsubmit="return false">
<table class='header'>
<tr>
<td class='header1'><?_e('Enter passphrase:', 'makarou.com-tp');?>&nbsp;<span class='i'>|</span><input name="passphrase" type="text" value="" style='width:300px;'>&nbsp;<?_e('Example:&nbsp;a cup of tea', 'makarou.com-tp');?></td>
</tr>
<tr>
<td class='header1'><?_e('Enter the URL of your site:', 'makarou.com-tp');?>&nbsp;<span class='i'>|</span><input name="host" type="text" value="<?bloginfo('url');?>" style='width:241px;'>&nbsp;<?_e('Example:&nbsp;http://example.com', 'makarou.com-tp');?></td>
</tr>
<tr>
<td class='header1'><?_e('Select a search engine:', 'makarou.com-tp');?>&nbsp;<span class='i'>|</span><select size="1" name="se"><option value="1">Yandex</option></select></td>
</tr>
<tr>
<td class='header2'><input type="button" value="<?_e('Check-up', 'makarou.com-tp');?>" href="javascript:void(0);" onclick="return position_xml(this.form.passphrase.value,this.form.host.value,this.form.se.value)"></td>
</tr>
</table>
</form>
<div id='debug' style='display:none'></div>
<H3><?_e('For Yandex:', 'makarou.com-tp');?></h3>
<ul>
<li><?_e('Register the IP of your site in', 'makarou.com-tp');?>&nbsp;<a href="http://xml.yandex.ru/ip.xml" target=_blank>Yandex.xml</a></li>
<li><?_e('Maximum checked position - 300.', 'makarou.com-tp');?></li>
<li><?_e('The limit of check - 1000 times in day.', 'makarou.com-tp');?></li>
</ul>
<?
}
?>

Как вы уже знаете, это локализация. :)

После формы идет DIV, в который и будет помещаться информация, полученная от серверного скрипта. Данные из формы мы отправляем событием Onclick.


onclick="return position_xml(this.form.passphrase.value,this.form.host.value,this.form.se.value)"

Мы передает всего 3 параметра. Первый параметр – это ключевая фраза, второй параметр – это URL нашего сайта и третий параметр – это поисковая система (Яндекс, Гугл, и т.д.). Серверный скрипт написан только для Яндекса, но вы всегда можете расширить его функционал для любых поисковиков.

На этой ноте, мы заканчиваем 3-ю часть урока. :)

Если у Вас есть вопросы, спрашивайте, с радостью на них отвечу. ;)

Вот мой главный файл плагина, по нему вы можете проверить структуру своего файла.

WordPress

Понравился пост? добавь его к себе в закладки:
Хочешь быть всегда в курсе обновлений блога? подписывайся через:
фото проституток новосибирска