Thực đơn
trang chủAndroid

Thêm menu vào mẫu của bạn bằng CMS WordPress. Thanh điều hướng sử dụng CSS. Tạo menu và các mục menu tùy chỉnh thông qua bảng quản trị WordPress

Trong bài blog trước đó, tôi đã viết về những đổi mới thú vị phiên bản mới nhất WordPress là một cơ chế đặc biệt để tạo và quản lý các tệp . Bây giờ nó đã trở nên thuận tiện và dễ dàng hơn rất nhiều người dùng thông thường tạo các menu có độ phức tạp khác nhau, không chỉ bao gồm các trang hoặc danh mục blog mà còn có các liên kết đến bất kỳ URL nào. Để hiển thị menu trong mẫu, một chức năng đặc biệt wp_nav_menu được sử dụng - hôm nay tôi sẽ kể cho bạn nghe về nó.

Nếu không có phần menu trong quản trị viên WordPress, bạn có thể kích hoạt nó bằng cách thêm mã đặc biệt vào tệp tin.php.

Đầu tiên đây là tên của menu chúng tôi đã tạo. Đây là cách sử dụng chức năng trong trường hợp chung không có widget, bạn sẽ cần phải làm việc với chúng hơi khác một chút. Tuy nhiên, hàm wp_nav_menu có thể xuất ra mà không có đối số, dẫn đến việc “duyệt web” tình huống khác- đầu tiên, khớp theo tên menu nếu có ít nhất một mục menu được chỉ định cho nó, nếu không, menu không trống sẽ chỉ được hiển thị, v.v. Nhưng một lần nữa, tôi khuyên bạn chỉ nên sử dụng đoạn mã trên và không nên tìm hiểu hàm không có đối số sẽ xuất ra cái gì. Cú pháp của nó như sau:

Các tham số sau được sử dụng ở đây:

$menu - mã định danh được chọn cho menu - ID, slug hoặc tên menu.

$container - Menu UL mặc định được "bọc" trong vùng chứa DIV bằng cài đặt này.

$container_class - cho biết lớp của vùng chứa, theo mặc định giá trị của nó là menu-(menu slug)-container, tức là, trong trường hợp của chúng ta, ví dụ, lớp sẽ là menu-first-container.

$container_id - bạn có thể thêm ID vào vùng chứa, không được chỉ định theo mặc định.

$menu_class là lớp dành cho thành phần menu UL, giá trị của nó là menu.

$menu_id - ID cho phần tử ul, mặc định là menu-(slug)

$echo - nếu bạn không muốn hiển thị menu nhưng trả về giá trị của hàm, hãy sử dụng 0 cho cài đặt này.

$fallback_cb - nếu menu không tồn tại, hàm wp_page_menu sẽ được gọi.

$trước - đặt văn bản được hiển thị trước liên kết A.

$link_Before - hiển thị cụm từ trước văn bản liên kết, không được chỉ định.

$link_after - hiển thị sau văn bản liên kết, cũng trống.

$deep - đặt số cấp độ phân cấp để hiển thị menu; giá trị mặc định là 0 hiển thị toàn bộ menu.

$walker - một số loại "đối tượng walker" tùy chỉnh khó hiểu, có lẽ sẽ cần thiết hơn đối với các nhà phát triển nâng cao.

$theme_location - Vị trí của chủ đề nơi menu sẽ được sử dụng phải được kích hoạt thông qua register_nav_menu() để người dùng có thể chọn nó. Rõ ràng cũng có một số loại cài đặt không hoàn toàn rõ ràng khi làm việc với các widget.

Ví dụ về cách sử dụng hàm wp_nav_menu

Mã đơn giản nhất được đưa ra trong mã là:

Xóa vùng chứa DIV khỏi menu

