#3 – WP Dev – Thiết lập cơ bản cấu trúc theme goclamweb

0

Chúng ta sẽ đi vào xây dựng một theme WordPress có tên goclamweb nhé. Mục đích của theme là dành cho blog cá nhân, web tin tức nhỏ, đăng bài viết, gắn quảng cáo …

Video Thiết lập cơ bản cấu trúc theme goclamweb

Hướng dẫn chi tiết

Cài đặt website WordPress và config

Cài đặt website WordPress trên localhost. Mình đã hướng dẫn rất nhiều lần rồi. Bạn có thể xem lại tại đây. Cài đặt WordPress trên XAMPP

Chúng ta sẽ sửa lại file wp-config.php trong thư mục website vừa cài đặt. Các bạn vào thư mục xampp/htdocs/thư-mục-chứa-website. Tìm file wp-config.php và chỉnh 1 số thứ cho mình

Tìm dòng define(‘WP_DEBUG’, false); và sửa lại gái trị false thành true.

Thêm 2 dòng này vào wp-config.php

define('SAVEQUERIES',true);
define( 'WP_DEBUG_LOG', true );

Cấu trúc mã nguồn WordPress gồm 3 thư mục:

  • wp-includes: chứa toàn bộ mã nguồn để vận hành WordPress. Đây có thể coi là core chính của WordPress.
  • wp-admin: chứa mã nguồn xử lý những thao tác trên trang admin.
  • wp-content: chứa theme, plugin, upload file. Những phần người dùng người có thể gắn thêm vào “động cơ” WordPress.

Các file nằm bên ngoài 3 thư mục nằm có nhiệm vụ gọi hàm và thực thi, không có xử lý logic (những dòng code căn bản, trực tiếp xử lý vấn đề của chúng ta). File config chúng ta sửa để nó có thể hiển thị lỗi, hiển thị câu truy vấn, giúp chúng ta dễ dàng viết và sửa lỗi code. Khi phát hành, sử dụng trong thực tế, chúng ta phải đảm bảo theme chạy được với file wp-config.php chưa chỉnh sửa.

Theme của chúng ta là thư mục goclamweb sẽ nằm trong thư mục wp-content/themes/ nhé.

Chỉnh thêm file php.ini một số thông số sau:

  • post_max_size=128M
  • max_execution_time=3600
  • max_input_time=3600
  • memory_limit=256M
  • upload_max_filesize=256M
  • max_file_uploads=30

Cấu trúc theme WordPress

Trong thư mục goclamweb, chúng ta sẽ có một số file cơ bản như sau, nói trước thui, chứ làm tới đâu tạo file tới đó để tránh bị rối khi mới làm quen nhé.

  • style.css: khai báo thông tin theme. Phần css của giao diện sẽ nằm chỗ khác nhé
  • index.php: file chạy đầu tiên của theme
  • functions.php: chứa mã thực thi các hành động trong theme
  • header.php: phần đầu trang
  • footer.php: phần cuối trang
  • page.php: trang đơn
  • single.php: trang chi tiết bài viết
  • archive.php: trang lưu trữ. Chúng ta sẽ áp dụng cho cả chuyên mục, thẻ và tác giả luôn nhé.
  • search.php: Trang hiển thị kết quả tìm kiếm
  • 404.php: trang 404
  • sidebar.php: sidebar của theme
  • screenshot.png: ảnh đại diện của theme trong phần quản lý giao diện WP

Chúng ta sẽ có các thư mục sau:

  • assets: chứa file css và js cho giao diện
  • includes: chứa các file làm nhiệm xử lý, thực thi. File functions.php chúng ta chỉ khai báo và gọi hàm ra. Toàn bộ code logic nằm trong thư mục includes để dễ quản lý.
  • templates: chứa các file định dạng giao diện – templates cho post và page
  • partials: chứa các thành phần của phần nội dung, cắt ra từ single và page.

Một số thuật ngữ sẽ hơi khó hiểu, vậy nên đừng tạo file hay thư mục trước. Các bạn sẽ được hướng dẫn tạo trong từng bài nhé.

Ngoài ra chúng ta còn có 2 thư mục nữa là woocommerce (chứa các file tùy chỉnh lại giao diện cho tương thích với plugin bán hàng woocommerce) và buddypress (chứa các chứa các file tùy chỉnh lại giao diện cho tương thích với plugin diễn đàn buddypress). Hai phần này để tính sau nha.

Các file chúng ta sẽ tạo trong bài này à:

  • screenshot.png
  • index.php
  • style.css

Trong file style.css chúng ta khai báo 1 số dòng sau:

/*
Theme Name: Góc làm web
Theme URI: https://goclamweb.com
Author: Góc làm web
Author URI: https://goclamweb.com
Description: Minimal blog theme for WordPress
Requires at least: WordPress 5.0
Text Domain: glw
Version: 1.0.0
Tags: news, grid-layout, one-column, two-columns, three-columns, 
four-columns, left-sidebar, right-sidebar, buddypress, footer-widgets, 
rtl-language-support, theme-options
Domain Path: /languages
*/

Mình giải thích một số mục chính nha:

  • Theme Name: tên của theme sẽ hiển thị trong Appearance
  • Theme URI: đường dẫn theme (link tải theme về, wordpress.org, themeforest …)
  • Author: Tên tác giả theme
  • Author URI: đường dẫn website của tác giả
  • Description: Mô tả cho theme
  • Requires at least: yêu cầu tối thiểu
  • Text Domain: Có thể nói nôm na là phần định danh để phân biệt theme, plugin của bạn. Text domain của bạn phải đảm bảo, không trùng với bất kỳ theme hay plugin nào khác. Do đó, bạn nên đặt tên dài một chút. Mình chỉ dùng theme này để dạy khóa học WordPress nên đặt đơn giản là glw nhé.
  • Version: phiên bản của theme
  • Tags: một số thẻ để WordPress nhận dạng theme của bạn thuộc loại gì. Nếu bạn up theme lên free cho wordpress.org thì sẽ giúp theme của bạn dễ đến tay người dùng khi họ tìm kiếm.

Một số tags cho theme thông dụng, bạn có thể tham khảo tại đây: WordPress handbook

Theme của bạn trong giao diện quản lý theme
Theme của bạn trong giao diện quản lý theme

Thông tin chi tiết theme

Thông tin chi tiết của theme

Thử cài và active theme xem thử kết quả nhé.

Khung giao diện theme cho bạn nào cần.

File HTML chúng ta sẽ sử dụng cho phần bài học này. DOWNLOAD HTML

Link code mẫu trong bài học: DOWNLOAD

Nếu có thắc mắc, đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.

Đừng quên LikeShare nếu thấy bài viết thú vị.

Liên hệ

Để lại một trả lời

Địa chỉ email của bạn sẽ không được công bố.