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 600.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 nhiều hơn người dùng máy tính để bàn ngày nay. Việc bổ sung một menu đáp ứng cho thiết bị di động giúp người dùng dễ dàng điều hướng trang web của bạn 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

Điều này sẽ đi sâu vào 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ượt trên màn hình điện thoại di động.

cuộc biểu tình menu-host

Điều đầu tiên bạn cần làm là cài đặt và kích hoạt Plugin Menu Responsive của 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.

đơn đáp ứng, wordpress

Trước tiên bạn phải nhập kích thước mà menu di động sẽ xuất hiện. Giá trị mặc định là 800 px, 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 bạn. Đ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ỏ hơn.

Đừ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í]

Bây giờ 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 bạn để xem menu phản hồi 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 thay đổi hành vi và sự xuất hiện của menu đáp ứng của bạn. Bạn có thể khám phá các tùy chọn này trên trang cài đặt plugin và điều chỉnh khi 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 được sử dụng phổ biến hơn để 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 phải 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 của 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 phải tạo một thư mục.

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

Khám phá cái 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.

<nav id = "site-navigation" class = "main-navigation" vai trò "" navigation "> <button class =" menu-toggle "> Menu </ button> <? php wp_nav_menu (mảng ('theme_location' => ' chính ',' menu_group '=>' menu nav ')); ?> </ nav>

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.

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]

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 CSS để menu của chúng tôi sử dụng các lớp CSS phù hợp để chuyển đổi khi được hiển thị trên thiết bị di động.

/ * Menu điều hướng * / .main-navigation {lề-top: 24px; lề trên: 1.714285714rem; văn bản-align: trung tâm; } .main-navigation li {lề-top: 24px; lề trên: 1.714285714rem; cỡ chữ: 12px; cỡ 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 màn hình thiết bị di động @media và (min-width: 600px) {.main-navigation ul.nav-menu, .main-navigation div.nav-menu> ul {Border-bottom: 1px solid # ededed; viền trên: 1px solid #eded; hiển thị: nội tuyến-khối! quan trọng; văn bản-align: trái; chiều rộng: 100%; } .main-navigation ul {lề: 0; văn bản thụt lề: 0; } .main-navigation li a, .main-navigation li {display: inline-block; trang trí văn bản: không có; } .main-navigation li a {Border-bottom: 0; màu: #6a6a6a; chiều cao dòng: 3.692307692; biến đổi văn bản: chữ hoa; khoảng trắng: nowrap; } .main-navigation li a: hover, .main-navigation li a: Focus {color: #000; } .main-navigation li {lề: 0 40px 0 0; lề: 0 2.857142857rem 0 0; vị trí: tương đối; } .main-navigation li ul {lề: 0; đệm: 0; vị trí: tuyệt đối; đầu trang: 100%; chỉ số z: 1; chiều cao: 1px; chiều rộng: 1px; tràn: ẩn; clip: orth (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 .f Focus> ul {Border-left: 0; clip: kế thừa; tràn: kế thừa; chiều cao: thừa kế; chiều rộng: kế thừa; } .main-navigation li ul li {nền: #efefef; viền dưới: 1px solid #ededed; hiển thị: khối; cỡ chữ: 11px; cỡ chữ: 0.785714286rem; chiều cao dòng: 2.181818182; phần đệ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 li li: hover, .main-navigation li li li: tập trung {nền: #e3e3e3; màu: #444; } .main-navigation .cản-menu-item> a, .main-navigation font-weight: in đậm; } .menu-toggle {display: none; }}

Bây giờ 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 bạn để xem trình đơn phản hồi của bạn có bị lậ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

UberMothy là một plugin WordPress dành riêng cho việc tạo ra một megamothy có khả năng tùy biến cao, đáp ứng và dễ truy cập cho người dùng. Đó là chức năng sau khi cài đặt, không có bất kỳ 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 các cấu hình menu lớn có thể tùy chỉnh và sáng tạo cao.

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 người khác: các mẫu menu 3, 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 vẫ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, được tích hợp trong bảng điều khiển WP, cho phép bạn tạo và tùy chỉnh số lượng menu lớn 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á các tính năng, cho dù người dùng thường xuyên hoặc nâng cao. Là các chức năng, nó cung cấp trong số những người 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, kiểu tùy chỉnh hoàn toàn cho các 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 bạn, để cung cấp cho nó một cái nhìn nổi bật và đơn giản thông tin của bạn. Nó sử dụng chức năng menu mặc định của WordPress để tạo các menu của nó.

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

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]

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

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. Đừng ngần ngạ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.

Nhưng trong lúc này, hãy cho chúng tôi biết về bạn ý 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 không thể tìm thấy "một lớp CSS cho menu của bạn". Tôi tìm thấy css sheet style nhưng tôi không biết sao chép và dán

    cảm ơn trước vì sự 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
5 cổ phiếu
cổ phiếu4
tweet
Enregistrer1