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

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

إطار العمل المستخدم 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

define( 'OPTIONS_FRAMEWORK_DIRECTORY', get_template_directory_uri() . '/options-framework/' );
require_once dirname( __FILE__ ) . '/options-framework/options-framework.php';

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

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

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

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

add_filter('optionsframework_menu','wparaby_change_theme_options_title');

function wparaby_change_theme_options_title($menu){
	$menu['menu_title'] = 'خيارات القالب';
	return $menu;
}

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

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

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

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