آژاکس، یا آسنکرون جاوا اسکریپت و XML، برای برقراری ارتباط با اسکریپت های سمت سرور استفاده می شود و به شما امکان می دهد بدون نیاز به بارگیری مجدد صفحه ، محتوای پویا را بارگیری کنید.

به عنوان مثال، فرض کنید که شما در حال ساختن یک وب سایت برای یک موسسه خیریه محلی و می خواهید روحیه مثبت را تشویق کنید. می توانید یک دکمه با عنوان " اضافه کنیدمقداری عشق نشان دهید! »با یک پیشخوان در صفحه اصلی و به لطف AJAX ، هر بار که دکمه فعال می شود (کلیک شده توسط a بازدید کننده) ، شمارنده بدون بارگذاری مجدد صفحه افزایش می یابد.

این مثالی است که در این آموزش ایجاد خواهیم کرد.

در این آموزش اطلاعات بیشتری راجع به AJAX ، چگونگی استفاده از آن و نحوه ایجاد ویژگی های عالی با آن در وردپرس کسب خواهید کرد.

بیایید شروع.

مبانی AJAX

• خوراک AJAX معمولاً مراحل زیر را دنبال می کند:
• به دلیل اقدام کاربر ، تماس AJAX را شروع کنید
• دریافت و پردازش درخواست بر روی سرور
• پاسخ را ضبط کرده و کلیه اقدامات لازم را از طریق JavaScript انجام دهید
• تنظیم یک محیط تم جدید

بیایید این را در وردپرس عملی کنیم. اولین مثال ما هنگامی که روی عنوان کلیک می کنیم یک پنجره ساده حاوی تعداد نظرات یک مقاله را نشان می دهد. ما از یک موضوع کودک بر اساس "استفاده خواهیم کرد بیست شانزده از وردپرس.

در اینجا چیزی است که شما باید انجام دهید:

در نصب وردپرس خود یک پوشه جدید در فهرست مضامین ایجاد کنید " وپ محتوای "و نام آن را" ajax-test "بگذارید ، دو پرونده ایجاد کنید مورد نیاز توسط وردپرسیعنی " functions.php "،" Styles.css "و پرونده جدیدی به نام" script.js "اضافه کنید. کد زیر را به عنوان صفحه سبک CSS خود اضافه کنید (ببندید).

/ * نام موضوع: آژاکس تست Theme موضوع URI: http://premium.wpmudev.com توضیحات: تم برای تست ما دانش AJAX نویسنده: دانیل Pataki نویسنده URI: http://danielpataki.com الگو: نسخه twentysixteen: 1.0.0 مجوز : GNU مجوز عمومی عمومی v2 یا بالاتر مجوز URI: http://www.gnu.org/licenses/gpl-2.0.html * /

صفحه سبک موضوع والدین باید توسط طرح زمینه کودک بارگذاری شود. در گذشته ، این کار با وارد کردن فایل CSS به درون زمینه کودک انجام می شد ، اما روش پیشنهادی برای استفاده از "enqueueing" است. به یاد داشته باشید ، ما به شما نشان دادیم که چگونه از این ویژگی استفاده کنید.

اجازه دهید اضافه کردن پدر و مادر شیوه نامه و فایل جاوا اسکریپت ما به طور مستقیم:

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، آرایه ( 'جی کوئری')، 1.0.0، درست است)؛ }

