Thêm trường tùy chỉnh vào mục menu WordPress

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 đầu

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 .= '
' . get_search_form() . '
';
}

return $items;
}
add_filter( 'wp_nav_menu_items', 'qode_adding_a_search_form_to_the_mobile_menu', 10, 2 );

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 );
?>







ID ) ) {
$description = get_post_meta( $item->ID, '_menu_item_description', true );

if ( ! empty( $description ) ) {
$title .= '
' . esc_html( $description ) . '
';
}
}

return $title;
}
add_filter( 'nav_menu_item_title', 'qode_display_custom_menu_item_field', 10, 2 );

Hãy phá vỡ nó

Nói một cách đơn giản, mã ở trên bao gồm ba chức năng mà chúng tôi đã tạo, sau đó được nối vào các móc WordPress thích hợp. Mỗi chức năng này đóng một vai trò quan trọng trong việc thêm trường tùy chỉnh vào một mục menu cụ thể. Chúng tôi sẽ thảo luận về chúng bên dưới, từng cái một

Hàm đầu tiên, được gọi là qode_create_custom_menu_item_field() được sử dụng để hiển thị trường tùy chọn mới trong mỗi mục menu, cũng như giá trị của trường trong phần phụ trợ của trang web. Hàm này chứa mã HTML dùng để hiển thị tùy chọn trong phần phụ trợ. Mã đó bao gồm hai điều. Một là nhãn cho biết Mô tả mục menu, mô tả trường tùy chỉnh và nhãn còn lại là trường nhập nơi mô tả được chèn vào. Cái sau là nơi bạn sẽ chèn mô tả sẽ được hiển thị bên dưới mục menu đã chọn trong giao diện trang web của bạn. Và nhờ sử dụng hàm get_post_meta(), nhãn này sẽ hiển thị giá trị tùy chọn trong phần phụ trợ

Hàm qode_create_custom_menu_item_field() sau đó được nối vào hook hành động wp_nav_menu_item_custom_fields. Điều này cho phép trường tùy chỉnh của chúng tôi được tạo cho tất cả các mục menu

