Hiển thị Văn bản Mô tả dưới mọi Mục Menu trong Astra Theme

Thủ thuật WordPress
1

Bạn muốn thêm văn bản mô tả bổ sung bên dưới mọi mục menu trong vùng tiêu đề của chủ đề Astra? Điều này có thể đạt được bằng cách sử dụng tùy chọn mô tả trong WordPress. Sau khi bạn bật tùy chọn này, hãy xuất văn bản mô tả này bằng mã PHP tùy chỉnh và tạo kiểu cho nó bằng mã CSS tùy chỉnh.

Bật tùy chọn Mô tả menu

Theo mặc định, tùy chọn mô tả menu bị tắt trên các trang web WordPress. Đầu tiên, chúng ta cần kích hoạt tùy chọn mô tả này.

  1. Trong Bảng điều khiển WordPress, chuyển đến trang Giao diện → Thực đơn .
  2. Nhấp vào Tùy chọn màn hình ở góc trên cùng bên phải.
  3. Trong phần Hiển thị thuộc tính menu nâng cao , hãy nhấp để kiểm tra tùy chọn Mô tả .

Tạo menu mới và nhập mô tả

Bây giờ chúng ta sẽ thêm văn bản mô tả vào các mục menu. Nếu chưa có menu nào được tạo, bạn có thể tạo một menu bằng cách làm theo hướng dẫn này.

  1. Chuyển đến mục menu cụ thể mà bạn muốn thêm văn bản mô tả.
  2. Nhấp vào biểu tượng mũi tên ở góc trên cùng bên phải của mục menu để mở rộng.
  3. Thêm văn bản Mô tả (Ví dụ: Tổng quan).
  4. Nhấp vào nút Menu Lưu để lưu các thay đổi của bạn.

Đoạn mã PHP

Sau khi văn bản mô tả cho các mục menu đã được thêm vào Bảng điều khiển WordPress, chúng tôi cần hiển thị điều đó trong giao diện người dùng của trang web. Thêm mã sau vào tệp functions.php của Chủ đề con Astra của bạn để hiển thị văn bản mô tả cho các mục menu.

/**
 * Displaying the description below the menu item
 */
function wpd_astra_nav_menu_items_description( $output, $item, $depth, $args ) {
	if ( ! empty( $item->description ) ) {
		$output = str_replace( $args->link_after . '', '' . $item->description . '' . $args->link_after . '', $output );
	}
	return $output;
}
add_filter( 'walker_nav_menu_start_el', 'wpd_astra_nav_menu_items_description', 90, 4 );

CSS

Thêm mã CSS sau vào trang web của bạn bằng cách đi tới Giao diện → Tùy chỉnh → Hộp CSS bổ sung hoặc dán vào tệp style.css của chủ đề con Astra. Bạn có thể tùy chỉnh thêm mã này tùy thuộc vào kiểu CSS cụ thể mà bạn cần.

@media only screen and (min-width: 922px) {
	.main-header-menu > .menu-item > a {
		height: auto;
		flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		text-align: center;
		justify-content: center;
		-webkit-justify-content: center;
		-moz-justify-content: center;
		line-height: 1.5;
	}
	.menu-item-description {
		color: #777;
		clear: both;
		font-size: 12px;
		flex: 0 0 100%;
	}
}
@media only screen and (max-width: 921px) {
	.menu-item-description {
		display: none;
	}
}