Bạn đã bao giờ vào một trang web và thấy rằng menu điều hướng luôn hiển thị ở trên cùng?

Về nguyên tắc, các menu điều hướng được hiển thị theo cách chúng biến mất khi cuộn trang. Các menu điều hướng luôn hiển thị nổi và như vậy cho dù người dùng cuộn xuống như thế nào.Cách tạo menu nổi trên wordpress 1

Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách dễ dàng tạo một menu nổi trên blog WordPress của bạn.

Nếu bạn chưa tạo một trang web hoặc một blog trên WordPress, chúng tôi mời bạn tham khảo Cách cài đặt một blog WordPress trong 7 bước sau đó, Làm thế nào để tìm kiếm, cài đặt và kích hoạt một chủ đề WordPress trên blog của bạn

Nếu nó được thực hiện, chúng ta hãy tìm hiểu những gì chúng ta quan tâm ngày hôm nay.

Phương pháp 1: Cách thêm Menu nổi trên WordPress bằng cách sử dụng Plugin

Phương pháp này dễ dàng hơn và nhanh chóng. Nếu bạn chưa thiết lập menu điều hướng, bạn có thể học cách làm.

Plugin wordpress menu dính

Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin " Thực đơn dính (hoặc Bất cứ điều gì!) Chúng tôi Di chuyển ". Nếu bạn không biết cách cài đặt plugin, bạn có thể đọc hướng dẫn của chúng tôi.

Sau khi kích hoạt, bạn phải truy cập " Cài đặt »Menu dính Để cấu hình các cài đặt của plugin này.

Plugin wordpress menu dính

Trước tiên, bạn cần nhập CSS ID của menu điều hướng mà bạn muốn thả nổi.

Bạn sẽ cần sử dụng công cụ "kiểm tra" của trình duyệt để tìm CSS được sử dụng.

Chuyển đến trang web của bạn và di chuyển chuột đến menu điều hướng. Sau đó, bạn phải nhấp chuột phải và chọn "Kiểm tra".

Đi xa hơn bằng cách khám phá Làm thế nào để tùy chỉnh một chủ đề WordPress với Pencil Vàng

Kiểm tra mã wordpress hướng dẫn

Điều này sẽ phân chia (theo mặc định) màn hình trình duyệt của bạn và bạn sẽ có thể thấy mã nguồn của menu điều hướng. Bạn phải tìm một dòng tương tự như thế này:

Trong ví dụ này, ID CSS của menu điều hướng của chúng tôi là " site Navigation '.

Hãy tiếp tục và nhập CSS ID của menu trong cài đặt plugin như sau “# site-navigation”.

Tùy chọn tiếp theo trong cài đặt plugin là đặt không gian giữa đầu màn hình và menu điều hướng nổi. Bạn có thể sử dụng cài đặt này nếu menu của bạn trùng lặp với một mục mà bạn không muốn ẩn. Nếu không, hãy bỏ qua cài đặt này.

Sau đó, bạn cần nhấp vào hộp ngay bên cạnh tùy chọn: "Kiểm tra Quản trị Thanh". Điều này cho phép plugin thêm một số không gian cho thanh công cụ WordPress được thêm vào cho người dùng đã đăng nhập.

Tùy chọn tiếp theo trong trang cài đặt cho phép bạn ẩn menu điều hướng nếu người dùng đang truy cập trang web của bạn bằng màn hình nhỏ hơn, chẳng hạn như thiết bị di động.

Bạn có thể kiểm tra cách hiển thị menu này trên thiết bị di động và máy tính bảng. Nếu không thích, bạn có thể thêm 780px vào tùy chọn này.

Khám phá quá Làm thế nào để tạo ra một thực đơn đáp ứng cho WordPress di động

Đừng quên nhấp vào " Lưu cài đặt Để lưu các thay đổi của bạn.

Bây giờ bạn có thể truy cập trang web của bạn để xem menu điều hướng nổi của bạn hoạt động.

Menu nổi của Wordpress

Phương pháp 2: Cách thêm menu điều hướng theo cách thủ công

Phương pháp này yêu cầu thêm mã CSS tùy chỉnh vào theme WordPress.

Trước hết, bạn phải truy cập " Giao diện> Tùy chỉnh Để khởi chạy Trình tùy chỉnh WordPress.

Tùy biến css wordpress bổ sung

Bấm vào CSS bổ sung Trong khung bên trái, sau đó thêm mã CSS này.

