Cách tạo menu cố định cho WordPress

Cách tạo menu cố định cho WordPress

Menu điều hướng là phần quan trọng nhất của bất kỳ trang web nào. Có rất nhiều loại menu điều hướng khác nhau, bạn có thể thấy rõ điều này khi ghé thăm nhiều website khác nhau. Trong hướng dẫn này, chúng ta sẽ thảo luận về  loại menu điều hướng là menu cố định, hay còn gọi là sticky menus.

Khi bạn cuộn trang xuống để đọc thêm nội dung, menu sticky vẫn hiển thị mọi lúc, lúc nào bạn cũng nhìn thấy thanh menu, nó là trình thanh menu hoàn toàn thân thiện với điện thoại di động.

Sticky Navigation Menus

Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách bạn có thể tạo một trình đơn điều hướng cố định rất đơn giản cho trang web WordPress.  Có sẵn rất nhiều plugin WordPress miễn phí để thêm một tiêu đề cố định. Ví dụ: Plugin WP Sticky Header WordPress có thể giúp bạn tạo một menu cô định. Trong hướng dẫn này, tôi sẽ hướng dẫn bạn cách tạo một trình đơn điều hướng cố định thân thiện với điện thoại di động..

Vấn đề với Sticky Menus

Tiêu đề cố định có thể tiết kiệm rất nhiều thời gian của khách truy cập nhưng cũng có nhiều vấn đề xảy ra. Vấn đề lớn nhất việc làm sao để các menu cố định này thân thiện với thiết bị di động mà không cần thông qua plugin nào.

Ví dụ cụ thể ở hình dưới:

Van de voi Sticky Menus

Làm thế nào để tạo một menu cố định trong WordPress

Tôi đã tạo ra một child theme cho theme  Twenty cho hướng dẫn này. Trong chủ đề con này, tôi thêm menu cố định vào đây.

Chúng ta chỉ cần 3 tệp cho chủ đề con này.

Style.css

Functions.php

Header.php

Tạo chủ đề con

Mở tệp style.css và thêm mã sau đây:

/*
     Theme Name:   SourceWP Child
     Theme URI:    https://www.sourcewp.com/
     Description:  A Twenty Sixteen child theme 
     Author:       Tahir Taous
     Author URI:   https://justlearnwp.com/
     Template:     twentysixteen
     Version:      1.0.0
    */

Tạo một Menu điều hướng mới

Mở tệp functions.php của chủ đề và mã sau trong đó.

    function theme_enqueue_styles() {

    $parent_style = 'parent-style';

    wp_enqueue_style( $parent_style, get_template_directory_uri() . 'https://cdn.sourcewp.com/style.css' );

    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . 'https://cdn.sourcewp.com/style.css',
        array( $parent_style )
    );
    }
    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );


// Register New Navigation Menu

    function register_menu() {
        register_nav_menu('fixed-menu', __('Fixed Menu'));
    }
    add_action('init', 'register_menu');

Hiển thị MENU

Bây giờ mở tệp header.php tìm dòng này <body <? Php body_class (); ? >> và thêm mã sau đây.

<div id="fixed-nav-container">
    <div id="nav-fixed">

        <?php if ( has_nav_menu( 'fixed-menu' ) ) { /* if menu location 'primary-menu' exists then use custom menu */
            wp_nav_menu( array( 'theme_location' => 'fixed-menu') ); 
        } ?>

    </div> <!-- nav-fixed -->
</div> <!-- fixed-nav-container -->

Bây giờ đăng nhập vào bảng điều khiển WordPress của bạn và kích hoạt chủ đề con mới. Truy cập vào cuối trang web của bạn để đảm bảo mọi thứ hoạt động tốt.

Bây giờ chúng sẽ tạo một menu điều hướng. Chuyển đến Appearance > Menu và nhấp vào tạo một menu mới. Bây giờ, thêm các liên kết vào menu, chuyên mục hay trang hay link dẫn gì đó cũng được.

tao mot menu co dinh trong WordPress

Kéo xuống để chọn vị trí menu của bạn ngay dưới phần menu setting, thì bạn sẽ thấy có một menu mới xuất hiện (trong hình là fix menu). Bây giờ chúng ta cần phải thêm các style cần thiết để làm cho menu hoàn thiện, đẹp hơn.  Nó rất dễ, bạn mở tệp style.css của chủ đề con và thêm mã sau đây.

/** ====================================
           Fixed Menu on Scroll
  ======================================  **/

    #fixed-nav-container{
        width: 100%;
        position: fixed;
        top: 20px;
        z-index: 10;
        font-family: Montserrat, "Helvetica Neue", sans-serif;
        display: block;
    }

    #nav-fixed{
        background: #FFF;
        margin: 0px auto;
        text-align: center;
        padding: .7em 0;
        box-shadow: 3px 4px 4px #E2DADA;
    }

Bạn có thể xem menu của chúng tôi với kiểu dáng cơ bản ở phía trên. Sau khi bổ sung CSS cần thiết, chúng ta đã thực hiện xong việc tạo menu cố định.

Bây giờ chúng ta cần áp dụng thêm một số kiểu CSS để làm cho menu này ở dạng ngang. Thêm mã sau vào stylesheet của chid theme.

 ul#menu-fixed {
        margin: 0;
        padding: 0;
    }
    ul#menu-fixed li {
    display: inline-block;
    padding: 5px;
    margin: 5px;
    list-style-type: none;
    }    

Vậy là đã hoàn thành menu cố định như mong muốn.

Cách tạo menu cố định cho WordPress
5 (100%) 1 vote

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *