Cấu trúc themes chuẩn khi thiết kế giao diện themes WordPress

Themes là tợp hợp của rất là nhiều thành phần template. Với themes sẽ giúp trang web của các bạn sinh động hơn, dễ điều hướng hơn, & thử nghiệm người dùng cũng tốt hơn & hơn cả là trình bày đẹp đẽ bát mắt giúp lôi kéo người dùng với những chức năng mà bạn viết ra cho một trang web.

Không những thế hầu hết toàn bộ các themes giành riêng cho các trang web sử dụng mã nguồn mở nói chung đều có một cấu trúc khẳng định & chúng khá tương đồng với nhau. Nó chỉ khác nhau về nhân, cấu trúc thư mục & cách viết code khác nhau chút xíu nhưng cuối cùng vẫn cần này là hiển thị kết quả ngoài site với giao diện bát mắt. Nếu như trang web của các bạn làm mà xấu thì hiển nhiên không làm người đam mê & sẽ không đoái hoài đến việc quay trở lại trang web của các bạn cho dù bài viết có đa dạng tới đâu trừ khi bạn seo keyword tốt trên dụng cụ tìm kiếm.

Nếu như ban đang xài mã nguồn mở thì chắc bạn cũng sẽ hiểu đôi chút về cấu trúc themes wordpress với nhiều themes phong phú & đa dạng được xây dựng bởi cộng đồng mã nguồn mở wordpress trên toàn thế giới với đủ màu sắc cho bạn lựa chọn nhưng chưa chắc phù phù hợp với trang web của các bạn. Cũng chính vì điều đó khi bạn thiết kế themes hay lên giao diện cho trang web sử dụng wordpress thì bạn cần phải hiểu được cấu trúc của một themes wordpress chuẩn ra sao.

Ở bài này Thịnh chia sẻ với bạn về cấu trúc themes wordpress. Cấu trúc themes wordpress thì không khổ cực đẻ hiểu, bạn chỉ cần coi là ra vấn đề, nhưng nếu như bạn quên hay lâu rồi không làm giao diện thì ở bài này giúp bạn nhớ lại cấu trúc của một themes wordpress hoàn chỉnh.

Điều trước nhất bạn sẽ thấy ngay trong bản tải về wordpress bạn sẽ có 3 themes mặc định do wordpress họ tiến triển & làm dùng thử mặc định cho mọi người có thể sử dụng & tùy biến sử dụng theo mục đích của các bạn.

  • twentyfifteen
  • twentyfourteen
  • twentysixteen
Xem Thêm  Hộp tìm kiếm CSS [Bộ sưu tập tốt nhất về thiết kế hộp tìm kiếm] - hộp tìm kiếm google css

Nhưng thường thì những themes mặc định như thế ít có người dùng & chính vì như vậy bạn cần thiết kế một themes mới hoàn toàn phù phù hợp với nhu cầu & mục đích trang web.

Themes WordPress toạ lạc thư mục themes trong thư mục wp-content & tại đây bạn có thể tiến hành tạo thư mục cho themes mới & tiến hành viết code cho nó. Không những thế nó cần phải tuân theo các cấu trúc dưới đây bao gồm thư mục & file.

  • Thư mục css.
  • Thư mục genericons hay fonts.
  • Thư mục inc.
  • Thư mục js.
  • Thư mục languages.
  • File 404.php.
  • File archive.php.
  • File comments.php.
  • File cuối trang.php.
  • File functions.php.
  • File header.php.
  • File index.php
  • File page.php
  • File screenshot.png.
  • File search.php.
  • File sidebar.php.
  • File single.php.
  • File style.css.

template-hierarchy

Khái niệm thành phần trong themes wordpress

Thư mục css

Thư mục này có bổ phận là nơi chứa toàn bộ các file css phụ cho trang web như framework bootstrap dùng để hiển thị ngoài site & 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 website thì chúng được lưu tại thư mục genericons & không những thế so với trang web 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 nên lưu chúng trong đây & gọi nó thông qua file style.css

