Tìm hiểu cấu trúc thư mục theme trong wordpress

Ngày đăng: 13 - 04 - 2020 Lượt xem: 208 lượt

Để hiểu rõ các thành phần cấu tạo lên một theme wordpress trước khi đi vào lập trình theme wordpress, hôm nay chúng ta cùng tìm hiểu cấu trúc thư mục theme trong wordpress.

Bài viết này mình sẽ cung cấp cho bạn danh sách thư mục cũng như là những file cần thiết để một theme wordpress có thể hoạt động được. Cũng như share code thư mục theme cơ bản mà mình hay sử dụng.

Tìm hiểu cấu trúc thư mục theme trong wordpress

Cấu trúc thư mục cần để theme hoạt động:

Đầu tiên chúng ta cần phải biết, theme wordpress sẽ nằm ở thư mục: domain.com/wp-content/themes trong source code wordpress. Trong thư mục themes có thể chứa 1 hoặc nhiều thư mục con, mỗi thư mục sẽ là một theme khác nhau. Bạn có thể cài đặt nhiều theme nhưng chỉ sử dụng 1 lúc 1 theme mà thôi.

Để 1 theme wordpress hoạt động được thì chỉ cần 2 file là: index.phpstyle.css

  • File index.php chứa nội dung hiển thị của trang chủ website, có thể không chứa nội dung.
  • File style.css chưa thông tin khai bố của theme ví dụ như: Tên theme, mô tả theme, đường dẫn theme, version của theme, tên tác giả cũng như website của tác giả…

Nội dung demo của file style.css:

/*
Theme Name: GIAN DON
Theme URI: https://huykira.net
Author: Huy Kira
Author URI: https://huykira.net
Description: theme wordpress don gian
Version: 0.2
*/

Đây là nội dung file style.css của theme hocwordpress.vn

Cấu trúc đầy đủ của một theme trong wordpress:

Tùy vào chức năng khác nhau và cấu trúc thư mục của theme khác nhau, nhưng nội dung chủ yếu cũng xoay quanh các file sau:

  • Thư mục css -> Chứa style các file css của theme
  • Thư mục images -> Chứa hình ảnh của theme ví dụ như: Các hình nền, các button, icon…
  • Thư mục js -> Chứa nhưng file .js như jquery…
  • Thư mục libs -> Chứa các thư viên front end như bootstrap, owl slider …
  • File style.css -> Khai báo theme như phần phía trên đã đề cập
  • FIle screenshot.png -> Hình ảnh đại diện cho theme
  • File index.php -> Hiển thị nội dung trang chủ của website
  • File functions.php -> Nơi khai báo thêm các chức năng và viếc các hàm của website
  • File header.php -> Hiển thì khu vực phía trên của website như (Logo, menu…)
  • File footer.php -> Hiển thị khu vực phía dưới của website như (Thông tin liên hệ, copyright)
  • File sidebar.php -> Hiển thị cột bên của website (Trường hợp website có cột bên)
  • File category.php -> Hiển thị nội dung trang chuyên mục (Trang list danh sách bài viết của một chuyên mục)
  • File category-{slug}.php -> Hiển thị nội dung của một chuyện mục cụ thể theo slug ví dụ: category-tin-tuc.php -> Hiển thị các bài viết là tin tức
  • File single.php -> Hiển thị nội dung trang chi tiết của bài viết
  • File page.php -> Hiển thị nội dung chi tiết của một trang (page)
  • File search.php -> Hiển thị nội dung kết quả tìm kiếm
  • File 404.php -> Hiển thị nội dung trang không tìm thấy (Not Found)
  • File archive.php -> Hiển thị nội dung các phần lưu trữ trong website như (List bài viết theo ngày tháng, list bài viết theo tag)

