Phần 2 : Xây dựng cấu trúc theme

Chào các bạn.

Ở phần 1, chúng đã tìm hiểu về cấu trúc theme của WP. Bây giờ để chi tiết hơn chúng ta hãy cùng từng bước xây dựng 1 theme hoàn chỉnh cho wordpress.

Để dễ nắm nội dung, mình xin tóm tắt nội dung.

Chúng ta sẽ xây dựng 1 website bán hàng trực tuyến với các chức năng chính sau:

Đối với Front-End:

– Hiển thị tin tức

– Trang sản phẩm: giá, giảm giá, ảnh minh họa, loại sản phẩm, sản phẩm hot, best sales,…

– Chức năng Subcribe

– Giỏ hàng, lưu hóa đơn và thanh toán paypal.

– Trang liên hệ.

– Phân trang dữ liệu.

– Bộ đếm hit-counter, online counter.

– Custom nav menu.

– Friendly Url

– SEO support

Đối với Back-End :

– Custom menu

– Theme options

Và còn rất nhiều chức năng nhỏ khác. Và tất cả các chức năng trên chúng ta đều code mà không sử dụng bất kì một plug-in nào.

Để bắt đầu xây dựng theme điều đầu tiên chúng ta cần 1 giao diện. Các bạn có thể tự design hoặc tìm trên internet có rất nhiều.

Trong bài viết này mình sử dụng tạm giao diện này để demo thôi.

DownloadDemo

Bây giờ bạn tạo 1 theme mới , nếu quên thì có thể xem lại phần 1.

Bạn download template trên và giải nén ra. Copy toàn bộ vào thư mục theme vừa tạo.

Bạn nên dùng phần mềm editor chẳng hạn như notepad++ để nhanh. À mình quên nói là các bạn nên dùng 1 IDE để tiện cho việc sử dụng các hàm, mình thì xài thằng Zend Studio 8.0 đi kèm với notepad++ thành 1 bộ đôi .

Bạn dùng np++ mở file index.html ra và xác định cấu trúc của template và xác định các thành phần như header, content, footer, sidebar.

Những thành phần cố định trên site như logo, banner, header hay sidebar và footer thì bạn tách ra để vào các file tương ứng.

Sau khi làm xong bạn mở file header.php để khai báo lại đường dẫn cssjs như sau:

1
<link type="text/css" rel="stylesheet" href="<?php bloginfo('template_url');?>/style.css"/>

Hàm bloginfo() sẽ giúp bạn lấy các thông số của blog, ví dụ như code trên sẽ lấy đường dẫn đến theme. Bạn có thể  echo nó ra để xem thử.

Trong wordpress thay vì echo thì bạn dùng hàm _e(“Nội dung”); , nó tương đương với echo đấy.

Bạn có thể tìm hiểu thêm về hàm này trên codex để biết các đối số của nó, sau này sẽ xài nhiều đó.

Mình tạm dừng tại đây, làm từ từ từng bước thui . hehe

Và cuối cùng là source code của phần này ^^.

DOWNLOAD

Link các phần khác: