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

المادة التي كتبها:
  • وورد
  • تم التحديث: فبراير 09 ، 2017

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

الفكرة والتجربة والتنزيل

عرض

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

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

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

أوه ، وبالطبع يمكنك العثور على ملفات المساعد لتحميل هنا كذلك يمكنك فقط تثبيت في موقع WP الخاص بك.

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

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

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

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

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

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

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

الآن للميتادا ، فقط أضف شيئًا كهذا في بداية ملف الإضافات (مباشرة بعد <؟ php):

meta_01

مما يعني:

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

خلق 01-البرنامج المساعد

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

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

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

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

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

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

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

  • التسميات $ - هو مصفوفة مع التسميات والنص لأقسام مختلفة من منطقة wp-admin. لذلك سوف الفسفور الابيض تعرف الطريقة الصحيحة لاستدعاء لدينا بنود
  • يدعم - هذا واحد يخبر ما يمكنك رؤيته في wp-admin> الأسئلة الشائعة> شاشة جديدة. في حالتنا سيكون لدينا العنوان والمحرر (مربع المحتوى الرئيسي) والمؤلف والمراجعات والحقول المخصصة (في حال كنت تريدهم).
  • taxonomies - هنا تخبر الفسفور الابيض الذي يسمح بتصنيفات (فئات أو علامات أو تصنيفات مخصصة)
  • 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. علامات <script> / <style> الصرفة السليمة في wp_head الخاص بك
  2. لطيفة wp_enqueue

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

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

enqueue_02

رمز قصير

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

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

  1. [self-enclosing] - مثل العلامات <hr /> أو <br /> هذا النوع من الرموز القصيرة يستدعي وظيفة في وقت ما - هذا هو شخصنا
  2. [wrapped] المحتوى [/ wrapped] - هذا هو مثل العلامات <p> </ p> أو <div> </ div> ويمكن في الواقع تحويل محتوياته ، أو استخدام المحتوى كوسائط.

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

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

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

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

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

shortcode_02

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

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

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

api_02

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

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

حسنًا ، ستتم الآن استدعاء عناصر الأسئلة الشائعة. ما قمنا به هو الاتصال بـ wp_query للاتصال بنوع النشر المخصص الخاص بنا ، ثم تمريره إلى رمز الرمز القصير ، لذا سيعرض WP جميعهم باتباع البنية المرغوبة.

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

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

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

  • cat - فئة ID (متعددة أضافت كمصفوفة) [faq-whsr cat = 1]
  • category_name - اسم الفئة [faq-whsr category_name = "food"]
  • order - ASC أو DESC (DESC is default) [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) ، البرازيل. أحب الكتابة عن المواضيع الغامضة والقيام ببعض الأشياء الرائعة.

الاتصال: