Tạo menu riêng cho từng trang trong theme Flatsome

52 lượt xem
Mẹo nhỏ: Để tìm kiếm chính xác các ấn phẩm của GiuseArt.com, hãy search trên Google với cú pháp: "Từ khóa" + "giuseart". (Ví dụ: thiệp tân linh mục giuseart). Tìm kiếm ngay

Chào các bạn, trong quá trình làm web sẽ có đôi lần chúng ta muốn mỗi trang sẽ hiển thị một menu riêng biệt tùy nhu cầu của chúng ta. Mình có tìm từ khóa “tạo menu riêng cho từng trang Flatsome” thì cũng đọc được vài kết quả, trong đó có tham khảo được một bài viết rất hay trên codfe.com và mình chia sẻ lại cho những ai chưa biết. Xin cám ơn tác giả https://codfe.com về nội dung trong bài viết này:

Nội dung bài viết là chia sẻ lại từ nguồn trên internet, độc giả xem để tham khảo, nếu có lỗi không hoạt động vui lòng báo lại mình check nha!

Bước 1: Khai báo, khởi tạo các menu riêng để sử dụng

Sau khi khai báo chúng ta tiến hành tạo các menu cho từng trang, trong ví dụ mình sẽ tạo menu “GiuseArt Menu” như hình.

Giuseart.com - Khởi tạo menu mới trong wordpress
Giuseart.com – Khởi tạo menu mới trong wordpress

Bước 2: Tìm ID của trang muốn tạo menu riêng

Bạn có thể vào Sửa trang – xem phần url hiển thị trên thanh địa chỉ của trình duyệt web và tìm số ID như hình dưới đây:

Hướng dẫn tìm ID của page
Hướng dẫn tìm ID của page

Bước 3: Tạo shortcode menu để hiển thị menu cho từng trang khác nhau

Các bạn có thể xem thêm bài Tạo shortcode cho menu để dùng khắp mọi nơi, trong ví dụ bài viết này mình sẽ tạo 1 function như sau:

Trong hàm trên mình tạo ra một short code là giuseart_custom_menu,  short code này có chức năng là hiển thị menu cho từng trang khác nhau. Trong ví dụ trên đối với trang có id = ‘19’  mình sẽ cho hiện thị menu tự tạo là GiuseArt-menu ở bước đầu tiên.

Bước 3. Gắn menu vào header

Các bạn có thể hook shorcode menu trên vào vị trí cần hiển thị, đối với theme flatsome các bạn có thể đơn giản gắn vào bằng cách cho shortcode vào header như hình.

Gắn shortcode menu lên HTML, sau đó đưa element HTML lên header
Gắn shortcode menu lên HTML, sau đó đưa element HTML lên header

 

Bước 4. Css lại cho menu

Các bạn tham khảo css đơn giản này nhé. Copy toàn bộ CSS dưới đây và Paste vào Giao diện – Tùy biến – Style – Custom CSS – Custom CSS

Và đây là thành quả, chúc các bạn thành công.

5/5 - (1 bình chọn)
Chia sẻ bài viết:

Thông báo chính thức: Ninh Bình Web (thuộc GiuseArt) không hợp tác với bất kỳ ai để bán giao diện Wordpress và cũng không bán ở bất kỳ kênh nào ngoại trừ Facebookzalo chính thức.

Chúng tôi chỉ support cho những khách hàng mua source code chính chủ. Tiền nào của nấy, khách hàng cân nhắc không nên ham rẻ để mua phải source code không rõ nguồn gốc và không có support về sau! Xin cám ơn!

Thẻ tìm kiếm:

Bài viết mới cập nhật:

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Trang chủ
Tìm kiếm
Lên trên
Chia sẻ
Tải lại
Bình luận