إنشاء صفحة مخصصة في لوحة تحكم الموقع لإعداد وتخصيص قالب ووردبريس

إن لوحة تحكم أدمن موقع ووردبريس أو ما يعرف بالداشبورد هي أول صفحة تظهر للمستخدم بعد تسجيل الدخول لموقع ووردبريس .ومن خلال قائمتها الجانبية التي تملك عدة تبويبات يمكنك الانتقال إلى العديد من الصفحات المعدة لتخصيص كافة جوانب الموقع كالمظهر، والإضافات، والأعضاء، والإعدادات وغيرها..

وفي مقال اليوم سنتعلم كيف يمكنك كمطور وردبريس تخصيص لوحة تحكم الأدمن للموقع وإضافة صفحة أدمن مخصصة لها، كي تقدم من خلال هذه الصفح نماذج أو لوحات يمكن لصاحب الموقع من خلالها تخصيص القالب أو الإضافة التي تطورها بشكل مخصص، وتوفير معلومات وروابط هامة حولها للمستخدم من خلال واجهة برمجة تطبيقات الإعدادات Settings API، بدلًا من الذهاب لصفحة التخصيص المدمجة في نظام ووردبريس (WordPress Customizer).

لماذا تحتاج إلى تخصيص لوحة تحكم الأدمن لموقع ووردبريس؟

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

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

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

اقرأ أيضًا: تخصيص قالب ووردبريس برمجيًا من خلال الواجهة Theme Customization API

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

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

add_menu_page( string $page_title, string $menu_title, string $capability, string $menu_slug, callable $callback = '', string $icon_url="", int|float $position = null ): string

وإليك دلاله كل برامتر من هذه البرامترات

• page_title$ هذا البرامتر إجباري، وهو عبارة عن سلسلة نصية تمثل النص الذي سيتم عرضه في وسم عنوان الصفحة التي ستظهر عن اختيار هذه القائمة. يجب أن تمرر لهذا البرامتر عنوان معبر عن محتوى الصفحة مثل (تخصيص القالب) ويفضل أن يكون هذا العنوان قابل للترجمة من خلال تغليفه بأحد دوال الترجمة.
• menu_title$ هذا البرامتر إجباري، وهو عبارة عن سلسلة نصية تمثل النص الذي سيظهر كعنوان لعنصر القائمة ويمكن أن تمرر لها نفس قيمة الوسيط page_title$.
• capability$: برامتر إجباري، وهو سلسلة نصية تعبر عن الصلاحية التي يجب أن يملكها المستخدم لتظهر له هذه القائمة على لوحة التحكم. على سبيل المثال يمكن أن نمرر هنا القيمة manage_option.
• menu_slug$: برامتر إجباري وهو سلسلة نصية تمثل الاسم اللطيف أو عنوان URL الذي يشير إلى الصفحة المخصصة التي تظهر لنا عند النقر فوق هذه القائمة. وهذه السلسلة يجب أن تكون فريدة لصفحة القائمة ولا تتضمن سوى أحرف صغيرة وشرطات وشرطات سفلية.
• $callback: برامتر اختياري يمثل الدالة التي سيتم استدعاؤها لإظهار محتوى الصفحة المرتبط بالقائمة. على سبيل المثال، يمكن كتابة الكود التالي لإظهارعنوان يتضمن عبارة ترحيبية أعلى الصفحة

<?php
function my_admin_page_contents() {
?>
<h1> <?php esc_html_e( 'مرحبًا بك في صفحة تخصيص قالب OLA.', 'olasaleh'); ?> </h1>
<?php
}

• icon_url$: برامتر اختياري يمثل عنوان URL للأيقونة التي سيتم استخدامها لهذه القائمة. وهنا تجدر الإشارة بأن إمكانك استخدام ملف صورة أيقونة خاصة بك وتمرير عنوان URL لهذه الصورة، كما يمكنك استخدام أحد أيقونات ووردبريس الجاهزة وفي هذه الحالة كل ما عليك هو تمرير رمز الأيقونة المناسب كبرامتر لعنوان URL كما يمكنك استخدام ملف SVG مشفر بتنسيق base64.
• $position: برامتر اختياري يمكن من خلاله أن تمرر رقم يعبر عن موضع ظهور عنصر القائمة في لوحة التحكم. والصورة التالية تظهر تريب القوائم الافتراضية بحيث أن الرقم الأقل له ترتيب ظهور أعلى.

على سبيل المثال، في حال رغبت أن يظهر عنصر القائمة الخاص بك بعد تبويب المظهر وقبل تبويب إضافات عليك إعطاؤه رقم أولوية بين 61 و 64.

أين تتم كتابة كود إضافة عنصر قائمة للوحة التحكم؟

لعلك تتساءل ما هو المكان المناسب لاستدعاء الدالة add_menu_page وإليك الجواب.
يمكن أن تضيف كود تعريف عنصر قائمة مخصصة إما في ملف وظائف القالب functions.php، أو تضيفه في ملف مستقل بأي اسم مناسب وليكن ola-theme-options.php وتستدعيه في ملف وظائف القالب باستخدام الدالة require() أو ()need_once أو غيرها من الدوال المناسبة.

على سبيل المثال سنضيف في قالبنا المخصص عنصر قائمة باسم Ola Theme page ينقلنا لصفحة مخصصة لتخصيص قالب ووردبريس الخاص بك ونحدد موضع ظهوره بعد تبويب المظهر مباشرة كما يلي ونضيف لها حاليًا محتوى بسيط عبارة عن عنوان رئيسي وعنوان فرعي من خلال الدالة المخصصة my_admin_page_contents كما يلي.

//إضافة عنصر قائمة مخصص في لوحة التحكم
function add_theme_menu_item()
 {
	add_menu_page("Ola Theme page",
 	              "Ola Theme page", 
 	              "manage_options", 
 	              "ola-theme-page",
  	              "my_admin_page_contents", 
 	              null, 
 	              62);
 }

add_action("admin_menu", "add_theme_menu_item");

//إضافة صفحة مخصصة للقالب في لوحة التحكم
function my_admin_page_contents()
{
    ?>
	<div class="wrap">
	    <h1>Ola Theme page </h1>
	    <h2>هذا القالب مطور لأغراض تعليمة ضمن سلسلة تعلم تطوير القوالب المقدمة من ووردبريس بالعربية<br></h2>
	</div>
    <?php
}

ملاحظة:

يمكنك بدلاً من إضافة عنصر قائمة مستقل أن تضيف قائمة فرعية إلى أحد القوائم الموجودة أصلاً في لوحة تحكم الأدمن من خلال أحد دوال ووردبريس الجاهزة التي تستخدم بنفس أسلوب الدالة add_submenu_page مثل:

• الدالة add_posts_page التي تضيف قائمة فرعية تحت قائمة المقالات،
• الدالة add_pages_page التي تضيف قائمة فرعية تحت قائمة الصفحات
• الدالة add_media_page تضيف قائمة فرعية تحت قائمة الوسائط
• الدالة add_comments_page التي تضيف قائمة فرعية تحت قائمة التعليقات
• وما إلى ذلك..

والآن عند حفظ التغييرات على هذا الملف ستلاحظ ظهور عنصر قائمة جديد في لوحة التحكم باسم Ola Theme page كما تلاحظ في الصورة التالية،عند النقر عليه سينقلك للصفحة المخصصة لتخصيص القالب ضمن لوحة تحكم موقع ووردبريس الخاص بك.

الخطوة2. إضافة المحتوى المطلوب إلى صفحة تخصيص القالب المخصصة.

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

لتحقيق ذلك سوف نعتمد على واجهة برمجة تطبيقات إعدادات ووردبريس WordPress Settings API التي توفر للمطورين مجموعة من الدوال والإعدادات التي تمكنهم إمكانية تعديل قوالبهم وإضافاتهم وتخصيصها بسرعة ومرونة.

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

الدالة register_setting

تمكننا الدالة register_setting من تسجيل خيارنا الجديد الخاص باللوجو في قاعدة البيانات ولها الشكل العام التالي

register_setting( string $option_group, string $option_name, array $args = array() )

