كيفية إنشاء البرنامج المساعد الأسئلة المتكررة بسيطة لورد

المادة بقلم: روتشستر أوليفيرا
  •   خدمات ووردبريس
  • تحديث: يناير 20 و 2020

لقد رأينا قبل الكثير من نصائح التدوين والأدوات. حسنًا ، سنتعلم اليوم كيفية إنشاء أداة جيدة لمدونتك - مكون إضافي لصفحة الأسئلة الشائعة. لكن الشيء الأكثر أهمية ليس المكون الإضافي نفسه فحسب ، بل ما يمكنك فعله بهذا المبدأ. ستتعلم كيفية تخزين أي نوع من البيانات في موقع WP الخاص بك وكيفية تكامله مع المكتبات الخارجية (مثل jQuery UI) لإنشاء مكونات مخصصة لموقعك. هيا بنا نبدأ!

الفكرة ، العرض والتحميل

عرض

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

ولكن بصرف النظر عن أن إنجازنا الرئيسي سيكون فهم وورد أنواع المشاركة المخصصة ، والرموز القصيرة ، والتفاعلات مع المكوّن الإضافي JS / jQuery الخارجي. مع هذه الفكرة يمكنك إنشاء الكثير من الأشياء على أساس الإضافات المجنونة الأخرى التي قد تجدها هناك ، وهذا هو مجرد نقطة انطلاق بالنسبة لك ، عزيزي Padawan.

So هنا يمكنك العثور على jQuery API demo للمكون الذي سنستخدمه - ولكن الأشياء الرائعة حقًا هي الكود الذي يستخدم لإنشاء هذا المكون (PHP).

الاحماء - ملف البرنامج المساعد ونوع المشاركة مخصص

بادئ ذي بدء ، نحتاج إلى إنشاء نوع منشور مخصص لتخزين بياناتنا.

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

بالنسبة لنا لنحصل على هذا ، نحتاج إلى مكون إضافي ، لكن ربما تكون على دراية بهذا المفهوم بالفعل. تشبه الإضافات كتل Lego الخاصة بـ WordPress ، حيث تقوم بإضافة أو تغيير الوظيفة الحالية باستخدام بعض التعليمات البرمجية التي يمكن توصيلها بسهولة (duh!) أو فصلها أيضًا إذا رغبت في ذلك.

لإنشاء مكون إضافي بطريقة تتعرف عليها WP ، تحتاج إلى أشياء 2:

  1. قم بإنشاء ملف من داخل wp-content / plugins /
  2. أضف بيانات وصفية في بداية هذا الملف حتى تتمكن WP من فهم ما يدور حوله

ضع في اعتبارك أن اسم الملف يجب أن يكون فريدًا ، لذلك عند تثبيت شخص ما للمكوِّن الإضافي (حتى لو كان ذلك بنفسك) لن يكون هناك أي تعارض مع المكونات الإضافية الحالية. في حالتنا لتنظيم أفضل ، سنقوم بإضافة مجلد جديد باسم faq-whsr ، وداخله ملف يسمى faq-whsr.php.

