Lập trình theme wordpress woocommerce

Bài trước mình đã hướng dẫn bạn cách cài đặt và thiết lập plugin woocommerce. Trong bài viết hôm nay mình sẽ hướng dẫn bạn cách tạo ra một theme riêng biệt sử dụng HTML có sẵn và tích hợp vào theme.

Tạo theme WordPress

Đầu tiên chúng ta cần thiết lập một theme wordpress trước, cái này mình đã từng hướng dẫn ở bài :Hướng dẫn viết theme wordpress căn bản bạn tìm lại đọc cho kỹ nhé, ở đây mình sẽ làm nhanh thôi.

Bây giờ thì có thể bạn đã tạo được một thư mục theme trong wordpress và copy toàn bộ mã html của bạn và bỏ vào đây nhé.

Mình khuyên bạn nên sử dụng notepad++ để dễ dàng quản lý mọi thứ hơn.

Cái foldel as workspace trong notepad nó không cho phép tạo file hoặc thư mục nên bạn chịu khó vào thư mục chính và tạo ra các file sau:

• index.php
• content.php
• content-none.php
• 404.php

• 0

• 1

• 2

• 3

• 4

• 5

Mình sẽ bắt đầu cắt HTML và gán vào từng file trên nhé.

1.Tạo trang chủ.

• Đầu tiên là file index.php, file này sẽ không chứa HTML nhưng sẽ có đoạn code sau:

