WP Theme design – thiết kế theme WP

Đây sẽ là một chủ đề dài hơi! Bởi chúng ta sẽ cùng nhau làm việc trong vấn đề Theme – một thành phần mà mình nghĩ nhiều bạn theo dõi NhanWeb sẽ quan tâm. Câu trả lời cho câu hỏi “tự thiết kế theme cho WordPress ?” bạn sẽ tìm ra sau khi chúng ta kết thúc loạt bài này.

Để bắt đầu, mình cũng xin chia sẻ với mọi người là mình thích mọi người vừa đọc vừa thực hiện. Do đó, mình sẽ chia bài viết này ra làm nhiều phần và viết dần dần từng phần. Chắc khoảng mất gần 1 tháng đấy ! Nhưng đừng lo, bạn sẽ có thời gian nghiên cứu, tìm hiểu và rút ra những bài học cho mình. Nếu bạn cảm thấy mình có thể tiếp thu nhanh, bạn có thể tự học qua Document về giao diện được WordPress chia sẻ sẵn rồi.

Bắt đầu

Trong phần đầu tiên này, mình sẽ nói về những thứ căn bản nhất trong WordPress. bao gồm:

1. Qui luật căn bản khi thiết kế theme WordPress
2. Một số khái niệm được nhắc đến thường xuyên trong WordPress và theme
3. Cấu trúc cơ bản của theme

Các phần tiếp theo sẽ đi sâu vào từng thứ một và cả cách để bạn thiết kế.

Qui luật căn bản

Qui luật 1: viết HTML cho đúng

Đây là cái căn bản nhất và cũng là quan trọng nhất mà mình muốn nói đến. Mọi website đều trả về HTML nên việc viết đúng HTML là một điều cần thiết. Hãy so sánh 2 ví dụ dưới đây:

Trong WP hay bất kì website nào, bạn cần tuân thủ các qui tắc viết HTML: mỗi tag HTML thường có dấu < và dấu >. Kết thúc tag được đánh dấu khác với mở đầu bằng một slash(/). Trong thiết kế giao diện WordPress, tag ul và li là 2 tag được sử dụng nhiều nhất. Căn cứ vào đó đó bạn có thể thiết kế giao diện và viết CSS.

Qui luật 2: một theme WordPress phải có ít nhất 2 file: index.php và style.css

Mọi theme wordpress đều chứa ít nhất 2 file này dù bạn có muốn hay không. Bạn viết một theme, theme của bạn sẽ gọi file index.php để lấy dữ liệu và định dạng dữ liệu được bạn thiết kế trong style.css. Ngoài ra, các thành phần khác cần hay không cần là do cách bạn xây dựng theme theo cách của mình. Dưới đây là danh sách các file thường có hoặc theo chuẩn thiết kế theme của WordPress đề nghị:

• style.css
• index.php
• home.php
• single.php
• page.php
• archive.php
• category.php
• search.php
• 404.php
• comments.php
• comments-popup.php
• author.php
• date.php

Chi tiết những file này làm công việc gì mình sẽ nói sau ở phần viết nội dung cho từng file hoặc bạn có thể tìm hiểu thêm ở Document về giao diện mà mình đã nói đến ở trên.

Một số khái niệm

Bạn là một nhà thiết kế giao diện cho WordPress bạn không thể không biết những khái niệm dưới đây:

1. Template: một đoạn code được viết dưới dạng một hàm hoặc một file mà bạn có thể sử dụng lại nhiều lần.
2. Template file: đơn giản là các file tạo nên một theme của giao diện. Những file mà mình liệt kê ở trên có thể được hiểu là các template file.
3. Theme hoặc WordPress theme: giao diện WordPress được gọi là theme. Bao gồm nhiều file và thư mục chứa hình ảnh, mã lập trình, mã giao diện, mã javascript… giúp hình thành nên giao diện bên ngoài.
4. Post: hiện tại bạn đang xem một bài viết. Và bài viết này trong wordpress được hiểu là một Post.
5. Page: khác với post, Page là một trang riêng biệt và không nằm trong một danh mục nào cả. Page mà chúng ta đang nói khác với page (trang – dùng để phân trang). Bạn có thể hiểu Page như một phần nội dung ít thay đổi và được đưa ra nhằm phân biệt với các phần Post mà bạn thường xuyên viết (ví dụ như Page liên hệ, Page giới thiệu tác giả…). Khái niệm này khác với khái niệm phân trang (page) ở chỗ nó được viết hoa chữ P.

Cấu trúc một theme WordPress

Khi bạn xây dựng một theme WordPress hoàn tất, file index.php, style.css sẽ làm nhiệm vụ thực thi các mã lệnh tương ứng nhằm trình bày dữ liệu và xuất bản dữ liệu cho người dùng. Để công việc đỡ rối rắm, người ta thường chia ra nhiều template file theo tính năng và công dụng. Mỗi template file sẽ được chèn vào file index.php để làm công việc tương ứng với chức năng của nó.

Sử dụng template tối giản, chúng ta có những template file như hình dưới đây:

Theo như hình phía trên, chúng ta có các file template chức năng như sau:

1. index.php: file thực thi chung và được triệu gọi ở tất cả mọi trang. File này trình bày dữ liệu cơ bản của một giao diện
2. single.php: trình bày dữ liệu cho một Post
3. page.php: trình bày dữ liệu cho một Page
4. archive.php: đây là trang trình bày cho các bài viết được đưa vào dạng lưu trữ.
5. search.php: trang tìm kiếm hoặc kết quả tìm kiếm.
6. 404.php: nếu liên kết không tồn tại, trang này sẽ hiện ra.

Ngoài ra còn rất nhiều nội dung khác như tôi đã mô tả ở phần qui luật 2. Tuy nhiên, bạn có thể chèn những nội dung đó vào index.php luôn nếu muốn.

Kết thúc phần này ở đây. Giờ các bạn hãy mở các template của WordPress bạn đang có và xem thêm các cấu trúc thường gặp của nó. Bạn cũng nên report lại bài viết này bằng cách liệt kê các cấu trúc thường gặp của bạn hoặc các template file mà bạn chưa rõ tính năng. Mình sẽ cố giải thích cho bạn…