الأخبار

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

wptutorial

تعريف

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

mm

مشاهدة مثال

مميزات

  • قائمة أفقية متفرعة لأكبر قدر ممكن من التفرعات
  • يمكنك تغيير شكل والتحكم بكل عنصر من القائمة مثل عنصر الرابط الذي يمثل نفس الصفحة يكون للصفحة الرئيسية مخصص وللصفحة الفرعية مخصص آخر, كذالك عنصر القائمة بأجمعها وعناصر القائمة الرئيسية وعناصر القائمة الفرعية
  • يمكن وضع سهم أو إزالته في العناصر المتفرعة
  • يتم إظهار في الموقع صفحات محدده وهي القائمة الرئيسية فقط ولا يتم عرض غيرها رغم انه يمكنك إنشاء صفحات كثيرة أخرى غير القائمة الرئيسية, ويتم أختيار صفحات القائمة الرئيسية ببساطة للمستخدم
  • ظهور الروابط الفرعية بشكل أنيق ومريح يمكن التحكم في سرعتها ومن الممكن تغيير التأثير بحكم أنه يعتمد على مكتبة 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 مثلاً لكي تكون بينهما دون الحاجة لإعادة ترتيب جميع الصفحات واحده تلوا الأخرى وهذه الخطوة الذكية يمكنك الاستفادة منها في اي شيء آخر مستقبلاً لأي نظام.

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

mm1

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

mm2

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

mm3

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

mm4

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

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

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

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 في مجلد القالب قبل الكود التالي أضف التالي:

[html highlight=”9″]




[/html]

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

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

[html]




[/html]

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

[php highlight=”121″]

$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(‘~

  • ]+)>([^~’,
  • ’ . ‘$5’ . ‘’, $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(‘~

  • if ((is_home() && $blogID) || $MenuSettings[‘menu.activeID’])
    $output = preg_replace(‘~

  • return $output;
    }

    function menu_items()
    {

    global $MenuSettings;
    if (true === $MenuSettings[‘menu.showHome’] && ‘page’ != get_option(‘show_on_front’))
    echo ‘

  • ’ . $MenuSettings[‘menu.homeCaption’] . ‘
  • ’;
    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 كما في الصورة التالية:

    mm5

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

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

    mm

    ‫30 تعليقات

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

    2. الله يعطيك الف عافيه
      طبقت الي قلته بس حصل لي مشكله وهي

      Parse error: syntax error, unexpected T_FUNCTION, expecting ‘)’ in /Applications/XAMPP/xamppfiles/htdocs/wordpress/wp-content/themes/classic/functions.php on line 27

      والي هي هالسطر مع العلم اني مركب الووردبريس على سيرفر محلي انتظر الحل يالغلا والله يعطيك الصحه والعافيه
      function menu_activeID‭($‬pages‭){

    3. على فكره اخوي عبد الملك لما اضيف الكود الاخير في ملف الفونكشنز قفلة التاج حقت البي اتش بي تتغير بعد ماحفظتها لاني يوم اضفتها تحت نهاية كود البي اتش بي الاول عطتني لون احمر وصارت القفله زي كذا ؟‮>‬
      علامة استفهام مره صغيره مب مثل اول ما اظفتها ..

    4. شكرا لمجهودك اخ عبدالملك :) …. الحقيقة اني كل مرة افكر اكثر باستخدام JQuery

      @ nasser
      يوجد قوس ناقص في السطر 27 في ملف functions.php يبدو انك نسيته مع التعديل

    5. الله يعطيك العافيه ياكودر بالفعل انحلت وراحت هالمشكله
      ولكن للآسف لم تظهر القائمه بشكل افقي ومنسدله مع ان كلمة الرئيسيه ذهبت للآعلى واصبحت استفهامات ؟؟ واتوقع المشكله من الترميز في محرر النصوص الي استخدمه او من المتصفح نفسه ولكن لايهمك لان الاهم الان كيف اطلع القائمه بنفس هالشكل :(

      هل يجب التعديل على القالب الاصلي ؟؟ الافتراضي ؟؟ لان التعديل تم على قالب الكلاسيك

      وراح اجرب اللحين على الافتراضي

      بس ياليت تشوفون لنا حل بسالفة الترميز بالمحررات .. لان جهازي ماك واستخدم برنامج كود وبرنامج ايزي كليبس الي عليه شرح دورة php

    6. السلام عليكم.
      تعودنا على دروسك المميزة و المفيدة.
      ملاحظة: القائمة تواجه بعض الخلل مع متصفح اكسبلورر 7 .

      و شكراً.

    7. بالنسبة للاستفهامات مثل ما قلت هذي من الترميز فافتح الملفات اللي عدلت عليها بالمفكره وسو لها حفظ باسم واختر UTF-8 إذا ماضبطت حاول تشيك على كل ملفات القالب انها بنفس الترميز,

      بالنسبة للشكل اهم شي انك مشيت بنفس الخطوات بالضبط وبتمعن لأنها طويله وحاول ايضاً أنك تضيف نفس الأقسام وتضيف عليها الخاصية الإضافية group-pages

    8. بصراحه تعبت من العصر وانا اشتغل عليه والحين ١١ وعندي كلاس بكرى الله يعينا نقزر هالغربه على تعلم هالبرمجه

      بعد ماسويت كل الي طلبته وسويت المجموعات

      صارت تفتح الصفح بس يطلع في الهيدر من فوق هالخطاء البرمجي

      Warning: preg_replace() [function.preg-replace]: Compilation failed: unmatched parentheses at offset 5 in /Applications/XAMPP/xamppfiles/htdocs/wordpress/wp-content/themes/default/functions.php on line 520

      Warning: preg_replace() [function.preg-replace]: Compilation failed: unmatched parentheses at offset 5 in /Applications/XAMPP/xamppfiles/htdocs/wordpress/wp-content/themes/default/functions.php on line 520

      Warning: preg_replace() [function.preg-replace]: Compilation failed: unmatched parentheses at offset 5 in /Applications/XAMPP/xamppfiles/htdocs/wordpress/wp-content/themes/default/functions.php on line 520

      Warning: preg_replace() [function.preg-replace]: Compilation failed: unmatched parentheses at offset 5 in /Applications/XAMPP/xamppfiles/htdocs/wordpress/wp-content/themes/default/functions.php on line 520

      Warning: preg_replace() [function.preg-replace]: Compilation failed: unmatched parentheses at offset 5 in /Applications/XAMPP/xamppfiles/htdocs/wordpress/wp-content/themes/default/functions.php on line 520

      Warning: preg_replace() [function.preg-replace]: Compilation failed: unmatched parentheses at offset 5 in /Applications/XAMPP/xamppfiles/htdocs/wordpress/wp-content/themes/default/functions.php on line 520

      وهي ست خانات على السته الرئيسيه الي طلبت نسويها
      مع ان القائمه مازالت يسار ولم تتغير

      انتظر الحل منك يالغالي لاني ملزم تطلع معي حرام هالوقت كله واطلع مفلس خخخخ

    9. شكراً للجميع

      أخوي قياسي اذكر اني جربتها وكانت سليمه لكن الأن ظهرت, راح اشوف وش المشكله ان شاء الله وتنحل

      خالد العولقي شكراً لك يالغالي اسعدتني كثيراً

      ناصر ارسل لي ملف functions.php على بريدي althari22 على الجيميل راح اعلمك ان شاء الله وين المشكله إذا حصلتها.

      تحيتي

    10. مرحبا أخوي ناصر جربت الملف اللي اعطيتنياه ما طلع لي الخطأ اللي ذكرته انت لكن ما اشتغلت القائمة بشكل سليم لابد أن هناك مشكله في الأكواد التي عدلتها, هذا ملف functions.php اللي شغالي عندي تقدر تحمله وتركبه عندك وتجربه

      https://www.tech-wd.com/wd/wp-content/uploads/2009/11/f.zip

      تحيتي لك

    11. اخوي عبد الملك اتوقع اني عرفت المشكله بس بعد هالسؤال راح اتآكد

      الله يحيك بخصوص ملف js قلت نحطه في مجلد js انا مالقيت هالمجلد في ملف القالب ؟ هل انشاء ملف ؟ واحطه فيه او ان هناك المفروض مجلد بهالمسمى وداخله ملفات سكربت اخرى ؟

      وايضاً نفس السؤال لـ css لم اجد لها مجلد

      بنتظر ردك لاني حذفت المدونه وركبتها من جديد وقاعدة بيانات جديده بس هالمره قاعدة البيانات غيرت ترميزها الى utf8_grneral_ci مدري ينفع هالترميز وهل تتوقع كان هو سبب المشكله ؟

      انتظر ردك يالغالي وتعليقك

    12. A fun topic merits comment. I’m sure that you should create more on this particular issue, it could not really be considered a taboo area however generally people are not enough to chat on such topics. To the next. Cheers

    13. Thanks for your write-up. I also feel that laptop computers have grown to be more and more popular these days, and now tend to be the only kind of computer utilised in a household. The reason is that at the same time they are becoming more and more reasonably priced, their processing power is growing to the point where there’re as effective as desktop computers from just a few years ago.

    14. [درس] قائمة أفقية متفرعة متقدمة بسيطة الاستخدام | عالم التقنية Very nice post. I just stumbled upon your weblog and wished to say that I’ve truly enjoyed surfing around your blog posts. In any case I’ll be subscribing to your rss feed and I hope you write again soon!

    15. Great post at [درس] قائمة أفقية متفرعة متقدمة بسيطة الاستخدام | عالم التقنية. I was checking continuously this blog and I’m impressed! Very useful information specially the last part :) I care for such information much. I was looking for this certain info for a very long time. Thank you and best of luck.

    16. [درس] قائمة أفقية متفرعة متقدمة بسيطة الاستخدام | عالم التقنية I was suggested this website by my cousin. I’m not sure whether this post is written by him as nobody else know such detailed about my problem. You’re amazing! Thanks! your article about [درس] قائمة أفقية متفرعة متقدمة بسيطة الاستخدام | عالم التقنيةBest Regards Justin

    17. هناك بعض النقاط المثيرة للاهتمام في الوقت المناسب في هذه المقالة ولكنني لا أعرف ما إذا كنت ترى كل منهم إلى مركز القلب. هناك بعض الصحة ولكن سيكون لي رأي الانتظار حتى انني اتطلع الى أكثر من ذلك. المادة جيدة ، وذلك بفضل ونريد المزيد! وأضاف http://www.tech-wd.com لفيدبورنر فضلا

    18. http://www.tech-wd.com بلوق هو الأمثل لمن يريد أن يعرف عن هذا الموضوع. كنت أعرف الكثير من الثابت تقريبا في أن يجادل معك (وليس أن أنا حقا تريد… هاها). كنت وضعت بالتأكيد جديدة تدور حول موضوع thats تم مكتوبة حول لسنوات. أشياء عظيمة ، عظيمة للتو!

    19. I am not sure where you are getting your information, but good topic. I needs to spend some time learning much more or understanding more. Thanks for excellent information I was looking for this [درس] قائمة أفقية متفرعة متقدمة بسيطة الاستخدام | عالم التقنية for my mission.

    اترك تعليقاً

    لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

    زر الذهاب إلى الأعلى