Аякс, или Асинхронни Javascript и XML, се използва за комуникация със скриптове от страна на сървъра и ви позволява да зареждате динамично съдържание, без да се налага да презареждате страницата.

Да кажем, например, че изграждате a уеб сайт за местна благотворителна организация и искате да насърчите позитивното настроение. Можете да добавите бутон с етикет "Покажете малко любов! »С брояч на началната страница и благодарение на AJAX всеки път, когато бутонът се активира (щракнато от a посетител), нарастването на брояча без презареждане на страницата.

Това е примерът, който ще изградим в този урок.

В този урок ще научите повече за това какво представлява AJAX, как може да се използва и как да създадете страхотни функции с него в WordPress.

Нека да започнем.

Основите на AJAX

• Захранването на AJAX обикновено следва следните стъпки:
• Инициирайте AJAX повикване поради действие на потребителя
• Получавайте и обработвайте заявката на сървъра
• Заснемете отговора и извършете всички необходими действия чрез JavaScript
• Създаване на нова тематична среда

Нека приложим това на практика в WordPress. Първият ни пример показва просто изскачащо прозорче, съдържащо броя коментари за статия, когато щракнем върху заглавието. Ще използваме дъщерна тема въз основа на " Двадесет Шестнадесет От WordPress.

Ето какво трябва да направите:

Създайте нова папка в директорията Теми в инсталацията си на WordPress в „ WP-съдържание „И го наречете„ ajax-test “, създайте двата файла изисквани от WordPress, а именно " functions.php "," Styles.css "и добавете нов файл, наречен" script.js ". Добавете следния код в заглавката на вашата CSS таблица със стилове (style.css).

/* Име на тема: Ajax Test Theme URI на тема: https://premium.wpmudev.com Описание: Тема за тестване на нашите знания за AJAX Автор: Daniel Pataki Автор URI: https://danielpataki.com Шаблон: twentysixteen Версия: 1.0.0. 2 Лиценз: GNU General Public License v2.0 или по-нова URI на лиценза: https://www.gnu.org/licenses/gpl-XNUMX.html */

Таблицата със стилове на родителската тема трябва да бъде заредена от дъщерната тема. В миналото това беше направено чрез импортиране на CSS файла в дъщерната тема, но препоръчителният начин да направите това е да използвате "поставяне в опашка". Не забравяйте, че ви показахме как да използвате тази функция.

Така че нека директно добавим стила на родителски стилове и нашият JavaScript файл:

