Cách tạo Multilevel Menu trong Thesis Theme bằng JavaScript và CSS

Giới thiệu:

Đối với những người sử dụng Thesis theme thì việc chỉnh sửa code luôn gặp nhiều khó khăn, đặc biệt là những người không chuyên. Thông thường nếu một blog có nhiều danh mục (Categories) chia theo nhiều cấp độ thì việc quản lý theo dạng mặc định (theo chiều dọc) chiếm nhiều không gian và không hiệu quả; do đó việc tạo một menu ngang là điều cần thiết. Đã có rất nhiều lời đề nghị từ phía các blogger sử dụng Thesis theme muốn GPS làm tút! Đến tận hôm nay mới có thời gian ngồi dịch và tổng hợp lại một cách đơn giản để chia sẻ với mọi người.

Tút này là sự kết hợp giữa JavaScript và CSS để tạo nên một menu đa cấp kèm theo hiệu ứng động giống như Menu của giaiphapso.info mà GPS đang sử dụng.

Để tạo được một menu như ý chúng ta cần phải thực hiện theo các bước sau:

Bước 1: Download “Thuốc” về máy tại ĐÂY! Trong thư mục download sẽ có tổng cộng 8 file.

Bước 2: Đăng nhập vào FTP để upload các file mới download về vào thư mục “custom” của Thesis theme theo cấu trúc sau:

3 file còn lại chúng ta không upload lên server mà chỉ dùng để copy thông tin.

Bước 3: Chỉnh sửa lại đường dẫn cho 2 hình “menu-arrow-down.gif” và “menu-arrow-right.gif” bằng cách mở file “jqueryslidemenus.js” lên và tìm đoạn code sau:

Thay thế đường dẫn chính xác theo domain cũng như cấu trúc thư mục của bạn.

Bước 4: Chỉnh sửa Thesis Options

-          Mở file “for-header-scripts.txt” lên(chú ý: file này không upload lên server)

-          Chỉnh lại đường dẫn đúng cho 2 file “jqueryslidemenu.js” và “jqueryslidemenu.css”:  Cũng giống như chỉnh ở bước 3

-          Đăng nhập vào blog của bạn với quyền admin; truy cập vào mục: Appearance > Thesis Options, tìm mục “Stats Software and Scripts” bên cột trái, tiếp đó mở mục “Header Scripts.” bằng cách click vào dấu cộng nhỏ bên phải. Dán tất cả nội dung trong file “for-header-scripts.txt” vào ô này và lưu lại.

Bước 5: Chỉnh sửa file custom_functions.php

-          Truy cập vào file “custom_functions.php bằng cách vào Appearance > Thesis Custom Programming.

-          Chép tất cả nội dung trong file “for-custom_functions.php” vào trong file “custom_functions.php”. (Chú ý: file “for-custom_functions.php” không được upload lên server)

Tới đây là xong bước cài đặt, tiếp theo sẽ là các bước tạo Menu và tùy chỉnh CSS:

-          Trong file custom_functions.php, cấu trúc menu demo sẽ như sau:

-          Mỗi cặp <li> và </li> tương ứng với một danh mục, 2 cặp “li” nằm trong cùng một thẻ <ul> thì cùng cấp độ.

-          Thay thế dấu “#” bằng địa chỉ liên kết tới danh mục “categories” của blog mình. Chú ý phải đặt đường dẫn liên kết theo đúng “Slug” – phần mô tả của categories(nếu categories của bạn là Tiếng Việt thì bạn phải sửa lại phần Slug bằng tay vì để tự động sẽ ra mã). Xem ví dụ cụ thể đối với blog giaiphapso.info:

Trong file custom_functions.php các bạn để ý đoạn code gần dưới cùng. Đây là các tùy chọn vị trí hiển thị menu của bạn:

remove_action(‘thesis_hook_before_header’, ‘thesis_nav_menu’);
/* PLACE THE MENU BEFORE THE HEADER */
/*add_action(‘thesis_hook_before_header’, ‘slidemenu’);*/
/* PLACE THE MENU AFTER THE HEADER */
/*add_action(‘thesis_hook_after_header’, ‘slidemenu’);*/

Mặc định đoạn code: remove_action(‘thesis_hook_before_header’, ‘thesis_nav_menu’); có chức năng loại bỏ Page Menu mặc định, nếu muốn hiển thị trở lại thì bạn khóa lại bằng cách xóa luôn hoặc thêm cặp dấu “/* code */” vào trước và sau đoạn code: /* remove_action(‘thesis_hook_before_header’, ‘thesis_nav_menu’); */

Nếu muốn Menu hiển thị trước phần Header thì đổi code thành:

remove_action(‘thesis_hook_before_header’, ‘thesis_nav_menu’);
/* PLACE THE MENU BEFORE THE HEADER */
add_action(‘thesis_hook_before_header’, ‘slidemenu’);
/* PLACE THE MENU AFTER THE HEADER */
/*add_action(‘thesis_hook_after_header’, ‘slidemenu’);*/

Tương tự nếu muốn Menu hiển thị sau Header giống như giaiphapso.info thì chọn mục dưới, code sẽ là:

/*remove_action(‘thesis_hook_before_header’, ‘thesis_nav_menu’);*/
/* PLACE THE MENU BEFORE THE HEADER */
/*add_action(‘thesis_hook_before_header’, ‘slidemenu’);*/
/* PLACE THE MENU AFTER THE HEADER */
add_action(‘thesis_hook_after_header’, ‘slidemenu’);

Sau khi thiết đặt xong hãy test thử xem menu của bạn đã hiển thị đúng theo ý muốn hay chưa. Để tùy chỉnh style cho Menu phù hợp với giao diện tổng thể hoặc theo ý muốn thì bạn hãy vào file “jqueryslidemenu.css” để chỉnh sửa. Bước này tùy vào khả năng của bạn về CSS, GPS không thể hướng dẫn chi tiết bạn phần này! :evil:

Thế là bạn đã có một Categories Multilevel Menu rất tiện dụng và stylish! Tuy nhiên GPS cũng cảnh báo rằng việc sử dụng JavaScript sẽ làm tăng thời gian load web, gây ảnh hưởng tới khả năng SEO của Blog. Hãy cân nhắc trước khi làm điều này, cái gì cũng có cái lợi và cái hại.

——————

Chúc Các Bạn Thành Công! :whistle:

Mr. Giải Pháp Số