Cách thêm Menu điều hướng tùy chỉnh trong Chủ đề WordPress

Bạn có muốn thêm các menu điều hướng tùy chỉnh trong chủ đề WordPress của mình không? Menu điều hướng là danh sách liên kết ngang được hiển thị trên đầu trang của hầu hết các trang web.


Theo mặc định, các chủ đề WordPress đi kèm với các vị trí và bố cục menu được xác định trước, nhưng nếu bạn muốn thêm các menu điều hướng tùy chỉnh của riêng bạn?

Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách dễ dàng tạo và thêm các menu điều hướng tùy chỉnh trong WordPress, để bạn có thể hiển thị chúng ở bất cứ đâu trên chủ đề của bạn.

Thêm menu điều hướng tùy chỉnh trong chủ đề WordPress

Khi nào bạn cần hướng dẫn Menu điều hướng WordPress này?

Hầu hết các chủ đề WordPress đều có ít nhất một vị trí nơi bạn có thể hiển thị trang web của mình Liên kết điều hướng trong một menu.

Bạn có thể quản lý các mục menu từ giao diện dễ sử dụng trong khu vực quản trị WordPress của mình.

Nếu bạn chỉ tìm cách thêm các menu điều hướng trên trang web của mình, thì bạn chỉ cần làm theo hướng dẫn dành cho người mới bắt đầu của chúng tôi về cách thêm menu điều hướng trong WordPress.

Mục tiêu của hướng dẫn này là giúp người dùng DIY / trung gian thêm các menu điều hướng tùy chỉnh trong các chủ đề WordPress của họ.

