Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > Web Design > Wordpress Tips > Hướng dẫn thiết kế theme wordpress – Archive Template
Hướng dẫn thiết kế theme wordpress – Archive Template
Nguyễn Trung Hiếu
Share Code Web Company 2014

Hướng dẫn thiết kế theme wordpress – Archive Template

Trong bài viết này, các bạn sẽ học được cách tạo Archive Template cho website wordpress

Ở bài học trước, chúng ta đã được tìm hiểu về cách tạo một template là Page Template, bài học này, tôi sẽ hướng dẫn các bạn cách tạo một file template khác đó là archive.php. Một file được WordPress sử dụng để lưu trữ danh mục, tags hoặc bất kỳ một kiểu lưu trữ nội dung nào khác.
Nguyên liệu cần cho bài học

  • Một bộ code editor
  • Một trình duyệt để test thành quả
  • Một phần mềm chỉnh sửa ảnh, có thể sử dụng ngay Paint trong window
  • Nếu bạn sử dụng localhost, thì cần cài thêm một số server ảo như EasyPHP, XAMPP….
  • Nếu bạn không có quyền truy cập thằng vào host, thì cần có một account FTP để upload code.

Tạo một Archive Template

Đầu tiên, bạn vào thư mục chứa theme của bạn, sau đó tạo một file có tên archive.php với nội dung như sau:

Cũng giống như Page Template, file archive.php cũng nhúng header, footer, và sidebar và thẻ div có id là #content

Hiển thị tiêu đề trang – Page Title

Do WordPress của chúng ta có chế độ lưu trữ theo nhiều kiểu khác nhau như: ngày tháng, danh mục, tag…do đó, chúng ta cần phải thay đổi lại tiêu đề trang cho phù hợp với từng kiểu lưu trữ khác nhau. Các bạn thêm đoạn code sau vào trong thẻ div có id #content

Ở đây, hàm get_the_date() sẽ lấy ra những giá trị là ngày, tháng, hay năm, sau đó sẽ in ra. Nếu như khác kiểu ngày tháng, chúng ta sẽ sử dụng hàm get_queried_object() để lấy ra là dạng categories, tag, hay taxonomy….

Loop

Loop trong archive.php cũng như loop trong index.php nhưng với cấu trúc khác biệt, cho phép thay features image bằng hiển thị text, sử dụng the_excerpt() hoặc the_content() để hiển thị nội dung của bài viết.
Để bắt đầu vòng lặp, chúng ta thêm đoạn code sau

Feature Image

Để thêm hình ảnh feature image cho từng bài viết, chúng ta thêm đoạn code sau:

Mô tả ngắn

Thêm đoạn mô tả ngắn cho từng bài viết, giống như trên sharecodeweb.net vậy, chúng ta thêm đoạn code sau

Vậy là xong rồi đấy,chúng ta cùng chiêm ngưỡng thành quả nhé.
creating wordpress theme static html archive template

Related Posts

Tác giả: Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

http://sharecodeweb.net/?s={search_term_string}