اياكس، أو غير متزامن جافا سكريبت وإكس إم إليستخدم للتواصل مع البرامج النصية من جانب الخادم ويسمح لك بتحميل محتوى ديناميكي دون الحاجة إلى إعادة تحميل الصفحة.

لنفترض ، على سبيل المثال ، أنك تقوم ببناء ملف موقع انترنت لجمعية خيرية محلية وترغب في تشجيع روح إيجابية. يمكنك إضافة زر يسمى "أظهر بعض الحب! »مع عداد على الصفحة الرئيسية ، وبفضل AJAX ، في كل مرة يتم فيها تنشيط الزر (تم النقر عليه بواسطة أ زائر) ، العداد الزيادات دون إعادة تحميل الصفحة.

هذا هو المثال الذي سنبنيه في هذا البرنامج التعليمي.

في هذا البرنامج التعليمي ، سوف تتعلم المزيد عن ماهية AJAX ، وكيف يمكن استخدامها ، وكيفية إنشاء ميزات رائعة بها على WordPress.

دعونا نبدأ.

أساسيات أجاكس

• تتبع تغذية أجاكس عادةً الخطوات التالية:
• بدء مكالمة AJAX بسبب إجراء المستخدم
• تلقي الطلب على الخادم ومعالجته
• التقاط الاستجابة وتنفيذ جميع الإجراءات اللازمة عبر جافا سكريبت
• إنشاء بيئة موضوع جديدة

دعونا نضع هذا موضع التنفيذ على WordPress. يعرض مثالنا الأول نافذة منبثقة بسيطة تحتوي على عدد التعليقات لمقال عندما نضغط على العنوان. سنستخدم موضوعًا فرعيًا على أساس " عشرون ستة عشر من وورد.

وهنا ما عليك القيام به:

قم بإنشاء مجلد جديد في دليل السمات في تثبيت WordPress الخاص بك في " الفسفور الابيض بين المحتوى "وقم بتسميته" اختبار أجاكس "، قم بإنشاء الملفين مطلوب من ووردوهو " functions.php "،" Styles.css "وأضف ملفًا جديدًا يسمى" script.js ". أضف الكود التالي إلى عنوان ورقة أنماط CSS (style.css).

/ * موضوع الاسم: اياكس اختبار الإستايل URI: http://premium.wpmudev.com الوصف: وهناك موضوع لاختبار معرفتنا AJAX الكاتب: دانيال باتاكي الكاتب URI: http://danielpataki.com قالب: النسخة twentysixteen: 1.0.0 الترخيص رخصة جنو العمومية العامة أو في وقت لاحق رخصة v2 URI: http://www.gnu.org/licenses/gpl-2.0.html * /

يجب تحميل ورقة أنماط النسق الأصلي بواسطة السمة الفرعية. في الماضي ، كان يتم ذلك عن طريق استيراد ملف CSS إلى القالب الفرعي ، ولكن الطريقة الموصى بها للقيام بذلك هي استخدام "قائمة الانتظار". تذكر ، لقد أوضحنا لك كيفية استخدام هذه الميزة.

لذلك دعونا إضافة ورقة نمط الأصل وملف جافاسكريبت مباشرة:

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 ". سيظهر في قسم المظهر ، عندما تريد تنشيط السمة.

نظرًا لأن هذا الموضوع الفرعي يعتمد على " عشرون ستة عشر وأننا لم نغير أي شيء (حتى الآن!) ، يجب أن يبدو الموقع تمامًا وكأنه سمة كلاسيكية ذات سمة " عشرون ستة عشر ".

إضافة زر

للبدء ، سنضيف الزر " عرض unpeu الحب! ". سيكون مكانًا رائعًا لعرضه على الشريط الجانبي للمقالات ذات الموضوعات.

بعد إجراء بعض الأبحاث ، اتضح أن الشريط الجانبي يتم إنشاؤه بواسطة دالة تسمى " twentysixteen_entry_meta () »الذي يقيم في الدليل« المؤتمر الوطني العراقي / قالب tags.php ".

هذه الوظيفة هي " للربط مما يعني أنه يمكننا تعديله من خلال تعريفه في ملف function.php الخاص بنا. الخطوة الأولى في ذلك هي نسخ ولصق الوظيفة بأكملها في ملف function.php الخاص بنا:

