WP Theme design – thiết kế theme WP phần 2: Template file và Template

Tác giả: Nguyễn Duy Nhân    8 Comments

Phần này sẽ nói chi tiết hơn về cấu trúc template của WordPress. Bạn sẽ hiểu một giao diện WordPress bao gồm những phần nào và vận hành ra sao. Nếu bạn chưa đọc phần 1, hay quay lại đọc phần này để hiểu rõ những điều cơ bản trong theme WP và cấu trúc của một hệ thống giao diện WP trước khi chúng ta đi sâu vào phần 2 này nhé..

Sau phần đầu tiên, chúng ta đã hiểu về cấu trúc theme, các thuật ngữ và các qui tắc cơ bản để thiết kế giao diện WordPress. Phần này sẽ nói sâu về file index.php và cách nó vận hành qua đó sẽ giải thích về chức năng của một số file mà bạn có thể tìm thấy trong một theme WordPress.

Cấu trúc template file WordPress

Việc đầu tiên bạn cần biết đó là mỗi Page, mỗi Post… của WordPress được xây dựng bởi nhiều file được gắn lại với nhau. Ví dụ như hình dưới đây:

Ví dụ về giao diện của một theme WordPress

Như hình trên, bạn có thể thấy một giao diện WordPress khi hiển thị ra bên ngoài sẽ bao gồm các thành phần được viết trong các file header.php, index.php, footer.php và sidebar.php. Để trực quan hơn xin giới thiệu với các bạn một đoạn code tạo file index.php

	Day la content cua website tao boi www.nhanweb.com

Hàm get_header(‘name_file’) sẽ gọi tên file file dạng header-name_file.php do bạn chỉ định. Trong trường hợp nội dung đưa vào hàm là rỗng (như trường hợp ở đoạn code trên) hệ thống sẽ gọi file header.php. Tương tự như vậy cho hàm get_footer(). Như vậy, đoạn code ở file index.php này sẽ có nhiệm vụ gọi file header.php và footer.php để include vào file index.php để hiện 1 giao diện đầy đủ có nội dung là

Day la content cua website tao boi www.nhanweb.com

Còn theo ví dụ ở hình trên, chúng ta sẽ include vào file index.php 3 file là header.php, footer.php và sidebar.php. Bạn thấy cần thêm gì nữa thì thêm – tùy bạn

Header Template file và Footer Template file

Mình muốn điểm sơ qua 2 thành phần này trước vì nó tương đối đơn giản. Thông thường thành phần đầu(header) và cuối(footer) của trang web sẽ ít có sự thay đổi và đó là lý do bạn đưa những thành phần này vào header.php và footer.php

File header.php tùy theo giao diện mà chúng ta chia cắt HTML cho hợp lý nhưng với một template đơn giản chúng ta sẽ không thể thiếu thành phần chính như tiêu đề website, đoạn mô tả website như hình:

Header của một theme WordPress đơn giản

File footer.php thông thường chúng ta đưa vào nội dung là phần copyright hoặc thông tin liên hệ, chủ quyền website như:

Footer của một theme WordPress đơn giản

Index Template File

Đây là phần nội dung sẽ hiển thị trên website bao gồm danh sách bài viết, các bình luận hoặc các plugin có liên quan đến nội dung…tóm lại là bạn muốn người đọc đọc được cái gì thì đây chính là chỗ nó cần xuất hiện.

Giao diện file index.php

Chúng ta cần lưu ý một chút, file index.php không làm nhiệm vụ hiển thị nội dung chi tiết của bài viết. Phần nội dung chi tiết được thiết kế thông qua một giao diện khác nằm trong file single.php. Bạn có thể hiểu file index.php chứa nội dung trang chủ của website.

Sidebar Template File

Đây là thành phần thiết kế nên cột dữ liệu bên phía tay phải(hoặc tay trái theo giao diện của bạn). Phần này thường được thiết kế để chứa danh sách category, các widget, blogroll…

Ví dụ về một siderbar trong WordPress

Single.php

Phần trên mình đã nói là phần nội dung chi tiết của một bài viết (Post) hay một trang(Page) được thiết kế thông qua một file tên gọi single.php nên chắc bạn cũng đã hiểu single.php để làm gì rồi. Tương tự như file index.php, single.php cũng có cấu trúc khá giống:

Ví dụ về cấu trúc của một single.php

Nếu bạn có 1 chút vốn liếng tiếng Anh, mình nghĩ bạn sẽ dễ dàng phát hiện ra các template file thường được đặt theo chức năng của nó. Nên nếu bạn không rành code, bạn có thể đọc tên cũng có thể biết được nó dùng làm gì rồi. Hãy thử tìm hiểu trong theme bạn đang dùng người ta đã chia ra làm bao nhiêu thành phần và những thành phần đó làm chức năng gì. Đây là bước đầu tiên để bạn hiểu cách họ viết giao diện WordPress như thế nào.

Bài có liên quan

• Thiết kế theme WP – phần 12: làm việc với Category & Search Form
• Thiết kế theme WP – phần 11: Menu
• Thiết kế theme WP – phần 10: Làm việc với widget(tiếp)
• Thiết kế theme WP – phần 9: Làm việc với widget
• Thiết kế theme WP – phần 8: làm việc với comment
• Thiết kế theme WP – phần 7: làm việc với content
• Thiết kế theme WP – phần 6: sử dụng vòng lặp (loop)
• Thiết kế theme WP phần 5: trích xuất template file và viết header.php
• Thiết kế theme WP phần 4: bắt đầu công việc thiết kế chi tiết
• Thiết kế theme WP phần 3: Bắt đầu viết file index.php