Như bạn cũng đã thấy blog của mình có hàng menu có kèm theo phần mô tả – description cho mỗi mục khá lung linh. Trong bài trước về hướng dẫn tùy biến header trong Genesis Framwork, trong bài viết này mình sẽ hướng dẫn các bạn làm một menu như vậy nha.
Trình tự của tutorial như sau:
- Thêm đoạn mô tả cho menu
- Thêm đoạn mã trong functions.php
- Thêm đoạn mã CSS trong Genesis child theme
Bắt tay vào thực hiện nào:
Bước 1: Thêm đoạn mô tả cho menu
Trong bước này bạn cần tạo một menu kèm mô tả bằng cách vào Appearance -> Menus. Để thêm mô tả cho menu, bạn click chọn menu, sau điền phần mô tả ở phần Description như hình bên dưới. Bạn chú ý là mỗi menu có mỗi một mô tả khác nhau nha.
Trong trường hợp bạn không thấy phần Description như bên dưới thì ở phía trên WordPress có mục Screen Options, bạn click vào đấy chọn Description là nó sẽ xuất hiện.
Bước 2: Thêm đoạn mã trong functions.php
Bước này bạn cần dán – paste đoạn mã bên dưới vào bên dưới cùng tập tin functions.php của Genesis child theme.
https://gist.github.com/nhatdongnguyen/7e521a4e4bac0819e8f8
Bước 3: Thêm đoạn mã CSS trong Genesis child theme
Gần xong rồi, tiếp tục copy – paste nha. Dán đoạn mã bên dưới vào tập tin style.css của child theme.
https://gist.github.com/nhatdongnguyen/296c89f4adb9d6fedb04
Để thay đổi màu sắc, độ lớn thì bạn chỉ cần điều chỉnh class bên trên để phù hợp với ý bạn.
Bước 4: Hưởng thành quả của 3 bước bên trên nào
Chúc bạn thành công.
Nguyễn Tuấn Anh says
Website hay!
Sao không thấy đoạn mã css thế bạn, bạn thêm vào bài viết đi.
Nguyễn Nhật Đông says
Cảm ơn Tuấn Anh đã comment trên blog của mình!
Mình đã cập nhật lại đoạn code rồi hen 😀
Production says
Ngon! hehe