Học thiết kế Theme cho WordPress (P1)

Chào các bạn, mình đã đến với wordpress từ cách đây 1 năm, và vào thời điểm đó mình chỉ xem wordpress đơn giản chỉ có thể làm blog hoặc trang tin tức, nhưng thật sai lầm !  WordPress thật ra vô cùng mạnh mẽ và rất dễ tiếp cận đối với cả người dùng và các lập trình viên.

Sau thời gian dài mò mẫm thì mình cũng đã nắm tương đối được cách hoạt động của bộ mã nguồn tuyệt vời này. Trên mạng cũng đã có rất nhiều bài viết hướng dẫn thiết kế theme cho WordPress. Nhưng mình vẫn muốn làm 1 series bài viết về thiết kế theme với 2 mục đích chính sau:

– Để mình ôn lại kiến thức của mình và để làm tài liệu xem lại sau này

– Hi vọng giúp được phần nào cho các bạn có ý định tìm hiểu và có đam mê về WP.

Trong series này mình mạn phép bỏ qua vụ cài đặt cũng như làm quen với wordpress. Các bạn mới đến với wordpress có thể tìm các tài liệu hướng dẫn có rất nhiều trên mạng.

Để không dài dòng nữa, mình xin bắt đầu phần đầu tiên của series. Đây là các bài viết dựa trên kiến thức và kinh nghiệm của bản thân nên không thể tránh khỏi các thiếu sót, và mình rất mong nhận được các đóng góp và nhận xét của các anh em để mọi người cũng học. Welcome …

Phần 1 : Cấu trúc theme WordPress.

Ở phần đầu này chúng ta sẽ làm quen với một số khái niệm trong theme của WordPress.

Post: Đây là bài viết, 1 bài viết có thể nằm trong nhiều chuyên mục (Category hoặc Taxonomy). Trang bạn đang xem chính là 1 Post. Và post phải luôn thuộc ít nhất 1 chuyên mục.

Page: Đây thực ra cũng được xem như là 1 post nhưng mang post_type là page. Nhưng chức năng của page hoàn toàn khác với post.

Page là 1 trang riêng biệt không thuộc chuyên mục nào. Bạn có thể hiểu page là một trang chứa các nội dung xác định. Thực ra anh chàng page này rất đa năng và chúc ta sẽ tìm hiểu về chức năng của hắn trong các Tuts sau.

Template file: Đây là các file tạo nên giao diện của theme. Các file này có thể chứa các hàm xử lý. Có thể kể đến các file như: header.php, footer.php, sidebar.php, search.php, single.php …

Cấu trúc của Theme

Nghe theme có vẻ phức tạp quá hen các bạn ^^! . Nhưng thật ra chúng ta chỉ cần có 2 file đặt đúng chỗ thì chúng ta đã có 1 theme rồi. Các bạn không tin à?? Vậy các bạn thử tạo 1 file index.php và style.css bỏ vào 1 thư mục tên bất kỳ, mình lấy là demo chẳng hạn và bỏ vào đúng chỗ, theo đường dẫn sau :

www/wordpress/wp-content/themes

bạn sẽ có

www/wordpress/wp-content/themes/demo

Vậy là xong thôi, bạn vào wp-admin vào mục Appearance -> Themes . Bạn có thấy theme của bạn chưa??? …

Tất nhiên chưa ^^. Đời đâu dễ vậy hehe. Đùa tí cho đỡ buồn ngủ thôi. Muốn hiển thị theme thì bạn phải khai báo nó. Khai báo cách nào? Bạn chỉ việc mở file style.css và điền nội dung như sau vào.

?

1 2 3 4 5 6 7 8 9

/* Theme Name: Demo theme Theme URI: http://vietpan.net Author: Tran Xuan Thieu Author URI: http://vietpan.net Description: This is a demo How to create a WordPress theme  Step by Step Version: 1.0 License: Bản quyền thuộc về cộng đồng wordpress */

Thay đổi thông tin theo ý thích sau đó save lại. Sau đó F5 lại trang quản lý theme thì bạn sẽ thấy theme của bạn. Nhớ rằng nội dung phải nằm trong tag /* */

Vậy là 1 theme đã ra đời ^^. Hãy tự thuởng mình 1 ly cafe đi hihi. …

Giờ ta sẽ tiếp tục đến các file không kém phần quan trọng sau đây vì không có chúng thì cái theme của bạn sẽ chỉ là 1 trang … trắng nhách.Và chúng ta sẽ xem vai trò của từng file.

index.php : anh chàng này quan trọng đây, file này nó sẽ tiếp nhận request và sẽ gọi nội dung tương ứng. Bạn có thể xem đây là 1 bootstrap.

single.php : Hiển thị nội dung chi tiết của 1 post.

page.php : hiển thị nội dung của Page

archive.php : hiển thị các bài viết theo dạng lưu trữ.

search.php : trang tìm kiếm và kết quả tìm kiếm.

404.php : khi lỗi 404: Not Found xuất hiện thì tên này sẽ được gọi.

category.php : Hiển thị các posts theo chuyên mục.

taxonomy.php : tương tự như category, hiển thị các bài viết được phân loại theo taxonomy.

comments.php : hiển thị các bình luận

functions.php : Chứa các hàm xử lý của theme được viết theo các function.

Ngoài ra còn các file định hình theme như sau:

header.php :  sẽ được gọi khi dùng hàm get_header();

sidebar.php : sẽ được gọi khi dùng hàm get_sidebar();

footer.php : sẽ được gọi khi dùng hàm get_footer();

Lưu ý: khi ta truyền 1 giá trị vào trong hàm thì file tương ứng sẽ được gọi

VD: get_header(‘home’)  thì file header-home.php sẽ được gọi.

Tương tự đối với 2 cái còn lại. Quá tiện lợi phải hok ^^.

Vậy là các bạn có thể biết được bản chất thật sự của Theme. Các bạn có thể tìm hiểu thêm về cấu trúc của theme tại trang tài liệu chính của wordpress.

http://codex.wordpress.org/Template_Hierarchy

Các hàm ở trên các bạn cũng có thể search trên trang codex để hiểu rõ hơn về chúng.

Và đây là gói chứa các file cơ bản nhất của 1 theme. Các bạn down về xem chơi ^^. demo.rar

Mình kết thúc phần 1 tại đây, ở phần 2 chúng ta sẽ từng bước hoàn thành 1 theme hoàn chỉnh. Trong quá trình đó chúng ta sẽ tìm hiểu các hàm của wordpress…

Bài viết nếu có gì thiếu sót các bạn nhớ góp ý cho mình nha, mình vô cùng cảm kích ^^.

________________________________________

Vietpan