Thêm Menu Descriptions vào WordPress Themes đang dùng

Hệ thống menu WordPress có tính năng tích hợp trong đó bạn có thể thêm mô tả với các mục menu. Tuy nhiên, tính năng này được ẩn theo mặc định. Ngay cả khi được bật, hiển thị chúng không được hỗ trợ mà không cần thêm một số mã. Hầu hết các chủ đề không được thiết kế với các 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 các chủ đề WordPress của bạn.
Lưu ý: Hướng dẫn này yêu cầu bạn phải có sự hiểu biết cơ bản 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 nghĩ rằng 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 tại sao 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 họ 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.

menu description

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

Đi đến Ngoại hình »Menu . Nhấp vào nút Tùy chọn màn hình ở góc trên bên phải của trang. Đánh dấu vào ô Mô tả .

menudescription

Điều này sẽ cho phép trường mô tả trong các mục menu của bạn. Như thế này:

addingmenudescription

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

Bước 2: Thêm Class walker:

Lớp Walker mở rộng lớp hiện có trong WordPress. Về cơ bản, nó chỉ cần thêm một dòng mã để hiển thị các mô tả mục menu. Thêm mã này trong functions.phptập tin 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 .= '
<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ị các menu. Chúng tôi cũng đã xuất bản một hướng dẫn cho người mới bắt đầu về cách thêm các menu điều hướng tùy chỉnh trong WordPress Themes . Hầu hết các chủ đề WordPress thêm menu trong header.php mẫu. Tuy nhiên, có thể chủ đề của bạn có thể đã sử dụng một số tệp mẫu khác để hiển thị các menu.

Những gì chúng ta cần làm bây giờ là tìm wp_nav_menu() chức năng trong chủ đề của bạn (rất có thể 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 ) ); ?>

Bước 4. Tạo css cho các mô tả menu

.menu-item {
border-left: 1px solid #ccc;
}
 
span.sub { 
font-style:italic;
font-size:small;
}

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *