Bỏ qua đến nội dung chính

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

Divi: chủ đề WordPress dễ sử dụng nhất

Divi: Chủ đề WordPress tốt nhất mọi thời đại!

hơn Tải xuống 701.000, Divi là chủ đề WordPress phổ biến nhất trên thế giới. Nó là hoàn chỉnh, dễ sử dụng và đi kèm với hơn 62 mẫu miễn phí. [Khuyến nghị]

Bạn có muốn tạo một menu di động đáp ứng trên blog WordPress của mình không?

Người dùng di động ngày nay đông hơn người dùng PC để bàn. Việc thêm menu di động đáp ứng giúp người dùng điều hướng trang web của bạn dễ dàng hơn.

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 đáp ứng trên WordPress.

Nhưng trước đây, nếu bạn chưa bao giờ cài đặt WordPress khám phá Làm thế nào để cài đặt một bước 7 blog WordPress et 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 

Sau đó trở lại lý do tại sao chúng ta ở đây.

Cách tạo menu wordpress di động đáp ứng

Ở đây, nó sẽ là một câu hỏi đi sâu bằng cách hiển thị cho bạn cả phương pháp với một plugin cho người mới bắt đầu và phương pháp mã hóa cho người dùng nâng cao.

Phương pháp đầu tiên: Tạo một menu di động với plugin WordPress

Phương pháp này dễ dàng hơn và được khuyến nghị cho người mới bắt đầu vì nó không yêu cầu bất kỳ kỹ năng mã hóa đặc biệt nào.

Trong phương pháp này, chúng tôi sẽ tạo một menu (với biểu tượng bánh hamburger) trình chiếu trên màn hình di động.

Plugin trình đơn đáp ứng WordPress

Điều đầu tiên bạn cần làm là cài đặt và kích hoạt Plugin trình đơn đáp ứng WordPress . Để biết thêm chi tiết, xem hướng dẫn của chúng tôi về cách cài đặt plugin WordPress .

Sau khi kích hoạt plugin, plugin sẽ thêm một mục mới trên menu, có tiêu đề " Thực đơn Responsive ". Nhấp vào nó sẽ đưa bạn đến trang cài đặt plugin WordPress.

Plugin menu bảng điều khiển đáp ứng WordPress

Trước tiên, bạn phải nhập kích thước mà từ đó menu di động sẽ xuất hiện. Mặc định là 800px, sẽ hoạt động cho hầu hết các trang web.

Sau đó, bạn phải chọn menu bạn muốn sử dụng trên thiết bị di động.

Tùy chọn cuối cùng trên màn hình cho phép bạn cung cấp một lớp CSS cho menu của mình. Điều này sẽ cho phép plugin ẩn menu không phản hồi của bạn trên màn hình nhỏ.

Đừng quên nhấp vào « cập nhật tùy chọn Để lưu các thiết lập của bạn.

Chúng tôi cũng đề nghị bạn khám phá Các plugin 10 WordPress để tạo menu trên blog của bạn

Dễ dàng tạo trang web của bạn với Elementor

Elementor cho phép bạn dễ dàng tạo ra bất kỳ thiết kế trang web nào với một cái nhìn chuyên nghiệp. Ngừng trả tiền đắt cho những gì bạn có thể tự làm. [Miễn phí]

Giờ đây, bạn có thể truy cập trang web của mình và thay đổi kích thước màn hình trình duyệt của mình để xem menu đáp ứng đang hoạt động.

Site-in-action-menu-nhạy-to-mobile

Plugin « Thực đơn Responsive »Cung cấp nhiều tùy chọn khác cho phép bạn sửa đổi hành vi và giao diện của menu đáp ứng. Bạn có thể khám phá các tùy chọn này trên trang cài đặt của plugin và điều chỉnh nó nếu cần.

Phương pháp 2: Cách thêm menu di động theo cách thủ công

Một trong những phương pháp phổ biến nhất được sử dụng để hiển thị menu trên màn hình di động là sử dụng đòn bẩy.

Phương pháp này yêu cầu bạn thêm mã tùy chỉnh vào các tệp WordPress của mình.

Trong một trong những hướng dẫn trước đây của chúng tôi, chúng tôi chỉ cho bạn Cách tạo plugin WordPress.

Trước tiên, bạn cần mở một trình soạn thảo văn bản như Notepad và dán mã này.

(function () {nav var = document.getEuityById ('site-navigation'), nút, menu; if (! nav) {return;} button = nav.getElementsByTagName ('button') [0]; menu = nav. getElementsByTagName ('ul') [0]; if (nút) {return;} // Nút ẩn nếu menu bị thiếu hoặc trống nếu (! menu ||! menu.childNodes.length) {button.style.display = 'none'; return;} button.onclick = function () {if (-1 === menu. className.indexOf ('nav-menu')) {menu. className = 'nav-menu';} if (- 1! == button. ClassName.indexOf ('toggled-on')) -on ',' ');} other {button. className + =' toggled-on '; menu. className + =' toggled-on ';}};}) (jQuery);

Bây giờ bạn phải lưu tệp này với tên " navigation.js Trên bàn của bạn.

Sau đó, bạn cần mở ứng dụng khách FTP để tải tệp này xuống vị trí "/ wp-content / Themes / your-theme / js /" trên trang web WordPress của bạn.

Thay thế biểu thức " bạn-chủ đề Với tên của thư mục chủ đề WordPress hiện tại của bạn. Nếu thư mục chủ đề của bạn không có thư mục js thì bạn cần tạo một thư mục.

Sau khi tải lên tệp JavaScript, bước tiếp theo là đảm bảo rằng trang web WordPress của bạn sẽ tải các tệp JavaScript. Bạn sẽ cần thêm mã sau vào " functions.php Chủ đề WordPress của bạn.

Khám phá điều gì đó khác Bạn có thể làm gì với tệp tin.php.

 wp_enqueue_script ( 'bpc_togglemenu' get_template_directory_uri () '/js/navigation.js', array (' jquery '), 20160909', true.);

Bây giờ chúng ta phải thêm menu điều hướng trong chủ đề WordPress của chúng tôi. Thông thường menu điều hướng được thêm vào tập tin " header.php Chủ đề WordPress của bạn.

Thực đơn 'primary', 'menu_class' => 'nav-menu')); ?>

Chúng tôi giả định rằng vị trí menu được xác định bởi chủ đề WordPress của bạn được gọi là " chính ". Nếu không, hãy sử dụng vị trí được xác định bởi chủ đề WordPress của bạn.

Khám phá cũng của chúng tôi 5 plugin WordPress để tạo biểu mẫu đăng ký

Bước cuối cùng là thêm một số CSS để menu của chúng ta sử dụng các lớp CSS phù hợp để chuyển đổi khi xem trên thiết bị di động.

Bạn đang tìm kiếm các plugin và plugin WordPress tốt nhất?

Tải xuống các plugin và WordPress chủ đề tốt nhất trên Envato và dễ dàng tạo trang web của bạn. Đã tải xuống nhiều hơn 49.720.000. [ĐỘC QUYỀN]

/ * Menu điều hướng * / .main-navigation {margin-top: 24px; margin-top: 1.714285714rem; text-align: center; } .main-navigation li {margin-top: 24px; margin-top: 1.714285714rem; font-size: 12px; kích thước phông chữ: 0.857142857rem; chiều cao dòng: 1.42857143; } .main-navigation a {color: # 5e5e5e; } .main-navigation a: hover, .main-navigation a: focus {color: # 21759b; } .main-navigation ul.nav-menu, .main-navigation div.nav-menu> ul {display: none; } .main-navigation ul.nav-menu.toggled-on, .menu-toggle {display: inline-block; } // CSS để sử dụng trên thiết bị di động màn hình @media và (min-width: 600px) {.main-navigation ul.nav-menu, .main-navigation div.nav-menu> ul {border-bottom: 1px solid # viền; border-top: 1px solid #ededed; display: inline-block! important; text-align: left; chiều rộng: 100%; } .main-navigation ul {margin: 0; text-thụt lề: 0; } .main-navigation li a, .main-navigation li {display: inline-block; văn bản-trang trí: không có; } .main-navigation li a {border-bottom: 0; màu: # 6a6a6a; chiều cao dòng: 3.692307692; text-biến đổi: chữ hoa; khoảng trắng: nowrap; } .main-navigation li a: hover, .main-navigation li a: focus {color: # 000; } .main-navigation li {margin: 0 40px 0 0; lề: 0 2.857142857rem 0 0; chức vụ: thân nhân; } .main-navigation li ul {margin: 0; đệm: 0; vị trí: tuyệt đối; top: 100%; z-index: 1; chiều cao: 1px; chiều rộng: 1px; tràn: ẩn; clip: direct (1px, 1px, 1px, 1px); } .main-navigation li ul ul {top: 0; trái: 100%; } .main-navigation ul li: hover> ul, .main-navigation ul li: focus> ul, .main-navigation .focus> ul {border-left: 0; clip: kế thừa; tràn: kế thừa; chiều cao: kế thừa; width: kế thừa; } .main-navigation li ul li a {background: #efefef; border-bottom: 1px solid #ededed; hiển thị: khối; font-size: 11px; font-size: 0.785714286rem; chiều cao dòng: 2.181818182; đệm: 8px 10px; đệm: 0.571428571rem 0.714285714rem; chiều rộng: 180px; chiều rộng: 12.85714286rem; khoảng trắng: bình thường; } .main-navigation li ul li a: hover, .main-navigation li ul li a: focus {background: # e3e3e3; màu: # 444; } .main-navigation .current-menu-item> a, .main-navigation .current-menu-origin> a, .main-navigation .current_page_item> a, .main-navigation .current_page_ancestor> a {color: # 636363; font-weight: bold; } .menu-toggle {display: none; }}

Giờ đây, bạn có thể truy cập trang web của mình và thay đổi kích thước màn hình trình duyệt để xem menu đáp ứng của bạn có bật tắt hay không.

Rocking-menu-wordpress-tutorial

Khám phá thêm một số plugin WordPress cao cấp  

Bạn có thể sử dụng các plugin WordPress khác để mang lại cái nhìn hiện đại và tối ưu hóa độ bám của blog hoặc trang web của bạn.

Chúng tôi cung cấp cho bạn ở đây một số plugin WordPress cao cấp sẽ giúp bạn làm điều đó.

1. UberMenu

UberMenu là một plugin WordPress dành riêng cho việc tạo ra một megamenu có thể tùy chỉnh cao, đáp ứng và có thể truy cập được cho người dùng. Nó hoạt động sau khi cài đặt mà không cần cấu hình đặc biệt.

Ubermenu wordpress mega menu plugin

Đây là một plugin dễ sử dụng, nhưng đủ mạnh để tạo bố cục menu lớn có thể tùy chỉnh cao và sáng tạo.

Xem thêm của chúng tôi 9 plugin WordPress để tạo lưới giá trên blog

Bạn sẽ tìm thấy trong số những thứ khác: 3 mẫu menu, bố cục đáp ứng đầy đủ, khả năng tương thích với các thiết bị di động (iPhone, iPad, Android), hỗ trợ cảm ứng, v.v.

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

2. LMM

Liquida Mega Menu còn được gọi là LMM là một plugin WordPress được thiết kế cho người dùng và nhà phát triển. Nó có giao diện đơn giản và trực quan, tích hợp với bảng điều khiển WP, cho phép bạn tạo và tùy chỉnh số lượng mega menu không giới hạn mà không cần bất kỳ kỹ năng lập trình nào.

Menu mega đáp ứng Lmm wordpress dựa trên bootstrap

Nó đi kèm với hàng tá tính năng, cho dù dành cho người dùng thông thường hay cao cấp. Như các chức năng, nó cung cấp trong số những chức năng khác: tích hợp tự động và thủ công, hỗ trợ cho nhiều trang, chăm sóc các chủ đề của trẻ em, phong cách hoàn toàn có thể tùy chỉnh cho menu, vị trí menu có thể tùy chỉnh, menu dính, v.v.

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

3. 8Degree Fly Menu

8Degree Fly Menu là một plugin WordPress cao cấp cho phép bạn thêm một menu canvas trên trang web của mình để tạo cho nó một giao diện nổi bật và dễ dàng thông tin của bạn. Nó sử dụng chức 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.

Đọc cũng: 10 plugin WordPress để tối ưu hóa sidebars và tiêu đề dính

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.

Dễ dàng tạo Cửa hàng trực tuyến của bạn

Tải xuống miễn phí WooCommerce, các plugin thương mại điện tử tốt nhất để bán các sản phẩm vật lý và kỹ thuật số của bạn trên WordPress. [Đề xuất]

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

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

Chúng tôi cũng mời bạn tham khảo các tài nguyên dưới đây để đi xa hơn trong việc kiểm soát và kiểm soát trang web và blog của bạn.

Kết luận

Thế thôi! Đó là hướng dẫn này, tôi hy vọng nó sẽ cho phép bạn tạo một menu cho người dùng di động. thoải mái để chia sẻ mẹo với bạn bè trên mạng xã hội của bạn.

Tuy nhiên, bạn cũng sẽ có thể tham khảo ý kiến ​​của chúng tôi ressources, nếu bạn cần thêm các yếu tố để thực hiện các dự án tạo trang Internet của mình, bằng cách tham khảo hướng dẫn của chúng tôi về Tạo blog WordPress.

Tuy nhiên, trong thời gian chờ đợi, hãy cho chúng tôi biết về ý kiến và đề xuất trong phần dành riêng.

...

Bài viết này chứa comments 2

  1. xin chào

    cảm ơn vì thông tin của bạn

    Tôi dường như không thể tìm thấy "lớp CSS cho menu của bạn". tôi đã tìm thấy bảng định kiểu css nhưng tôi không biết phải sao chép và dán những gì

    Cảm ơn rất nhiều về sự trợ giúp của bạn

    cuối tuần tốt

    michel

Để lại một bình luận

địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được đánh dấu *

Trang web này sử dụng Akismet để giảm bớt không mong muốn. Tìm hiểu thêm về cách sử dụng dữ liệu nhận xét của bạn.

Trở lại đầu trang