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 – Page Template
Hướng dẫn thiết kế theme wordpress – Page Template
Nguyễn Trung Hiếu
Share Code Web Company 2014

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

Tiếp tục loạt bài viết về hướng dẫn thiết kế theme wordpress, trong bài viết này chúng ta sẽ học được cách theme một Page tempate vào trong hệ thống website của chúng ta

Wordpress rất ưu việt ở chỗ, nó cung cấp cho chúng ta nhiều dạng format bài viết khác nhau, và Page Template cũng là một dạng format rất mạnh.
Với Page Template, bạn có thể thiết kế một catalog list ra bài viết, trang liên hệ, trang giới thiệu sản phẩm, menu sản phẩm… Nói chung nó sẽ cung cấp cho bạn tất tần tật những thứ bạn cần ngoài định dạng Post Format ra.
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ổng quan về các file Tempate

Như đã nói ở trên, wordpress cung cấp cho chúng ta nhiều dạng file template khác nhau, phục vụ các nhu cầu khác nhau, trong đó có các dạng:

  • File index.php, đây là một file quan trọng trong wordpress, xác định đây là trang chủ cho website của bạn
  • File Page.php hiển thị những trang có nội dung tĩnh như phần Contact, About…
  • File Single.php hiển thị nội dung bài viết
  • File archive.php hiển thị những bài viết dạng lưu trữ – bạn sẽ được học trong những bài viết sau
  • File template dành riêng cho những format bài viết khác nhau
  • File template dành riêng cho những format categories, tags, hay taxonomy terms khác nhau.

Và bài ngày hôm nay chúng ta sẽ đi học cách thiết kế một page template trong wordpress.

Tạo một Page Template

Bước đầu tiên, bạn vào folder chứa theme của chúng ta, tạo một file có tên page.php sau đó thêm đoạn code sau

Với đoạn code trên, chúng ta đã kết nối 3 file khác nhau: Header file, sidebar và footer lại, nội dung của Page sẽ được hiện thị trong cặp thẻ divid="content"

Loop

Bây giờ, làm sao để lấy được nội dung từ database với định dạng là Page format để hiển thị ra? Để làm được việc này, bạn thêm đoạn code sau vào bên trong thẻ div bên trên

Như vậy chúng ta đã hoàn thành file Page.php rồi đó, cùng thử chiêm ngưỡng thành quả xem nào
creating wordpress theme page template

Tạo custome Page

Tiếp theo, chúng ta sẽ tạo một custome page để hiển thị những thứ chúng ta muốn. Bạn cũng có thể tham khảo bài viết về Custome Page trên izwebz tại đây.
Ở đây, tôi sẽ hướng dẫn nhanh các bạn tạo một custome page cho riêng mình.
Đầu tiên, bạn vào thư mục chứa theme, duplicate file page.php sau đó đổi lại tên với bất kỳ tên nào với điều kiện có tiền tố page-là được, ví dụ như tôi đặt tên là page-full-width.php chẳng hạn, sau đó bạn mở ra, trong phần chú thích ở phần đầu của file, bạn thêm dòng

Dòng này sẽ thông báo cho wordpress biết để lấy ra các định dạng page khác nhau. Với Page này, chúng ta sẽ cho hiển thị full nội dung mà không có phần sidebar bên tay phải nữa. Bạn tìm dòng

và thay bằng

Chỉ là đổi tên class đi thôi mà. Sau đó tìm và xóa đoạn code sau đi

Vậy là chúng ta đã tạo ra một custome page cho riêng mình một cách đơn giản rồi đó, cũng theo cách trên, bạn có thể tùy ý design lại file custome page của mình theo ý muốn bằng css hoặc có thể dùng các hàm trong wordpress để lấy ra danh sách bài viết theo các format khác nhau cũng được.

Cách sử dụng custome page

Để sử dụng được custome page mà chúng ta vừa tạo, thì bạn login vô wordpress của bạn, sau đó vào phần Pages, điền đầy đủ nội dung, cuối cùng để ý tới phần Page Attribute, chọn loại custome page mà bạn đã tạo
using custome page in wordpress
Sau đó chúng ta thử view xem kết quả thế nào
using wordpress custome page

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}