Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. WordPress
Code

تحسين تقنيات اجاكس لوردبرس]: برمجة الإجراءات

by
Difficulty:IntermediateLength:LongLanguages:

Arabic (العربية/عربي) translation by Saadkhaled (you can also view the original English article)

قبل بضع سنوات ، كتبت سلسلة من المقالات التي تناقش كيفية استخدام Ajax في WordPress Frontend .   الغرض من هذه السلسلة بسيط: 

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

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

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

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

تحديد البرنامج المساعد 

كما هو الحال مع أي مكون إضافي لـ WordPress ، من المهم التأكد من تحديد العنوان حتى يتمكن WordPress من قراءة الملف من أجل إدخال الوظيفة الجديدة في التطبيق الأساسي. 

أنا استدعاء هذا التباين من البرنامج المساعد Simple Ajax Demo ، وهو موجود فيwp-content / plugin / wp-simple-ajax .  يتواجد الملف الأول الذي أنشئه في الدليل الجذر لـ wp-simple-ajax ويُسمى wp-simple-ajax.php . 

تبدو هكذا: 

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

وهذا يعني أن المستخدمين سيشاهدون اسم البرنامج المساعد ووصفه ونسخته بالإضافة إلى اسم المؤلف (الذي سيتم ربطه بعنوان URL المحدد) عندما يتم عرض خيار تنشيط المكون الإضافي. 

إضافة ملف Ajax في WordPress 

في هذه المرحلة ، سيظهر المكوِّن الإضافي في لوحة معلومات WordPress Plugin ، ولكنه لن يؤدي فعلًا أي شيء لأننا لم نكتب أي شفرة.   ولتحقيق ذلك ، سنقترب من هذا البرنامج الإضافي باستخدام منهج البرمجة الإجرائية بدلاً من المنهج الموجه للكائن الذي استخدمته في معظم برامجي التعليمية. 

كيف أضفنا أصلا أياكس الدعم 

. سبب تجنب البرمجة الشيئية في الوقت الحالي مزدوج: 

  1. . . أنا مهتم أكثر بالتركيز على واجهات برمجة التطبيقات المحددة المقدمة من WordPress حتى تتمكن من التركيز على أهم الأشياء للتركيز عليها في عملك. 
  2. .سيركز الجزء الثاني من هذه السلسلة على إعادة بناء هذا الكود إلى نظام موجه للكائنات بحيث يمكنك رؤية كيف قد يبدو كل هذا في سياق نظام أكبر يستخدم الفئات. 

في نهاية المطاف ، ستغطي هذه السلسلة كلا النوعين من البرامج المدعومة بواسطة PHP و WordPress. 

على الأرجح ، إذا كنت قد عملت مع Ajax في الماضي ، فقد قمت بشيء كهذا من أجل إعطاء الدعم الخاص بك للمكون الإضافي لإجراء مكالمات غير متزامنة: 

. هذه الطريقة بالذات ليست خاطئة بطبيعتها ، لكنها تهمل بعض من واجهات برمجة التطبيقات الجديدة التي سأغطيها للحظات.  .  كما أنه يمزج بين PHP و HTML و JavaScript في وظيفة واحدة. 

. إنها ليست رائعة لأنها تنجز المهمة ، لكن هناك طريقة أنظف للقيام بذلك. 

.كيف نضيف دعم أجاكس 

أولاً ، للتأكد من أنه لا يمكن الوصول إلى المكوّن الإضافي مباشرةً بواسطة أي شخص ، أضف الشرط التالي فقط أسفل عنوان المكوِّن الإضافي: 

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

بعد ذلك ، لنقم بإعداد وظيفة لتضمين دعم WordPress لـ Ajax من خلال استخدام بعض واجهات برمجة التطبيقات الحالية التي لا تتضمن اختلاط اللغات. 

إليك ما سنحتاج القيام به: 

  1. سنقوم بإنشاء وظيفة مسؤولة عن إضافة دعم Ajax. 
  2. سنقوم بربط الوظيفة في إجراء wp_enqueue_script . 
  3. وسوف تستفيد من wp_localize_script دعوة API من أجل إدراج بقائمة الانتظار دعم ورد لاياكس (الذي يأتي من المشرف-ajax.php ). 

