Thêm ký tự html ngăn cách giữa các menu (separator) trong wordpress

Ở bài trước chúng ta đã học cách thêm liên kết trang chủ home vào menu, bài hôm này mình sẽ hướng dẫn cách thêm ký tự ngăn cách giữa các menu wp_nav_menu. Có rất nhiều cách để làm điều này để ra kết quả như ý muốn. Cách đơn giản là dùng css để trang trí nav menu.
Ví dụ: thêm gạch ngang giữa các mục menu ngang thì dùng border.

ul.menu li{
	border-right:1px solid gray;
}

Cách này không hiệu quả nếu bạn muốn xen kẽ các menu bởi thẻ html, như:

Vậy để làm điều này bạn sử dụng Walker_Nav_Menu, wp_nav_menu có thuộc tính ‘walker’ là đối tượng lớp cho phép thay đổi nội dung của menu một cách linh hoạt.

wp_nav_menu(array(
	...
	'walker'=>new themeslug_walker_nav_menu()
	...
));

Class themeslug_walker_nav_menu kế thừa base class Walker_Nav_Menu để render menu item. Copy đoạn code dưới đây vào functions.php

class themeslug_walker_nav_menu extends Walker_Nav_Menu {
    private $counter=0;
    // add classes to ul sub-menus
    function start_el(&$output, $item, $depth, $args) {
        $item->classes[]='nav'.(++$this->counter);
        if(//$this->counter && 
        isset($args->ex_separator))
        {
            $output .= $args->ex_separator;
        }
        parent::start_el($output, $item, $depth, $args);
    }
    function end_el(&$output, $item, $depth, $args){
        parent::end_el($output, $item, $depth, $args);
    }
}

Trong lớp có hàm start_el và end_el dùng để hiển thị (render) menu, chỉ có end_el để hiển thị menu cuối. Với menu cuối thì không cần thêm ký tự ngăn cách. Chú ý: đối tượng $args lưu thông số của nav menu. Chuỗi html ngăn cách sẽ lưu vào tham số ex_separator.

wp_nav_menu(array(
	...
	'ex_separator'=>'

‘ … ));

Ví dụ để lấy thuộc tính ‘ex_separator’.

$args->ex_separator

Chép đoạn code dưới đây vào header.php để hiển thị menu với ký tự ngăn cách.

wp_nav_menu(array(
			'theme_location'=>'menu1',
			'container_class'=>'',
			'container'=>false,
			'menu_class'=>'menu',
			'menu_id'=>'menu',
			'walker'=>new themeslug_walker_nav_menu(),
			'ex_separator'=>'

‘ ));

Chúc bạn học tốt.

Nếu bạn thấy bài viết này hữu ích, hãy chia sẻ với bạn bè bằng cách nhấn nút chia sẻ ở bên dưới. Theo dõi chúng tôi trên Twitter và Facebook