Thiết kế theme WP phần 4: bắt đầu công việc thiết kế chi tiết

Lâu quá không viết tiếp phần 4 của tut, xin lỗi mọi người nhé. Chúng ta đã đi qua 3 phần với những kiến thức cơ bản nhất trong thiết kế giao diện WordPress. Hôm nay, chúng ta lại tiếp tục nghiên cứu sâu hơn vào cấu trúc giao diện wordpress với tầng cao hơn. Bắt đầu từ bài này chúng ta sẽ đi chi tiết việc thiết kế giao diện.

Do thời gian của mình hạn chế nên việc tiếp tục chuỗi bài viết bị trễ nải mặc dù rất muốn viết. Một lần nữa xin lỗi mọi người và mong mọi người tiếp tục ủng hộ NhanWeb nhé. Để đáp lại sự mong đợi của các bạn thời gian qua, tranh thủ thời gian rãnh rỗi sót lại của tối nay mình viết phần tiếp theo cho các bạn luôn đây.

Bắt tay thiết kế giao diện WordPress thôi

Ở các phần trước, NhanWeb đã chia sẻ với các bạn một số điều cơ bản cũng như cùng nhau thiết kế một giao diện đơn giản cực kì cho WordPress với chỉ 1 file index.php và 1 file style.css. Trong phần này chúng ta sẽ đi sâu hơn trong việc thiết kế giao diện với đầy đủ các thành phần của một template chuẩn luôn.

Bước 1: chuẩn bị giao diện

Trước khi thiết kế giao diện cho WordPress, chúng ta cần phải chuẩn bị một giao diện tương đối hoàn thiện bằng HTML trước đã. Để tránh việc phát sinh quá nhiều mã làm các bạn rối mắt, hạn chế việc tìm hiểu của chúng ta, mình đề xuất giao diện như sau:

Do không có thời gian và không có mắt thẩm mĩ nên tạm thời mình thiết kế tới đó thôi nhá ! Bạn nào muốn thiết kế nhiều hơn, chi tiết hơn thì cứ tự nhiên. Bản thân mình cần tối ưu hóa HTML sao cho càng ít càng tốt để mọi người dễ quan sát.

Mình có làm sẵn giao diện này cho các bạn. Bạn nào cần thì download về mà thực tập.

http://nhanweb.com/download/thietkegiaodienwp-demo.rar

Nói trước là giao diện này không đầy đủ đâu đấy nhé. Nhưng nó sẽ là khởi đầu để chúng ta viết tiếp những giao diện như ý muốn.

Bước 2: chuẩn bị các file template cần thiết

Như phần trước mình có nói với các bạn, hệ thống file template rất nhiều file và tùy theo tính năng. Theo kinh nghiệm của mình chúng ta cần chuẩn bị các file sau đây khi thiết kế giao diện:

• index.php: dùng chạy theme. Mình đã nói ở các phần trước.
• style.css: file này mình cũng đã nói. Nó chứa phần định dạng stylesheet cho toàn trang.
• header.php: chứa nội dung không đổi của phần header.
• footer.php: chứa nội dung không đổi ở cuối trang.
• sidebar.php: dùng tạo sidebar và chứa nội dung cho cột này.
• functions.php: file này dùng chứa tất cả các hàm, các khai báo cần thiết cho giao diện.
• search.php: file dùng chứa trang kết quả khi người dùng sử dụng tính năng tìm kiếm.
• single.php: chứa nội dung của một bài viết cụ thể.
• 404.php: đây là trang báo lỗi khi có lỗi liên quan đến URL xảy ra
• screenshot.png: đây là file thể hiện thumbnail của giao diện.
• license.txt: file chứa nội dung mô tả liên quan đến vấn đề bản quyền.

Trước mắt bạn tạo những file này nhưng chưa cần viết nội dung gì (riêng thumbnail thì dĩ nhiên là hình ảnh) sau đó đặt vào thư mục có tên là tên của template bạn muốn tạo. Ví dụ mình muốn đặt tên cho theme này là nhanweb mình sẽ tạo thư mục như sau:

Bước 3: Viết thông số mô tả theme

Bạn mở file style.css bắt đầu viết những dòng đầu tiên như sau;

[css] /*
Theme Name: NhanWeb
Theme URI: http://nhanweb.com/
Description: Theme Demo cho bai viet thiet ke giao dien WordPress
Author: Nguyen Duy Nhan
Version: 1.0.0
License: GNU General Public License
License URI: license.txt
Tags: nhanweb, css, thiet ke giao dien
*/

[/css]

Bạn nào làm việc với CSS cũng biết, đây là dòng comment và không có giá trị khi CSS hoạt động. Tuy nhiên, hệ thống WordPress sẽ đọc đoạn này và lấy các thông tin cần thiết để mô tả theme. Bạn có thể thay đổi nội dung phía sau dấu hai chấm (:). Còn phần phía trước dấu này là phần keyword để WordPress lấy đúng thứ cần thiết.

• Theme Name: tên của theme.
• Theme URI: địa chỉ trang tác giả
• Description: mô tả theme.
• Author: tên tác giả.
• Version: phiên bản theme. Sẽ cần khi bạn nâng cấp
• License: giấy phép sử dụng theme. Đoạn này bạn chỉ cần mô tả ngắn.
• License URI: URL đến file license.txt để đọc đầy đủ giấy phép bản quyền.
• Tags: nó là tag mà bạn gán cho giao diện. Bạn có thể gán thể loại hoặc gì cũng được miễn sao dễ tìm. Mỗi tag cách nhau bằng dấu phẩy.

Bước 4: Active theme

Sau khi hoàn tất các bước này căn bản bạn đã có 1 theme được khai báo đúng chuẩn rồi. Việc tiếp theo là active theme trong Admin của WordPress.

Truy cập vào WordPress Admin >> Appearance >> Themes bạn sẽ thấy giao diện mới của bạn được mô tả đầy đủ như hình sau:

Bạn cứ active theme lên bình thường. Vì theme hiện nay chưa có bất kì thông tin nào nên bạn sẽ không thấy gì ngoài 1 trang trắng. Đừng lo lắng, chúng ta sẽ cùng viết tiếp theme này trong bài viết sau :)