function twentysixteen_entry_meta () {if ('post' === get_post_type ()) {$ author_avatar_size = application_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 ()؛ } تنسيق $ = get_post_format () ؛ if (current_theme_supports ('post-format'، $ format)) {printf (' ٪ 4 $ s ٪ 1 $ s '، sprintf (' ٪ s '، _x ('Format'، 'Used before post format.'، ' twentysixteen ')) ، esc_url (get_post_format_link (تنسيق $)) ، get_post_format_string (تنسيق $)) ؛ } if ('post' === get_post_type ()) {twentysixteen_entry_taxonomies () ؛ } إذا (! 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'، صحيح) ؛ $ الحب = (فارغ ($ الحب))؟ 0: $ الحب؛ صدى صوت ' ". $ الحب. " ؛

شرح كل هذا الرمز:

يسترجع السطر الأول عدد مرات الإعجاب التي تلقتها المقالة. في بعض الحالات ، لن تكون هذه البيانات موجودة ، بمعنى آخر عندما لا يكون الزر قد تم النقر عليه بعد. لهذا السبب نستخدم

السطر الثاني في التعليمات البرمجية لتعيين القيمة إلى 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-بوتون إمغ {مارجين-رايت: شنومكسبكس؛ التعتيم: شنومكس؛ المؤشر: نقطة؛ } .love-بوتون إمغ: هوفر {أوباسيتي: شنومكس؛ }

بدء عمل

وأخيرا ، نأتي إلى جافا سكريبت لدينا! يجب علينا استهداف البند لدينا والكشف عن نقرة عليها. إليك كيفية القيام بذلك:

(function ($) {$ (document) .on ('click'، '.love-button img'، function () {alert ("love is sharing")؛})}) (jQuery)؛

إذا نقرت على الزر في هذه المرحلة ، يجب أن ترى تنبيه جافا سكريبت مع النص "الحب مشترك". "

متطلبات البيانات

بدلاً من هذا النص ، نحتاج إلى تشغيل مكالمة AJAX. قبل كتابة الكود الخاص بنا ، سوف نفهم ما نحتاج إلى إرساله.

عنوان URL الخاص بـ AJAX

بادئ ذي بدء ، نحتاج إلى مكان لإرسال البيانات. المكان الذي نرسل فيه البيانات سيعالج البيانات ويرد على المكالمة. يحتوي WordPress على مكان مدمج للتعامل مع مكالمات AJAX ، والذي يمكننا استخدامه: المسؤول-ajax.php " في الداخل " wp-admin ". لا يمكننا إضافة عنوان URL هذا إلى البرنامج النصي الخاص بنا (استخدام الترميز "الخام" غير مقبول)، لذلك دعونا استخدام بعض ورد الماكرة.

الوظيفة wp_localize_script () كان الهدف في الأصل هو ترجمة السلاسل في ملفات JavaScript ، وهو ما يعمل بشكل جيد. يمكننا أيضًا استخدامه لتمرير المتغيرات إلى ملفات JavaScript الخاصة بنا ، في هذه الحالة عنوان URL لملف AJAX الخاص بنا. أضف الكود التالي إلى ملفنا " وظائف " كالتالي :

wp_localize_script ('ajax-test-scripts'، 'ajaxTest'، المصفوفة ('ajax_url' => admin_url ('admin-ajax.php'))) ؛

سيتم تسمية نتيجة هذا الكائن الأخير ajaxTest ، والذي سيحتوي على صفيف محدد في المعلمة الأخيرة كخصائص. لإدخال القيمة التي يمكننا استخدامها ajaxTest.ajax_url في كود جافا سكريبت.

معرف المقال

سنرسل بيانات تعسفية كمعرف للمادة (التي سنستخدمها لتحديد المقالة التي نريد "إضافة القليل من الحب" إليها). يمكن استرجاع هذا من DOM. ألق نظرة على الهيكل المستخدم في موضوع "Twenty Sixteen" أدناه:

زرنا لديه "مقال" كأحد أسلافه. يحتوي هذا العنصر على الفئة ويحتوي على المعرف الرقمي للمقالة. على الرغم من أنه ليس الحل الأكثر أناقة ، يمكننا الحصول على الهوية من هناك.

$ (الوثيقة) .على ( 'فوق'، 'IMG .love على زر'، وظيفة () {فار = parseInt POST_ID ($ (هذا) .parents ( 'article.post:first'). ATTR ( 'الهوية') .replace ( 'آخر'، ''))؛ console.log (معرف)})

العمل

يتطلب WordPress أيضًا أن نرسل معلمة باسم action. نظرًا لأنه سيتم إرسال جميع الإجراءات إلى admin-ajax ، فنحن بحاجة إلى طريقة للتمييز بين تلك الطلبات ، ومن ثم استخدام هذه المعلمة.

إرسال طلب AJAX

يمكننا الآن وضع كل شيء معًا. نحتاج إلى إنشاء دعوة أجاكس لـ " الفسفور الابيض بين المشرف / المشرف-ajax.php الذي يحتوي على معرف المقالة وإجراء. هنا كيف يجب أن تبدو.

(وظيفة ($) {$ (الوثيقة) .على ( 'فوق'، 'IMG .love على زر'، وظيفة () {فار = parseInt POST_ID ($ (هذا) .parents ( 'article.post:first'). . ATTR ( 'الهوية') محل ( 'بعد'، ''))؛ $ .ajax ({URL: نوع ajaxTest.ajax_url 'آخر'، البيانات: {العمل: "add_love" POST_ID: POST_ID} ، والنجاح: وظيفة (الاستجابة) {تنبيه ( 'النجاح، العد الجديد' + رد)}})})}) (مسج)؛

$ .ajax () هي الوظيفة المستخدمة التي تتطلب مجموعة من المعلمات. يحتوي عنوان url على الهدف الذي هو ملفنا حاليًا اياكس-url.php ". النوع مضبوط على " بريد.. اعلاني »مثل جميع الطلبات التي يرسلها أ استمارتنا. معلمة البيانات هي كائن يحتوي على " الرئيسية ذات القيمة التي نريد إرسالها إلى الخادم. لاحقًا سنتمكن من قراءتها بـ $ _POST ['action'] و $ _POST ['post_id'].

معالجة الطلب

عادة ما تحتاج إلى تحرير الملف " المسؤول-ajax.php »، لأن الطلب يرسل هناك. إنه ملف نظام ، لذا لن نقوم بتعديله. يتيح لك WordPress تمرير طلبات AJAX باستخدام أقواس مربعة مع معلمة الإجراء. النموذج هو كما يلي:

إذا كنت اسمه العمل الخاص بك add_love يجب إرفاق وظيفة بخطاف يسمى " wp_ajax_add_love " و او " wp_ajax_nopriv_add_love ". الإجراءات NoPriv "يتم تشغيله للمستخدمين الذين تم تسجيل خروجهم ، ويتم تشغيله للمستخدمين الذين قاموا بتسجيل الدخول فقط. في حالتنا ، نود استخدام كليهما. كاختبار سريع ، سنقوم بتعيين قيمة إرجاع افتراضية:

إن المعامل Success هو دالة يتم تشغيلها عند اكتمال استدعاء 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 () {إيكو شنومكس؛ يموت ()؛ }

نحن نعلق وظيفتنا على كل من الأقواس ، واحدة القيام به صدى 4 ثم استخدم الوظيفة " يموت () ". هذا ضروري في WordPress ، وإلا ستتلقى 0 في نهاية كل إجابة. إذا قمت بالنقر فوق الزر الآن ، فسترى ما يلي:

للحصول على رقم "الإعجابات" الفعلي ، كل ما نحتاج إليه هو استرداد الرقم الحالي ، وزيادته بمقدار واحد ، وحفظه في قاعدة البيانات ، وعرض الرقم الجديد.

وظيفة ajax_test_add_love () {$ الحب = get_post_meta ($ _POST [ 'POST_ID'] show_some_love '، صحيح)؛ $ لاف = (فارغ ($ الحب))؟ شنومكس: $ الحب؛ $ الحب ++؛ update_post_meta ($ _ ما بعد [ 'POST_ID']، 'show_some_love "الحب $)؛ صدى $ الحب. يموت ()؛ }

إذا نقرت على الزر الآن ، فسترى النافذة المنبثقة تعرض "1". إذا قمت بتحديث الصفحة ، سترى الرقم الجديد معروضًا. النقر فوق الزر مرة أخرى سوف يجعله 2 ". كل ما علينا فعله الآن هو التأكد من أن الرقم ينعكس مباشرة في واجهة المستخدم.

قم بإجراء تغييرات على واجهة المستخدم باستخدام الاستجابة

هذا الجزء يبدو من السهل (لأنه كذلك) ، ولكن من الأصعب عمومًا تجميعها. كل ما نحتاجه الآن هو تحديد موقع العنصر الذي يحتوي على الرقم الحالي وتعديل محتوياته من خلال الاستجابة.

(وظيفة ($) {$ (الوثيقة) .على ( 'انقر'، 'IMG .love على زر'، وظيفة () {فار = parseInt POST_ID ($ (هذا) .parents ( 'article.post:first'). . ATTR ( 'الهوية') محل ( 'بعد'، ''))؛ فار $ عدد = $ (هذا) .parent () تجد (. 'رقم') $ .ajax ({رابط :. ajaxTest.ajax_url، نوع: 'آخر'، البيانات: {العمل: "add_love" POST_ID: POST_ID،}، والنجاح: وظيفة (الاستجابة) {$ number.text (الاستجابة)؛}})})}) (مسج)؛

لقد أضفت سطرين فقط إلى كود JS السابق. في السطر الخامس ، أقوم بتخزين العنصر الذي يحتوي على الرقم في المتغير $ عدد. على سطر 14 ، أقوم بتعديل نص هذا العنصر لعرض الإجابة ، وهو الرقم الجديد.

هذا كل شيء ، يجب أن تكون قادرًا بشكل أساسي على رؤية هذه الميزة الجديدة قيد العمل على المظهر المخصص الخاص بك. إذا كان لديك أي مشكلة ، فيرجى إخبارنا بذلك. هل لديك نصيحة أخرى تريد مشاركتها؟ افعل ذلك في قسم التعليقات.