Về nguyên tắc, không có gì phức tạp trong việc tạo và quản lý menu WordPress 3.0. Các nhà phát triển đã đơn giản hóa đáng kể quy trình làm việc và mở rộng khả năng của phần tử điều hướng này. Giải pháp này thường được sử dụng trong nhiều tác vụ mẫu khác nhau, chẳng hạn như khi tạo phiên bản cho thiết bị di động và máy tính để bàn. Một lát sau tôi sẽ thêm một vài đoạn nữa về chủ đề này.

tái bút Bảo vệ. Thú vị và hữu ích cho quản trị viên web Blog SEO, nơi bạn sẽ tìm thấy câu trả lời cho các câu hỏi SEO của mình.
Công ty Aweb từ lâu đã có uy tín rất tốt trong lĩnh vực quảng bá, tối ưu hóa và phát triển trang web. khuyến mãi công cụ tìm kiếm trên mạng.

Đăng ký và hiển thị menu tùy chỉnh được tạo trong bảng điều khiển: “ Vẻ bề ngoài> Menu" (Giao diện > Menu).

Đăng ký thực đơn

Add_action("after_setup_theme", function())( register_nav_menus(array("main_menu" => __("Menu chính", "crea"), "foot_menu" => __("Menu chân trang", "crea"),) ) ; ));

Tùy chọn thứ hai để đăng ký menu (Tôi không biết nó chính xác như thế nào, vì vậy tốt hơn nên sử dụng tùy chọn đầu tiên)

Nếu (function_exists("register_nav_menu")) ( register_nav_menus(array("main_menu" => __("Menu chính", "crea"), "foot_menu" => __("Menu chân trang", "crea"),)) ; )

Hiển thị thực đơn

Tùy chọn menu thứ hai

Thêm chi tiết về đăng ký và hiển thị menu trong mẫu

Cách sử dụng