function qode_create_custom_menu_item_field( $item_id, $item ) {
$description_value = get_post_meta( $item_id, '_menu_item_description', true );
?>







Chức năng thứ hai chúng tôi đã tạo được gọi là qode_save_custom_menu_item_field(). Nó đảm bảo rằng giá trị mô tả bạn chèn được lưu đúng cách bên trong cơ sở dữ liệu và trường meta tương ứng được cập nhật đúng cách sau khi nhấn nút Lưu Menu trong phần Giao diện > Menu
Để giải thích chi tiết hơn, trước tiên, mã sẽ kiểm tra xem bạn đã chèn một giá trị vào trường mô tả mới chưa. Nó cũng kiểm tra xem giá trị được chèn không chỉ bao gồm các khoảng trắng. Sau đó, nếu những kiểm tra đó được thông qua, giá trị đầu vào sẽ được khử trùng bằng hàm sanitize_text_field() và được lưu vào trường meta tương ứng bằng hàm update_post_meta(). Mặt khác, giá trị meta đã lưu trước đó sẽ bị xóa bằng hàm delete_post_meta(). Để đảm bảo mã này được thực thi đúng cách, hàm được nối vào hook hành động wp_update_nav_menu_item
function qode_save_custom_menu_item_field( $menu_id, $menu_item_db_id ) {
if ( isset( $_POST['menu_item_description'][ $menu_item_db_id ] ) && '' !== trim( $_POST['menu_item_description'][ $menu_item_db_id ] ) ) {
$sanitized_data = sanitize_text_field( $_POST['menu_item_description'][ $menu_item_db_id ] );
update_post_meta( $menu_item_db_id, '_menu_item_description', $sanitized_data );
} else {
delete_post_meta( $menu_item_db_id, '_menu_item_description' );
}
}
add_action( 'wp_update_nav_menu_item', 'qode_save_custom_menu_item_field', 10, 2 );
Cuối cùng, chức năng thứ ba mà chúng tôi đã tạo được gọi là qode_display_custom_menu_item_field(). Nó dùng để hiển thị giá trị mô tả bên dưới mục menu tương ứng trên giao diện người dùng của trang web. Nó làm như vậy bằng cách trước tiên kiểm tra tính hợp lệ của mục menu có giá trị mô tả mà chúng tôi muốn hiển thị. Điều này được thực hiện bằng cách sử dụng hàm is_object(), cũng như hàm isset() để kiểm tra ID mục menu. Phần còn lại của mã chỉ được thực thi sau khi vượt qua cả hai kiểm tra này
Trong phần sau của mã, trước tiên chúng tôi lưu trữ giá trị mô tả bên trong biến $description. Điều này được thực hiện bằng cách sử dụng hàm get_post_meta() cho mục menu và khóa meta mà chúng tôi đã cung cấp cho trường mới tạo
Sau đó, miễn là giá trị mô tả không trống, nó sẽ được thêm vào bên dưới mục menu thích hợp. Mô tả được bao gồm bên trong một đoạn văn có lớp tùy chỉnh qode-mi-description. Bằng cách đó, nó có thể được sử dụng cho mục đích cách điệu sau này nếu cần thiết
Cuối cùng, để làm cho mã hoạt động bình thường, chúng tôi đã nối hàm qode_display_custom_menu_item_field() với hook bộ lọc nav_menu_item_title
function qode_display_custom_menu_item_field( $title, $item ) {
if ( is_object( $item ) && isset( $item->ID ) ) {
$description = get_post_meta( $item->ID, '_menu_item_description', true );

if ( ! empty( $description ) ) {
$title .= '
' . esc_html( $description ) . '
';
}
}

return $title;
}
add_filter( 'nav_menu_item_title', 'qode_display_custom_menu_item_field', 10, 2 );
Điều này kết thúc quá trình phân tích mã của chúng tôi. Bây giờ, hãy xem cách sử dụng trường tùy chỉnh mới tạo này
Đối với người mới bắt đầu, bạn sẽ cần chọn menu nơi bạn muốn thêm một mục tùy chỉnh. Sau đó, chọn mục menu mà bạn muốn thêm mô tả vào. Cuối cùng, chèn một giá trị vào trường mô tả để nó có thể được hiển thị trên trang web của bạn
Để áp dụng điều này vào thực tế, hãy điều hướng đến Giao diện > Menu và chọn một menu mà bạn muốn chỉnh sửa. Sau đó, tìm mục menu mà bạn muốn thêm mô tả vào. Nhấp để mở mục menu đó và tìm trường nhập có nhãn Mô tả mục menu phía trên nó. Chèn mô tả của bạn cho mục menu đó và nhấn nút Lưu Menu để cập nhật tùy chọn
Còn một điều nữa chúng tôi cần đề cập—trường mô tả mục Menu tùy chỉnh mà chúng tôi đã tạo cho bài viết này gần giống với trường WordPress hiện có có tên là Mô tả. Trường Mô tả có thể được tìm thấy trong một mục menu, sau khi bạn bật tùy chọn thích hợp (được gọi là Mô tả) trong Tùy chọn Màn hình ở đầu màn hình chỉnh sửa menu của bạn
Trường Mô tả WordPress mặc định được tạo nhờ mã nằm trên một số tệp trong thư mục wp-admin và wp-gộp. Tuy nhiên, giá trị của nó có được hiển thị hay không tùy thuộc vào chủ đề của bạn (như được đề cập bên dưới trường này). Trường tùy chỉnh của chúng tôi khác, về mặt mã hóa, với trường mặc định của WordPress, cho phép trường này hoạt động với tất cả các chủ đề. Chúng tôi mời bạn sử dụng nó, chỉ cần nhớ thay thế đúng cách những thứ như vị trí menu
Ngoài ra, mã chúng tôi đã tạo có thể được sử dụng làm ví dụ giảng dạy. Chúng tôi đã trình bày cẩn thận tất cả các bước cần thiết để trường menu hoạt động bình thường và được hiển thị trên trang web. Điều này sẽ cho phép bạn xem cách các trường tùy chỉnh tương tự được tạo và hiểu sâu hơn về toàn bộ các trường menu WordPress. Đã nói rằng, hãy tiếp tục với bài viết
Sau khi chèn giá trị vào trường tùy chỉnh, bạn có thể mở giao diện người dùng của trang web và kiểm tra kết quả bạn nhận được. Đừng quên đảm bảo rằng menu bạn chỉnh sửa đã được liên kết với vị trí menu hiển thị trên trang web. Tương tự như ví dụ của chúng tôi về việc thêm biểu mẫu tìm kiếm vào menu di động, kết quả hiển thị mô tả mục menu tùy chỉnh của bạn có thể thiếu cách điệu. Để khắc phục mọi sự không nhất quán về kiểu dáng với trang web của bạn, bạn sẽ cần tạo mã CSS phù hợp. Điều này được thực hiện trên cơ sở từng trường hợp, vì vậy chúng tôi không thể đề xuất bất kỳ mã áp dụng chung nào. Bạn sẽ cần phải tự tạo mã CSS này, nhưng chúng tôi đã để lại cho bạn lớp tùy chỉnh trong mã mà bạn có thể sử dụng ngay bây giờ
Mặc dù không nên sao chép và dán trực tiếp bất kỳ mã CSS nào mà chúng tôi đã sử dụng, tuy nhiên, chúng tôi sẽ hiển thị mã đó bên dưới. Đối với mục đích của chúng tôi, chỉ một đoạn mã CSS nhỏ là đủ để điều chỉnh kiểu
.qode-mi-description {
margin: 0;
color: #ff0000;
font-style: italic;
}
Khi bạn chuẩn bị CSS của mình, bạn nên biết vị trí của CSS và bất kỳ mã CSS tương tự nào có thể được đặt một cách an toàn. Nói chung, hầu hết người dùng WordPress nên chèn mã CSS vào phần Giao diện > Tùy chỉnh > CSS bổ sung. Tuy nhiên, những người dùng nâng cao hơn có kiến ​​thức để làm điều đó có thể chọn đặt CSS của họ vào một tệp riêng. Sau đó, họ sẽ tải nó lên máy chủ và đưa nó vào hàng đợi bằng hàm wp_enqueue_style(). Nếu bạn muốn tìm hiểu thêm về cách thực hiện điều đó, bạn có thể xem bài viết của chúng tôi về kiểu và tập lệnh tùy chỉnh xếp hàng
Cuối cùng, sau khi thêm mã CSS được hiển thị ở trên, chúng tôi đã nhận được kết quả như sau mà bạn có thể xem bên dưới
Suy nghĩ cuối cùng
Có nhiều lợi ích sẽ truyền cảm hứng cho người dùng WordPress thêm menu mục tùy chỉnh. Các mục tùy chỉnh có thể làm phong phú menu WordPress và thêm các chức năng mới hoặc sử dụng mô tả để lôi kéo người xem đến các phần cụ thể trên trang web của bạn. Tuy nhiên, vì việc tạo các mục menu tùy chỉnh không phải là tùy chọn mặc định của WordPress, bạn sẽ cần sử dụng các đoạn mã được tạo cẩn thận để giúp bạn. Ngoài ra, bạn có thể thử tìm một plugin WordPress hoạt động cho mục đích này
Trong bài viết này, chúng tôi chọn khám phá tuyến đường đầu tiên. Chúng tôi đã giải thích cẩn thận hai ví dụ mã hóa và cách chúng được sử dụng. Nếu bạn làm theo các bước được nêu trong hướng dẫn của chúng tôi, chúng tôi chắc chắn rằng bạn sẽ có một menu mục tùy chỉnh mới ngay lập tức. Ngoài ra, mã chúng tôi cung cấp cũng có thể hoạt động như một hướng dẫn để tạo các mục tùy chỉnh mới và mở rộng chức năng của menu WordPress bằng các mục tùy chỉnh. Vì vậy, hy vọng rằng bạn sẽ học được điều gì đó mới trong khi cải thiện trang web của mình với các mục menu tùy chỉnh