Xu Hướng 5/2022 # Cách Tạo Thêm Menu Trong WordPress # Top View

Xem 24,651

Bạn đang xem bài viết Cách Tạo Thêm Menu Trong WordPress được cập nhật mới nhất ngày 24/05/2022 trên website Hoisinhvienqnam.edu.vn. Hy vọng những thông tin mà chúng tôi đã chia sẻ là hữu ích với bạn. Nếu nội dung hay, ý nghĩa bạn hãy chia sẻ với bạn bè của mình và luôn theo dõi, ủng hộ chúng tôi để cập nhật những thông tin mới nhất. Cho đến thời điểm hiện tại, bài viết này đã đạt được 24,651 lượt xem.

--- Bài mới hơn ---

  • Bullets, Numbering, Multilevel List Trong Microsoft Word
  • Hướng Dẫn Toàn Tập Word 2022 (Phần 8): Lập Danh Sách
  • Cách Điền Số Thứ Tự Đầu Dòng Word 2022, 2013, 2010, 2007
  • Trình Bày Văn Bản Đẹp Trong Word 2007
  • Thao Tác Với Shape Trong Word 2022
  • Đáng lẽ ra bài này mình đã nên viết lâu rồi nhưng do thời gian qua mình tập trung vào nhiều cái quá nên mãi hôm nay mới có thể viết đầy đủ được. Sở dĩ mình viết bây giờ là do sắp tới mình có làm một tutorial làm việc với một starter theme cơ bản nên chắc chắn sẽ cần đến phần này, do đó mình cũng hy vọng là các bạn có thể nắm bắt được tốt nhất.

    Tính năng menu trong WordPress phải nói là rất mạnh mẽ và linh hoạt trong việc tạo menu cho website, họ cũng không giới hạn số lượng menu tạo ra và bạn cũng có thể chèn nó vào bất cứ đâu.

    Cần xem trước khi đọc bài này

    Bước 1. Khởi tạo Menu Location

    Để tạo một menu location không có gì là khó khăn, chỉ với một vài dòng đặt vào file chúng tôi là bạn tạo được. Nhưng trước khi tạo menu location, hãy chắc chắn là theme của bạn đã hỗ trợ tính năng menu bằng cách kiểm tra xem có đoạn dưới trong file function của theme chưa, nếu chưa thì thêm vào.

    add_theme_support( 'menus' );

    Xong rồi, bây giờ ta sẽ có một hàm tên là register_nav_menus() với một tham số duy nhất là tên location như sau:

    register_nav_menus( array( ) );

    Ở đoạn trên, chúng ta sẽ tạo ra một menu location mang tên Menu chính với slug là main-nav. Cái slug sẽ là tên để chúng ta xác định khi viết code hiển thị ra ngoài, không khoảng trắng, không dấu và không in hoa.

    Thế nếu muốn thêm nhiều location thì sao? Đơn giản, chỉ việc thêm nhiều tham số vào hàm bên trên như sau:

    register_nav_menus( array( ) );

    Bước 2. Hiển thị location ra ngoài theme

    Bạn cứ hiểu là location được chỉ định hiển thị ở đâu thì menu sẽ xuất hiện ở đó khi bạn thêm vào trong Dashboard.

    Để hiển thị location, ta sẽ dùng hàm wp_nav_menu(). Hàm này nó có nhiều tham số hơn là cái hàm tạo location. Bây giờ hãy thử mở theme của bạn lên và chèn hàm này vào vị trí mà bạn thích, như file chúng tôi chẳng hạn.

    <?php wp_nav_menu( array(

    Bước 3. Thêm menu

    Sau khi chèn xong, hãy vào trang quản lý thêm menu vào location để nó hiển thị ra.

    Bây giờ ra ngoài theme và dùng Firebug xem cấu trúc menu ta sẽ thấy tương tự như sau:

    .main-nav ul { text-align: left; margin: 0; padding: 15px 4px 17px 0; list-style: none; } .main-nav ul li { font: bold 12px/18px sans-serif; display: inline-block; margin-right: -4px; position: relative; padding: 15px 20px; background: #fff; cursor: pointer; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } .main-nav ul li:hover { background: #555; color: #fff; } .main-nav ul li ul { padding: 0; position: absolute; top: 48px; left: 0; width: 150px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; display: none; opacity: 0; visibility: hidden; -webkit-transiton: opacity 0.2s; -moz-transition: opacity 0.2s; -ms-transition: opacity 0.2s; -o-transition: opacity 0.2s; -transition: opacity 0.2s; } .main-nav ul li ul li { background: #555; display: block; color: #fff; text-shadow: 0 -1px 0 #000; } .main-nav ul li ul li:hover { background: #666; } .main-nav ul li:hover ul { display: block; opacity: 1; visibility: visible; }

    Kết quả ta tạm có

    Mình muốn nói gì ở bài này?

    Trong bài này mình không hướng dẫn bạn làm thế nào để có một menu đẹp và lộng lẫy như các trang khác, mà mình chỉ muốn cho các bạn biết cách tạo một menu trong WordPress như thế nào. Từ đó bạn có thể tự mình chuyển các mẫu menu từ HTML, CSS sang menu của WordPress một cách dễ dàng.

    Do đó, nếu bạn cần làm menu thêm đẹp mắt và lộng lẫy thì nên học vững CSS và jQuery vì nói thật là thật khó để hướng dẫn tạo một menu theo đúng ý tất cả mọi người.

    --- Bài cũ hơn ---

  • Làm Thế Nào Để Thêm Vào Các Navigation Menus Trong WordPress
  • Tìm Hiểu Các Đơn Vị Px, Dp, Pt, In, Mm, Dip Trong Androi
  • Tổng Hợp Mẫu Bìa Word 2013, 2007, 2010, 2003
  • Cách Tạo Khung Bìa Trong Word 2007, 2010, 2013, 2022 Để Gây Ấn Tượng
  • Cách Tạo Bảng Trong Word 2007
  • Cập nhật thông tin chi tiết về Cách Tạo Thêm Menu Trong WordPress trên website Hoisinhvienqnam.edu.vn. Hy vọng nội dung bài viết sẽ đáp ứng được nhu cầu của bạn, chúng tôi sẽ thường xuyên cập nhật mới nội dung để bạn nhận được thông tin nhanh chóng và chính xác nhất. Chúc bạn một ngày tốt lành!

  • Web hay
  • Links hay
  • Push
  • Chủ đề top 10
  • Chủ đề top 20
  • Chủ đề top 30
  • Chủ đề top 40
  • Chủ đề top 50
  • Chủ đề top 60
  • Chủ đề top 70
  • Chủ đề top 80
  • Chủ đề top 90
  • Chủ đề top 100
  • Bài viết top 10
  • Bài viết top 20
  • Bài viết top 30
  • Bài viết top 40
  • Bài viết top 50
  • Bài viết top 60
  • Bài viết top 70
  • Bài viết top 80
  • Bài viết top 90
  • Bài viết top 100