Trang chủ »  WP Theme »  Cấu trúc theme của wordpress

Cấu trúc theme của wordpress

04/06/2021  -   126 views

Chào cả nhà, hôm nay mình viết bài về cách tìm hiểu cấu trúc theme cho wordpress. Để hiểu rõ các thành phần, bố cục tạo nên một theme wordpress trước khi bạn tìm hiểu đến Lập trình theme wordpress.

Trước tiên, bạn phải hiểu một theme được hình thành bởi các template. Các template trong theme sẽ bao gồm các file như header.php, footer.php, sidebar.php,…nhưng có hai file bắt buộc cần có trong một theme đó là functions.php và style.css.

  • Tạo custom post type và taxonomy trong wordpress
  • Những đoạn code hay dùng trong lập trình theme wordpress
  • Chuyển hướng trang lỗi 404 về trang chủ
  • Hướng dẫn tạo chức năng search autocomplete trong wordpress
  • Tổng hợp các đoạn code về woocommerce
  • Viết tính năng tính số lượt xem bài đăng trong WordPress
  • Cấu trúc template trong theme

    Thì như bạn đã biết theme nó sẽ nằm ở mục wp-content / theme / [tên-theme] trong source của bạn. Trong thư mục thì có thể có nhiều theme, nếu như bạn muốn biết một theme chuẩn thì có thể tham khảo theme Twenty Fifteen.

    Để 1 theme wordpress hoạt động tốt thì cần 2 file index.phpstyle.css. 

    • index.php là template gốc của theme, 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.
    • style.css như là trái tim của theme, file này có thể chứa css cho theme mà nó còn có công dụng là để khai báo các thông tin của theme như Tên theme, tác giả, version, đường dẫn,… nhằm để hiễn thị trong khu vực WordPress.

    Nội dung trong file style.css

    /*
    Theme Name: TourTVC Theme
    Theme URI: TVC
    Author: Can TVC
    Description: Our 2019 default theme is designed to show off the power of the block editor.
    Requires at least: 4.9.6
    Requires PHP: 5.2.4
    Version: 1.7
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Text Domain: tourtvc
    Tags: custom-header, custom-menu, featured-images, threaded-comments, translation-ready
    */

    Cấu trúc đầy đủ của theme

    • header.php Phần đầu của trang web, nơi khai báo các mục như logo, menu. Các template khác thì chỉ cần gọi get_header() để dùng lại nó.
    • footer.php Phần cuối của trang web, chứa các thông tin của webiste đó. Các template khác thì chỉ cần gọi get_footer() để dùng lại nó.
    • sidebar.php Hiễn thị thông tin của sidebar, để hiễn thị ra ngoài thì dùng get_sidebar();
    • category.php Hiễn thị danh sách chuyên mục của 1 post, hay 1 post type nào đó.
    • category-tin-tuc.php Định dạng hiển thị trang category có slug là tin-tuc.
    • category-123.php Định dạng hiển thị trang category có id là 123
    • 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).
    • single.php Hiễn thị chci tiết bài viết của theme.
    • page.php Hiễn thị thông tin của các page.
    • search.php Hiễn thị thông tin tìm kiếm của theme
    • screenshot.png Hình ảnh đại diện cho theme
    • style.css Hiễn thị thông tin của theme như Tên theme, tác giả, …
    • index.php Hiễn thị thông tin trang chủ của theme
    • comments.php Hiễn thị khu vực bình luận của theme.
    • functions.php Nơi khai báo các chức năng cho theme, viết mới hay update theme
    • Và có các mục liên quan như css, js, images….

    Các theme có sử dụng custom post type, custom taxonomy thì cấu trúc sẽ như sau:

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

    cấu trúc theme cơ bản 

    Tổng kết

    Như vậy việc tạo 1 template chuẩn cho theme wordpress thật đơn giản đúng không các bạn. Sau khi nắm kĩ các phần trong cấu trúc theme rồi mới chuyển trang các phần thực hành cho từng file trong theme. Các bạn tham khảo seri lập trình theme wordpress để được học và làm theo mình nhé. Các bạn củng có thể tham khảo bài Những đoạn code hay dùng trong theme wordpress.

    Hãy tham gia group của mình để cùng xây dựng cộng đồng mạnh mẽ và follow các bài viết mới nhất về wordpress của mình nhé. Tvcdev WordPress Community 

    Chúc bạn một ngày vui vẽ. See you !

    5 1 đánh giá
    Article Rating
    Theo dõi
    Thông báo của
    guest
    0 Comments
    Phản hồi nội tuyến
    Xem tất cả bình luận

    Bài viết liên quan

    WP Theme 25/09/2021

    Hướng dẫn tạo child theme trong wordpress

    Chào các bạn, hôm nay mình hướng dẫn đến các bạn một bài viết củng khá quan trọng trong wordp(...)

    Mẹo - thủ thuật 20/07/2021

    Hướng dẫn tạo chức năng search autocomplete trong wordpress

    Hôm nay mình sẽ hướng dẫn đến các bạn một bài viết liên quan về ajax củng như mẹo và thủ (...)

    Mẹo - thủ thuật 03/06/2021

    Chuyển hướng trang lỗi 404 về trang chủ

    Hôm nay mình giới thiệu đến các bạn về thủ thuật điều hướng trang 404 về trang chủ hay 1 tra(...)

    Mẹo - thủ thuật 02/06/2021

    Tạo custom post type và taxonomy trong wordpress

    Xin chào cả nhà !. Chúc các bạn 1 ngày mới vui vẽ Hôm nay mình xin hướng dẫn các bạn cách tạo (...)

    0
    Rất thích suy nghĩ của bạn, hãy bình luận.x