[Bài 3] Tìm hiểu cấu trúc Theme WordPress

Bài viết này vừa được chỉnh sửa lúc: 05/03/2021

Trong bài này chúng ta sẽ tìm hiểu cấu trúc theme WordPress, đây là căn bản cũng là bài quan trọng nhất bởi nó sẽ giúp bạn hiểu rõ các thư mục và file trong một theme WordPress.

Cách tốt nhất để khám phá cấu trúc của nó là mổ xẻ đó là theme twentyfifteen, đây là một theme mặc định có sẵn trong hệ thống WordPress và tất nhiên là cấu trúc folder được sắp xếp và lập trình theo chuẩn của WordPress, vì vậy còn gì tuyệt vời hơn nếu chúng ta bắt đầu tìm hiểu từ nó.

Trước khi đi tìm hiểu cấu trúc theme WordPress thì ta hãy tìm hiểu khái niệm theme là gì đã nhé.

1. Tìm hiểu cấu trúc Theme WordPress là gì?

Theme trong WordPress có thể xem là một addon và được dùng để hiển thị thông tin dữ liệu của website sử dụng WordPress. Ta có thể hiểu nôm na rằng nó là phần frontend của một website đang sử dụng mã nguồn WordPress.

Vì là một addon nên bạn có thể cài đặt / gỡ bỏ nó một cách dễ dàng thông qua phần quản lý theme: Appearance -> Themes.

Mỗi theme sau khi cài đặt sẽ có hai trạng thái:

  • Active là theme đang được sử dụng
  • Inactive là theme chưa sử dụng

Mỗi theme sau khi active thì nó sẽ có những thông số cấu hình trong phần Customize, hoặc nó sẽ có một menu riêng biệt trong hệ thống menu của admin.

2. Cấu trúc – ý nghĩa các file trong theme WordPress cơ bản

Đầ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.php và style.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áo của theme

Thư mục css

Thư mục này có nhiệm vụ là nơi chứa tất cả các file css phụ cho website như framework bootstrap dùng để hiển thị ngoài site và khi gọi tới các file trong thư mục này bạn cần phải khai báo nó trong file functions.php.

Thư mục genericons hay fonts.

Nếu như bạn cần sử dụng font awesome làm icon cho web thì chúng được lưu tại thư mục genericons và ngoài ra đối với website mà bạn sử dụng font hiển thị là font ngoài không phải google font thì bạn cũng cần lưu chúng trong đây và gọi nó thông qua file style.css

Thư mục inc

Thư mục inc là nơi chứa template dành cho cấu hình themes nếu bạn sử dụng. Ngoài ra bạn cũng có thể lưu các template khác như template tag.

Thư mục js

Thư mục js là nơi chứa các file js dùng cho việc tạo các hiệu ứng website dù bạn có sử dụng framework bootstrap thì cũng cần cho file js của nó vào đây và ngoài ra bạn có thể viết thêm các file js để thực hiện những điều bạn muốn trên website của bạn.

Thư mục languages

Nếu như bạn muốn việt hóa themes hay nói cách khác là khi bạn viết themes tiếng việt thì bạn sẽ cần khai báo để dịch themes sang tiếng Việt phù hợp cho người truy cập từ Việt Nam mà không bị lộn xộn giữa tiếng Anh và tiếng Việt hay quốc gia nào đó mà trong function bạn viết theo chuẩn chung thì đây là nơi bạn viết vị trí language phù hợp cho từng quốc gia.

File 404.php

File 404.php là một template riêng dùng để hiển thị lỗi 404 trên website và nó chỉ có một file duy nhất.

File archive.php

File archive.php dùng để định dạng hiển thị cho toàn bộ trang lưu trữ trên website như lưu trữ theo ngày tháng, category, tag, custom taxonomy,..

  • category.php – Định dạng hiển thị cho toàn bộ category của website.
  • tag.php – Định dạng hiển thị toàn bộ tag của website.
  • author.php – Định dạng hiển thị cho trang toàn bộ các tác giả trong website.
  • archive-product.php – Định dạng trang hiển thị danh sách các bài viết thuộc post type tên product.

File comments.php

Comments.php – định dạng hiển thị phần comment và form comment

File footer.php

Footer.php được sử dụng để khai báo phần chân trang của theme. Rồi sau đó ở các template khác ta sẽ gọi nó ra bằng get_footer().

