Người dùng quản trị trong WordPress có thể tạo menu điều hướng bằng cách thêm liên kết đến trang, bài đăng, lưu trữ hoặc tài nguyên tùy chỉnh. Điều này được thực hiện trong phần Giao diện > Menu, một trang quản trị tùy chỉnh dành riêng cho việc tạo menu. Người dùng có thể sắp xếp và thêm các mục menu trên trang này bằng cách kéo và thả chúng, cũng như điền vào các trường và tùy chọn quan trọng liên quan đến menu
Tuy nhiên, có giới hạn đối với những gì có thể được thực hiện chỉ bằng các chức năng mặc định của màn hình menu. May mắn thay, bạn có thể mở rộng chúng bằng cách thêm các mục tùy chỉnh vào các menu WordPress cụ thể. Ví dụ: bạn có thể thêm logic có điều kiện vào các mục menu của mình hoặc tạo các trường tùy chỉnh bổ sung để thay đổi kiểu dáng hoặc chức năng của menu
Trong bài viết này, chúng ta sẽ khám phá cách thêm một mục tùy chỉnh vào menu bằng mã. Bên cạnh việc cho phép bạn tùy chỉnh các menu của mình, thông tin trong bài viết này sẽ mở rộng kiến thức tổng thể về WordPress của bạn và chỉ cho bạn cách triển khai các mục tùy chỉnh tương tự. Khi chúng tôi tìm hiểu về chủ đề thêm menu mục tùy chỉnh, chúng tôi sẽ trả lời các câu hỏi sau
Cách thêm các mục tùy chỉnh vào menu WordPress cụ thể
Thêm biểu mẫu tìm kiếm vào menu di động
Thêm trường mô tả mục menu tùy chỉnh
Chủ đề Qode. Chọn hàng đầuXem bộ sưu tập
Cầu
Chủ đề WordPress đa mục đích sáng tạo
X-tốc-khôm
Một chủ đề đa khái niệm thực sự
Bắt đầu làm đi
Chủ đề kinh doanh khởi nghiệp mới
Cách thêm các mục tùy chỉnh vào menu WordPress cụ thể
Trong các phần sau, chúng tôi sẽ giới thiệu hai cách khác nhau để thêm các mục tùy chỉnh. Một cái chỉ dựa vào mã, trong khi cái kia cũng liên quan đến việc sử dụng giao diện người dùng WordPress. Xin lưu ý rằng các chủ đề trong bài viết này phù hợp nhất cho người dùng WordPress trung cấp và cao cấp. Để theo kịp những gì chúng tôi sẽ trình bày, bạn sẽ cần hiểu về HTML và CSS, cũng như các hook WordPress là gì và chúng được sử dụng như thế nào. Chúng tôi sẽ cố gắng hết sức để giải thích mã một cách chi tiết, nhưng bạn nên tiến hành nghiên cứu thêm nếu bạn cần trợ giúp để hiểu đầy đủ về chủ đề này
Trước khi chúng tôi tiến hành các ví dụ mà chúng tôi đã chuẩn bị cho bài viết này, chúng tôi khuyên bạn nên tạo bản sao lưu trang web của mình trước. Đây là biện pháp phòng ngừa an toàn quan trọng khi thêm bất kỳ mã tùy chỉnh nào. Mã mà chúng tôi sẽ sử dụng [và bất kỳ mã nào tương tự như mã đó] phải được thêm vào hàm. php của chủ đề con của bạn bằng FTP hoặc trong plugin dành riêng cho trang web. Nếu bạn không chắc chắn cách thực hiện điều đó, chúng tôi khuyên bạn nên kiểm tra các tài nguyên mà chúng tôi đã liên kết và xem xét bất kỳ điểm nào bạn không tự tin về
Thêm biểu mẫu tìm kiếm vào menu di động
Một cách để thêm các mục tùy chỉnh vào menu WordPress bằng mã là thêm mã trực tiếp vào HTML của menu WordPress cụ thể. Điều này được thực hiện bằng móc bộ lọc wp_nav_menu_items, được giới thiệu trong WordPress 3. 0. Cách này phức tạp hơn một chút đối với người mới bắt đầu sử dụng WordPress, vì tính năng hoặc chức năng tùy chỉnh được thêm vào chỉ bằng mã. Tùy thuộc vào cách nó được mã hóa, một tính năng hoặc chức năng tùy chỉnh có thể được thêm vào tất cả các vị trí menu đã đăng ký trong chủ đề hoặc một vị trí cụ thể
Chúng tôi sẽ chỉ cho bạn cách thực hiện điều này bằng cách sử dụng một đoạn mã đơn giản được tạo cho bài viết này. Đoạn mã này có thể được sử dụng để thêm biểu mẫu tìm kiếm tùy chỉnh ở cuối menu di động. Mã được đưa ra dưới đây
function qode_adding_a_search_form_to_the_mobile_menu[ $items, $args ] {
if [ 'mobile-navigation' === $args->theme_location ] {
$items .= 'Hãy phá vỡ nó
Mã đại diện cho một chức năng mà chúng tôi đặt tên là qode_adding_a_search_form_to_mobile_menu[] được nối vào hook bộ lọc wp_nav_menu_items. Mục đích của mã này thực sự đơn giản. Nếu bạn có một vị trí menu đã đăng ký được gọi là điều hướng di động trong chủ đề của mình thì một mục menu bổ sung sẽ được thêm vào menu gắn với vị trí đó. Mục menu đó hiển thị biểu mẫu tìm kiếm bằng hàm get_search_form[]
Hàm get_search_form[] sẽ tìm kiếm và hiển thị nội dung của biểu mẫu tìm kiếm. php, nếu có trong chủ đề gốc hoặc chủ đề con của bạn. Nếu không có mặt ở một trong hai vị trí, thay vào đó, một biểu mẫu tìm kiếm mặc định sẽ được hiển thị. Bên cạnh đó, có hai điều nữa chúng tôi cần giải thích để bạn có thể tận dụng tốt nhất mã tùy chỉnh này
Trước hết, chúng tôi đã sử dụng một vị trí menu có tên là điều hướng di động. Vị trí này dành riêng cho chủ đề Lekker, vì đó là vị trí chúng tôi đang sử dụng. Như vậy, mã này không nên được sao chép và dán mà không sửa đổi. Thay vào đó, bạn sẽ cần thay thế phần điều hướng trên thiết bị di động bằng tên vị trí menu phù hợp đã được đăng ký trong chủ đề bạn đang sử dụng
Để giúp bạn thực hiện nhiệm vụ đó, có một mẹo đơn giản mà bạn có thể sử dụng để tìm ra tên vị trí menu đã đăng ký cho bất kỳ chủ đề nào. Để tìm của bạn, hãy điều hướng đến Giao diện > Menu và cuộn xuống cuối trang. Trong phần Cài đặt Menu, bạn sẽ thấy nhãn của tất cả các vị trí menu khả dụng nơi bạn có thể chỉ định một menu cụ thể
Tuy nhiên, để tìm tên vị trí menu đã đăng ký, bạn sẽ cần kiểm tra các nhãn đó. Đặt con trỏ chuột lên vị trí menu bạn muốn sử dụng và nhấp chuột phải vào vị trí đó. Sau đó, chọn tùy chọn Kiểm tra từ menu xuất hiện
Điều này sẽ mở các công cụ dành cho nhà phát triển của trình duyệt của bạn và đưa bạn vào tab Thành phần, trên thành phần HTML chính xác mà bạn đã nhấp chuột phải vào. Sau đó, bạn sẽ cần kiểm tra cấu trúc HTML của phần đó của trang để tìm tên vị trí menu thích hợp. May mắn thay, điều đó rất đơn giản vì tên vị trí menu phù hợp sẽ được hiển thị ở ba vị trí, như bạn có thể thấy từ ảnh chụp màn hình bên dưới
Để làm rõ, bạn sẽ thấy các phần mã được đánh dấu giống nhau ở cuối. Chúng sẽ ở dạng menu-locations[your-location-name] và places-your-location-name. Các bạn lưu ý, phần có-tên-địa-điểm sẽ có người thay thế phù hợp. Lý do cho cấu trúc này nằm ở cách các tùy chọn menu được tạo ra. Điều này là nhờ mã nằm trong /wp-admin/nav-menus. php, một trong những tệp cốt lõi của WordPress
Sau khi bạn tìm thấy vị trí menu phù hợp, bạn sẽ cần thay thế phần điều hướng trên thiết bị di động trong mã của chúng tôi bằng vị trí thích hợp để mã hoạt động chính xác trên chủ đề của bạn
Điểm thứ hai chúng tôi muốn liên quan đến lớp CSS tùy chỉnh được gọi là qode-mobile-header-search. Lớp CSS này đã được thêm vào để giúp chúng tôi tạo mã CSS cần thiết để cách điệu biểu mẫu tìm kiếm sau khi hiển thị nó. Biểu mẫu tìm kiếm mới tạo của bạn rất có thể sẽ chỉ được tạo kiểu một phần và nó sẽ yêu cầu mã cách điệu bổ sung. Vì mã như thế này được tạo tùy theo từng trường hợp nên chúng tôi không thể đề xuất điều gì đó có thể áp dụng cho tất cả các trang web. Tuy nhiên, chúng tôi sẽ chia sẻ mã mà chúng tôi đã sử dụng để minh họa ví dụ này
.qode-mobile-header-search{
margin-top: 20px !important;
position: relative;
}
.qode-mobile-header-search input {
width: 100%;
vertical-align: top;
padding-left: 20px;
padding-right: 78px;
font-size: 14px;
color: #333;
background-color: #fff;
border: 1px solid #000;
height: 50px;
line-height: 30px;
border-radius: 0;
outline: 0;
}
.qode-mobile-header-search button {
position: absolute;
top: 0;
right: 0;
width: 78px;
font-size: 15px;
padding: 10px 30px;
text-align: center;
color: #fff;
background-color: #000;
border: 0;
}Sau khi thêm mã cách điệu này, chúng tôi nhận được kết quả sau [hiển thị trong ảnh chụp màn hình bên dưới]. Biểu mẫu tìm kiếm được thêm vào sau mục menu di động cuối cùng bằng đoạn mã đầu tiên và được cách điệu để nó khớp với giao diện được sử dụng trong menu di động theo thứ hai
Thêm trường mô tả mục menu tùy chỉnh
Phương pháp thứ hai để thêm các mục tùy chỉnh vào menu WordPress liên quan đến việc tạo các trường tùy chỉnh được gắn với tất cả các mục menu. Sau đó, tất cả những gì bạn cần làm là điền vào các trường tùy chỉnh thuộc các mục menu trong một menu WordPress cụ thể và điều này sẽ chỉ thêm một mục tùy chỉnh vào menu đó
Cách tiếp cận này để thêm các mục tùy chỉnh vào menu sẽ dễ dàng hơn nhiều khi bạn đặt nền tảng. Sau đó, bạn sẽ chỉ cần điền vào một trường mục menu cụ thể và nội dung tùy chỉnh của bạn sẽ được hiển thị trên trang web ở vị trí gắn với trường tùy chỉnh đó. Tuy nhiên, về mặt mã hóa, phương pháp này phức tạp hơn phương pháp chúng tôi đã mô tả trước đây. Sự phức tạp của nó được giảm bớt bởi WordPress 5. 4, đã giới thiệu hook hành động wp_nav_menu_item_custom_fields. Chúng tôi sẽ chỉ cho bạn một cách để sử dụng cái móc này
Đối với ví dụ này, chúng tôi đã tạo một đoạn mã để thêm trường tùy chỉnh có tên là Mô tả mục menu vào bất kỳ mục menu nào. Nếu một giá trị được chèn vào trường tùy chỉnh này, thì trường này sẽ được hiển thị trên giao diện người dùng của trang web, bên dưới nhãn mục menu tương ứng. Bạn có thể xem mã chúng tôi đã sử dụng để thực hiện việc này bên dưới
function qode_create_custom_menu_item_field[ $item_id, $item ] {
$description_value = get_post_meta[ $item_id, '_menu_item_description', true ];
?>