Thư mục inc

Thư mục inc là nơi chứa template giành riêng cho cấu hình themes nếu bạn sử dụng. Không những thế 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 trang web dù bạn có sử dụng framework bootstrap thì cũng nên cho file js của nó vào đây & không những thế bạn có thể viết thêm các file js để thực hiện những điều bạn mong muốn trên trang web của các bạn.

Thư mục languages

Nếu như bạn mong 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 thích hợp cho người truy cập từ viet nam mà không bị lộn xộn giữa tiếng Anh & tiếng Việt hay đất nước nào này mà trong function bạn viết theo chuẩn chung thì đây là nơi bạn viết địa điểm language thích hợp cho từng đất nước.

Xem Thêm  iPhone 14 Pro Max tiếp tục lộ diện thiết kế qua concept mới, màn hình đục lỗ hình chữ 'i' và giá từ 18 triệu đồng - thiết kế giao diện android bằng photoshop

File 404.php

File 404.php là một template riêng dùng để hiển thị lỗi 404 trên trang web & 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 thể trang lưu trữ trên trang web như lưu trữ theo ngày tháng, category, tag, custom taxonomy,..

  • category.php – Định dạng hiển thị cho toàn thể category của trang web.
  • tag.php – Định dạng hiển thị toàn thể tag của trang web.
  • author.php – Định dạng hiển thị cho trang toàn thể các Author trong trang web.
  • archive-product.php – Định dạng trang hiển thị mục lục các nội dung thuộc bài viết type tên product.

File comments.php

Comments.php – định dạng hiển thị phần bình luận & form bình luận

File cuối trang.php

Dưới cùng của trang.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ò trọng điểm của thêm dùng đẻ khai báo các chức năng đặc biệt & sử dụng hàm add_theme_support() để khai báo các chức năng trong theme. Bạn cũng nê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 thể 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 & cũng là nơi khai báo các thẻ như <htmlvàgt;, <headvàgt;, <bodyvàgt;,… & 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 những là template để sử dụng cho home page, mà nó đang là template gốc của trang web nếu như các template khác chưa được khai báo. Chẳng hạn nếu theme của các bạn không có tập tin single.php để làm template cho trang bài viết của Bài viết, thì nó sẽ sử dụng tập tin index.php để hiển thị. Các template khác cũng như với.

Xem Thêm  Hàm COUNTIF trong Excel - đếm nếu hàm trong excel

File page.php

Tập tin page.php dùng để hiển toàn thể bài viết của một page trên trang web.

File screenshot.png

Screenshot.png là ảnh đại diện dùng để phân biệt cũng như dùng thử cho người quản trị biết trước được giao diện themes & để 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 trang web.

 

File sidebar.php

Sidebar là phần bên trái hoặc bên phải tùy vào cách trình bày của người dùng là nơi bạn hiển thị các wiget theo ý mong muốn & đượ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ì chúng ta 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ị toàn bộ các bài viết có trong một bài viết để người truy cập có thể đọc được bài viết mà bạn viết truyền tải cho họ.

File style.css

Tập tin style.css là nơi dùng để khai báo thông tin về themes & những class css mà bạn sử dụng trên trang web. Tập tin này đều cần có trên toàn bộ các themes wordpress. Còn nếu như không có tập tin này thì trang web của các bạn không đúng chuẩn themes wordpress

Toàn bộ các theme trong WordPress đều cần có tập tin style.css. Tập tin này không những là chứa các CSS trong theme mà nó còn tồn tại tính năng khai báo thông tin của theme như tên theme, tên Author, số phiên bản,…nhằm có thể hiển thị trong khu vực Themes của WordPress. Nếu theme bạn không có tập tin này thì theme của các bạn không hợp lệ.

Lời kết

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

Viết một bình luận