Hoàng Web

Thiết Kế Website WordPress

  • Kho giao diện
  • Dịch Vụ
    • Tăng tốc độ WordPress
    • Tối ưu website WordPress
    • Thiết kế website WordPress
    • Viết plugin WordPress
    • Sửa lỗi nâng cấp website
  • Bảng giá
  • Quy trình làm việc
  • Giới thiệu
  • Liên Lạc
Trang chủ » Wordpress » Thêm ký tự html ngăn cách giữa các menu (separator) trong wordpress

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

Thứ Năm, 03/07/2014 by Hoàng Quách

  • shares
  • Facebook
  • Facebook Messenger
  • Gmail
  • Viber
  • Skype

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

Hãy cho mình biết suy nghĩ của bạn trong phần bình luận bên dưới bài viết này. Hãy theo dõi kênh chia sẻ kiến thức WordPress của Hoangweb trên Twitter và Facebook

  • shares
  • Facebook
  • Facebook Messenger
  • Gmail
  • Viber
  • Skype

Bài viết liên quan:

  1. Lấy menu item wp_nav_menu trang hiện tại trong wordpress
  2. Tùy biến hiển thị menus trong wordpress – Nav Menu Walker
  3. Cách thêm class vào menu wp_nav_menu trong WordPress
  4. Tạo menu trong wordpress
  5. Thêm liên kết trang chủ vào nav menu trong wordpress
  6. Hiển thị wordpress submenu dưới parent menu – wp_nav_menu
  7. Hướng dẫn tạo Responsive Menu cho WordPress Mobile
  8. WordPress Web service XML-RPC
  9. Hướng dẫn sử dụng child theme trong wordpress
  10. [WordPress] Tùy biến thanh admin menu

Chuyên mục: Wordpress Tìm kiếm: nav menu

Đăng ký nhận bài viết mới

Vui lòng điền chính xác email ở bên dưới để nhận thông báo bài viết mới.

Bạn đã đăng ký thành công!

Lỗi! hãy làm lại.

thông tin của bạn được 100% bảo mật...

Tôi giúp gì cho bạn?

Nhận bài viết mới

Vui lòng điền chính xác email ở bên dưới để nhận thông báo bài viết mới.

Cám ơn bạn đã đăng ký.

Lỗi, hãy làm lại

thông tin của bạn được 100% bảo mật...

HOÀNG WEB

Địa chỉ: Tây Sơn, Phường Quang Trung, Quận Đống Đa, Hà Nội

Hotline: 0987 342 124 (8h:00 – 21h:00)

Email: [email protected]

Website: www.hoangweb.com

KẾT NỐI VỚI TÔI

  • Facebook
  • Snapchat

SẢN PHẨM

  • Plugin Auto-Sync Google Shopping cho WooCommerce
  • Phần mềm chặn click ảo
  • WP2Speed.com – Tăng tốc WordPress

LIÊN KẾT

  • Hướng dẫn thanh toán
  • Chính sách hoàn tiền
  • Trung tâm hỗ trợ

Copyright © 2021 | All rights reserved | HOANG WEB
Mọi hình thức sao chép nội dung trên website này mà chưa được sự đồng ý đều là trái phép.