السبت، 31 أغسطس 2013

شرح تصميم قوالب ووردبريس -الجزء الثالث-


شرح تصميم قوالب ووردبريس -الجزء الثالث-
سنتعرف فى هذا الدرس -بإذن الله- على كيفية عمل القوائم، التي ذكرت فى الدرس السابق أننا سنقوم بعمل القوائم بشكل مميز يجهله الكثير من مطوريّ الووردبريس، فمنذ إصدار Wordpress 3.0.0 تم إضافة خاصية تُدعى Menus وهي خاصية للقوائم فى الووردبريس، كان قديمًا يقوم القالب بتحديد مكان عرض الصفحات، ومكان عرض التصنيفات، أما فكرة تلك الخاصية هي أن مستخدم الووردبريس بإمكانه أن يقوم بتحديد مكان كل تصنيف او صفحة فى مكان معين، فمثلاً يمكنه أن يضع التصنيفات جميعها فى قائمة وان يضع فى نفس القائمة صفحة أو أكثر، فبذلك تلك الخاصية أضافت المزيد من التحكم لمستخدم الووردبريس، ولكن معظم مطوّري ووردبريس يقومون بتحديد أماكن محدد للصفحات، وأماكن محددة للتصنيفات، ولكن لماذا نفعل ذلك إن كانت لدينا طريقة أفضل؟!
حسنًا، كيف نستطيع إضافة تلك الخاصية إلى القوائم الموجودة فى الهيدر مثلاً؟ .. فقط إتبع الخطوات الآتية:
1- قم بفتح ملف functions.php.
2- قم بكتابة دالة جديدة، سأسميها مثلاً register_my_menus، وبداخل تلك الدالة (التي ستقوم أنت بإنشاؤها) سنضع دالة جاهزة فى الووردبريس وهي دالة register_nav_menu، وهي تأخذ بارامترين، البارامتر الأول وهو الاسم الكودي للقائمة (أىّ الذي ستستخدمه أثناء التكويد للوصول إلى تلك القائمة)، والبارامتر الثاني وهو اسم القائمة الذي يظهر للمستخدم فى لوحة تحكم الووردبريس.
/*
Registering Menus
*/
function register_my_menus(){
register_nav_menu( 'pages-menu', 'Pages Menu');
register_nav_menu( 'top-menu', 'Top Menu');
}
فى المثال السابق قمت بتسجيل قائمتين لديّ فى القالب.
بعد ذلك سأقوم بإضافة الدالة التي قمت بكتابتها بداخل دالة تُدعى add_action كالتالي:
add_action('init','register_my_menus');
لاحظ أن البارامتر الثاني هو عبارة عن اسم الدالة التى قمت بإنشاءها، فبذلك يصبح الشكل الكامل لملف functions.php كالتالي:
/*
Defeining Constants
*/
define("THEMEROOT", get_stylesheet_directory_uri());
define("IMAGES", THEMEROOT."/images");

/*
Registering Menus
*/
function register_my_menus(){
register_nav_menu( 'pages-menu', 'Pages Menu');
register_nav_menu( 'top-menu', 'Top Menu');
}
add_action('init','register_my_menus');
الآن إنتهينا من ملف functions.php، وبذلك أيضًا انتهينا من تسجيل القوائم التي لدينا لدى الووردبريس، لكن تبّقى تحديد أماكن عرضها، ولذلك سنقوم بفتح ملف header.php، أو ملف footer.php وهما الملفات اللذان غالبًا ما ستكون القوائم بهما، ثم نقوم بتحديد أماكن تلك القوائم، فمثلاً انا لدي تلك القائمة فى ملف header.php:
<div id="pages-menu">
<ul>
<li><a href="#">index</a></li>
<li><a href="#">index</a></li>
<li><a href="#">index</a></li>
<li><a href="#">index</a></li>
</ul>
</div>
كل ما عليك الآن هو حذف قائمة الـUL وجميع ما بداخلها، ثم ستستبدلها بدالة تُدعى wp_nav_menu، تأخذ بارامتر واحد وهو عبارة عن مصفوفة بها Key واحد لقيمة واحدة، هذا الـKey هو كلمة theme_location، وتلك القيمة هي الاسم الكودي للقائمة التى تريد عرضها هنا ! ... فيصبح الكود كالتالي:
<div id="pages-menu">
<?php
wp_nav_menu(array("theme_location"=>"pages-menu"));
?>
</div>
ولعرض القائمة الثانية التي كانت تُدعى top-menu ببساطة سأقوم بفعل ما فعلته مع pages-menu بالظبط، حيث سيكون الكود كالتالي:
<div id="topmenu">
<?php
wp_nav_menu(array("theme_location"=>"top-menu"));
?>
</div>
الآن إذا قمت بتفعيل القالب من لوحة تحكم الووردبريس، ستجد أنه تم إضافة خاصية Menus فى لوحة التحكم، عندها يمكنك تحديد الصفحات والتصنيفات والروابط التي يتم عرضها فى كل قائمة، وسيتم عرض كل قائمة فى مكانها بدون أى مشاكل :)
فى الدرس القادم بإذن الله سنتحدث عن صفحة index.php وكيفية عرض التدوينات والقائمة الجانبية إلخ إلخ.

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

0 التعليقات:

إرسال تعليق