Tạo theme Bootstrap P4: Cấu trúc theme WordPress

Chào các bạn, ở các phần trước của Serie Thiết kế giao diện WordPress bằng Bootstrap mình đã hướng dẫn các bạn hoàn tất việc thiết kế HTML và CSS cho trang web xong. Hôm nay mình sẽ giới thiệu đến các bạn về cấu trúc theme WordPress và những chức năng của nó, hy vọng sẽ giúp các bạn hình dung được một Theme WordPress nó như thế nào.

Sau đây là danh sách các file và thư mục sẽ được tạo ra trong 1 theme WordPress, ở đây mình sẽ giới thiệu đến các bạn những file phổ biến nhất đủ để các bạn có thể thiết kế một website WordPress chuyên nghiệp với đầy đủ các tính năn cần thiết, ngoài ra còn có một số file khác phục vụ một số chức năng nào đó các bạn có thể tìm hiểu thêm.

Các thư mục:

  1. css
  2. fonts
  3. images
  4. js

Các file:

  1. 404.php
  2. functions.php
  3. header.php
  4. index.php
  5. footer.php
  6. archive.php
  7. single.php
  8. page.php
  9. style.css
  10. screenshot.jpg

Bây giờ mình sẽ giới thiệu sơ qua chức năng của từng file và thư mục trên.

css

Thư mục này dùng để chứa các file css như các file css của Framework Bootstrap hay những plugin jquery mình thêm vào, thư mục này cũng như các thư mục khác thì WordPress không có bắt buộc ta phải đặt tên như vậy nhưng mình đặt vậy để dễ quản lý hơn.

fonts

Thư mục chứa những file font chữ dùng trong trang web, Bootstrap có kèm theo bộ font glyphicons-halflings khi bạn tải về, ngoài ra bạn có thể thêm bộ font tùy chỉnh của mình vào và gọi nó ra bằng cú pháp @font-face trong css.

images

Thư mục dùng để chứa những hình ảnh có dùng trong giao diện như hình ảnh các icon, ảnh logo, …

js

Dùng để chứa những file Javascript và Bootstrap cũng có các file js riêng cho mình nhằm hỗ trợ các bạn viết một số chức năng có kèm hiệu ứng, bạn có thể xem thêm tại đây.

404.php

File này dùng để viết giao diện cho trang 404, khi ai đó truy cập một liên kết không tồn tại trên trang web của bạn thì dẫn đến link này và báo cho người dùng biết bài viết này không tồn tại và hướng dẫn họ tìm kiếm bài viết trên website của mình.

Mặc định nếu không có file 404.php thì WordPress sẽ tự điều hướng người dùng về trang chủ.

Trang 404 của trang web WordPress

Trang 404 của trang web WordPress

functions.php

File này được hiểu là file chức năng, nó dùng để khai báo các hàm chức năng như tạo menu, sidebar, đếm lượt truy cập, post format, … Các bạn sẽ hiểu rõ hơn khi bước vào phần tiếp theo của Serie

header.php

Nội dung file header.php dùng để chứa các thành phần đầu của trang web, thường thì các phần đầu của trang web sẽ giống nhau gồm có logo, menu, ô tìm kiếm, … nên chúng ta sẽ cho nó vào file header.php, và ở các file như index.php, single.php ta chỉ cần dùng hàm <?php get_header(); ?> để include nội dung file header.php vào để sử dụng mà không cần phải viết lại nội dung phần đầu trang.

index.php

Đây là file dùng để viết code cho trang chủ của trang web WordPress, nó sẽ có cú pháp như bên dưới:

<?php get_header( ); ?>
<div id="wrapper">
  <!-- code phần thân của trang chủ -->
</div>
<?php get_footer( ); ?>

footer.php

Đây là file chứa nội dung code của phần chân trang web WordPress, thì thì là thông tin liên hệ hay menu chân trang, phần này nó cũng lặp đi lặp lại ở các trang nên ta tách ra làm file footer.php để khi cần thì chỉ cần gọi hàm <?php get_footer(); ?> và sử dụng.

archive.php

Như các bạn đã biết ở các phần trước thì đây là file chứa nội dung code của trang danh mục website WordPress, cú pháp nó cũng tương tự như trang index.php

single.php

Tương tự thì đây là file chứa nội dung của trang bài viết trong website WordPress.

page.php

Đây là trang chứa code hiển thị nội dung trong Page, thường phần Page chúng ta sẽ làm trang giới thiệu, liên hệ, tìm kiếm, …

trang page wordpress

Page trong trang web WordPress

style.css

File này cũng vô cùng quan trọng trong cấu trúc theme WordPress, nó cùng để chứa các hàm CSS của trang web.

Ở phần đầu file style.css ta thêm đoạn code sau để cấu hình các thông tin cho theme như: Tên theme, tên tác giả, link trang web, …

/*
Theme Name: XuanThucBlog Theme
Theme URI: http://xuanthuc.com
Description: Chia se thu thuat WordPress
Version: 2.0
Author: Xuan Thuc
Author URI: http://thuc.me
*/

screenshot.jpg

Đây là hình ảnh đại diện cho Theme của bạn.

Ở phần sau mình sẽ bắt đầu hướng dẫn các bạn chuyển từ HTML vừa làm xong sang giao diện WordPress dựa trên cấu trúc ở bài hôm, cảm ơn các bạn đã theo dõi Serie của mình.

Bài Viết Cùng Series:

GỬI BÌNH LUẬN