كيفية إنشاء مكون WordPress الإضافي لتطبيق الويب الخاص بك

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

لمتابعة هذا البرنامج التعليمي ، تحتاج إلى بعض المعرفة بهذه الأساسيات:

  • PHP و OOP
  • JavaScript (سنستخدم jQuery و Ajax)
  • تطوير WordPress (حيث أن معظم الوظائف من نواة WordPress).

يمكنك العثور على نتيجة عمل لهذا البرنامج التعليمي في مستودع Github هذا.

يمكن أن تكون تطبيقات الويب هذه أي شيء ، مثل CrazyEgg أو Freshbook أو Google Analytics أو Facebook Pixel أو Feedier. لماذا ا؟ يحتاجون جميعًا إلى إدخال بعض أكواد HTML / JavaScript إلى موقعك لأغراض مختلفة.

دائمًا ما يتم تحديد هذه "الشفرة" بالمتغيرات ، وعادة ما تكون مصدر إزعاج لمالك الموقع. هذا لأنك تحتاج إلى تعديل قوالب القالب. إذن ، ماذا عن إنشاء مكون إضافي للقيام بذلك من أجلنا؟ حسنًا ، لنفعل ذلك!

الخطوة 1: ابحث عن تطبيق الويب الخاص بك

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

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

إليك ملخص سريع لـ Feedier إذا لم تسمع به من قبل:

  • إنها أداة لتجميع الملاحظات ، تستخدم الاستبيانات لفهم المستخدمين
  • إنه مرن للغاية
  • انه مجانا!
  • لديه واجهة برمجة تطبيقات جيدة (مهم جدًا هنا)
  • لديه عنصر واجهة مستخدم في الموقع (مهم جدًا هنا)
  • يتيح لك مكافأة عملائك
  • يتيح لك إنشاء أسئلة شرطية
  • يحتوي على لوحة تحكم كاملة للتقرير التحليلي
  • يتيح لك إدارة الملاحظات بشكل فردي

هذه هي الأداة التي نريد إضافتها تلقائيًا:

إذا قمت بالتسجيل في Feedier ، فيمكنك ببساطة العثور على الرمز في علامة التبويب مشاركة في الاستبيان الخاص بك:

الخطوة 2: إعداد البرنامج المساعد الخاص بنا وبنيته

البرنامج المساعد WordPress بسيط للغاية حسب التصميم. سيحتاج المكون الإضافي الخاص بنا إلى ملفين فقط.

  • feedier.php : ملف PHP للمكون الإضافي الرئيسي.
  • الأصول / js / admin.js : نص جافا سكريبت لحفظ الخيارات باستخدام Ajax.

يمكنك إنشاء دليل "feedier" جديد (أو اسم تطبيق الويب الخاص بك) في مجلد wp-content / plugins / .

سيكون الملف الأكثر أهمية هو فئة feedier.php للملحق . هنا هيكلها:

نحن نقوم ببعض الأشياء هنا:

  • إعلان البرنامج المساعد الخاص بنا باستخدام التعليقات الرأسية
  • تحديد عدد قليل من الثوابت المفيدة لتتمكن من العثور على عنوان URL للمكوِّن الإضافي و PATH بسهولة
  • إعلان فئة المكون الإضافي التي ستحتوي على كل ما نحتاجه في هذا المكون الإضافي. نحن فقط بحاجة إلى طريقة منشئ في الوقت الحالي.

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

الخطوة 3: قم بإنشاء صفحة المسؤول الخاصة بنا

بالنسبة لهذا الجزء ، سنضيف صفحة مسؤول Feedier جديدة إلى موقع WordPress الخاص بنا ونجلب استطلاعاتنا ديناميكيًا من Feedier's API.

في مُنشئ الفصل الخاص بنا ، دعنا نسجل ثلاثة إجراءات جديدة مطلوبة لإضافة صفحة مسؤول على WordPress:

  • addAdminMenu ستضيف صفحة جديدة في قائمة WordPress اليسرى. سيكون هناك أيضًا رد اتصال لطريقة أخرى تحتوي على محتوى الصفحة.
  • سيتم استدعاء storeAdminData عندما ينقر المستخدم على زر "حفظ الإعدادات".
  • سيقوم addAdminScripts بتسجيل ملف JavaScript جديد لمشرف WordPress الخاص بنا من أجل حفظ بيانات النموذج. ولكنه يتبادل أيضًا بعض المتغيرات بين جانب PHP وجانب JavaScript.

