Wordpress — May 30, 2016 at 3:16 am

Hướng dẫn tạo cấu trúc theme (Lập trình theme WordPress)

by

Sau khi bạn đã cài mới một website WordPress trên localhost và import Theme Unit Test thì bạn bắt đầu vào làm nội dung có sẵn,  nhằm giúp tạo thuận lợi hơn trong việc kiểm tra việc hiển thị theme nhanh chóng và hợp chuẩn cho WordPress. Trước khi chúng ta bắt đầu các công việc quan trọng như viết code cho nó thì bạn phải định hình kế hoạch theme cho website của mình là điều vô cùng quan trọng.

Dưới đây là bài hướng dẫn bạn tạo theme một cách đơn giản mà bạn nên quan tâm đến vì chúng sẽ giúp bạn thuận tiện hơn trong việc viết code.

Tạo thư mục chứa theme

Bây giờ bạn hãy vào thư mục /wp-content/themes và tạo một thư mục mà bạn muốn chứa theme, ví dụ mình sẽ đặt tên thư mục là thachpham.

Trong thư mục này, bạn hãy tạo ra một file style.css với nội dung như sau:

01
02
03
04
05
06
07
08
09
10
11
12
/*
 * |---:[Đoạn này sẽ chứa các đoạn giới thiệu và thông tin về theme, như tên theme (Theme Name), tên tác giả (Theme Author), địa chỉ của tác giả (Author URI),...]:---|
 * Theme Name: ThachPham Theme
 * Description: Đây là một theme đơn giản để thực hành Lập trình theme WordPress
 * Theme URI: http://thachpham.com/serie/lap-trinh-theme-wordpress
 * Version: 1.0
 * Theme Author: ThachPham
 * Author URI: http://thachpham.com
 * Tags: starter theme, framework theme, two-columns, customize
 * Textdomain: thachpham
 */

Mình xin giải thích một xíu về một vài dòng comment được thêm vào theme như:

  • Tags: Nếu bạn có upload theme này lên thư viện WordPress.Org thì cái tag này nghĩa là các từ khóa mà người dùng có thể tìm ra theme của bạn một cách dễ dàng nhất.
  • Text-domain: Thực ra đây là một dòng comment thêm, để cho bạn và người dùng khác có thể biết textdomain trong theme là gì để dễ dàng dịch theme ra một ngôn ngữ khác. Mình sẽ có hướng dẫn cho bạn cách viết code hỗ trợ i18n.

Thêm vào đó, bạn có thể tìm một tấm ảnh và đặt tên là screenshot.png rồi đặt vào thư mục theme để làm ảnh hiển thị, bạn có thể dùng tấm ảnh này.

Cấu trúc theme

Tiếp tục, bạn hãy tạo ra lần lượt các file sau:

  • thachpham/
    • functions.php
    • index.php
    • header.php
    • footer.php
    • page.php
    • single.php
    • content.php
    • content-none.php
    • archive.php
    • search.php
    • author.php
    • 404.php
    • sidebar.php

Tiếp tục, tạo một thư mục tên là templates trong theme và tạo các file sau vào thư mục đó, các file này sẽ là custom page template.

  • full-width.php
  • contact.php

Đây là hình ảnh về cấu trúc theme cần tạo:

wordpress-11
cấu trúc theme cần tạo

Bây giờ bạn hãy vào Dashboard -> Appearance -> Themes thì sẽ thấy theme của mình đã được hiển thị ra.

wordpress-12
theme của mình đã được hiển thị ra

Hãy kích hoạt nó lên, sau khi kích hoạt thì website của bạn sẽ là trang trắng vì chưa có nội dung gì cả, chúng ta sẽ tiến hành làm tiếp ở các phần sau của serie này.

Tóm lại cấu trúc Theme sẽ giúp cho bạn tiện dụng trong viết các loại code nhanh hơn dễ dàng và cũng phân biệt theo từng khung hiệu quả tránh nhằm lẫn các loại code khác. Việc này giúp những người code có thể nhận diện nhanh hơn giúp trang web bảo trì tốt hơn.

Nguồn: thachpham.com

Leave a Comment

Your email address will not be published. Required fields are marked *