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

Ngày đăng: 13 - 04 - 2020 Lượt xem: 4786 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 Kira:
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!

3.4 9 votes
Đánh giá bài viết

Nhận thông báo
Nhận thông báo cho
guest

0 Góp ý
Bình chọn
Mới nhất Cũ nhất
Inline Feedbacks
View all comments

Bài viết liên quan

Tạo và quản lý vai trò người dùng trong WordPress

Tạo và quản lý vai trò người dùng trong WordPress

18 - 12 - 2021

WordPress đã là một lựa chọn phổ biến cho các trang web cần hệ thống quản lý nội dung...

Đếm số lượt xem bài viết WordPress

Đếm số lượt xem bài viết WordPress

19 - 04 - 2021

Đếm số lượt xem bài viết WordPress? Bạn đang muốn tạo bộ đếm số lượt xem trang/ bài viết để...

Sử dụng child theme trong WordPress

Sử dụng child theme trong WordPress

23 - 02 - 2021

Sử dụng child theme trong WordPress như thế nào? Nếu bạn đã từng sử dụng WordPress để xây dựng các...

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

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

08 - 05 - 2020

Sidebar trong wordpress sẽ giúp website linh động hơn. Giúp khách hàng có thể thay đổi một số thành...

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...

0
Would love your thoughts, please comment.x