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.
Hệ thống file của một theme WordPressViệ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:
Cấu trúc giao diện WordPressNhư 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
[code language=”php”]<?php get_header();?>
<div id="main"> Day la content cua website tao boi www.nhanweb.com</div>
<?php get_footer(); ?>
[/code] 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 :)
Phụ mục
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:
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ư:
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.
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…
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:
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.