الخطوة الأولى سهلة للغاية. نحن فقط نسجل الصفحة ، مثل هذا:

كما ترى ، نستخدم وظائف ترجمة WordPress لجميع السلاسل. نلاحظ أن

array($this, ‘adminLayout’)

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

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

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

$data = $this->getData();

والحصول على الاستطلاعات من Feedier API:

$surveys = $this->getSurveys($data[‘private_key’]);

لذلك دعونا نعلن عن أول واحد:

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

لتشغيل الطريقة الثانية ، نحتاج إلى المفتاح الخاص Feedier. هذا يعتمد على أول واحد للوصول إلى هذا المفتاح المحفوظ في الخيار:

تم توثيق Feedier API هنا ، حتى تتمكن من رؤية ما ستحصل عليه في الرد.

في هذه اللحظة ، لدينا صفحة مسؤول جديدة كاملة. لكن لا شيء يحدث عندما نضغط على زر الحفظ ، لأنه لا توجد آلية حفظ - حتى الآن .

جيد بما فيه الكفاية ، دعونا نحفظ بياناتنا!

كما ذكرنا سابقًا ، سنحفظ بياناتنا باستخدام AJAX. لذلك ، نحتاج إلى تسجيل ملف JavaScript جديد وتبادل البيانات باستخدام وظيفة wp_localize_script ():

نحتاج أيضًا إلى إضافة ملف جديد /assets/js/admin.js . سيؤدي ذلك ببساطة إلى إجراء مكالمة Ajax ، وسيقوم WordPress تلقائيًا بتوجيه الطلب بشكل صحيح إلى الطريقة الصحيحة (تم بالفعل في المنشئ). يمكنك قراءة المزيد حول كيفية تعامل WordPress بذكاء مع طلبات AJAX هنا.

في هذه اللحظة بالذات ، يمكننا النقر فوق زر الحفظ وسيقوم البرنامج النصي أعلاه بتقديم طلب HTTP POST إلى WordPress. نلحق أيضًا معلمة إجراء تحتوي على: store_admin_data (والتي أعلنا عنها في البداية في هذا الجزء من المُنشئ):

add_action( ‘wp_ajax_store_admin_data’, array( $this, ‘storeAdminData’ ) );

سيتلقى أسلوب storeAdminData طلب POST ويحفظ القيم التي نحتاجها في خيار WordPress الخاص بنا.

بعض الملاحظات حول الطريقة أعلاه:

  • نحن نستخدم "WordPress nonce" للتعامل مع الأمان والتأكد من أن هذا يأتي من موقع الويب وليس مخترقًا يزيف الطلب.
  • نحدد الحقول التي نحتاج إلى حفظها باستخدام بادئة "feedier_". بمجرد الاستلام ، نقوم بإجراء حلقة عبر جميع بيانات $ _POST ونحفظ هذه الحقول فقط. نقوم أيضًا بإزالة البادئة قبل حفظ كل حقل.

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

ممتاز ، لقد انتهينا من صفحة الإدارة.

الخطوة 4: أدخل الرمز الديناميكي تلقائيًا في صفحاتنا

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

شيء مثل:


    

Thus, the first thing we want to do is to create a new method to our plugin that will print this code depending on the variables set by the user. So, using the architecture we already set up in the last part:

Now, we just need to call this function on every page load to add it at the bottom of the page. To do this, we’ll hook our method to the wp_footer action. By registering a new action into our class’ constructor:

That’s it!

Any questions, feedback, or ideas? Let me know in the comments!

You can find a working version of this tutorial on this Github repository.

2Fwebd/feedier-wordpress-plugin

Contribute to feedier-wordpress-plugin development by creating an account on GitHub.pxlme.me

Note that this is first version of the plugin, and many things can be improved. I’m open to suggestions and improvements. ?

We are building Feedier. It becomes a no-brainer to collect feedback and build relationships with your customers!

Feedier - Next generation feedback

Meet Feedier, the next generation customer feedback software that lets you collect valuable feedback. Reward, engage…feedier.com

Convinced? Sign up for free at feedier.com ?

Don’t forget to clap our article and subscribe to get more amazing articles if you liked it?. You can also find us on Twitter.

This article was initially published on our blog here.