File functions.php

Tập tin functions.php tuy không là một template nhưng nó sẽ đóng vai trò trung tâm của thêm dùng đẻ khai báo các tính năng đặc biệt và sử dụng hàm add_theme_support() để khai báo các tính năng trong theme. Bạn cũng cần lên nhớ là functions.php không phải là template nên nó sẽ không hiển thị ra bên ngoài nhưng nó sẽ thực thi toàn bộ codde php để cho kết quả ra ngoài site.

File header.php

Tập tin header.php một template trên đầu trang và cũng là nơi khai báo các thẻ như <html>, <head>, <body>,… và các template khác đều phải gọi nó thông qua template tag get_header().

File index.php

Tập tin index.php không chỉ là template để sử dụng cho trang chủ, mà nó còn là template gốc của website nếu như các template khác chưa được khai báo. Ví dụ nếu theme của bạn không có tập tin single.php để làm template cho trang nội dung của Post, thì nó sẽ sử dụng tập tin index.php để hiển thị. Các template khác cũng tương tự.

File page.php

Tập tin page.php dùng để hiển toàn bộ nội dung của một page trên website.

File screenshot.png

Screenshot.png là ảnh đại diện dùng để phân biệt cũng như demo cho người quản trị biết trước được giao diện themes và để phân biệt với các themes khác.

File search.php

Tập tin seach.php là một template độc lập dùng để hiển thị form tìm kiếm trên website.

File sidebar.php

Sidebar là phần bên trái hoặc bên phải tùy theo cách trình bày của người dùng là nơi bạn hiển thị các wiget theo ý muốn và được khao báo trực tiếp hoặc gián tiếp vào các template khác với hàm dynamic_sidebar() nhưng nếu bạn sử dụng sidebar ở nhiều template khác nhau thì bạn nên viết code hiển thị sidebar vào tập ti sidebar.php. Rồi sau đó sẽ dùng hàm get_sidebar() để gọi template này.

File single.php

Tập tin single.php dùng để hiển thị tất cả các nội dung có trong một post để người truy cập có thể đọc được nội dung mà bạn viết truyền tải cho họ.

File style.css

File đầu tiên là file style.css. Khi bạn mở file này lên thì sẽ thấy nó có một phần nội dung như sau:

Theme Name: Twenty Fifteen
Theme URI: https://wordpress.org/themes/twentyfifteen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Our 2015 default theme is clean, blog-focused, and designed for clarity. Twenty Fifteen's simple, straightforward typography is readable on a wide variety of screen  and suitable for multiple languages. We designed it using a mobile-first approach, meaning your content takes , regardless of whether your visitors arrive by smartphone, tablet, laptop, or desktop computer.
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, blue, gray, pink, purple, white, yellow, dark, light, two-columns, left-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, -language-support, sticky-post, threaded-comments, translation-ready
Text Domain: sizes,center-stagertltwentyfifteen

Đây ta gọi là phần khai báo thông tin cho theme. Nghĩa là trong một theme phải có file style.css đặt ở ngoài cùng và bên trong bạn sẽ khai báo các thông tin:

  • Theme name: Tên theme mà các bạn khai báo để cài đặt trong admin
  • Theme Uri: Đường dẫn tới theme này
  • Author: Tên tác giả của theme.
  • Version: Phiên bản của theme
  • Tags: Nếu theme này bạn có upload lên cộng đồng WordPress thì hãy điền phần từ khóa này vào, ví dự như là blue, black, khi ai có nhu cầu tìm kiếm themes, nếu họ điền vào một trong các từ khóa mà bạn đã khai báo, thì khả năng họ sẽ tìm kiếm ra themes của bạn.
  • Text Domain: Đây là phần cấu hình textdomain để sử dụng đa ngôn ngữ (phần này mình sẽ hướng dẫn sau).

3. Lời kết

Như vậy đến đây chắc hẳn bạn đã hiểu được cấu trúc của một themes wordpress. Ngoài ra bạn cũng có thể tùy biến thêm nhưng vẫn cần phải đảm bảo cấu trúc mà wordpress cho phép bạn thực hiện và để hiểu hơn thì bạn có thể truy cập vào trang web: wphierarchy.com để hiểu hơn về themes wordpress nâng cao.

0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x