إنشاء لوحة تحكم لقالب الووردبريس 1

كنا قد إستعرضنا من قبل الخيارات المتاحة لإنشاء لوحة تحكم لقالب الووردبريس كما أشرنا الى أهميتها حيث أنها توفر لمستخدم القالب درجة من المرونة للتحكم في مختلف المزايا المتاحة في القالب. في هذا الدرس إن شاء الله سنحاول التركيز على إحدى هذه الخيارات المتاحة -ولعلها الأشهر والأسهل- وهي إنشاء لوحة تحكم للووردبريس بإستخدام الواجهة البرمجية للإعدادات Settings API رفقة الواجهة البرمجية للخيارات Options API والتي يوفرها الووردبريس وهما عبارة عن مجموعة من الدوال لتسهيل عمليات:

  • إنشاء صفحة خيارات Options Page.
  • إنشاء قوائم في لوحة التحكم.
  • حفظ وإسترجاع والتحقق من مدخلات المستخدم User Input.

 

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

لوحة تحكم قالب الووردبريس

حيث أننا سنوفر للمستخدم مجموعة من الخيارات وهي:

  • رفع شعار الموقع
  • إضافة إعلان نصي في أعلى الموقع

 

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

 

مكان كتابة الكود:

هنالك اكثر من خيار لكتابة الكود الخاص بإنشاء لوحة التحكم،، فمثلا يمكنك كتابته في ملف functions.php للقالب،، أو يمكن كتابته كإضافة للووردبريس.
في هذا الدرس سنقوم بإستخدام الطريقة الأولى لكننا سنكتب الكود في ملف منفصل ونقوم بعد ذلك بتضمينه include في ملف الfunctions.php للقالب  فقط لنجعل الكود أكثر ترتيبا.
قم بإنشاء ملف في مجلد القالب وليكن إسمه مثلا theme-options حيث ستكتب فيه كل الأكواد التالية في هذا الدرس… ولاتنسى أن تقوم بتضمينه في ملف الfunctions من خلال السطر التالي

قمنا بإستخدام الدالةget_template_directory()  والتي ترجع مكان مجلد القالب.

إنشاء صفحة خيارات القالب:

في البدء سنقوم بإنشاء صفحة خيارات القالب والتي سنستخدمها لإدراج حقول الإعدادات التي ستستقبل القيم المدخلة بواسطة المستخدم، وإنشاء الصفحة يتم بكل سهولة من خلال إستخدام دالةadd_options_page التي يوفرها الووردبريس، وسنستخدمها بهذه الطريقة:

 

في السطر الأول قمنا بإضافة الدالةcreate_theme_options_page  الى الحدثadmin_menu  حيث سيتم إستدعاء هذه الدالة عند الحدثadmin_menu  أي عندما تظهر قائمة لوحة التحكم وهذا هو المكان المناسب لإستدعاء الدالة حيث أنها تقوم بإنشاء عنصر للفائمة بالتالي من الجيد ان تستدعى عند بدء عرض عناصر القائمة.
وفي السطر الثاني قمنا بإنشاء هذه الدالة التي تم إضافتها للحدث إعلاه وفي داخلها قمنا بإستخدام الدالةcreate_options_page  والتي يوفرها الووردبريس لإنشاء صفحة خيارات حيث تستقبل خمسة معاملات هي:

  • عنوان الصفحةpage_title : وهو إسم صفحة الخيارات والذي سيظهر في عنوان المتصفح.عنصر القائمة للوحة تحكم قالب الووردبريس
  • عنوان عنصر القائمةmenu_title : وهو إسم الصفحة الذي سيظهر في قائمة الووردبريس
  • صلاحيات التعديلaccess_privileges :  وفيه يتم تحديد صلاحيات المستخدم الذي يستطيع الوصول الى هذه الصفحة حيث جعلنا اي مستخدم لديه صلاحية manage_options  يستطيع التعديل على خيارات هذه الصفحة.
  • إسم الصفحةpage_name : وهذا يمكن ان يكون اي string بشرط أن يكون فريد unique،،
  • الدالة المناداةcallback : وهي الدالة التي سيتم من خلالها إنشاء محتويات الصفحة والتي سنقوم بإنشاءها في الخطوة التالية.

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

 

