[درس] قائمة أفقية متفرعة متقدمة بسيطة الاستخدام

تعريف

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

مشاهدة مثال

مميزات

• قائمة أفقية متفرعة لأكبر قدر ممكن من التفرعات
• يمكنك تغيير شكل والتحكم بكل عنصر من القائمة مثل عنصر الرابط الذي يمثل نفس الصفحة يكون للصفحة الرئيسية مخصص وللصفحة الفرعية مخصص آخر, كذالك عنصر القائمة بأجمعها وعناصر القائمة الرئيسية وعناصر القائمة الفرعية
• يمكن وضع سهم أو إزالته في العناصر المتفرعة
• يتم إظهار في الموقع صفحات محدده وهي القائمة الرئيسية فقط ولا يتم عرض غيرها رغم انه يمكنك إنشاء صفحات كثيرة أخرى غير القائمة الرئيسية, ويتم أختيار صفحات القائمة الرئيسية ببساطة للمستخدم
• ظهور الروابط الفرعية بشكل أنيق ومريح يمكن التحكم في سرعتها ومن الممكن تغيير التأثير بحكم أنه يعتمد على مكتبة jQuery
• لا تحتاج إلى إضافات خارجية نهائياً
• بسيطة ليمكنك التحكم فيها بشكل أفضل بتجميلها حسب رغبتك
• تعمل بشكل ممتاز على المتصفحات (فايرفوكس, إكسبلورر 8, كروم, سفاري …)
  تم اكتشاف مشكله في متصفح إكسبلورر 7 و 6 جاري محاولة حلها أو تغيير الطريقة أرجوا لمن لديه الخبرة الكافية المساعدة فيها المشكلة باللغة العربية فقط حيث باللغة الإنجليزي لا تظهر هذه المشكلة, أو يمكنك إستخدام القائمة بتفرع واحد فقط لدعمها للمتصفح إكسبلورر 6 و 7.
  

إنشاء الصفحات

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

• الرئيسية
• خدمات [ترتيب 10]
  • تصميم [ترتيب 10]
  • برمجة [ترتيب 20]
  • استضافة [ترتيب 30]
• حلول [ترتيب 20]
  • نظام الطلبات [ترتيب 10]
  • نظام الدعم الفني [ترتيب 20]
  • نظام مدرستي [ترتيب 30]
• الدعم الفني [ترتيب 30]
  • المبيعات [ترتيب 10]
  • دخول عميل [ترتيب 20]
• من نحن [ترتيب 40]
  • نبذة عن الشركة [ترتيب 10]
  • إنجازاتنا [ترتيب 20]
  • أخبارنا [ترتيب 30]
• أطلب الأن [ترتيب 50]
• اتصل بنا [ترتيب 60]

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

لإنشاء الصفحات بلا شك يجب ان نكون في صفحة لوحة تحكم الووردبريس ستجد بالقائمة اليمنى قائمة (صفحات) ثم تحتها (تحرير) ثم (أضف صفحات جديدة) فنحن في حالتنا الأن نريد إضافة صفحة جديدة فنضغط على (أضف صفحات جديدة):

طبعاً نبدأ بإضافة اسم الصفحة الجديدة فنبدأ بسم الله بكتابة (خدمات) ثم نقوم بالضغط على (نشر التدوينة) ونكمل إضافة جميع الروابط “الرئيسية فقط” بالطريقة التالية:

بعدما قمنا بإضافة الصفحات الرئيسية نقوم بإضافة الصفحات الفرعية مثل ( تصميم, برمجة, استضافة) بالطريقة التالية:

الأن أنشأنا القائمة السابقة كصفحات في الووردبريس:

ننتقل إلى الخطوة التالية

إظهار الصفحات في الموقع

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

1- قم بتحميل ملف jqueryslidemenu.js وانقله في مجلد القالب داخل مجلد js كالتالي:
http://websiteADDRESS.com/wordpressFOLDER/wp-content/themes/themeFOLDER/js/هنا
أفتح الملف وقم بتغيير themeFOLDER إلى اسم القالب الخاص بك المكتوبة داخل الملف الموجودة في السطر الأول (مرتين)

2- قم بتحميل ملف jqueryslidemenu.css وقم بنقله في مجلد القالب داخل مجلد css كالتالي:
http://websiteADDRESS.com/wordpressFOLDER/wp-content/themes/themeFOLDER/css/هنا