# Trang web chuyển hướng {background: #fff; height: 60px; z-index: 170; margin: 0 tự động; border-bottom: 1px #dadada rắn; width: 100%; position: fixed; top: 0; trái: 0; phải: 0; text-align: center; }

Thay thế " # Site Navigation Theo định danh của menu điều hướng của bạn và nhấp vào nút « Enregistrer '.

Bây giờ bạn có thể truy cập trang web của bạn để xem menu điều hướng nổi của bạn hoạt động.

Nếu menu điều hướng của bạn thường xuất hiện sau tiêu đề trang web, thì mã CSS này có thể chồng lên tiêu đề và tiêu đề của trang web.

Bạn có thể dễ dàng điều chỉnh điều này bằng cách thêm lề trên vùng tiêu đề của bạn bằng đoạn mã sau:

.site thương hiệu {margin-top: 60px; }

Đến đây kết thúc hướng dẫn của chúng tôi, bây giờ bạn sẽ có thể tạo hoặc thêm menu nổi trên trang web của mình.

Nếu bạn đang tìm kiếm khác plugin WordPress điều này sẽ cho phép bạn quản lý các menu, đây là một số plugin WordPress phí bảo hiểm dành riêng cho nhiệm vụ này. 

1. đơn Anh hùng

Plugin này cho phép bạn tạo menu WordPress tùy chỉnh của riêng mình trong một vài bước khá dễ dàng. Đặc biệt, nó cho phép bạn dễ dàng và trực quan tạo một menu WordPress trang nhã và chuyên nghiệp. Từ menu mega giàu tính năng phức tạp nhất đến menu thả xuống đơn giản nhất, Plugin WordPress HeroMenu thiết lập bất kỳ loại menu nào và khởi động và chạy trong vài phút.

Menu anh hùng đáp ứng wordpress mega menu plugin

Về các tính năng mà nó cung cấp trong số những thứ khác: chức năng hoàn hảo trên PC, máy tính bảng và điện thoại thông minh, dễ sử dụng, nội dung có thể tùy chỉnh, CSS tùy chỉnh để thêm các kiểu menu của riêng bạn, trình thiết kế menu lớn, trình duyệt được hỗ trợ: Chrome, Firefox, Safari , Opera, IE9 và nhiều hơn nữa.

Tải về | Bản demo | Web hosting

2. Menu Slick

Menu Slick không chỉ là một plugin trình đơn cho WordPress. Nó có thể được sử dụng để tạo nhiều cấp menu một cách không giới hạn, cũng như các thanh bên với nội dung phong phú, nhiều tùy chọn tạo kiểu và hiệu ứng động.

Menu trượt đáp ứng menu dọc wordpress

Mỗi cấp menu có thể tùy chỉnh với màu nền, hình ảnh, video, phông chữ tùy chỉnh và hơn thế nữa. Plugin này hoàn toàn đáp ứng và có hơn 45 hình ảnh động cho các mục menu.

Tải về | Bản demo | Web hosting

3. 8Degree Fly Menu

8Degree Fly Menu là một Plugin WordPress premium cho phép bạn thêm menu canvas vào trang web của mình để tạo cho nó một giao diện làm nổi bật thông tin của bạn một cách đơn giản. Nó sử dụng tính năng menu mặc định của WordPress để tạo menu.

8degree fly menu responsive off canvas menu plugin cho wordpress

Bạn sẽ có thể thêm các yếu tố bổ sung vào các mục menu mặc định, chẳng hạn như biểu tượng, khẩu hiệu menu, tiêu đề nhóm giả và mô tả dài. Nó cũng đi kèm với trình soạn thảo WYSIWYG để giúp bạn nắm bắt mô tả dài của bạn theo cách thân thiện với người dùng. Với trình chỉnh sửa này, bạn cũng có thể sử dụng mã ngắn.

Tải về | Bản demo | Web hosting

Các tài nguyên được đề xuất khác

Nếu bạn muốn đi xa hơn trong việc tạo hoặc tùy chỉnh các menu của blog hoặc trang web của bạn, chúng tôi cũng khuyên bạn nên tham khảo các liên kết dưới đây.

Kết luận

Đây ! Đó là nó cho hướng dẫn này, tôi hy vọng nó sẽ cho phép bạn thêm một menu nổi vào blog WordPress của mình. Chúng tôi mời bạn chia sẻ bài viết này với bạn bè của bạn trên các mạng xã hội của bạn.

Nếu bạn có bất kỳ đề nghị hoặc nhận xét, họ sẽ được chào đón. Và nếu bạn chưa quen với WordPress, tham khảo ý kiến ​​này tài nguyên.

...