إنشاء لوحة تحكم للقالب بإستخدام Options framework

كما ذكرنا في الدرس الأخير من سلسلة دروس إنشاء لوحة تحكم لقالب الووردبريس فإن عملية إنشاء خيارات لوحة التحكم قد تصبح مملة وبطيئة نوعا ما عندما تكثر الخيارات التي تود إضافتها للوحة التحكم ولكن بحمد الله يوجد طريقة سهلة وسريعة لعمل لوحة التحكم وذلك بإستخدام إحدى الإطارات frameworks الجاهزة والتي تحول عملية إنشاء لوحة التحكم الى عملية بسيطة وهي عبارة عن تعريف مصفوفة بالخيارات التي تريدها في لوحة التحكم وسيقوم إطار العمل framework بتولي مهمة تحويل هذه المصفوفة الى لوحة تحكم للقالب ،،
امر مدهش صحيح،، وربما تسغرب أكثر إن أخبرتك أنك بنهاية هذا الدرس ستكون بإذن الله قادر على إنشاء لوحة تحكم مماثلة لهذه الصورة والتي لم يكلفني إنشاءها أكثر من 10 دقائق في 4 خطوات سنمر بها سويا في هذا الدرس إن شاء الله.

لوحة تحكم options framework

 

إطار العمل المستخدم Options framework

سيتم الشرح والتطبيق بإستخدام إطار العمل البسيط المسمى Options framework وهو من تطوير أصحاب موقع WP Theming وقد قمنا بإختياره لعدة أسباب منها:

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

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

الحقول المتوفرة في options framework

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

  1. حقل نص text.
  2. مساحة نص textarea.
  3. صناديق إختيار checkbox.
  4. إختيار select.
  5. رفع صورة upload.
  6. خلفية background (مجموعة من الخيارات لإختيار الخلفية).
  7. إختيار متعدد multicheck.
  8. إختيار لون color.
  9. الخطوط typography (مجموعة من الخيارات لإختيار التيبوغرافي).
  10. محرر editor (مثل محرر الووردبريس الإفتراضي).

 

وسنبدأ بشرح التطبيق من خلال القالب الإفتراضي لووردبريس وهو قالب Twenty Fourteen من خلال 4 خطوات:

1- تحميل Options framework theme:

يمكننا إستخدام options framework بطريقتين:
إستخدامه كإضافة لووردبريس
تضمينه في القالب وهي الطريقة التي سنستخدمها في هذا الدرس حيث نراها مناسبة أكثر.
ولعمل ذلك سنقوم بتحميل نسخة القالب من هنا  وقم بفك الضغط عنها.

 

2- نسخ الملفات التي نحتاجها الى قالب Twenty Fourteen:

بعد فك الضغط سينتج لديك قالب كامل يمكنك إستخدامه وتفعيله لتظهر لك لوحة تحكمه،، لكننا نريد إضافة لوحة التحكم الى قالب Twenty Fourteen لذلك سنقوم بنسخ ملفات إطار العمل options framework الى قالب Twenty Fourteen،،
قم بنسخ ملف options.php وكذلك مجلد inc ولكن بما أن قالب Twenty Fourteen يحتوي على مجلد بنفس الإسم لذلك قم بتغيير الإسم الى options-framework قبل نقله ثم قم بنقله مع ملف options.php الى قالب Twenty Fourteen.

 

3- ربط options framework في ملف functions

حتى الأن لدينا الملف المسئول من تعريف الخيارات options.php وكذلك المجلد الذي يحتوي على الملفات الخاصة بإطار العمل options-framework لكننا لم نقم بربطه حتى الأن وللقيام بذلك قم بنسخ الكود التالي الى ملف functions.php في قالب Twenty Fourteen

هذا الكود لم أجلبه من عندي ولكن قمنا بنسخه من ملف functions.php الموجود في القالب الذي قمت بتحميله في الخطوة 1، مع ملاحظة أننا قمنا بتغيير inc الى options-framework لتتناسب مع الإسم الجديد الذي أعطيناه لمجلد إطار العمل.

الأن إذا قمت بفتح لوحة التحكم ستجد أنه قد ظهرت لديك لوحة التحكم في قائمة المظهر بعنوان Theme Options، وبها مجموعة من الخيارات الإفتراضية التوضيحية (ديمو)،
لكن أظنك لا تريد إسم القائمة بالإنجليزية هكذا Theme Options كما أظنك تريد الخيارات باللغة العربية :)،، لا تقلق هذا ما سنقوم بعمله في الخطوة التالية.

 

4- تغيير الخيارات من ملف options.php

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

أما بالنسبة للخيارات فيمكننا التعديل على ملف options.php بحيث نبقي على الحقول التي نريدها ونغير اسماءها بما نريده،
لكن سنشير الى بعض النقاط لمساعدتك في فهم كيفية عمل إطار العمل:
الخيارات عبارة عن مصفوفة تحتوي على مجموعة من المصفوفات كل منها عبارة عن حقل field من الحقول التي نريد إضافتها في لوحة التحكم. لذلك ستلاحظ أن هنالك مصفوفة إسمها $options[] في ملف options.php وتم تعريف عناصرها كمجموعة من المصفوفات التي هي عبارة الحقول الظاهرة في لوحة التحكم.
كل خيار أو حقل من الخيارات (والذي هو عبارة عن مصفوفة) يحتوي على مجموعة من العناصر وهي:
name: وهو إسم الحقل الذي يظهر في لوحة التحكم.
desc: وهو وصف الحقل والذي يظهر أسفل الإسم بخط صغير.
id: وهو عبارة عن معرف الحقل والذي يمكنك إستخدامه لاحقا في القالب للحصول على قيمة الحقل التي أدخلها المستخدم من خلال الدالة of_get_option.
type: وهو نوع الحقل نفسه (مثلا نص، إختيار متعدد، رفع صورة، … الخ)
std: وهي القيمة الإفتراضية للحقل.
options: وهي خيارات الحقل في الحقول التي تدعم ذلك مثل حقول الإختيار المتعدد.
وعموما بعض هذه العناصر تكون إختيارية في بعض الحقول وبعضها إجباري في كل الحقول مثل id (ما عدا حقل العنوان).
الان أظن أنه بإصطحاب هذه المعلومات وبإلقاء نظرة على ملف options.php تستطيع إنشاء لوحة التحكم الخاصة بك بسهولة كبيرة.

 

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

  • كما رأينا فإن إطار العمل Options framework يسهل بصورة كبيرة عملية إنشاء لوحة التحكم خصوصا إن كان لديك بعض الحقول المتقدمة أو كانت الخيارات كثيرة نوعا ما. حيث يعمل إطار العمل كواجهة بينك وبين الواجهة البرمجية للإعدادات الخاصة بووردبريس Setting API.
  • في بعض الأحيان تحتاج الى حقول متقدمة أكثر عندئذ لا مانع أن تلقي نظرة على إطارات أخرى مثل التي ذكرناها في الدرس الأخير من دروس إنشاء لوحة تحكم لقالب ووردبريس ولا أظنك ستواجه صعوبة كبيرة في التأقلم مع أي إطار عمل بعد أن عرفت الفكرة العامة لها.
  • إطارات العمل ليست مقتصرة على إنشاء لوحة التحكم فقط بل بعضها تستطيع من خلاله إنشاء حقول ميتا متقدمة Meta boxes.

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

18 تعليق على “إنشاء لوحة تحكم للقالب بإستخدام Options framework”

  1. السلام عليكم
    ماشاء الله درس رائع جدا سهل واحببني في لوحة التحكم بعد ان كنت اكرهها من كثر الاكواد
    ولكن هل للدرس تكملة ؟؟

    وشكرا لكم

    1. وعليكم السلام ورحمة الله
      شكرا على اهتمامك
      حاولنا ان تكون جميع المعلومات المهمة في هذا الدرس وأظن أنها كافية لإنشاء لوحة التحكم، لكن إن كان هنالك شئ يحتاج الى توضيحه أرجو أن تذكره وسنحاول توضيحه إن شاء الله.

      1. السلام عليكم
        ادا قمت بانشاء ثلاث خيارات لادخال رابط
        فيسبوك
        تويتر
        يوتيوب
        وقمت باستدعائهم في الثيم
        وقام المستخدم فقط بادخال
        رباط واحد او اثنين
        هل سيظهر الرابط الثالث في الصفحة
        و كيف يمكن يمكن اخفائه عندما لا يوضع رابط

  2. لا اجد افضل من كلمة شكرا لك
    وجزاك الله خيرا على هذا الدرس الرائع
    الى الامام دائما …

  3. يعطيك العافيه
    لكن هذه الجزئية في انشاء قالب جديد وباسم جديد
    function optionsframework_option_name() {

    // This gets the theme name from the stylesheet
    $themename = wp_get_theme();
    $themename = preg_replace(“/\W/”, “_”, strtolower($themename) );
    $optionsframework_settings = get_option( ‘optionsframework’ );
    $optionsframework_settings[‘id’] = $themename;
    update_option( ‘optionsframework’, $optionsframework_settings );
    }
    ===
    يالليت توضيح فقط في تغيير هذا المتغير (themename)

    1. السلام عليكم
      بارك الله فيك اخي،،
      أظن ان هذه الدالة لتغيير الid الخاص بخيارات الoptionframework الى اسم القالب،
      والمتغيير الذي تتحدث عنه هواسم القالب حيث كما ترى يتم جلبه من خلال الدالة wp_grt_theme.
      اتمنى ان اكون فهمت ما تريد ان يوضح.

  4. شكرا علي الشرح لكن نحتاج للدورة هذه علي اليوتوب الشرح بالفيديو أحسن

    1. عفوا، وشكرا لك على تعليقك
      قريبا إن شاء الله نقوم بإعداد دورة بالفيديو.

  5. السلام عليكم
    أنا عندي موقع صممته بلغة الـ HTML التي تعلمتها بجهد. أعاني من إدارة الموقع لأني أحتاج لعدة خطوات لإنجاز الجداول والإحالات ووجدت أن قالب ووردبرس مناسب تماماً. كيف أستطيع أن أنقل الموقع للقالب؟ أرجو أن تساعدني.

  6. السلام عليكم ..
    شكرا جزيلاااااا على مجهودك الرائع والمفيد…
    اخي اريد ان اسال كبف اعمل جدول يعرض من قاعدة البيانات وفيه كمان رابط التنزيل الكتاب زي مافي الموقع ده http://www.namthajah.com/?page_id=2463 والدي استعمل فيه اضافة tablepress وكيف تعمل

  7. جزاك الله كل خير اشكرك جدا على ماتقدمه استفدت بعض النقاط الهامه التى كنت اجهلها

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