[Lập trình theme WordPress] Viết CSS cho theme – Phần 2

[Lập trình theme WordPress] Viết CSS cho theme – Phần 2

Hướng dẫn viết CSS cho theme tích hợp SuperFish Menu vào WordPress để có được một menu đa cấp có hiệu ứng đổ xuống nhanh nhất thay vì phải viết CSS thủ công.

https://www.youtube.com/watch?v=NAD9elEQ9HE

Trong phần viết CSS theme phần 1 , chúng ta đã làm qua các bước thêm những đoạn CSS cần thiết cho theme và chia cột theme như mong muốn. Tiếp tục trong phần này, mình sẽ hướng dẫn bạn làm tiếp CSS cho website để nó hiển thị tốt hơn, cụ thể hơn là trong bài này mình sẽ nói qua việc thêm CSS và Javascript để cái menu trên website của bạn được hiển thị đẹp hơn.

Trong khuôn khổ serie này, mình có thể sẽ không nói qua việc viết CSS làm sao để có một menu đổ xuống vì nếu hướng dẫn và giải thích nó rất dài dòng, mà không cẩn thận mình sẽ bị lái sang CSS làm nội dung của serie bị loãng đi. Do vậy trong serie này, mình sẽ hướng dẫn bạn tích hợp SuperFish Menu vào theme WordPress của bạn bằng cách chèn các đoạn Javascript và CSS của nó vào theme.

Tại sao lại dùng SuperFish Menu?

SuperFish Menu là một plugin dành cho jQuery giúp bạn làm được một menu đa cấp hỗ trợ hiệu ứng đổ xuống (dropdown menu) đơn giản nhưng hiển thị rất tốt, cũng như rất dễ sử dụng. Nếu bạn đã từng tự viết CSS cho cái menu thì sẽ thấy rằng quy trình này đôi khi rất vất vả nên thường là mình sẽ dùng các plugin dành cho jQuery hoặc các CSS Framework bên ngoài để làm cái menu.

Với SuperFish, bạn chỉ cần viết vài đoạn CSS thêm vào nếu muốn tùy biến lại màu sắc, bố cục của theme. Còn không thì cứ tích hợp đoạn script của nó vào website, khai báo class của SuperFish Menu vào theme là nó chạy ngon lành.

Các bước tích hợp SuperFish Menu vào WordPress

Trước hết, bạn hãy vào thư mục theme, tạo thêm một thư mục tên là js và một thư mục tên là css trong đó.

Sau đó hãy download bộ mã nguồn của SuperFish tại đây. Bạn giải nén ra sẽ thấy các thư mục tên là dist,example, src, test.

superfish-folder
Ảnh. Các thư mục sau khi giải nén superfish-master.zip

Vào thư mục src trong đó sẽ thấy hai thư mục là css và js, bạn vào thư mục /src/css và copy file superfish.cssvào thư mục css trong theme.

Sau đó vào thư mục /src/js và copy file superfish.js vào thư mục js trong theme. Và cũng trong thư mục js của theme, bạn tạo sẵn một file mang tên custom.js.

Sau khi chắc chắn trong theme đã có hai thư mục js và css, trong hai thư mục đó đã có các file của SuperFish thì chúng ta sẽ tiến hành chèn nó vào theme bằng cách sử dụng hàm thachpham_styles() mà chúng ta đã làm ở bước chèn CSS vào theme.

Bạn mở file functions.php ra, tìm đến phần này:


 

Bên trong nội dung thachpham_styles(), chúng ta khai báo thêm một số đoạn như sau để chèn hai cái file .css và .js của SuperFish vào:

Và đây là toàn bộ nội dung của hàm thachpham_styles() sau khi theme:

Bây giờ bạn hãy kiểm tra ngoài theme, nó đã có đầy đủ các file CSS và JS vừa chèn chưa nhé.

Tiếp tục, bạn tìm đến hàm thachpham_menu() trong functions.php, thêm một tham số vào biến mảng $menu như thế này (xem dòng in đậm):

Bởi vì SuperFish Menu cần cái thẻ <ul> đầu tiên trong menu sẽ có class là sf-menu để nó hiển thị CSS tốt nên tham số items_wrap trong hàm wp_nav_menu() sẽ cho phép thay đổi cấu trúc của thẻ <ul> đầu tiên.

Và cuối cùng là chèn đoạn sau vào file custom.js để kích hoạt SuperFish Menu.

Tuy nhiên có thể sẽ bị vỡ khung do cái menu có float, vì vậy chúng ta nên tiến hành clear float cho menu bằng pseudo class :after. Chèn đoạn sau vào file style.css:

Kết quả ta có:

laptrinhtheme-finish-superfish
Ảnh. Kết quả sau khi chèn SuperFish Menu

Thêm một xíu CSS nữa là nó khác ngay:

Kết quả:

laptrinhtheme-finish-custommenu

Toàn bộ CSS trong phần này

Lời kết

Vậy là dần dần theme của chúng ta cũng đã được dần hình thành rồi đó, làm xong cái menu thì coi như chúng ta đã bớt đi một gánh nặng mà đối với mình – khâu viết CSS cho menu là sợ nhất. Xong bước này là thấy khỏe rồi, và ở các phần kế tiếp chúng ta sẽ tiến hành viết cho các thành phần phụ bên trong website và cả WordPress nữa.

Các bài viết liên quan:

WordPress FAQ  » Học WordPress > Lập trình WordPress > Lập trình Themes


 WordPress FAQ   |   Hoc WordPress   |   Su dung WordPress   |   Lap trinh WordPress |   Plugin WordPress  |  Thuat ngu WordPress    |  Theme WordPress  |  Lap trinh Themes |  Lap trinh plugin

Ảnh. [Lập trình theme WordPress] Viết CSS cho theme – Phần 2
Ảnh. [Lập trình theme WordPress] Viết CSS cho theme – Phần 2

Chia sẻ bài viết

Bình luận