يبدو واضحًا بما فيه الكفاية ، أليس كذلك؟   لاحظ إذا كان لديك أي أسئلة ، فيمكنك دائمًا إضافتها في التعليقات. تحقق من التعليمة البرمجية التالية لمعرفة ما إذا كان يمكنك المتابعة على طول:

مرة أخرى ، لاحظ أن علامة PHP الافتتاحية لن تكون مطلوبة في النسخة النهائية من البرنامج المساعد ، حيث أنها هنا فقط للاستفادة من وظيفة تمييز بناء الجملة.

مع ذلك ، ألق نظرة على wp_localize_script .  قبل فحص كل معلمة ، دعنا نستعرض الغرض من هذه الوظيفة.  من كودكس ، النسخة القصيرة هي كالتالي:

ترجمة برنامج نصي مسجل يحتوي على بيانات لمتغير جافا سكريبت.

الوصف الأطول مهم ، على الرغم من:

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

الآن استعرض المعلمات التي يقبلها:

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

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

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

ملاحظة مهمة حول دعم أجاكس

لاحظ أننا نستخدم ربط wp_enqueue_script فقط ولا نستخدمadmin_enqueue_script . هذا لأن ajaxurlمعرَّفة بالفعل في لوحة المعلومات.

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

إعداد رمز الخادم الجانبي

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

سيعمل المكون الإضافي على ما يلي:

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

سنكون باستخدام وحدة التحكم الكائن الذي هو متوفر في معظم المتصفحات الحديثة، لذا تأكد من أنك تستخدم كروم، سفاري، فايرفوكس أو عند العمل مع مصدر جافا سكريبت عليك أن تكون الكتابة.

تقديم طلب

الآن وقد أوضحنا بالضبط كيف ستعمل الشفرة عندما يقوم المستخدم بعمل طلب Ajax على الخادم ، فلنبدأ كتابة وظيفة للقيام بذلك بالضبط. ونحن سوف يطلق عليهsa_get_user_information .

سيأتي تنفيذ هذه الوظيفة لاحقًا في هذا البرنامج التعليمي ، ولكن الخطوة الأساسية من الشفرة أعلاه هي أننا وصلنا إلى كل منwp_ajax_get_current_user_info وwp_ajax_nopriv_get_current_user_info .

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

لاحظ أيضًا أن كل شيء بعد wp_ajax_ و wp_ajax_nopriv_ متروك لك ، كمطور ، لتحديده.  سيكون هذا هو اسم الوظيفة التي تتصل بها من جانب العميل كما سترى لاحقًا في هذا البرنامج التعليمي.

التعامل مع الطلبات الخاطئة

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

في حالتنا ، قد تكون الأخطاء المحتملة:

  1. لا أحد مسجل الدخول.
  2. هوية المستخدم غير موجودة في النظام.

من المستبعد جدًا أن تكون الحالة الثانية صحيحة ، ولكنها ستساعدنا في معرفة المزيد عن عدد قليل آخر من واجهات برمجة تطبيقات WordPress وكيف يمكننا الاستفادة منها للتعامل مع الطلبات الخاطئة.

. كما هو الحال مع العديد من واجهات برمجة التطبيقات ، يتوفر هذا في مجموعة المخطوطات -كودكس- :

مثيلات WP_Error رموز خطأ مخزن والرسائل التي تمثل واحد أو أكثر من الأخطاء ، وما إذا كان المتغير هو مثيل WP_Error يمكن تحديده باستخدام الدالة is_wp_error ().

يقبل المُنشئ ثلاث معلمات (على الرغم من أننا سنستخدم أول اثنين فقط):

  1. الوسيطة الأولى هي رمز الخطأ.  هذا هو ما يمكننا استخدامه من جانب العميل لتحليل وتحديد الخطأ الذي حدث. كما يسمح لنا بكتابة المعلومات إلى ملف السجل وما إلى ذلك.
  2. الوسيطة الثانية هي رسالة يمكن أن تصاحب رمز الخطأ.  هذا مفيد إذا أردنا عرض رسالة للمستخدم.
  3. الحجة الأخيرة هي مجموعة من المعلومات ، وعادة ما تكون رموز الخطأ والرسائل.  بغض النظر ، فإننا لن نستخدم هذا خلال الكود.

بعد ذلك ، سنرسل نتائج الأخطاء مرة أخرى إلى العميل باستخدام وظيفة تسمىwp_send_json_error . هذا حقا سهل الاستخدام :