Đối với các theme nâng cao có sử dụng custom post type, custom taxonomy thì chúng ta sẽ đặt tên file như sau:

  • archive-{slug}.php Hiển thị danh sách bài viết của một post type có slug là {slug}
  • single-{slug}.php Hiển thị chi tiết của một bài viết thuộc post type có slug là {slug}
  • taxonomy-{slug} Hiển thị nội dung trang taxonomy có slug là {slug}

Share cấu trúc thư mục theme mà mình hay dùng:

Nhân đây mình cũng share cho anh em cấu trúc thư mục mà mình hay sử dụng. Đây là cấu trúc mình tự xây dựng, có sẵn một số hàm cũng như một số khai báo cần thiết.

Cấu trúc theme này có sẵn một số chức năng sau:

  • Có sẵn bootstrap 4
  • Có sẵn owl slider
  • Có sẵn fontawesome
  • Có sẵn jquery
  • Khai báo sử dụng thumbnail cho bài viết
  • Khai báo 2 menu top và footer
  • Khai báo một sidebar sẵn bật tính năng wiget
  • Xây dựng sẵn hàm đếm lượt xem và hiển thị lượt xem
  • Xây dựng sẵn hàm get một mô tả ngắn của bài viết

Đây là cấu trúc theme mình sẽ share cho các bạn:

Download cấu trúc theme của hocwordpress:

Download code "Code cấu trúc thư mục theme cơ bản"
Để download code vui lòng thực hiện các bước sau!
Bước 1: Like fan page của học wordpress:
Bước 2: Để lại email, hệ thống sẽ kiểm tra và gởi code về mail trong vòng 10 phút!
Bonus:
Lưu ý: Một số trường hợp mail sẽ gởi vào mục spam. Các bạn vui lòng check kỹ ạ!

Tổng kết:

Như vậy hôm nay mình đã giới thiệu cho bạn cấu trúc thư mục theme của wordpress. Nắm được cấu theme giúp bạn chủ động trong quá trình phát triển chức năng cũng như fix lỗi kịp thời.

Bài tiếp theo chúng ta sẽ tìm hiểu về các hàm đơn giản hay dùng trong lập trình theme wordpress.

Chúc bạn học wordpress thành công!

0 0 vote
Article Rating

guest
0 Comments
Inline Feedbacks
View all comments

Bài viết liên quan

Hướng dẫn tạo menu và get menu trong wordpress

Hướng dẫn tạo menu và get menu trong wordpress

07 - 05 - 2020

Menu trong wordpress là một thành phần khá quan trọng. Hầu hết các website wordpress đều có chức năng...

Hướng dẫn get user và custom user field trong wordpress

Hướng dẫn get user và custom user field trong wordpress

07 - 05 - 2020

Tiếp tục với seri hướng dẫn lập trình theme wordpress, hôm nay mình sẽ hướng dẫn cho các bạn...

Hướng dẫn custom term field trong wordpress

Hướng dẫn custom term field trong wordpress

05 - 05 - 2020

Bài trước mình đã hướng dẫn cho bạn cách custom taxonomy trong wordpress, để tiếp nối các tính năng...

Custom taxonomy trong wordpress từ a đến z và get chúng ra front end

Custom taxonomy trong wordpress từ a đến z và get chúng ra front end

04 - 05 - 2020

Chào anh em! Tiếp tục với chủ đề hướng dẫn lập trình theme wordpress hôm nay mình sẽ hướng...

Custom field trong wordpress và các vấn đề liên quan

Custom field trong wordpress và các vấn đề liên quan

29 - 04 - 2020

Tiếp tục với loạt bài viết về hướng dẫn lập trình theme wordpress hôm nay mình sẽ giới thiệu...

Hướng dẫn custom post type trong wordpress từ a đến z

Hướng dẫn custom post type trong wordpress từ a đến z

29 - 04 - 2020

Hôm nay chúng ta sẽ đi tìm hiểu một trong những tính năng biến wordpress trở thành CMS mạnh...

0
Would love your thoughts, please comment.x
()
x