اذهب إلى المحتوى

كيف تنشئ صفحات لإضافتك في لوحة تحكم ووردبريس


هبة فريد

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

wordpress-plugins-admin-pages.thumb.png.

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

مكونات صفحة لوحة التحكم

هناك مكونين أو ثلاثة لصفحة لوحة التحكم، حسب الوظيفة التي تبني عليها:

  1. عنصر قائمة – رئيسي أو فرعي.
  2. محتوى الصفحة.
  3. برمجة وظيفة الاستمارات – إذا كانت مطلوبة.

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

القوائم الرئيسية والفرعية

هناك نوعين من عناصر القائمة: رئيسي وفرعي. وأرشح لك –كما يقول Wordpress Codex– أن تدرس ما إذا كانت إضافتك تحتاج إلى عنصر قائمة رئيسي فعلًا. حيث توجد العديد من الإضافات التي تضيف عناصر قائمة رئيسية، مما يؤدي إلى إزدحام لوحة التحكم.

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

wordtwit.thumb.png.27505ba06692ce8c89d88

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

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

إنشاء صفحة لوحة تحكم رئيسية

أولًا نبدأ بإنشاء عنصر قائمة عن طريق الدالة ()add_menu_page.  وترى هنا مثالًا لها مع الشرح:

add_action( 'admin_menu', 'my_admin_menu' );

function my_admin_menu() {
    add_menu_page( 'My Top Level Menu Example', 'Top Level Menu', 'manage_options', 'myplugin/myplugin-admin-page.php', 'myplguin_admin_page', 'dashicons-tickets', 6 );

}

تأخذ الدالة سبع معطيات:

  1. عنوان الصفحة، الذي يعرّف وسم العنوان ويظهر في عنوان  صفحة الانترنت في متصفح الانترنت وليس على الشاشة. 
  2. العنوان الذي يظهر في القائمة.
  3. الصلاحيات المطلوبة للدخول إلى القائمة، يمكن استخدامه لحصر الصفحة على المدراء، أو المحررين، أو المؤلفين.
  4. "الاسم اللطيف" أو slug للقائمة، وهو الذي يظهر في رابط الصفحة.
  5. الوظيفة، التي تتضمن محتوى الصفحة.
  6. رابط الأيقونة. ويقبل العديد من الصيغ. فإذا وُضع رابط صورة سوف تستخدم هذه الصورة. بإمكانك استخدام Dashicons، المبنية داخل ووردبريس، أو حتى استخدام ملف SVG.
  7. الترتيب في القائمة. وبما أن الوظيفة تختص بالمقالات، فقد اخترنا أن نضع عنصر القائمة بعدها مباشرة، أي في السادس. ويمكنك التعرف على ترتيب العناصر من Wordpress Codex.

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

function myplguin_admin_page(){
?>
    <div class="wrap">
        <h2>Welcome To My Plugin</h2>
    </div>
<?php
}

إنشاء صفحة لوحة تحكم فرعية

هناك بعض الوظائف التي يمكن استخدامها لإنشاء صفحات فرعية. والدالة العامة ()add_submenu_page تمكنك من إنشاء صفحات فرعية في أي مكان، ولكن كل الصفحات الرئيسية لها وظائفها الخاصة لإضافة صفحات فرعية إليها:

  • لإضافة صفحات فرعية إلى قسم المقالات استخدم add_posts_page.
  • لإضافة صفحات فرعية إلى قسم الصفحات استخدم add_pages_page.
  • لإضافة صفحات فرعية إلى قسم الوسائط استخدم add_media_page.
  • لإضافة صفحات فرعية إلى قسم الروابط استخدم add_links_page.
  • لإضافة صفحات فرعية إلى قسم التعليقات استخدم add_comments_page.
  • لإضافة صفحات فرعية إلى قسم المظهر استخدم add_theme_page.
  • لإضافة صفحات فرعية إلى قسم الإضافات استخدم add_plugin_page.
  • لإضافة صفحات فرعية إلى قسم المستخدمين استخدم add_users_page.
  • لإضافة صفحات فرعية إلى قسم الأدوات استخدم add_management_page.
  • لإضافة صفحات فرعية إلى قسم الإعدادات استخدم add_options_page.

كل من الوظائف السابقة تتبع نفس الصياغة:

add_comments_page( $page_title, $menu_title, $capability, $menu_slug, $function); 

والمُعطىات شبيهة بتلك المذكورة في المثال السابق. ربما تود إضافة عنصر فرعي إلى عنصر قائمتك الرئيسي، وفي هذه الحالة لن تكون الوظائف السابقة ذات نفع لك. بل ستستخدم الدالة ()add_submenu_page، وهنا سنضيف عنصر فرعي إلى قائمتنا الرئيسية التي أعددناها سابقًا:

add_action( 'admin_menu', 'my_admin_menu' );

function my_admin_menu() {
    add_menu_page( 'My Top Level Menu Example', 'Top Level Menu', 'manage_options', 'myplugin/myplugin-admin-page.php', 'myplguin_admin_page', 'dashicons-tickets', 6 );

    add_submenu_page( 'myplugin/myplugin-admin-page.php', 'My Sub Level Menu Example', 'Sub Level Menu', 'manage_options', 'myplugin/myplugin-admin-sub-page.php', 'myplguin_admin_sub_page' );
}

كما يمكنك أن ترى هذه الدالة مشابهة للدوال المذكورة سابقًا، باستثناء المُعطى الأول الذي يحدد الاسم اللطيف المستخدم في رابط الصفحة الرئيسية، وهو في حالتنا هذه:

 myplugin/myplugin-admin-page.php.

الختام

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

هل هناك أي شيء تريد إضافته إلى المقالة؟ أو تريد الاستفسار عنه؟ سنسعد بالرد عليكم في التعليقات.

مترجم بتصرف من مقال A Quick and Easy Guide To Creating WordPress Admin Pages لصاحبه Daniel Pataki.

حقوق الصورة البارزة: Car vector designed by Freepik.


تفاعل الأعضاء

أفضل التعليقات

لا توجد أية تعليقات بعد



انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أضف تعليق

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • أضف...