Cách thêm mô tả menu trong chủ đề WordPress của bạn

---

Hệ thống menu WordPress có tính năng tích hợp nơi bạn có thể thêm mô tả với các mục menu. Tuy nhiên, tính năng này bị ẩn theo mặc định. Ngay cả khi được bật, việc hiển thị chúng không được hỗ trợ nếu không thêm một số mã. Hầu hết các chủ đề không được thiết kế có tính đến mô tả mục menu. Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách bật mô tả menu trong WordPress và cách thêm mô tả menu trong chủ đề WordPress của bạn.

Lưu ý: Hướng dẫn này yêu cầu bạn phải có hiểu biết tương đối về phát triển chủ đề HTML, CSS và WordPress.

Khi nào và tại sao bạn muốn thêm mô tả menu?

Một số người dùng cho rằng việc thêm mô tả menu sẽ giúp ích cho SEO. Tuy nhiên, chúng tôi nghĩ rằng lý do chính khiến bạn muốn sử dụng chúng là để cung cấp trải nghiệm người dùng tốt hơn trên trang web của bạn.

Mô tả có thể được sử dụng để cho khách truy cập biết họ sẽ tìm thấy gì nếu nhấp vào một mục menu. Một mô tả hấp dẫn sẽ thu hút nhiều người dùng nhấp vào menu hơn.

Bước 1: Bật Menu Mô tả

Đi tới Giao diện » Menu. Nhấp vào nút Tùy chọn màn hình ở góc trên cùng bên phải của trang. Chọn hộp Mô tả.

Điều này sẽ kích hoạt trường mô tả trong các mục menu của bạn. Như thế này:

Bây giờ bạn có thể thêm mô tả menu vào các mục trong menu WordPress của mình. Tuy nhiên, những mô tả này sẽ chưa xuất hiện trong chủ đề của bạn. Để hiển thị mô tả menu, chúng ta sẽ phải thêm một số mã.

Bước 2: Thêm lớp walker:

Lớp Walker mở rộng lớp hiện có trong WordPress. Về cơ bản, nó chỉ thêm một dòng mã để hiển thị mô tả mục menu. Thêm mã này vào tệp functions.php của chủ đề của bạn.

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 );
	}
}

Bước 3. Kích hoạt Walker trong wp_nav_menu

Các chủ đề WordPress sử dụng hàm wp_nav_menu() để hiển thị menu. Chúng tôi cũng đã xuất bản hướng dẫn dành cho người mới bắt đầu về cách thêm menu điều hướng tùy chỉnh trong Chủ đề WordPress. Hầu hết các chủ đề WordPress đều thêm menu trong mẫu header.php. Tuy nhiên, có thể chủ đề của bạn đã sử dụng một số tệp mẫu khác để hiển thị menu.

Những gì chúng ta cần làm bây giờ là tìm hàm wp_nav_menu() trong chủ đề của bạn (rất có thể là trong header.php) và thay đổi nó như thế này.

<?php $walker = new Menu_With_Description; ?>

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

Ở dòng đầu tiên, chúng ta đặt $walker để sử dụng lớp walker mà chúng ta đã xác định trước đó trong functions.php. Trong dòng mã thứ hai, đối số bổ sung duy nhất mà chúng ta cần thêm vào các đối số wp_nav_menu hiện có là 'walker' => $walker.

Bước 4. Tạo kiểu cho phần mô tả

Lớp walker mà chúng tôi đã thêm trước đó hiển thị mô tả mục ở dòng mã này:

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

Đoạn mã trên thêm ngắt dòng vào mục menu bằng cách thêm thẻ
rồi gói các mô tả của bạn trong một khoảng với lớp phụ. Như thế này:

<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>

Để thay đổi cách mô tả xuất hiện trên trang web của bạn, bạn có thể thêm CSS vào biểu định kiểu của chủ đề. Chúng tôi đã thử nghiệm điều này trên Twenty Twelve và sử dụng css này.

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

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

Chúng tôi hy vọng rằng bạn sẽ thấy bài viết này hữu ích và nó sẽ giúp bạn tạo các menu trông bắt mắt với các mô tả menu trong chủ đề của bạn. Câu hỏi? Để lại chúng trong các ý kiến dưới đây.

Tài nguyên bổ sung

Cách tạo kiểu cho menu điều hướng WordPress

Cách thêm các mục tùy chỉnh vào các menu WordPress cụ thể

Thực đơn của Bill Erickson với Lớp Mô tả