3- قم بتحميل الصورتين التاليتين down.gif و right.gif إلى مجلد القالب داخل مجلد images كالتالي:
http://websiteADDRESS.com/wordpressFOLDER/wp-content/themes/themeFOLDER/images/هنا

في ملف header.php في مجلد القالب قبل الكود التالي </head> أضف التالي:

[html highlight=”9″]<link rel="stylesheet" type="text/css" href="<?php bloginfo(‘stylesheet_directory’); ?>/css/jqueryslidemenu.css" />

<!–[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]–>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo(‘stylesheet_directory’); ?>/js/jqueryslidemenu.js"></script>[/html]

قمنا بكل بساطة باستدعاء الملفين الذي تم تحميلهما قبل قليل ولكن في السطر رقم 9 المحدد في الأعلى ستجد أنه استدعينا ملف jQuery يمكنك تحميله من المكتبة أو استدعائه بهذه الطريقة فلا بأس وأجد الأفضل استدعائه بهذه الطريقة التي تتيح سهولة في تحميل الملف بشكل أكبر, عموماً ما أردت أن أوضحه هو أن استدعاء الجيكويري يجب أن لا يكون قبله او بعده اي استدعاء مره أخرى له لذالك احرص بأن يكون لديك استدعاء واحد للجيكويري وكذالك نقطه أخرى يجب عليك الإنتباه لها في موقعك دائماً لأنها قد تواجهك هذه المشكلة وهي بأنه هناك مكتبات أخرى غير jQuery تضرب معه لوجود اكواد متضاربه مثل Prototype وغيرها لذالك إما أنك أن تحرص بأن تقوم باستخدام جيكويري في موقعك بالكامل او هناك طريقة أخرى وهي استبدال أكواد جيكويري بـ jQuery() بدل $() كما هو موضح هنا في النقطة رقم 11, ولكن بشكل عام عند الاستخدام فهي ممتازة.

بعد إضافة الكود السابق داخل head نقوم الأن بإضافة هذا الكود في أي مكان تريده داخل body طبعاً أفضل مكان إما فوق الهيدر او تحته:

[html]<div id="myslidemenu">
<ul>
<?php menu_items(); ?>
</ul>
</div>[/html]

الأن نقوم بإضافة هذا الكود في نهاية ملف functions.php من ملفات القالب بعد ?> مباشرة:

[php highlight=”121″]<?php

$MenuSettings = array(
‘menu.showSubmenus’ => true,
‘menu.homeCaption’ => "الرئيسية",
‘menu.showHome’ => true,
);

function menu_activeID($pages){
$result = null;
foreach ($pages as $index => $page){
if (is_page($page->ID)) {
$result = $page;
break;
}
}
while($result && $result->post_parent) {
foreach ($pages as $parent){
if ($parent->ID == $result->post_parent) {
$result = $parent;
breack;
}
}
}
return ($result ? $result->ID : null);
}

function menu_blogID($pages){
$result = null;
if(!’page’ == get_option(‘show_on_front’)) return $result;
$blogID = get_option(‘page_for_posts’);
if (!$blogID) return $result;
foreach ($pages as $index => $page){
if ($page->ID == $blogID) {
$result = $page;
break;
}
}
while($result && $result->post_parent) {
foreach ($pages as $parent){
if ($parent->ID == $result->post_parent) {
$result = $parent;
breack;
}
}
}
return ($result ? $result->ID : null);
}

function menu_process_front(&$pages){
if (‘page’ != get_option(‘show_on_front’)) return;
$frontID = get_option(‘page_on_front’);
if (!$frontID) return;
foreach ($pages as $index => $page)
if($page->ID == $frontID) {
unset($pages[$index]);
$page->post_parent = ‘0’;
$page->menu_order = ‘0’;
array_unshift($pages, $page);
break;
}
}

function menu_topIDs($pages){
$result = array();
foreach ($pages as $index => $page)
if (!$page->post_parent) $result[]=$page->ID;
return $result;
}

function menu_remove_subitems(&$pages){
foreach ($pages as $index => $page)
if ($page->post_parent) unset($pages[$index]);
}