كما تلاحظ تقبل هذه الدالة ثلاث برامترات كالتالي:

• option_group$: برامتر اجباري يمثل سلسلة نصية تعبر عن مجموعة الخيارات المراد تسجيلها.
• $ option_name: برامتر اجباري يمثل سلسلة نصية تعبر عن اسم الخيار
• $args مصفوفة اختيارية يمكن أن نمرر من خلالها برامترات إضافية لوصف الخيارات المراد تسجيلها.

الدالة add_settings_section

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

add_settings_section( string $id, string $title, callable $callback, string $page, array $args = array() )

تقبل هذه الدالة خمس برامترات كالتالي:

• $id: برامتر اجباري يمثل معرف فريد للقسم
• $title: برامتر اجباري يمثل العنوان الذي سيتم عرضه فوق الحقول الموجودة في الصفحة
• $callback: برامتر اجباري يمثل دالة يمكنها التعامل مع عملية إنشاء القسم.
• $page: برامتر اجباري يمثل يحدد هذا البرامتر الاسم اللطيف أو slug-name لصفحة الإعدادات التي يجب نريد عرض هذا القسم فيها.
• $args: برامتر اختياري يمثل مصفوفة برامترات تستخدم لإنشاء ووصف قسم الإعدادات.

الدالة add_settings_field

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

add_settings_field( string $id, string $title, callable $callback, string $page, string $section = 'default', array $args = array() )

تأخذ هذه الدالة ستة برامترات كما يلي:

• $id: برامتر اجباري يمثل معرف فريد للقالب
• $title: برامتر اجباري يمثل عنوان أو اسم العنصر أو الحقل.
• $callback: برامتر اجباري يمثل دالة رد نداء تتعامل مع إنشاء عناصر الفورم من خلال كتابة أكواد HTML الضرورية.
• $page: برامتر اجباري يمثل صفحة الإعدادات التي يجب تطبيق هذا القسم عليها
• $section: برامتر اختياري يمثل اسم القسم الذي يتعلق به هذا الحقل
• $args: مصفوفة اختيارية لتمرير أي برامترات إضافية للدالة.

هناك دالتان هامتان بفضل استخدامهما أيضًا في صفحة تخصيص القالب لمزيد من الأمان لموقعك وهما:

الدالة settings_fields

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

الدالة do_settings_sections

تقوم هذه الدالة بالمرورأو الانتقال عبر كافة جميع الحقول التي أنشأتها في صفحتك المخصصة وتعرض القيم التي تم إدخالها في هذه الحقول، وهي تقبل أيضًا برامتر واحد يمثل id صفحة الخيارات الخاصة بك.

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

//إضافة عنصر قائمة مخصص في لوحة التحكم
function add_theme_menu_item()
 {
	add_menu_page("Ola Theme page",
 	              "Ola Theme page", 
 	              "manage_options", 
 	              "ola-theme-page",
  	              "my_admin_page_contents", 
 	              null, 
 	              62);
 }

add_action("admin_menu", "add_theme_menu_item");

//صفحة مخصصة للقالب في لوحة التحكم
function my_admin_page_contents()
{
    ?>
	    <div class="wrap">
	    <h1>Ola Theme page </h1>
			<h2>
				هذا القالب مطور لأغراض تعليمة ضمن سلسلة تعلم تطوير القوالب المقدمة من ووردبريس بالعربية
				<br>
			</h2>
	    <form method="post" action="options.php"  enctype="multipart/form-data" >
	        <?php
	            settings_fields("section");
	            do_settings_sections("theme-options");      
	            submit_button(); 
	        ?>          
	    </form>
		</div>
	<?php
}
function logo_display()
{
?>
        <input type="file" name="logo" /> 
       <h2> <?php echo get_option('logo'); ?> </h2>
   <?php
}

function handle_logo_upload($option)
{
  if(!empty($_FILES["logo"]["tmp_name"]))
  {
    $urls = wp_handle_upload($_FILES["logo"], array('test_form' => FALSE));
    $temp = $urls["url"];
    return $temp;  
  }
 
  return $option;
}
function display_theme_page_fields()
{
    add_settings_section("section", "إعدادات القالب", null, "theme-options");
    add_settings_field("logo", "لوجو الموقع", "logo_display", "theme-options", "section");  
    register_setting("section", "logo", "handle_logo_upload");
}
add_action("admin_init", "display_theme_page_fields");

