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

دعنا نبدأ بمثال. لنفترض أنك تريد إضافة أيقونات وشرح مختصر في أعلى قوائم التنقل كما في هذا المثال:

Items in drop down menus have icons and description

Items in drop down menus have icons and description

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

الخطوة 1) إضافة الحقول المخصصة إلى الصفحات

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

Icon and Description custom fields added to a page

Icon and Description custom fields added to a page

الخطوة 2) بناء وظيفة السمة التي ستنتج عنها عناصر القائمة

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

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

إليك وظيفتي:

function text_for_menu($page_id, $menu_level){
  $ret = '';
  $icon = get_post_meta($page_id,'icon',true);
  $description = get_post_meta($page_id,'Description',true);
  if($menu_level==0){
    if ($icon) $ret .= '<img width="24" height="24" style="vertical-align: middle; margin:0 5px 0 5px;" src="'.$icon.'" alt="icon" />';
    $ret .= get_the_title($page_id);
    $ret .= '<br /><span>'.$description.'</span>';
  } else {
    if ($icon) $ret .= '<img width="16" height="16" style="vertical-align: middle; margin:0 5px 0 0;" src="'.$icon.'" alt="icon" />';
    $ret .= get_the_title($page_id);
  }
  return $ret;
}

ما تقوم به:

  1. الحصول على محتويات الحقول المخصصة المسماة ‘icon’ و ‘Description’: get_post_meta($page_id,’icon’,true);
  2. التحقق من مستوى القائمة الذي تنتمي إليه العناصر. عناصر القائمة العلوية ‘0’ وعناصر القائمة المنسدلة ‘1’.
  3. مع عناصر القائمة العلوية، يقوم بإضافة أيقونة بأبعاد 24×24، ثم عنوان الصفحة، ثم الوصف.
  4. بالنسبة لعناصر القائمة المنسدلة، يقوم بإضافة أيقونة بأبعاد 16×16، ثم عنوان الصفحة.

الخطوة 3) إدخال الوظيفة في WPML

وأخيرًا، نقوم بإخبار WPML بأن عليه استخدام هذه الوظيفة في إنشاء عناصر القائمة. نقوم بذلك من خلال إضافة هذا السطر إلى functions.php:

add_filter('icl_nav_page_html', 'text_for_menu', 1, 2);

ما يفعله ذلك هو توجيه WordPress إلى إضافة وظيفة تسمى text_for_menu إلى icl_nav_page_html الخاصة بـ WPML. وهي مرشح WP قياسي، ومن ثم يمكنك استدعاؤها عدة مرات وإضافة المزيد والمزيد من الحقول.