ملاحظة:
الدالةadd_options_page  تضيف خيارات القالب لقائمة الإعدادات ويمكنك بدلا عن ذلك إضافتها لقائمة أخرى -إن أردت- من خلال إحدى الدوال التالية

 

بناء لوحة التحكم في القالب:

الان صفحة الخيارات خالية لذلك سنقوم ببنائها بإستخدام دالة المناداة callback والتي عرفناها اعلاه

كما ذكرنا ان هذه الدالة مسئولة عن بناء مكونات لوحة التحكم وهذا ما قمنا به هنا  وأظن أن الكود مألوف لديك الى درجة كبيرة … وهذه بعض الأشياء التي ربما تحتاج الى توضيح:
– لاحظ أن الصفحة المسئولة عن التعامل مع الform والذي هو عبارة عن خيارات القالب التي سيدخلها المستخدم (سنضيف بقية الحقول لاحقا إن شاء الله) الصفحة المسئولة عن ذلك هي options.php وهذا ثابت في كل الإعدادات التي تعتمد على Options API كما هو الحال هنا حيث يتكفل الووردبريس بحفظ وإسترجاع الخيارات الخاصة بك.
– لإدراح زر الحفظ إستخدمناesc_attr_e('Save Changes')  حيث تقوم هذه بارجاع ترجمة القيمة الممررة لها بالإضافة الى التحقق منها.

 

مراجعة لما سبق:

حتى الان قمنا بالتعرف على الدوال المستخدمة لإنشاء صفحة الخيارات وكذلك بنائها وهي الدالة add_options_page التي تقوم فقط بإنشاء صفحة خيارات فارغة ثم إستخدمنا دالة المناداة Callback التي عرفناها في هذه الدالة لبناء الصفحة فعليا حيث أنشأنا صفحة تحتوي على بعض النصوص بالإضافة الى زر الحفظ لكن حتى الان لم نقم بإضافة الحقول التي ستستقبل القيم من المستخدم وهذا ما سنتعلمه في الدرس القادم إن شاء الله حيث سنتعمق أكثر في فهم الSetting API وذلك من خلال:

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

لا تنسى مشاركة المقال مع الأصدقاء ^^

 

الدرس الثاني: إنشاء لوحة تحكم لقالب الووردبريس 2

 

النشرة البريدية

ندعوك للإنضمام إلى 209 مشترك في قائمتنا البريدية

 

المراجع والمصادر:
http://www.sitepoint.com/wordpress-options-panel/

http://codex.wordpress.org/

11 تعليق على “إنشاء لوحة تحكم لقالب الووردبريس 1”

    1. امين شكرا لك أخي رضوان
      إن شاء الله ستكون السلسلة مكونة من ثلاثة دروس…
      فقط كن متابعا ^^

    1. شكرا محمد تسعدني متابعتك … وابشر بما يسرك ان شاء الله هنالك الكثير من الدروس القادمة ^^

  1. السلام عليكم . ألا يفترض أن تضع شرح تطبيقي بالفيديو بدل الشرح كتابيا لأن مسألة برمجة لوحة تحكم القالب هي نادرة على اليوتيوب مقارنة مع برمجة قوالب الوردبريس . تقبل مروري

    1. وعليكم السلام ورحمة الله
      نعم معك حق في ذلك وإن شاء الله نحاول عمل دورة كاملة في هذا الموضوع قريبا
      جزاك الله خير على الإهتمام والتنبيه

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

    1. عفوا اخي عمر… وانتظر الدرس الثاني قريبا جدا ان شاء الله.
      من الرائع أن يكون أول تعليق لك في موقعنا المتواضع واتمنى ان لا يكون الاخير
      شكرا على تفاعلك

التعليقات مغلقة