اگر احساس می کنید که انرژی لازم برای برداشتن آن را یک گام جلوتر دارید ، یک تصویر خوب پیدا کنید ، آن را به 880 پیکسل در 660 پیکسل برش دهید و در پوشه تم کودک قرار دهید ، سپس نام آن را تغییر دهید 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_autor_meta ('user_email')، $ author_avatar_size)، _x ("نویسنده" ، "قبل از نام نویسنده پست استفاده می شود." ، "twentysixteen") ، esc_url (get_author_posts_url (get_the_author_meta ('ID')))) ، get_the_autor ())؛ } if (در_آرایه (get_post_type () ، آرایه ('post' ، 'ضمیمه')))) {twentysixteen_entry_date ()؛ } $ format = get_post_format ()؛ if (current_theme_supports ('post-formats'، $ 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' ، درست است)؛ $ love = (خالی ($ love))؟ 0: $ love؛ پژواک " عشق $. ' '؛

توضیح این همه کد:

خط اول تعداد عشقهایی را که مقاله دریافت کرده است بازیابی می کند. در بعضی موارد ، این داده ها وجود نخواهد داشت ، به عبارت دیگر وقتی دکمه هنوز کلیک نشده است. به همین دلیل ، ما استفاده می کنیم

خط دوم در کد برای تنظیم مقدار در صورت خالی بودن مقدار 0 است.

خط سوم دکمه را ارائه می دهد که شامل یک دهانه حاوی یک تصویر و تعداد عشق است. منبع تصویر را خالی گذاشتم زیرا می خواهم از SVG در آنجا استفاده کنم. برای ایجاد یک خط تصویر می توانید از یک SVG رمزگذاری شده base64 استفاده کنید. این شما را از ایجاد خواسته‌ها نجات می‌دهد و شما را برآورده می‌کند سایت اینترنتی کارآمدتر.

من از این تصویر رایگان رایگان موجود استفاده کردم این لینک. کدی که دریافت می کنید را در منبع تصویر کپی و جایگذاری کنید:

$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 برای یک ظاهر طراحی شده دکمه استفاده کردم تا جلوه شناور به آن بدهد. دکمه بودن خیلی واضح نیست ، اما برای تست ساده ما بسیار مناسب است.

.love-button img {margin-right: 6px؛ کدورت: 0.7؛ مکان نما: نقطه؛ } .love-button img: hover {opacity: 1؛ }

راه اندازی یک عمل

سرانجام ، ما به JavaScript می رسیم! ما باید مورد خود را هدف قرار داده و یک کلیک روی آن را تشخیص دهیم. در اینجا نحوه انجام این کار آورده شده است:

(تابع ($) {$ (سند) .on ('کلیک' ، '.love-button img' ، تابع () {هشدار ("عشق به اشتراک گذاشته شده است") ؛})}) (jQuery)؛

اگر در این مرحله روی دکمه کلیک کنید ، باید یک هشدار JavaScript با متن "عشق به اشتراک گذاشته می شود" را ببینید. "

الزامات داده

به جای این متن ، باید یک تماس AJAX را شروع کنیم. قبل از نوشتن کد خود ، خواهیم فهمید که چه چیزی را باید ارسال کنیم.

URL AJAX

اول از همه ، ما به مکانی برای ارسال داده نیاز داریم. مکانی که ما داده ها را ارسال می کنیم داده ها را پردازش می کند و به تماس پاسخ می دهد. وردپرس یک مکان داخلی برای مدیریت تماس های AJAX دارد که می توانیم از آن استفاده کنیم: مدیر ajax.php " داخل " wp-admin " ما نمی توانیم این URL را به اسکریپت خود اضافه کنیم (استفاده از کدگذاری "خام" قابل قبول نیست)، بنابراین ما از برخی از وردپرس حیله گر استفاده خواهیم کرد.

عملکرد wp_localize_script () در ابتدا برای ترجمه رشته ها در پرونده های جاوا اسکریپت در نظر گرفته شده بود ، که به خوبی انجام می شود. همچنین می توانیم از آن برای انتقال متغیرها به پرونده های JavaScript خود ، در این مورد URL فایل AJAX ، استفاده کنیم. کد زیر را به پرونده ما اضافه کنید " توابع به شرح زیر:

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

نتیجه این شیء آخر ajaxTest نامگذاری می شود ، که در آخرین پارامتر به عنوان خواص ، یک آرایه داده شده را خواهد داشت. برای وارد کردن مقداری که می توانیم استفاده کنیم ajaxTest.ajax_url در کد جاوا اسکریپت ما.

شناسه مقاله

ما به عنوان شناسه مقاله ، داده های دلخواه را ارسال خواهیم کرد (که ما برای شناسایی مقاله ای که می خواهیم روی آن "کمی عشق اضافه کنیم" استفاده خواهیم کرد) این را می توان از DOM بازیابی کرد. نگاهی به ساختار استفاده شده در موضوع "بیست شانزده" در زیر بیاندازید:

دکمه ما به عنوان یکی از اجداد خود "مقاله" دارد. این عنصر دارای کلاس است و شامل شناسه عددی مقاله است. اگرچه این زیبا ترین راه حل نیست ، ما می توانیم شناسه را از آنجا بگیریم.

$ (سند) .در ( 'کلیک کنید'، 'IMG .love دکمه، تابع () {ور = parseInt POST_ID ($ (این) .پدر و مادر (' article.post:first '). ATTR (' id 'را) .replace ( 'ارسال'، ''))؛ console.log (شناسه)})

عمل

وردپرس همچنین نیاز دارد که پارامتری به نام action ارسال کنیم. از آنجا که همه اقدامات به admin-ajax ارسال می شوند ، ما به یک روش برای تمایز این درخواست ها نیاز داریم ، بنابراین استفاده از این پارامتر.

ارسال درخواست AJAX

اکنون می توانیم همه چیز را کنار هم قرار دهیم. ما باید یک تماس AJAX ایجاد کنیم " فایل wp-admin / مدیر-ajax.php که شامل شناسه مقاله و یک اقدام است. این باید چگونه به نظر برسد.

(تابع ($) {$ (سند) .در ( 'کلیک کنید'، 'IMG .love دکمه، تابع () {ور = parseInt POST_ID ($ (این) .پدر و مادر (' article.post:first '). . ATTR ( 'id' را) جایگزین ( 'ارسال'، ''))؛ .ajax $ ({URL: نوع ajaxTest.ajax_url 'POST'، داده: {عمل: add_love، POST_ID: POST_ID} ، موفقیت: عملکرد (پاسخ) {هشدار ('موفقیت، شمارش جدید' + پاسخ)}})}))) (جی کوئری)؛

$ .ajax () تابعی است که از پارامترهای مختلف استفاده می کند. آدرس اینترنتی شامل هدفی است که در حال حاضر پرونده ماست آژاکس-url.php ". نوع تنظیم شده است " پست » مانند تمام درخواست های ارسال شده توسط a فرم. پارامتر داده یک شی است که حاوی " کلید-مقدار که می خواهیم به سرور ارسال کنیم. بعداً می توانیم آنها را با $ _POST ['action'] و $ _POST ['post_id'] بخوانیم.

پردازش درخواست

به طور معمول باید فایل را ویرایش کنید " مدیر ajax.php »، از آنجا که درخواست به آنجا ارسال می شود. این یک فایل سیستم است ، بنابراین ما قصد نداریم آن را اصلاح کنیم. وردپرس به شما امکان می دهد تا درخواست های 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 و سپس از عملکرد " مرگ () ". این کار در وردپرس ضروری است ، در غیر اینصورت در پایان هر پاسخ یک 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 $ عشق؛ مرگ ()؛ }

اگر اکنون روی دکمه کلیک کنید ، باید پنجره پاپ آپ را ببینید که "1". اگر صفحه را تازه می کنید ، باید شماره جدید نمایش داده شود. با کلیک دوباره بر روی دکمه ، آن را ایجاد خواهید کرد 2 " تمام کاری که اکنون باید انجام دهیم این است که مطمئن شویم عدد مستقیماً در UI منعکس شده است.

با استفاده از پاسخ در رابط کاربری تغییر ایجاد کنید

این قسمت آسان به نظر می رسد (زیرا اینگونه است) ، اما جمع آوری آن به طور کلی دشوارترین است. در حال حاضر تنها کاری که ما باید انجام دهیم این است که عنصری را که حاوی شماره فعلی است قرار دهیم و محتوای آن را با پاسخ اصلاح کنیم.

(function ($) {$ (document) .on ('click'، '.love-button img'، function () {var post_id = parseInt ($ (this) .parents ('article.post:first'). ('number') $ .ajax ({url: ajaxTest.ajax_url، type: 'post'، data: {action: 'add_love'، post_id: post_id،}، success: function (response) {$ number.text (response)؛}})})}) (jQuery)؛

من فقط دو خط به کد قبلی JS خود اضافه کردم. در خط 5 ، عنصری را که حاوی عدد روی متغیر است ذخیره می کنم تعداد $. در خط 14 ، متن این عنصر را برای نمایش جواب تغییر می دهم ، که عدد جدید است.

این تمام شد ، در واقع شما باید بتوانید این ویژگی جدید را در مورد تم سفارشی خود مشاهده کنید. اگر مشکلی دارید لطفا با ما در میان بگذارید. آیا نکته دیگری دارید که می خواهید به اشتراک بگذارید؟ این کار را در قسمت نظرات انجام دهید.