الآن بالنسبة إلى metada ، ما عليك سوى إضافة شيء مثل هذا في بداية ملف المكونات الإضافية (بعد ذلك مباشرة

meta_01

مما يعني:

  • اسم المكون الإضافي: الاسم الجميل الذي سيظهر في wp-admin> واجهة المكونات الإضافية
  • المكون الإضافي URI: إذا كنت ترغب في إضافة رابط إلى صفحة المكون الإضافي الخاص بك (المستندات ، الأمثلة ، صفحة المبيعات)
  • الوصف: هذه هي الفقرة الصغيرة الموضحة في واجهة wp-admin> المكونات الإضافية. اجعل الأمر بسيطًا حتى يتذكر المستخدمون الغرض منه
  • المؤلف / المؤلف URI: الشخص / الشركة التي أنشأت المكوّن الإضافي ورابطًا للحصول على الأرصدة
  • الترخيص: لذلك سيعرف المستخدمون ما يمكنهم / لا يمكنهم فعله مع البرنامج المساعد الخاص بك

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

دعونا تفعيله ونرى ما سيحدث.

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

في حالتنا CPT هو البند الأسئلة الشائعة ، ولكن يمكنك إنشاء الكتب ومقاطع الفيديو والشهادات وهلم جرا. المهم أن نأخذ في الاعتبار هنا: يجب أن تكون أسماء الوظائف فريدة. كرر الأمر معي الآن: يجب أن تكون أسماء الوظائف فريدة ، ويجب أن تكون أسماء الوظائف فريدة. فهمتك؟ جيد هذا سيوفر لك الكثير من المتاعب حتى نتمكن من استخدام OOP (ربما في البرنامج التعليمي القادم).

تتم عملية المعالج باستخدام هذا الرمز:

لجنة مناهضة التعذيب

وهذا ما تعنيه الأجزاء ذات الصلة:

  • تسميات $ - عبارة عن مصفوفة تحتوي على تسميات ونص لأقسام مختلفة من منطقة wp-admin الخاصة بك. لذلك سيعرف الفسفور الابيض الطريقة الصحيحة للاتصال بعناصرنا
  • يدعم - يخبر هذا الشخص بما يمكنك رؤيته في wp-admin> FAQ> شاشة جديدة. في حالتنا ، سيكون لدينا العنوان والمحرر (مربع المحتوى الرئيسي) والمؤلف والمراجعات والحقول المخصصة (في حالة رغبتك في ذلك).
  • التصنيفات - هنا تخبر WP بالتصنيفات المسموح بها (الفئات أو العلامات أو التصنيفات المخصصة)
  • register_post_type ('faq_whsr'، $ args) - هذا يخبر WP "مرحبًا ، أنشئ نوع منشور مخصصًا جديدًا باستخدام المعرف faq_whsr باستخدام الوسيطات من $ args".

احفظه واحبس أنفاسك. يجب أن تشاهد الآن قسمًا جديدًا في قائمة wp-admin الرئيسية

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

قبل أن نترك الأمر wp-admin ، أضف بعض البيانات الوهمية (عدد قليل من الأسئلة مع فئات 2 على الأقل).

الواجهة الأمامية - WP x jQuery interact

الآن حان الوقت لرؤية بعض الإجراءات وسوف نستخدمها jQuery UI عنصر الأكورديون لهذا.

واجهة المستخدم jQuery UI لها نفس مزايا jQuery نفسها:

  • الكثير من المطورين يعملون على ذلك
  • عبر المتصفح والشفرة جاهزة للجوّال
  • موثقة توثيقا جيدا
  • يلعب لطيفة مع الفسفور الابيض (يستخدم WP نفسها لهم)

السؤال الآن هو: كيف نسميها؟

هناك طرق 2 لهذا:

  1. النقية السيئة / tags in your wp_head
  2. لطيفة wp_enqueue

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

باستخدام وظيفة enqueue:

enqueue_02

رمز قصير

والآن عدنا إلى wp-admin. لدينا بنود الأسئلة الشائعة ، ولدينا المكتبة لإضفاء الطابع المميز على العناصر كما نريد ، وما العناصر الأخرى المفقودة؟ حسنا ، نحن بحاجة إلى استدعاء العناصر!

لدينا الكثير من الخيارات لهذا ، ولكن الأسهل في هذه الحالة هو إنشاء رمز قصير. الرمز القصير هو شيء تقوم بإضافته في حقل المحتوى الخاص بك (للصفحات والمشاركات ، CPTs ...) وسيقوم WP بالبحث فعليًا عن وظيفة لتشغيلها. هناك أنواع 2 من الرموز القصيرة:

  1. [إرفاق ذاتي] - مثل العلامات أو هذا النوع من الرموز القصيرة يستدعي وظيفة في مرحلة ما - هذا هو رجلنا
  2. [ملفوفة] المحتوى [/ ملفوفة] - هذا مثل العلامات أو ويمكنه بالفعل تحويل محتوياته ، أو استخدام المحتوى كوسيطات.

دعونا نرى كيف يعمل ذلك الحين. أنشئ صفحة جديدة في wp-admin وأضف هذا الكود هناك:

[-أسئلة وأجوبة whsr]

حفظ هذه الصفحة وزيارتها والاطلاع على ما يحدث ...

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

أضف هذا في ملف الإضافة الخاص بك:

shortcode_02

الآن تحديث صفحتك وأعدك بشيء رائع حقا سيحدث.

رائع. صحيح؟ الآن يمكنك أن ترى أنه يعمل والسماء هي الحد الأقصى بالنسبة لك الآن. إن ما تفعله هذه الشفرة هو مجرد إخبار WP بأن هناك رمزًا قصيرًا يسمى [faq-whsr] ، وإذا وجدته WP ، يجب على WP تشغيل وظيفة في هذه النقطة من الصفحة.

في حالتنا ، سنحتاج إلى تحقيق هذا الهيكل لإنشاء لوحة jQuery UI:

api_02

ولهذا سننشئ الفسفور الابيض الاستعلام، وتحميل البنود الأسئلة الشائعة ومحتوياتها. استبدل وظيفة الرمز القصير بهذا الرمز:

الرمز القصير-basic_02

حسنا ، الآن سوف يتم استدعاء البنود التعليمات الخاصة بك. ما قمنا به هو استدعاء wp_query للاتصال بنوع المنشور المخصص الخاص بنا ، ثم تمريره إلى رمز الرمز القصير بحيث يعرض WP كل منهم باتباع الهيكل المطلوب.

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

الرمز القصير-final_02

بهذه الطريقة يمكنك استدعاء العناصر باستخدام الوسيطات التالية (يمكنك الجمع بين العدد الذي تريده):

  • cat - معرف الفئة (تمت إضافة عدة كمصفوفة) [faq-whsr cat = 1]
  • category_name - اسم الفئة [faq-whsr category_name = ”طعام”]
  • الطلب - ASC أو DESC (DESC هو افتراضي) [faq-whsr order = ”ASC”]
  • orderby - تغيير معايير طلب العناصر [faq-whsr orderby = ”title”]
  • posts_per_page - تغيير عدد العناصر المحملة [faq-whsr posts_per_page = 5]

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

  • المستخدم / كاتب التعليق
  • الفئة (إضافة خيارات الاستبعاد بدون not_in)
  • بحث (بارد إذا كنت تريد منح المستخدمين القدرة على البحث من خلالها)
  • حقل مخصص (بما أن عناصر الأسئلة المتداولة تحتوي عليها يمكنك استخدامها لتحميل العناصر ذات الحقول والقيم المخصصة المحددة)

الان حان دورك

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

  • تصميم تستجيب
  • خلق القطعة
  • البرنامج المساعد تنشيط / إلغاء تفعيل الخطافات
  • تدويل
  • OOP
  • لا توضع في الموضع إلا عند الحاجة (لصفحات معينة)

لا تنسى أن تترك أفكارك في التعليقات! وهنا التحدي الذي نواجهه: هل من الممكن أن تقوم بتطبيق خيار "العنصر الافتراضي" للرمز القصير (لذلك عندما يتم تحميل الصفحة ، سيتم فتح عنصر آخر ، وهذا ليس الأول)؟ كيف يمكنك أن تفعل ذلك؟

حول روتشستر أوليفيرا

أنا مصمم على شبكة الإنترنت ورجل أعمال من Itajubá (MG) ، البرازيل. أحب الكتابة عن المواضيع الغامضة والقيام ببعض الأشياء الرائعة.