ملاحظة:

قمنا بربط دالة رد النداء التي تتولى عملية تسجيل خيارات قالبنا بالخطاف admin_init الذي يحدث أويقع عند الانتقال إلى لوحة تحكم الموقع.
اقرأ المزيد: شرح الخطافات في ووردبريس WordPress Hooks وأهميتها لمطوري القوالب والإضافات

بعد حفظ التغييرات في الكود البرمجي لملف وظائف القالب functions.php، ستظهر لك صفحة تخصيص القالب بالشكل التالي:

بمجرد اختيار ملف والنقر فوق زر حفظ التغييرات وتحديث الصفحة سوف تحفظ قيمة الخيار داخل قاعدة البيانات (في الجدول wp_options)، كما أنها ستحفظ ضمن الملف options.php الذي يتضمن جميع الخيارات المخزنة في هذا الجدول.

يمكنك كتابة العنوان التالي في شريط العناوين (example.com/wp-admin/options.php) لترى قائمة مرتبة أبجديًا لجميع الخيارات المخزنة في قاعدة بيانات موقعك ومن بينها الخيار المخصص logo الذي أنشأناه في الكود السابق والذي يمكنك الحصول على قيمته من خلال استدعاء الدالة get_option بعد تمرير اسم الخيار الذي تريد استعادة قيمته كبرامتر للدالة.

الخطوة3: معالجة نموذج التخصيص لصفحة تخصيص القالب.

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

كما شرحنا في الفقرة السابقة بمجرد قيام المستخدم بإدخال قيمة صورة اللوجو في هذا النموذج، ويمكننا الحصول عليها باستخدام الدالة الجاهزة get_option. والتي يمكنك استدعاؤها من داخل أي ملف من ملفات نموذج القالب تحتاج فيه لعرض قيمة هذا الخيار.

على سبيل المثال لعرض هذا اللوجو في الواجهة الأمامية لموقع ووردبريس الخاص بنا، وتحديدًا في ترويسة الموقع نحرر ملف تمبلت ترويسة الموقع header.php والذي كان في السابق يعرض اللوجو المرفوع من محرر القالب المدمج في ووردبريس ونستعيض عنه بعرض اللوجو الذي رفعناه في صفحتنا المخصصة لإعداد القالب من خلال كتابة الكود التالي:

<!-- Website logo -->
		<div class="logo">
		 <a  class="logo" href="https://www.wpar.net/creating-theme-options-panel-in-wordpress/<?php echo esc_url( home_url("/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
       <img src="https://www.wpar.net/creating-theme-options-panel-in-wordpress/<?php echo get_option("logo');; ?>" alt="Logo" width="100" height="100" />
    </a>
	</div>

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

الخطوة4: تنسيق الصفحة المخصصة للوحة التحكم.

في حال رغبت بأن تنسق أي صفحة مخصصة أضفتها إلى لوحة تحكم الموقع بالشكل الذي تريده يمكنك كتابة أكواد تنسيق مخصصة لهذه الصفحة في ملف منفصل باسم admin-style.css على سبيل المثال، وتحفظه في مجلد باسم CSS ضمن مجلد القالب.

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

function load_custom_wp_admin_style($hook) {
	// Load only when ?page=ola-theme-page
	if( $hook != 'toplevel_page_mypluginname' ) {
		 return;
	}
wp_enqueue_style( 'custom_wp_admin_css', get_template_directory_uri() . '/css/admin-style.css',false,'1.0','all');
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );

سوف يقوم الكود أعلاه بتحميل الملف admin-styles.css فقط في الصفحة التي أنشأناها ola-theme-page. فشرط if في الكود أعلاه مهم لأننا لا نريد أن تؤثر التنسيقات التي نضيفها في ملفنا على جميع صفحات لوحة التحكم وتسبب تغييرات غير مرغوب بها على كامل صفحات لوحة التحكم.

الخلاصة

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