Chúng tôi sẽ đề cập đến các chủ đề sau trong bài viết này:

    Phải nói rằng, hãy để có một cái nhìn về cách thêm các menu điều hướng WordPress tùy chỉnh trong chủ đề của bạn.

    Tạo Menu điều hướng tùy chỉnh trong Chủ đề WordPress

    Menu điều hướng là một tính năng của chủ đề WordPress. Mỗi chủ đề có thể xác định vị trí menu riêng và hỗ trợ menu.

    Để thêm một menu điều hướng tùy chỉnh, điều đầu tiên bạn cần làm là đăng ký menu điều hướng mới của bạn bằng cách thêm mã này vào tập tin chủ đề của bạn..

    hàm wpb_custom_new_menu () {
    register_nav_menu (‘menu tùy chỉnh của tôi’, __ (‘Menu tùy chỉnh của tôi’));
    }
    add_action (‘init’, ‘wpb_custom_new_menu’);

    Bây giờ bạn có thể đi đến Ngoại hình »Menu trang trong quản trị viên WordPress của bạn và cố gắng tạo hoặc chỉnh sửa menu mới. Bạn sẽ thấy Menu Menu tùy chỉnh của tôi, tùy chọn vị trí chủ đề.

    Menu điều hướng tùy chỉnh được thêm vào chủ đề

    Nếu bạn muốn thêm nhiều hơn một vị trí menu điều hướng mới, thì bạn sẽ cần sử dụng một mã như thế này:

    hàm wpb_custom_new_menu () {
    register_nav_menus (
    mảng(
    ‘my-custom-menu’ => __ (‘Menu tùy chỉnh của tôi’),
    ‘menu phụ’ => __ (‘Menu phụ’)
    )
    );
    }
    add_action (‘init’, ‘wpb_custom_new_menu’);

    Khi bạn đã thêm vị trí menu, hãy tiếp tục và thêm một số mục menu trong quản trị viên WordPress bằng cách làm theo hướng dẫn của chúng tôi về cách thêm menu điều hướng cho người mới bắt đầu.

    Điều này sẽ cho phép chúng tôi chuyển sang bước tiếp theo đang hiển thị menu trong chủ đề của bạn.

    Hiển thị Menu điều hướng tùy chỉnh trong Chủ đề WordPress

    Tiếp theo, chúng tôi cần hiển thị menu điều hướng mới trong chủ đề WordPress của bạn. Vị trí phổ biến nhất nơi các menu điều hướng thường được đặt là trong phần tiêu đề của trang web ngay sau tiêu đề hoặc logo của trang web.

    Tuy nhiên, bạn có thể thêm menu điều hướng của mình ở bất cứ đâu bạn muốn.

    Bạn sẽ cần thêm mã này vào tệp mẫu chủ đề của bạn, nơi bạn muốn hiển thị menu của mình.

    <?php
    wp_nav_menu (mảng (
    ‘theme_location’ => ‘menu tùy chỉnh của tôi’,
    ‘container_group’ => ‘lớp tùy chỉnh-menu’));
    ?>

    Vị trí chủ đề là tên mà chúng tôi đã chọn ở bước trước.

    Lớp container là lớp CSS sẽ được thêm vào menu điều hướng của bạn. Menu của bạn sẽ xuất hiện dưới dạng một danh sách gạch đầu dòng trên trang web của bạn.

    Tùy chỉnh hiển thị dưới dạng danh sách đơn giản

    Bạn có thể sử dụng lớp CSS .custom_menu_group để tạo kiểu cho các menu của mình. Đây là một CSS mẫu để giúp bạn bắt đầu:

    div.custom-menu-class ul {
    lề: 20px 0px 20px 0px;
    list-style-type: none;
    danh sách kiểu: không có;
    list-style-image: none;
    văn bản-align: đúng;
    }
    div.custom-menu-class li {
    đệm: 0px 20px 0px 0px;
    Hiển thị nội dòng;
    }
    div.custom-menu-class a {
    màu: #FFFFFF;
    }

    Menu tùy chỉnh theo kiểu

    Để tìm hiểu thêm về cách tạo kiểu cho menu điều hướng, hãy xem hướng dẫn chi tiết của chúng tôi về cách tạo kiểu cho menu điều hướng WordPress

    Thêm Menu điều hướng tùy chỉnh trong WordPress bằng Trình tạo trang

    Nếu bạn đang tạo một trang đích tùy chỉnh hoặc bố cục trang chủ, thì việc sử dụng plugin xây dựng trang WordPress sẽ giúp mọi việc trở nên dễ dàng hơn rất nhiều.

    Chúng tôi khuyên bạn nên sử dụng Beaver Builder, công cụ xây dựng trang WordPress tốt nhất trên thị trường. Nó cho phép bạn tạo bất kỳ loại bố cục trang nào bằng các công cụ kéo và thả đơn giản (không yêu cầu mã hóa).

    Điều này cũng bao gồm thêm một menu điều hướng tùy chỉnh vào bố cục trang của bạn.

    Đầu tiên, bạn sẽ cần cài đặt và kích hoạt plugin Beaver Builder. Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của chúng tôi về cách cài đặt plugin WordPress.

    Khi kích hoạt, bạn cần tạo một trang mới hoặc chỉnh sửa một trang hiện có nơi bạn muốn thêm menu điều hướng. Trên màn hình chỉnh sửa bài đăng, nhấp vào nút ‘Khởi chạy Beaver Builder Builder.

    Khởi động Beaver Builder

    Nếu đó là một trang mới, thì bạn có thể sử dụng một trong các mẫu được tạo sẵn đi kèm với Beaver Builder. Bạn cũng có thể chỉnh sửa trang thoát của bạn ngay lập tức.

    Chọn một mẫu

    Tiếp theo, bạn cần thêm mô-đun Menu và kéo và thả nó trên trang của bạn đến nơi bạn muốn hiển thị menu.

    Thêm mô-đun menu vào trang của bạn

    Điều này sẽ đưa ra các cài đặt mô-đun Menu trong một cửa sổ bật lên. Đầu tiên, bạn cần chọn menu điều hướng bạn muốn sử dụng. Bạn luôn có thể tạo menu mới hoặc chỉnh sửa menu hiện có bằng cách truy cập Ngoại hình »Menu trang trong khu vực quản trị WordPress.

    Cài đặt mô-đun menu

    Bạn có thể xem lại các cài đặt khác. Beaver Builder cho phép bạn chọn màu tùy chỉnh, nền và các thuộc tính kiểu khác cho menu của bạn.

    Khi bạn đã hoàn tất, bạn có thể nhấp vào nút Lưu và xem trước menu của mình.

    Xem trước menu điều hướng tùy chỉnh được thêm bằng Beaver Builder

    Tạo các Menu đáp ứng thân thiện với thiết bị di động trong WordPress

    Với sự gia tăng sử dụng thiết bị di động, bạn có thể muốn làm cho menu của mình thân thiện với thiết bị di động bằng cách thêm một trong nhiều hiệu ứng phổ biến.

    Ví dụ menu đáp ứng

    Bạn có thể thêm hiệu ứng trượt (ở trên), hiệu ứng thả xuống và thậm chí là hiệu ứng chuyển đổi cho các menu di động.

    Chúng tôi có hướng dẫn từng bước chi tiết về cách tạo các menu WordPress đáp ứng sẵn sàng cho thiết bị di động.

    Làm nhiều hơn với Menu điều hướng WordPress

    Menu điều hướng là một công cụ thiết kế web mạnh mẽ. Chúng cho phép bạn hướng người dùng đến các phần quan trọng nhất của trang web của bạn.

    WordPress cho phép bạn làm nhiều hơn là chỉ hiển thị các liên kết trong menu của bạn. Hãy thử các hướng dẫn hữu ích này để mở rộng chức năng của các menu điều hướng trên trang web WordPress của bạn.

    • Cách thêm biểu tượng hình ảnh với menu điều hướng trong WordPress
    • Cách thêm logic có điều kiện vào các menu trong WordPress
    • Cách thêm mô tả menu trong chủ đề WordPress của bạn
    • Cách thêm menu đáp ứng toàn màn hình trong WordPress
    • Cách thêm menu lớn vào trang web WordPress của bạn

    Đó là tất cả, chúng tôi hy vọng hướng dẫn cuối cùng này đã giúp bạn tìm hiểu cách thêm menu điều hướng trong WordPress. Bạn cũng có thể muốn xem danh sách 25 tiện ích WordPress hữu ích nhất của chúng tôi và danh sách các plugin phải có WordPress của chúng tôi.

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
      Like this post? Please share to your friends:
      Adblock
      detector
      map