Bạn có muốn tạo một menu đá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á Có bao nhiêu plugin để cài đặt trên 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.

tạo một menu đáp ứng


Đ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 của 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

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 của bạn theme WordPress hiện hành. 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 " của bạn theme WordPress.

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 cần thêm menu điều hướng vào theme WordPress. Thông thường menu điều hướng được thêm vào trong phần “ header.php Chủ đề WordPress của bạn.

<nav id="site-navigation" class="main-navigation" role="navigation">
            <button class="menu-toggle">Menu</button>
            <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</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ướ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.

/* Navigation Menu */
.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;
    font-size: 0.857142857rem;
    line-height: 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 to use on mobile devices

@media screen and (min-width: 600px) {

.main-navigation ul.nav-menu,
    .main-navigation div.nav-menu > ul {
        border-bottom: 1px solid #ededed;
        border-top: 1px solid #ededed;
        display: inline-block !important;
        text-align: left;
        width: 100%;
    }
    .main-navigation ul {
        margin: 0;
        text-indent: 0;
    }
    .main-navigation li a,
    .main-navigation li {
        display: inline-block;
        text-decoration: none;
    }
    .main-navigation li a {
        border-bottom: 0;
        color: #6a6a6a;
        line-height: 3.692307692;
        text-transform: uppercase;
        white-space: nowrap;
    }
    .main-navigation li a:hover,
    .main-navigation li a:focus {
        color: #000;
    }
    .main-navigation li {
        margin: 0 40px 0 0;
        margin: 0 2.857142857rem 0 0;
        position: relative;
    }
    .main-navigation li ul {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 100%;
        z-index: 1;
        height: 1px;
        width: 1px;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px);
    }
    .main-navigation li ul ul {
        top: 0;
        left: 100%;
    }
    .main-navigation ul li:hover > ul,
    .main-navigation ul li:focus > ul,
    .main-navigation .focus > ul {
        border-left: 0;
        clip: inherit;
        overflow: inherit;
        height: inherit;
        width: inherit;
    }
    .main-navigation li ul li a {
        background: #efefef;
        border-bottom: 1px solid #ededed;
        display: block;
        font-size: 11px;
        font-size: 0.785714286rem;
        line-height: 2.181818182;
        padding: 8px 10px;
        padding: 0.571428571rem 0.714285714rem;
        width: 180px;
        width: 12.85714286rem;
        white-space: normal;
    }
    .main-navigation li ul li a:hover,
    .main-navigation li ul li a:focus {
        background: #e3e3e3;
        color: #444;
    }
    .main-navigation .current-menu-item > a,
    .main-navigation .current-menu-ancestor > 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ái khác plugin WordPress để tạo ra một giao diện hiện đại và để tối ưu hóa việc xử lý 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 để tạo ra một megamenu có thể tùy chỉnh cao, đáp ứng và người dùng có thể truy cập. Nó hoạt động sau khi cài đặt mà không cần bất kỳ cấu hình cụ thể nào.

Plugin trình đơn Ubermenu wordpress mega

Đâ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, được tích hợp vào 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á 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.

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

Vì thế ! Đó là nó cho hướng dẫn này, tôi hy vọng nó sẽ cho phép bạn tạo 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.

...