function menu_header_page_list_filter($pages)
{
global $MenuSettings;
menu_process_front($pages);
$MenuSettings[‘menu.topItemIDs’] = menu_topIDs($pages);
$MenuSettings[‘menu.activeID’] = menu_activeID($pages);
$MenuSettings[‘menu.blogID’] = menu_blogID($pages);
if (!$MenuSettings[‘menu.showSubmenus’]) menu_remove_subitems($pages);
return $pages;
}

function menu_list_pages_filter($output)
{
global $MenuSettings;
$pref =’page-item-‘;
if($MenuSettings[‘menu.topItemIDs’])
foreach($MenuSettings[‘menu.topItemIDs’] as $id){
$output = preg_replace(‘~<li]*)\b(‘ . $pref . $id . ‘)\b([^"]*)"><a ([^>]+)>([^<]*)</a>~’,
‘<li><a $4>’ . ‘$5’ . ‘</a>’, $output, 1);
}

$frontID = null;
$blogID = null;
if(‘page’ == get_option(‘show_on_front’)) {
$frontID = get_option(‘page_on_front’);
$blogID = $MenuSettings[‘menu.blogID’];
}
if ($frontID)
$output = preg_replace(‘~<li]*)\b(‘ . $pref . $frontID . ‘)\b([^"]*)"><a href="([^"]*)" ~’,
‘<li><a href="’. get_option(‘home’) .’" ‘, $output, 1);

if ((is_home() && $blogID) || $MenuSettings[‘menu.activeID’])
$output = preg_replace(‘~<li]*)\b(‘ . $pref . (is_home() ? $blogID : $MenuSettings[‘menu.activeID’]) . ‘)\b([^"]*)"><a ~’,
‘<li><a ‘, $output, 1);
return $output;
}

function menu_items()
{

global $MenuSettings;
if (true === $MenuSettings[‘menu.showHome’] && ‘page’ != get_option(‘show_on_front’))
echo ‘<li’ . (is_home() ? ” : ”) . ‘><a href="’ . get_option(‘home’) . ‘">’ . $MenuSettings[‘menu.homeCaption’] . ‘</a></li>’;
add_action(‘get_pages’, ‘menu_header_page_list_filter’);
add_action(‘wp_list_pages’, ‘menu_list_pages_filter’);
wp_list_pages(‘title_li=&meta_key=group-pages&meta_value=mainmenu’);
remove_action(‘wp_list_pages’, ‘menu_list_pages_filter’);
remove_action(‘get_pages’, ‘menu_header_page_list_filter’);
}

add_filter(‘comments_template’, ‘legacy_comments’);
function legacy_comments($file) {
if(!function_exists(‘wp_list_comments’)) : // WP 2.7-only check
$file = TEMPLATEPATH.’/legacy.comments.php’;
endif;
return $file;
}

?>[/php]

الأن كل شيء انتهى ماعدا نقطة أخيرة لاحظ في السطر 121 المحدد في الأعلى ستجد هذا الكود wp_list_pages(‘title_li=&meta_key=group-pages&meta_value=mainmenu’); هذا الكود هو الذي يستدعي صفحات الموقع المضافة لو أضفناه هكذا wp_list_pages(‘title_li=’); لكان جلب لنا جميع الصفحات دون تخصيص ولكننا أضفنا عليه خاصيتين وهي meta_key و meta_value وهما خاصيتان إضافيتان يمكن إضافتهما في نفس الصفحه لتحديد القائمة الرئيسية احببت ان اضيفها هنا لأبسّط الطريقة السابقة بإضافة الصفحات للمبتدئين لكن بإمكانك إضافتها مباشرة منذ البداية دون اللجوء لتحريرها مره أخرى الأن وهي ان تذهب وتحرر صفحات القائمة الرئيسية فقط التي تريد أن تظهر لك في القائمة العلوية وتضيف في مربع (خصائص إضافية) الاسم group-pages والقيمة mainmenu كما في الصورة التالية:

أخيراً إذا كنت تريد إزالة صور الأسهم ستجد ملاحظة في ملف jqueryslidemenu.js قم بتنفيذه.

وهكذا تكون قد انتهيت من إعداد هذه القائمة, أرجوا أن تفيدكم كما أفادتني وسوف تفيدني دائماً في المستقبل بإذن الله, وشكراً لكم.