إرسال رد JSON إلى طلب Ajax ، مشيرًا إلى الفشل.  سيحتوي كائن الاستجابة دائمًا على مفتاح النجاح بقيمة false.  إذا تم تمرير أي شيء إلى الدالة في معلمة بيانات $ ، فسيتم ترميزها كقيمة لمفتاح بيانات.

من خلال الجمع بين كل من WP_Error و wp_send_json_error ، يمكننا إنشاء الوظائف التي ستساعدنا في توفير رموز الأخطاء لجافا سكريبت التي تتصل بجهازالخادم.

على سبيل المثال ، لنفترض أن لدينا دالة تقدم خطأً إذا لم يقم المستخدم بتسجيل الدخول إلى موقع الويب.  يمكن تحقيق ذلك باستخدام الوظيفة التالية:

لاحظ أن الوظيفة مميزة على أنها خاصة حتى وإن كانت في مساحة الاسم العامة.  إنها مسبوقة بـ شرطة سفلية لكي تشير إلى أن هذه الوظيفة يجب اعتبارها خاصة.

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

ثانيًا ، نحتاج إلى معالجة الحالة في حالة عدم وجود المستخدم.  للقيام بذلك ، يمكننا إنشاء وظيفة تقوم بما يلي:

لدينا الآن وظيفتين ، كل منهما سيعيد إرسال المعلومات إلى العميل في حالة فشل شيء ما ، ولكن ماذا نفعل إذا مرت كلتا هاتين الوظيفتين؟ 

التعامل مع الطلبات الناجحة

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

أي أننا نحتاج إلى إرسال المعلومات مرة أخرى إلى العميل الذي يتضمن معلومات المستخدم الحالي بتنسيق JSON. 

.  إنه يفعل بالضبط ما تعتقد أنه سيفعله أيضًا: 

.  سيحتوي كائن الاستجابة دائمًا على مفتاح النجاح مع القيمة true.  .

دعونا نجمع بين العمل الذي قمنا به حتى الآن لكتابة دالة ستقوم جافا سكريبت باستدعاءها في نهاية المطاف والتي تستفيد من الوظيفتين الأصغر اللذين وضعناهما أعلاه.   في الواقع ، سيكون هذا تنفيذًا للوظيفة التي تركناها سابقًا في هذا البرنامج التعليمي: 

إذا قام المستخدم بتسجيل الدخول وكان المستخدم موجودًا ، فسوف نرسل رسالة نجاح إلى العميل تحتوي على تمثيل JSON للمستخدم.   في هذه المرحلة ، حان الوقت لكتابة بعض JavaScript. 

طلب جانب العميل 

أولاً ، أضف ملفًا باسم frontend.js إلى جذر دليل المكونات الإضافية .   في البداية ، يجب أن تتضمن التعليمة البرمجية التالية: 

سيتم تغطية تنفيذ الوظيفة مؤقتًا ، ولكننا بحاجة إلى التأكد من أننا نطبع ملف جافا سكريبت هذا في المكون الإضافي أيضًا.  عد إلى الوظيفة sa_add_ajax_support وأضف ما يلي أعلاه إلى wp_localize_script : 

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

في frontend.js ، أضف الشفرة التالية: 

بالنظر إلى عدد التعليقات في الشفرة وافتراض أنك مألوف لكتابة ملحقات WordPress ولديك بعض الخبرة مع Ajax ، يجب أن يكون من السهل جدًا اتباعها. 

باختصار ، يقوم الكود أعلاه بإجراء اتصال إلى جانب الخادم عند تحميل الصفحة ثم كتابة معلومات إلى وحدة تحكم المستعرض عن المستخدم الحالي. 

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

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

استنتاج  

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

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

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

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

تذكر ، يمكنك التقاط جميع الدورات التدريبية والدروس الخاصة بي في صفحة ملفي الشخصي ، ويمكنك متابعتي على مدونتي و / أو تويتر على tommcfarlin حيث أتحدث عن تطوير البرمجيات في سياق WordPress والاستمتاع بالتحدث مع الآخرين حول نفسه الموضوعات (وكذلك أشياء أخرى ، أيضا). 

في الوقت الحالي ، لا تتردد في ترك أي أسئلة أو تعليقات في الخلاصة أدناه وسأحاول الرد على كل منها

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.