add_action ('wp_enqueue_scripts', 'ajax_test_scripts'); функция ajax_test_scripts () {wp_enqueue_style (изходен стил ", get_template_directory_uri ()" /style.css.); wp_enqueue_script (. get_stylesheet_directory_uri "Аякс опити скриптове" () "/scripts.js", масив ( "JQuery"), 1.0.0 ', вярно); }

Ако смятате, че имате енергията да направите още една крачка напред, намерете хубаво изображение, изрежете го на 880px на 660px и го поставете в папката с теми на детето, след което го преименувайте " screenshot.png ". Той ще се появи в раздела за външен вид, когато искате да активирате темата.

Тъй като тази тема на детето се основава на „ Двадесет Шестнадесет И че не сме променили нищо (все още!), Сайтът трябва да изглежда точно като класическа тема с темата " Двадесет Шестнадесет ".

Добавяне на бутон

За начало ще добавим бутона „ Покажете малко любов! ". Страхотно място за показване би било в страничната лента за тематични статии.

След някои изследвания се оказва, че страничната лента е създадена от функция, наречена " twentysixteen_entry_meta () »Който пребивава в директорията« Inc / шаблон tags.php ".

Тази функция е " възможност за свързване Което означава, че можем да го модифицираме, като го дефинираме в собствения ни файл functions.php. Първата стъпка от това е да копирате и поставите цялата функция в собствения ни файл functions.php:

функция twentysixteen_entry_meta () {if ('post' === get_post_type ()) {$ author_avatar_size = apply_filters ('twentysixteen_author_avatar_size', 49); printf (' % 1 $ s % 2 $ s % 3 $ s ', get_avatar (get_the_author_meta ('user_email'), $ author_avatar_size), _x ('Автор', 'Използвано преди името на автора на публикацията.', 'twentysixteen') esc_url (get_author_posts_url (get_the_author_meta ('ID'))), get_the_author ()); } if (in_array (get_post_type (), array ('post', 'attachment'))) {twentysixteen_entry_date (); } $ format = get_post_format (); if (current_theme_supports ('post-formatats', $ format)) {printf (' % 4 $ s % 1 $ s ', sprintf (' % s ', _x ('Format', 'Използвано преди публикуване на формат.', ' twentysixteen ')), esc_url (get_post_format_link ($ format)), get_post_format_string ($ format)); } if ('post' === get_post_type ()) {twentysixteen_entry_taxonomies (); } if (! is_singular () &&! post_password_required () && (comments_open () || get_comments_number ())) {echo ' '; comments_popup_link (sprintf (__ ('Оставете коментар на% s ', 'twentysixteen'), get_the_title ())); ехо “; }}

Нека добавим нашия ключ в дъното на всички метаданни:

$ love = get_post_meta (get_the_ID (), 'show_some_love', true); $ любов = (празно ($ любов))? 0: $ любов; ехо ". $ любов. '';

Нека обясним целия този код:

Първият ред извлича броя на любовта, които статията е получила. В някои случаи тези данни няма да съществуват, с други думи, когато бутонът все още не е щракнат. Поради тази причина използваме

вторият ред в кода да зададе стойността на 0, ако стойността е празна.

Третият ред доставя бутона, който се състои от участък, съдържащ изображение и броя на харесванията. Оставих източника на изображение празен, защото искам да използвам SVG там. Можете да използвате base64 кодиран SVG, за да създадете линия на изображение. Това ви спестява от предявяване на изисквания и ще направи вашите уебсайт по-ефикасно.

Използвах това малко безплатно налично изображение тази връзка. Копирайте и поставете получения код в източника на изображението по следния начин:

$love = get_post_meta( get_the_ID(), 'show_some_love', true );
$love = ( empty( $love ) ) ? 0 : $love;
echo '<span class="love-button"> <img width="28" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI0MHB4IiBpZD0iTGF5ZXJfMSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDAgNDA7IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA0MCA0MCIgd2lkdGg9IjQwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwYXRoIGQ9Ik0xOS45NzkwMDAxLDkuMTk1MzAwMSAgQzI1LjYzOTIwMDItMS44ODY3LDM4LjUxMTY5OTcsMy4zOTU5OTk5LDM3Ljk0OTE5OTcsMTMuMzAyN0MzNy4zNjM4LDIzLjYxNjE5OTUsMjIuODc0NTAwMywyNy4xNzM3OTk1LDE5Ljk3OTAwMDEsMzQuOTgxODk5MyAgQzE3LjA4MzAwMDIsMjYuOTc5MDAwMSwyLjc4OTU5OTksMjMuODExNTAwNSwyLjAwODMwMDEsMTMuMzAyN0MxLjI3MzksMy40MDc3MDAxLDE0LjkzNTk5OTktMS45MzEyLDE5Ljk3OTAwMDEsOS4xOTUzMDAxeiIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6I0ZGNTk0RjsiLz48L3N2Zz4="><span class="number">' . $love . '</span></span>';

Също така използвах малко CSS за стилизиране на бутона, за да му придаде ефект на задържане. Не е много очевидно дали е бутон, но за нашия прост тест е така.

.imove-бутон img {margin-right: 6px; непрозрачност: 0.7; курсор: точка; } .когато натиснете бутона img: задръжте {opacity: 1; }

Задействане на действие

Накрая стигаме до нашия JavaScript! Трябва да се насочим към нашия артикул и да открием щракване върху него. Ето как да го направите:

(функция ($) {$ (документ) .on ('щракване', '.

Ако щракнете върху бутона в този момент, трябва да видите предупреждение за JavaScript с текст „Любовта се споделя“. "

Изисквания за данни

Вместо този текст трябва да задействаме AJAX повикване. Преди да напишем нашия код, ще разберем какво трябва да изпратим.

URL адресът AJAX

На първо място, имаме нужда от място за изпращане на данни. Мястото, на което изпращаме данните, ще обработи данните и ще отговори на обаждането. WordPress има вградено място за обработка на AJAX повиквания, което можем да използваме: админ-ajax.php " вътре " wp-admin ". Не можем да добавим този URL към нашия скрипт (използването на "сурово" кодиране не е приемливо), така че ще използваме някой хитър wordpress.

Функцията wp_localize_script () Първоначално е бил предназначен за превод на низове в JavaScript файлове, което се справя добре. Можем да го използваме и за предаване на променливи към нашите JavaScript файлове, в този случай URL адреса на нашия AJAX файл. Добавете следния код към нашия файл " функции Както следва:

wp_localize_script ('ajax-test-scripts', 'ajaxTest', array ('ajax_url' => admin_url ('admin-ajax.php')));

Резултатът от този последен обект ще бъде наречен ajaxTest, който ще съдържа даден масив в последния параметър като свойства. За да въведете стойността, която можем да използваме ajaxTest.ajax_url в нашия JavaScript код.

Идентификаторът на изделието

Ще изпратим произволни данни като идентификатор на статията (които ще използваме, за да идентифицираме статията, върху която искаме да „добавим малко любов“). Това може да бъде извлечено от DOM. Разгледайте структурата, използвана в темата "Двадесет и шестнадесет" по-долу:

Нашият бутон има „статия“ като един от своите предци. Този елемент има класа и съдържа числовия идентификатор на статията. Въпреки че това не е най-елегантното решение, можем да вземем идентификационния номер от там.

$ (Документ) .От (с щракване "," IMG .love-бутон ", функция () {Var = parseInt POST_ID ($ (това) .parents (" article.post:first "). ATTR (" идентификатор ") .replace ('post-', '')); console.log (id)})

Действието

WordPress също изисква да изпратим параметър с име действие. Тъй като всички действия ще бъдат изпратени до admin-ajax, ние се нуждаем от начин да разграничим тези заявки, следователно използването на този параметър.

Изпращане на заявка AJAX

Вече можем да съберем всичко. Трябва да създадем AJAX обаждане за „ WP-администратор / админ-ajax.php Който съдържа идентификатора на статията и действие. Ето как трябва да изглежда.

(Функция ($) {$ (документ) .От (с щракване "," IMG .love-бутон ", функция () {Var = parseInt POST_ID ($ (това) .parents (" article.post:first "). . ATTR ( "ID") замени ( "отговор", "")); $ .ajax ({URL: тип ajaxTest.ajax_url "отговор", данни: {действие: "add_love" POST_ID: POST_ID} , успех: функция (отговор) {предупреждение ("успех, новият брой е" + отговор)}})})}) (jQuery);

$ .ajax () е използваната функция, която приема куп параметри. URL адресът съдържа целта, която в момента е нашият файл Аякс-url.php ". Типът е зададен на „ пускат » като всички заявки, изпратени от a форма. Параметърът данни е обект, който съдържа " ключ-стойност Това, което искаме да изпратим на сървъра. По-късно ще можем да ги четем с $ _POST ['action'] и $ _POST ['post_id'].

Обработване на искането

Обикновено трябва да редактирате файла " админ-ajax.php », Защото заявката се изпраща там. Това е системен файл, така че няма да го променяме. WordPress ви позволява да предавате заявки AJAX, като използвате квадратни скоби с параметъра за действие. Моделът е както следва:

Ако сте посочили действието си add_love Трябва да прикачите функция към кука с име „ wp_ajax_add_love И / или wp_ajax_nopriv_add_love ". Действията NoPriv ”Работи за излезли потребители, един задейства само за влезли потребители. В нашия случай бихме искали да използваме и двете. Като бърз тест ще зададем стойност по подразбиране за връщане:

Параметърът за успех е функция, която ще се изпълни, когато AJAX повикването приключи. Ще покажем прост сигнал, който показва „Браво! Новият акаунт е ”с отговора ни, добавен в края.

add_action ('wp_ajax_add_love', 'ajax_test_add_love'); add_action ('wp_ajax_nopriv_add_love', 'ajax_test_add_love'); функция ajax_test_add_love () {echo 4; умрат (); }

Прикрепихме функцията си и в двете скоби, едното е готово ехо 4 и след това използва функцията " умрат () ". Това е необходимо за WordPress, в противен случай ще получите 0 в края на всеки отговор. Ако щракнете върху бутона сега, трябва да видите следното:

За да получим действителния брой „харесвания“, всичко, което трябва да направим, е да извлечем текущото число, да го увеличим с едно, да го запазим в базата данни и да покажем новия номер.

функция ajax_test_add_love () {$ love = get_post_meta ($ _POST ['post_id'], 'show_some_love', true); $ love = (празно ($ love))? 0: $ love; $ Любовта ++; update_post_meta ($ _POST ['post_id'], 'show_some_love', $ love); echo $ love; умрат (); }

Ако щракнете върху бутона сега, трябва да видите изскачащия прозорец, показващ "1". Ако опресните страницата, трябва да видите показания нов номер. Щракването отново върху бутона ще го направи 2 ". Всичко, което трябва да направим сега, е да се уверим, че номерът се отразява директно в потребителския интерфейс.

Направете промени в потребителския интерфейс, като използвате отговора

Тази част изглежда лесно (защото е така), но като цяло е най-трудно да се съберат. Засега всичко, което трябва да направим, е да намерим елемента, който съдържа текущия номер, и да модифицираме съдържанието му чрез отговора.

(Функция ($) {$ (документ) .От (с щракване "," IMG .love-бутон ", функция () {Var = parseInt POST_ID ($ (това) .parents (" article.post:first "). . ATTR ( "ID") замени ( "отговор", "")); Var $ брой = $ (това) .parent () намери (. "номер") $ .ajax ({URL ajaxTest.ajax_url,. тип: 'пост', данни: {action: 'add_love', post_id: post_id,}, успех: функция (отговор) {$ number.text (отговор);}}}}}) (jQuery);

Добавих само два реда към предишния ни JS код. На ред 5 съхранявам елемента, който съдържа числото на променливата $ номер, В реда 14 променям текста на този елемент, за да покажа отговора, който е новото число.

Това е, основно трябва да можете да видите тази нова функция в действие по ваша персонализирана тема. Ако имате някакъв проблем, моля, уведомете ни. Имате ли още един съвет, който искате да споделите? Направете го в раздела за коментари.