Tạo menu có kèm theo mô tả cho Genesis

Chào các bạn! Rất vui được gặp lại các bạn ở bài viết tiếp theo.

Hôm nay mình sẽ hướng dẫn cho các bạn tạo một menu có kèm theo mô tả dành cho Genesis. Điều này lâu nay mình chỉ thấy trên các blog sử dụng Thesis. Vì thấy nó khá đẹp mắt nên mình đã tìm hiểu để áp dụng nó cho Genesis và hôm nay mình xin giới thiệu cho các bạn một cách tạo ra một menu như vậy.

menu

Việc tạo ra một menu có kèm theo mô tả đối với Genesis theo mình thấy là đơn giản hơn rất nhiều so với khi sử dụng Thesis. Chúng ta sẽ lần lượt thực hiện như sau:

Bước 1 – Tạo một menu có kèm mô tả

Để tạo một menu, bạn vào mục Appearance chọn Menus. Tạo một menu có tên bất kì. Sau đó thêm các đối tượng như Categories, Page….Ở mỗi menu, chúng ta bấm vào Custom để mở menu ra. Ở đây chúng ta chú ý mục Title Attribute, chúng ta sẽ dùng phần này để làm mô tả cho menu.

menu1

Sau khi tạo được một menu hoàn chỉnh. Ta sẽ cho hiện menu ra ngoài bằng cách bấm nút sổ xuống ở mục Primary Navigation Menu và chọn tên menu bạn vừa tạo và click save.

menu2

Bước 2 – Thêm code vào file functions.php

Sau khi thực hiện xong bước 1 thì bạn đã có một menu nhưng phần mô tả chưa xuất hiện. Để hiện mô tả, chúng ta sẽ thêm đoạn code sau vào file functions.php trong child theme của bạn.

function be_add_description( $item_output, $item ) {
	$description = $item->attr_title;
	if (' ' !== $description ) 
	   return preg_replace(  '/(<a.*?>[^<]*?)</', '$1' .'<br>' 
             .'<span class="desc">' . $description . '</span><',  $item_output);
	else
	   return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'be_add_description', 10, 2 );

Như vậy là chúng ta đã có được một menu có kèm theo mô tả bên dưới. Bây giờ chúng ta sẽ trang trí cho phần mô tả một chút cho khác với tên của menu bằng cách thêm lớp .desc vào file style.css

.desc {
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-style: italic;
}

Sử dụng Descriptions để làm mô tả cho menu
Nếu các bạn không muốn sử dụng Title Attribute để làm mô tả cho menu, các bạn có thể sử dụng phần Descriptions để thay thế. Để thêm Descriptions cho mỗi menu thì khi tạo menu, bạn click vào Screen Options ở góc trên cùng bên phải và đánh dấu vào ô Descriptions để mở thêm hộp Descriptions cho mỗi menu.

Khi đó trong đoạn code trên, bạn sẽ thay thế dòng

$description = $item->attr_title;

bằng

$description = $item->post_content;

Vậy là bạn đã có được một menu khá đẹp mắt. Trong quá trình thực hiện nếu có gì thắc mắc bạn hãy để lại comment bên dưới, mình sẽ cố gắng giải đáp.

Chúc các bạn thành công! {c1}

Đánh giá bài viết này

Chú ý - WordPress Hosting 1$/tháng - miễn phí tên miền

Bạn có biết GoDaddy đang có khuyến mãi WordPress hosting chỉ còn 1$/tháng kèm theo một tên miền .COM .NET .ORG miễn phí. Hãy đăng ký ngay để tiết kiệm chi phí nhất nhé.
Xem ngay

ĐĂNG KÝ NHẬN TIN QUA EMAIL

Nếu thấy bài viết trên blog có ích cho bạn, hãy đăng ký nhận tin qua email để cập nhật bài viết mới nhanh nhất và thỉnh thoảng nhận quà bất ngờ!

Comments

  1. Không có cái credit bên dưới khéo mình bị nhầm đây là theme thesis mất, hóa ra là genesis. Rất giống MD3 {c15}

  2. Bài viết rất bổ ích, cám ơn đã chia sẻ

  3. không comment được vậy Ray?

  4. Để mình thử
    Cho mình hỏi cái khung Mua Ngay là plugin ha? tên gì vậy?
    thanks

  5. ồ comment được rồi mới biết blog bạn
    cảm ơn nha

  6. Tr Tùng says:

    Tại sao mình đăng kí nhận tin qua email không được nhỉ

  7. Với cách làm này của bạn thì không cần thiết phải thêm code cho nhọc, chỉ mấy dòng css là xong rồi, tương tự như cách 1 bên bài viết của mình.

    • Hiii. Cảm ơn bạn đã góp ý. Mình biết cách nào thì dùng cách đó thôi. Đầu tiên mình cũng tính dùng phần Descriptions làm mô tả nhưng lại đổi ý chuyển sang dùng Title Attribute. Mình có bổ sung bên trên. Cũng khá đơn giản. {c27}

  8. Your theme supports 0 menus. Select which menu appears in each location.
    cái này thì sửa kiểu gì đây admin

  9. làm sao đễ các chữ trong khung đó nằm ngay chính giữa và thay đỗi kích thước của chữ vậy

  10. cho mình hỏi trong menu có “CSS Classes (optional)” và mình muốn chỉnh màu của menu, mỗi cái là khác nhau như thế này
    http://themeforest.net/item/novelti-responsive-magazine-wordpress-theme/full_screen_preview/4496027

    thì chèn code như thế nào xin giúp mình , mò mãi mà chưa ra. xin cám ơn

  11. oh thanks bác, không biết cái them khác có không nhưng , cái chỗ menu nó có dòng
    như thế này đây , mà điền vào cái gì cho nó hợp lý hehe

    http://wpsites.net/wp-content/uploads/2012/12/Menus-item-css-class.png

    • oh. Vậy bác vào file style.css, thêm vào lớp .arange-contact, chẳng hạn như:

      .arange-contact {
            backgound: mã màu nền.
            color: mã màu cho chữ.
      }
  12. Chào bác, Bác có thể viết 1 bài hướng dẫn tạo menu responsive cho Genesis được không? Mình tìm hiểu mà chưa biết cách làm.
    Xin cảm ơn

Gửi bình luận

Lưu ý: Không sử dụng keyword để thay cho tên của bạn, hãy sử dụng tên thật. Cảm ơn bạn đã tham gia bình luận trên blog!