HTML ที่กำหนดเองสำหรับรายการเมนู

ปลั๊กอินเสริม WPML การนำทางใน CMS ช่วยให้คุณสร้างเมนูการนำทางที่สวยงามด้วย HTML ของคุณเองสำหรับรายการเมนู

เริ่มต้นด้วยตัวอย่าง สมมติว่าคุณต้องการ เพิ่มไอคอนและคำอธิบายสั้น ๆ ให้กับเมนูการนำทางด้านบน เหมือนในภาพต่อไปนี้

สิ่งที่เราจะทำคือเพิ่มฟิลด์ที่กำหนดเองลงในแต่ละหน้า ซึ่งจะเก็บไอคอนและข้อความคำอธิบายไว้ จากนั้น เราจะเชื่อมต่อกับฟังก์ชันเมนูและบอกให้ใช้ฟิลด์เหล่านี้ในรายการเมนู

ขั้นตอนที่ 1) เพิ่มฟิลด์ที่กำหนดเองลงในเพจ

เพื่อให้แต่ละหน้ามีไอคอนและคำอธิบายที่เป็นเอกลักษณ์ เราจะใช้ฟิลด์ที่กำหนดเอง

ขั้นตอนที่ 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 ใช้ฟังก์ชันนี้เพื่อสร้างรายการเมนู เราทำสิ่งนี้โดยเพิ่มบรรทัดต่อไปนี้ลงในไฟล์ function.php :

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

สิ่งนี้จะสั่งให้ WordPress เพิ่มฟังก์ชันที่เรียกว่า text_for_menu ให้กับ icl_nav_page_html ของ WPML เป็นตัวกรอง WP มาตรฐาน ดังนั้นคุณจึงสามารถเรียกได้หลายครั้งและเพิ่มช่องข้อมูลมากขึ้นเรื่อยๆ