• Tiếp theo là bạn mở file
  7 để xác định các nội dung cố định và nội dung thay đổi. Mẹo là bạn hãy mở hai trang HTML như là
  7 và
  9, chuyển qua lại bạn sẽ thấy vùng không thay đổi (thường là nằm phía trên và dưới cùng.
• Sau khi tìm ra các phần chung mình khoanh vùng các vùng đỏ cố định như sau

Phần đầu trang chủ

Phần đầu trang blog

• Cả hai trang đều có phần menu trở lên tương tự nhau, vì thế nên mình sẽ lấy phần này vào file
  4.

Phần đuôi trang chủ

Phần đuôi trang Blog

• Vùng chân trang chung được xác định ở ô khoanh màu đỏ, nên mình sẽ cắt phần này và đưa vào file
  5.
• Một lưu ý nhỏ là các theme được thiết kế chuẩn HTML5 như theme này thường có đặt điểm là nó được phân ra rất rõ ràng như thẻ

  /*
  Theme Name: TUANDC SHOP
  Theme URI: https://tuandc.com
  Author: Tuan DC
  Author URI: https://tuandc.com
  Description: Theme for shop.
  Version: 1.1
  License: GNU General Public License v2 or later
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
  Text Domain: tuandc
  Tags: shop, shopping cart, archive.
  */

  2 định danh phần đầu, thẻ

  /*
  Theme Name: TUANDC SHOP
  Theme URI: https://tuandc.com
  Author: Tuan DC
  Author URI: https://tuandc.com
  Description: Theme for shop.
  Version: 1.1
  License: GNU General Public License v2 or later
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
  Text Domain: tuandc
  Tags: shop, shopping cart, archive.
  */

  3 định danh các đoạn nội dung và thẻ

  /*
  Theme Name: TUANDC SHOP
  Theme URI: https://tuandc.com
  Author: Tuan DC
  Author URI: https://tuandc.com
  Description: Theme for shop.
  Version: 1.1
  License: GNU General Public License v2 or later
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
  Text Domain: tuandc
  Tags: shop, shopping cart, archive.
  */

  4 định danh phần cuối trang. Vì mẫu mình đang dùng được thiết kế theo chuẩn như thế nên mình sẽ dựa vào đó để copy sang các file php nhé.
• Nội dung file header.php như sau:

• Lưu ý là bạn phải copy cả phần

  /*
  Theme Name: TUANDC SHOP
  Theme URI: https://tuandc.com
  Author: Tuan DC
  Author URI: https://tuandc.com
  Description: Theme for shop.
  Version: 1.1
  License: GNU General Public License v2 or later
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
  Text Domain: tuandc
  Tags: shop, shopping cart, archive.
  */

  5 (1) nhé. phần (2) sẽ bao gồm một thẻ mở

  /*
  Theme Name: TUANDC SHOP
  Theme URI: https://tuandc.com
  Author: Tuan DC
  Author URI: https://tuandc.com
  Description: Theme for shop.
  Version: 1.1
  License: GNU General Public License v2 or later
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
  Text Domain: tuandc
  Tags: shop, shopping cart, archive.
  */

  6 và toàn bộ nội dung của thẻ

  /*
  Theme Name: TUANDC SHOP
  Theme URI: https://tuandc.com
  Author: Tuan DC
  Author URI: https://tuandc.com
  Description: Theme for shop.
  Version: 1.1
  License: GNU General Public License v2 or later
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
  Text Domain: tuandc
  Tags: shop, shopping cart, archive.
  */

  2.
• Tiếp theo bạn mở file
  5 và thêm đoạn bắt đầu từ thẻ

  /*
  Theme Name: TUANDC SHOP
  Theme URI: https://tuandc.com
  Author: Tuan DC
  Author URI: https://tuandc.com
  Description: Theme for shop.
  Version: 1.1
  License: GNU General Public License v2 or later
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
  Text Domain: tuandc
  Tags: shop, shopping cart, archive.
  */

  4 đến hết file.
• Bây giờ bạn quay trở lại file
  4 và tiến hành thêm đoạn này vào phần

  /*
  Theme Name: TUANDC SHOP
  Theme URI: https://tuandc.com
  Author: Tuan DC
  Author URI: https://tuandc.com
  Description: Theme for shop.
  Version: 1.1
  License: GNU General Public License v2 or later
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
  Text Domain: tuandc
  Tags: shop, shopping cart, archive.
  */

  5.

• Bây giờ bạn thêm vào thư mục theme một file có tên “

  //HTML của blog vào đây
  

  2” và thêm vào file nội dung sau:

/*
Theme Name: TUANDC SHOP
Theme URI: https://tuandc.com
Author: Tuan DC
Author URI: https://tuandc.com
Description: Theme for shop.
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tuandc
Tags: shop, shopping cart, archive.
*/

• Bạn cũng có thể thêm một tấm hình có tên “

  //HTML của blog vào đây
  

  3” để nhận dạng theme trong. Bây giờ bạn vào phần “Giao diện”  và “kích hoạt” theme mới của mình.

• Sau khi kích hoạt theme, Woocommerce nó sẽ báo theme của bạn không hỗ trợ, cũng không cần quá lo lắng vì mình chưa tích hợp woo mà.
• Bây giờ các bạn ra trang chủ sẽ thấy giao diện như thế này.

• Tiếp theo các bạn mở file content.php và thêm các phần còn lại của trang
  7 vào. Kết quả là bạn sẽ có một trang chủ hoàn chỉnh.
• Bây giờ công việc tạo theme sẽ trở nên dễ dàng hơn. Bước tiếp theo chúng ta sẽ làm nhanh để tích hợp các phần còn lại.

2.Tạo trang danh mục tin tức

• Đầu tiên bạn mở file
  0, mình không sử dụng

  //HTML của blog vào đây
  

  7 là vì mình không tách ra các phần riêng biệt như

  //HTML của blog vào đây
  

  8,

  //HTML của blog vào đây
  

  9,… mà mình muốn chung trong một file nên mình chỉ tạo
  0.
• Sau đó bạn thêm nội dung như sau:

//HTML của blog vào đây

• Hai đoạn 

  //HTML thay đổi của blog-single.html
  

  1 và 

  //HTML thay đổi của blog-single.html
  

  2 là dùng để lấy nội dung ở file
  4 và
  5. đó là lý do vì sao mình lại lấy các HTML cố định vào 2 file đó.
• Tiếp theo hãy mở file
  9 và tìm đến các nội dung thay đổi, bật mí luôn là mình hay dùng cách này nè.

• Sao chép phần số hai và bỏ vào phần chú thích ở file
  0 và truy cập đến một danh mục bạn sẽ thấy kết quả. Tuy nhiên nó chỉ là nội dung cố định, nếu bạn muốn lấy ra các nội dung thì các bạn chịu khó quay lại đọc bài Hướng dẫn viết theme wordpress căn bản mục 4 nhé.

3.Tạo trang tin tức

• Tương tự bạn mở file
  1 lên và thêm vào nội dung sau:

//HTML thay đổi của blog-single.html

• Tiếp theo bạn mở file

  //HTML thay đổi của blog-single.html
  

  8 và tìm đến phần nội dung thay đổi, sao chép và thay vào chú thích trên.
• Mở một bài viết lên bạn sẽ thấy kết quả, và cũng chỉ là kết quả tĩnh bạn xem lại bài Hướng dẫn viết theme wordpress căn bản mục 4 nhé.

4.Trang 404, page

Hai trang này cũng rất cần thiết và thực hiện tương tự các trang trên nhé, đối với trang Page, bạn có thể sử dụng nội dung của file

//HTML thay đổi của blog-single.html

9, loại bỏ đi các nội dung trong đó là được.

Như vậy là mình đã xong theme wordpress. trong bài sau mình sẽ hướng dẫn tạo ra các trang tích hợp woocommerce.

Đánh giá bài viết

Tác giả: ĐOÀN CÔNG TUẤN

Với niềm đam mê về khoa học công nghệ thông tin, đặc biệt là lập trình. Tôi đã thành lập blog Tuandc.com để lưu trữ và chia sẻ những kiến thức thực tế có được trong quá trình làm việc. Với kinh nghiệm gần 10 năm làm việc trong lĩnh vực, những kiến thức tôi chia sẻ hy vọng sẽ giúp được phần nào đó.