วิธีเพิ่มคำอธิบายเมนูในธีม WordPress ของคุณ

---

ระบบเมนู WordPress มีคุณสมบัติในตัวที่คุณสามารถเพิ่มคำอธิบายพร้อมกับรายการเมนูได้ อย่างไรก็ตาม คุณลักษณะนี้จะถูกซ่อนไว้ตามค่าเริ่มต้น แม้ว่าจะเปิดใช้งานแล้วก็ตาม การแสดงข้อมูลเหล่านั้นจะไม่ได้รับการสนับสนุนโดยไม่ต้องเพิ่มโค้ดบางส่วน ธีมส่วนใหญ่ไม่ได้ออกแบบโดยคำนึงถึงคำอธิบายรายการเมนู ในบทความนี้ เราจะแสดงวิธีเปิดใช้งานคำอธิบายเมนูใน WordPress และวิธีเพิ่มคำอธิบายเมนูในธีม WordPress ของคุณ

หมายเหตุ: บทช่วยสอนนี้กำหนดให้คุณต้องมีความเข้าใจอย่างยุติธรรมเกี่ยวกับการพัฒนาธีม HTML, CSS และ WordPress

เมื่อใดและเพราะเหตุใดคุณจึงต้องการเพิ่มคำอธิบายเมนู

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

คำอธิบายสามารถใช้เพื่อบอกผู้เข้าชมว่าจะพบอะไรบ้างหากคลิกที่รายการเมนู คำอธิบายที่น่าสนใจจะดึงดูดผู้ใช้ให้คลิกเมนูมากขึ้น

ขั้นตอนที่ 1: เปิดคำอธิบายเมนู

ไปที่ ลักษณะที่ปรากฏ » เมนู คลิกที่ปุ่ม ตัวเลือกหน้าจอ ที่มุมขวาบนของหน้า ทำเครื่องหมายที่ช่อง คำอธิบาย

สิ่งนี้จะเปิดใช้งานฟิลด์คำอธิบายในรายการเมนูของคุณ แบบนี้:

ตอนนี้คุณสามารถเพิ่มคำอธิบายเมนูให้กับรายการในเมนู WordPress ของคุณได้ อย่างไรก็ตาม คำอธิบายเหล่านี้จะยังไม่ปรากฏในธีมของคุณ ในการแสดงคำอธิบายเมนู เราจะต้องเพิ่มโค้ดบางส่วน

ขั้นตอนที่ 2: เพิ่มคลาสวอล์คเกอร์:

คลาส Walker ขยายคลาสที่มีอยู่ใน WordPress โดยพื้นฐานแล้วเพียงเพิ่มบรรทัดโค้ดเพื่อแสดงคำอธิบายรายการเมนู เพิ่มโค้ดนี้ลงในไฟล์ functions.php ของธีมของคุณ

class Menu_With_Description extends Walker_Nav_Menu {
	function start_el(&$output, $item, $depth, $args) {
		global $wp_query;
		$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
		
		$class_names = $value = '';

		$classes = empty( $item->classes ) ? array() : (array) $item->classes;

		$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
		$class_names = ' class="' . esc_attr( $class_names ) . '"';

		$output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';

		$attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : '';
		$attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : '';
		$attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : '';
		$attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';

		$item_output = $args->before;
		$item_output .= '<a'. $attributes .'>';
		$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
		$item_output .= '<br /><span class="sub">' . $item->description . '</span>';
		$item_output .= '</a>';
		$item_output .= $args->after;

		$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
	}
}

ขั้นตอนที่ 3 เปิดใช้งาน Walker ใน wp_nav_menu

ธีม WordPress ใช้ฟังก์ชัน wp_nav_menu() เพื่อแสดงเมนู นอกจากนี้เรายังเผยแพร่บทช่วยสอนสำหรับผู้เริ่มต้นเกี่ยวกับวิธีเพิ่มเมนูการนำทางที่กำหนดเองในธีม WordPress ธีม WordPress ส่วนใหญ่จะเพิ่มเมนูในเทมเพลต header.php อย่างไรก็ตาม อาจเป็นไปได้ว่าธีมของคุณอาจใช้ไฟล์เทมเพลตอื่นเพื่อแสดงเมนู

สิ่งที่เราต้องทำตอนนี้คือค้นหาฟังก์ชัน wp_nav_menu() ในธีมของคุณ (ส่วนใหญ่จะอยู่ใน header.php) แล้วเปลี่ยนแบบนี้

<?php $walker = new Menu_With_Description; ?>

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'walker' => $walker ) ); ?>

ในบรรทัดแรก เราตั้งค่า $walker ให้ใช้คลาสวอล์คเกอร์ที่เรากำหนดไว้ก่อนหน้าใน functions.php ในโค้ดบรรทัดที่สอง อาร์กิวเมนต์พิเศษเดียวที่เราจำเป็นต้องเพิ่มลงในอาร์กิวเมนต์ wp_nav_menu ที่มีอยู่คือ 'walker' => $walker

ขั้นตอนที่ 4 จัดสไตล์คำอธิบาย

คลาสวอล์คเกอร์ที่เราเพิ่มไว้ก่อนหน้านี้จะแสดงคำอธิบายรายการในบรรทัดโค้ดนี้:

$item_output .= '<br /><span class="sub">' . $item->description . '</span>';

โค้ดด้านบนจะเพิ่มตัวแบ่งบรรทัดให้กับรายการเมนูโดยการเพิ่มแท็ก
จากนั้นล้อมคำอธิบายของคุณในช่วงที่มีคลาสย่อย แบบนี้:

<li id="menu-item-99" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.example.com/about/">About<br /><span class="sub">Who are we?</span></a></li>

หากต้องการเปลี่ยนลักษณะคำอธิบายที่ปรากฏบนเว็บไซต์ของคุณ คุณสามารถเพิ่ม CSS ในสไตล์ชีตของธีมของคุณได้ เรากำลังทดสอบสิ่งนี้เมื่อ Twenty Twelve และใช้ CSS นี้

.menu-item {
border-left: 1px solid #ccc;
}

span.sub { 
font-style:italic;
font-size:small;
}

เราหวังว่าคุณจะพบว่าบทความนี้มีประโยชน์ และจะช่วยให้คุณสร้างเมนูที่ดูดีพร้อมคำอธิบายเมนูในธีมของคุณ คำถาม? ทิ้งไว้ในความคิดเห็นด้านล่าง

แหล่งข้อมูลเพิ่มเติม

วิธีจัดสไตล์เมนูนำทาง WordPress

วิธีเพิ่มรายการที่กำหนดเองลงในเมนู WordPress เฉพาะ

เมนูของ Bill Erickson พร้อมคลาสคำอธิบาย