wp_nav_menu(array("theme_location" => "" // (string) Vị trí của menu trong mẫu. (cho biết khóa mà menu đã được đăng ký trong hàm "menu" => "", // (string ) Tên menu hiển thị (được ghi ở bảng quản trị khi tạo menu, ưu tiên cho vị trí được chỉ định theme_location - nếu được chỉ định, tham số theme_location sẽ bị bỏ qua) "container" => "div", // (string) Menu container. Gói ul. Thẻ vùng chứa được chỉ định (theo mặc định trong thẻ div) "container_class" => "", // (string) lớp của vùng chứa ( thẻ div) "container_id" => "", // (chuỗi) id của vùng chứa (thẻ div) "menu_class" => "menu", // (chuỗi) lớp của chính menu (thẻ ul) "menu_id" => "", / / ​​(string) id của chính menu (thẻ ul) "echo" => true, // (boolean) Hiển thị hoặc trả về để xử lý "fallback_cb" => "wp_page_menu", // (string) Đã sử dụng ( backup), nếu menu không tồn tại (không thể lấy) "trước" => "", // (chuỗi) Văn bản trước mỗi liên kết "after" => "", // (chuỗi) Văn bản sau each link "link_Before" => "", // (string) Văn bản trước neo (văn bản) của liên kết "link_after" => "", // (chuỗi) Văn bản sau neo (văn bản) của liên kết "items_wrap " => "", "độ sâu" => 0, // (số nguyên) Độ sâu lồng nhau (0 - không giới hạn, 2 - menu hai cấp) "walker" => "" // (đối tượng) Lớp thu thập các menu. Mặc định: Walker_Nav_Menu mới));

Đối số tham số $args

theme_location(chuỗi)
ID của vị trí menu trong mẫu. Mã định danh được chỉ định khi đăng ký menu bằng hàm register_nav_menu().
Mặc định: ""

thực đơn(chuỗi)
Menu cần hiển thị. So khớp: id, slug hoặc tên menu.
Mặc định: ""

vùng chứa (chuỗi)
Cách bọc thẻ ul. Có thể chấp nhận: div hoặc nav.
Nếu bạn không cần bọc nó bằng bất cứ thứ gì thì hãy viết false: container => false.
Mặc định: div

container_class(chuỗi)
Giá trị của thuộc tính lớp của vùng chứa menu.
Mặc định: menu-(menu sên)-container

container_id(chuỗi)
Giá trị của thuộc tính id của vùng chứa menu.
Mặc định: ""

menu_class(chuỗi)
Giá trị thuộc tính lớp của thẻ ul.
Mặc định: thực đơn

menu_id(chuỗi)
Giá trị thuộc tính id của thẻ ul.
Mặc định: sên menu

tiếng vang (boolean)
In ra màn hình (đúng) hoặc quay lại để xử lý (sai).
Mặc định: đúng

dự phòng_cb(chuỗi)
Một chức năng để xử lý đầu ra nếu không tìm thấy menu.
Truyền tất cả $args cho hàm được chỉ định ở đây.
Đặt chuỗi trống thành " hoặc '__return_empty_string' để không hiển thị gì nếu không có menu.
Mặc định: wp_page_menu

trước(chuỗi)
Văn bản trước thẻ trên thực đơn.
Mặc định: ""

sau(chuỗi)
Văn bản sau mỗi thẻ trong menu.
Mặc định: ""

link_trước(chuỗi)
Văn bản trước neo của mỗi liên kết trong menu.
Mặc định: ""

link_after(chuỗi)
Văn bản sau neo của mỗi liên kết trong menu.
Mặc định: ""

items_wrap(chuỗi)
Tôi có cần bọc các phần tử trong thẻ ul không? Nếu cần, một mẫu trình bao bọc sẽ được chỉ định.
Mặc định: ""

độ sâu (số)
Có bao nhiêu cấp độ liên kết lồng nhau để hiển thị. 0 - tất cả các cấp độ.

người đi bộ (vật thể)
Lớp sẽ được sử dụng để xây dựng menu. Bạn cần chỉ định một đối tượng chứ không phải một chuỗi, ví dụ new My_Menu_Walker(). Mặc định: Walker_Nav_Menu(). Hãy xem cách sử dụng dưới đây...
Mặc định: Walker_Nav_Menu

item_spaces(chuỗi)
Có hay không để lại dấu ngắt dòng trong mã menu HTML. Có thể là: bảo quản hoặc loại bỏ
Mặc định: "bảo tồn"

Ví dụ

Chỉ hiển thị menu nếu nó tồn tại

Theo mặc định, nếu không có menu thì các trang của trang web sẽ được hiển thị thay thế. Nhưng nếu bạn chỉ cần hiển thị menu khi nó được tạo trong bảng quản trị, hãy chỉ định tham số fallback_cb là "__return_empty_string" :

Wp_nav_menu(array("theme_location" => "primary-menu", "fallback_cb" => "__return_empty_string"));

Tạo menu trong WordPress, cũng như sắp xếp các trang và danh mục, thường trở thành một vấn đề khá khó khăn đối với những quản trị viên web mới làm quen. Vì điều này, tôi quyết định viết một hướng dẫn ngắn trong đó chúng ta sẽ xem xét chi tiết cách tạo menu tùy chỉnh trong WordPress. Với sự trợ giúp của họ, bạn có thể tạo các menu tùy chỉnh một cách độc lập, thêm hoặc xóa các mục menu, thay đổi tên, vị trí và cách lồng của chúng.

Trong một trong những bài viết trước, chúng tôi đã xem xét phương pháp này. May mắn thay, WordPress hiện có tính năng tích hợp cho phép bạn tạo các menu tùy chỉnh mà không cần dùng đến plugin. Tính năng này có sẵn trong tất cả các phiên bản WordPress bắt đầu từ phiên bản 3.0.

Tôi muốn bạn ngay lập tức chú ý đến thực tế là tính năng hỗ trợ menu tùy chỉnh không được bật trong tất cả các mẫu. Về vấn đề này, bài viết sẽ bao gồm hai phần. Trong phần đầu tiên của bài viết, chúng ta sẽ xem cách tạo các mục menu trong WordPress thông qua bảng quản trị nếu các menu tùy chỉnh đã được đưa vào mẫu.

Trong phần thứ hai của bài viết, chúng ta sẽ tìm hiểu cách bật hỗ trợ độc lập cho các menu tùy chỉnh trong WordPress và tùy chỉnh hiển thị menu thông qua wp_nav_menu. Kiến thức này sẽ hữu ích cho bạn trong trường hợp mẫu của bạn không cung cấp khả năng sử dụng menu tùy chỉnh hoặc bạn tự viết hoặc muốn thêm khả năng tạo menu tùy chỉnh.

Tạo menu và các mục menu tùy chỉnh thông qua bảng quản trị WordPress

Để tạo menu, hãy đi tới Bảng quản trị – Giao diện – Menu và xem liệu mẫu của bạn có hỗ trợ menu tùy chỉnh hay không. Nếu không, bây giờ chúng ta có thể bỏ qua bước này và đi thẳng đến phần thứ hai của bài viết. Nếu menu đã được hỗ trợ, bạn sẽ thấy một trang có nội dung gần đúng sau.

Để tạo một menu mới, hãy nhập tên của nó vào trường “Nhập tiêu đề menu” và nhấp vào “Tạo menu”.

Cá nhân tôi thích viết tất cả tên bằng chữ Latinh để tránh mọi vấn đề sau này. Tên Cyrillic cũng được hỗ trợ, nhưng tôi không khuyên bạn nên sử dụng chúng. Đây là ý kiến ​​cá nhân của tôi.

Sau khi tạo menu, chúng ta cần chọn menu đó trong khối “Khu vực chủ đề”, nằm ở cột bên trái, sau đó lưu kết quả bằng cách nhấp vào nút “Lưu”.

Trong trường hợp này, chủ đề chỉ hỗ trợ một menu tùy chỉnh nên bạn không cần phải chọn nhiều. Bạn chỉ cần chọn menu chúng tôi đã tạo từ danh sách thả xuống và lưu kết quả. Nếu chủ đề hỗ trợ hai menu trở lên thì bạn cần chọn menu dựa trên vị trí của nó trong mẫu.

Sau khi lưu kết quả, để thêm các mục mới vào menu, chỉ cần đánh dấu các danh mục hoặc trang mong muốn và nhấp vào nút “Thêm vào Menu”.

Sau đó, chúng có thể được di chuyển tương đối với nhau theo ý muốn và cách lồng có thể được thay đổi.

Vì vậy, chúng tôi đã xem xét cách tạo menu tùy chỉnh thông qua bảng quản trị WordPress, cách thêm các mục mới vào đó và định cấu hình chúng. Bây giờ, hãy chuyển sang phần thứ hai của bài viết và tìm hiểu cách bật hỗ trợ cho các menu tùy chỉnh trong WordPress và hiển thị chúng trong mẫu bằng chức năng wp_nav_menu.

Kích hoạt hỗ trợ menu tùy chỉnh trong WordPress

Trước hết, chúng ta cần đăng ký sử dụng menu tùy chỉnh và chính các menu đó. Để thực hiện việc này, hãy mở tệp function.php của chủ đề của bạn để chỉnh sửa và thêm mã sau đây.

Register_nav_menus(mảng("top" => "Menu trên cùng"));

Trong đó “top” là mã nhận dạng menu và “Top menu” là tên của vị trí.

Nếu bạn cần thêm một số menu, hãy liệt kê chúng cách nhau bằng dấu phẩy.

Register_nav_menus(mảng("top" => "Menu trên cùng", "left" => "Menu bên trái"));

Sau khi thêm mã này, hỗ trợ cho các menu tùy chỉnh sẽ được bật tự động. Bạn có thể xác minh điều này bằng cách vào Bảng quản trị – Giao diện – Menu. Nhưng việc đăng ký thực đơn thôi là chưa đủ. Menu vẫn cần được hiển thị trong mẫu. Để làm điều này, chúng tôi sẽ sử dụng chức năng wp_nav_menu đặc biệt.

Hiển thị một menu tùy chỉnh. chức năng wp_nav_menu

Như đã đề cập ở trên, chúng tôi sẽ hiển thị các menu tùy chỉnh bằng hàm wp_nav_menu, có thể chấp nhận các tham số sau.

$args = array("menu" => "", // Tên menu (chuỗi). "container" => "div", // Vùng chứa menu (chuỗi). Danh sách ul được đặt trong đó. "container_class" = > " ", // Lớp chứa (chuỗi). "container_id" => "", // Id vùng chứa (chuỗi). "menu_class" => "menu", // lớp thẻ ul (chuỗi). > " ", // Id của thẻ ul (chuỗi). "echo" => true, // Hiển thị hoặc trả về để xử lý (boolean). "fallback_cb" => "wp_page_menu", // Hàm sao lưu trong trường hợp tùy ý menu không tồn tại (chuỗi). "trước" => "", // Văn bản trước mỗi liên kết (chuỗi). "sau" => "", // Nhắn tin sau mỗi liên kết (chuỗi). "link_Before" => "", // Văn bản trước neo liên kết (chuỗi). "link_after" => "", // Văn bản sau neo liên kết (chuỗi). "độ sâu" => 0, // Độ sâu lồng nhau (số nguyên). 0 - không giới hạn, 2 - menu tùy chỉnh hai cấp. "walker" => , // Lớp thu thập các menu. Mặc định: Walker_Nav_Menu mới. (sự vật). "theme_location" => ""); // Vị trí của menu trong mẫu. Chỉ định ID menu. (sợi dây).

Trong trường hợp này, các tham số có thể được truyền qua cả mảng và qua chuỗi. Trong mọi trường hợp, menu sẽ hoạt động. Để rõ ràng, hãy xem xét cả hai lựa chọn.

Truyền tham số qua mảng

Truyền tham số qua chuỗi

Wp_nav_menu("menu_id=topmenu&theme_location=top&container=");

Cá nhân tôi thích lựa chọn thứ hai hơn vì nó nhỏ gọn hơn theo quan điểm của tôi. Trong mọi trường hợp, kết quả của hàm sẽ là đoạn mã sau.

  • Đoạn 1
  • Điểm 2
  • Điểm 3

Đây là nơi tôi kết thúc bài viết này. Chúng tôi đã xem xét những điểm chính và trong 99% trường hợp, thông tin này là đủ cho bạn tự sáng tạo menu tùy chỉnh trong WordPress. Nếu bạn có bất kỳ câu hỏi nào, bạn luôn có thể hỏi họ trong phần bình luận.

Đó là tất cả. Chúc may mắn và thành công trong việc tạo website trên WordPress.

Điều hướng có mặt trên bất kỳ trang web tốt nào, ngay cả khi đó là trang một trang. Tuỳ thuộc vào tình hình, liên kết điều hướng có thể dẫn đến các phần khác nhau của trang web hoặc gửi tới một dấu trang (neo) nằm trên trang hiện tại. soạn thảo có thẩm quyềnđiều hướng mà người dùng không bị nhầm lẫn đòi hỏi kiến ​​​​thức và kinh nghiệm nhất định. Thiết kế thanh điều hướng cũng cần được thực hiện một cách khôn ngoan và trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo menu điều hướng thân thiện với người dùng.

Tạo điều hướng

Điều hướng là gì? Đây là tập hợp các liên kết, thường được sắp xếp và nhóm lại theo ý nghĩa. Chức năng điều hướng thường được tạo bằng thẻ danh sách HTML