Làm trang shop đơn giản với WordPress – 04 [NEW]

Sau khi tạo xong loại bài đăng sản phẩm và phân loại danh mục sản phẩm ở phần trước, chúng ta còn một bước quan trọng nữa để có một loại bài đăng chuẩn làm chức năng lưu trữ sản phẩm, đó là các meta box nhập thông tin sản phẩm. . Cụ thể trong loạt bài này, tôi sẽ tạo hai metabox để nhập thuộc tính giá và sản phẩm.

Về metabox nhập giá, chúng ta chỉ cần nhập số, vì vậy chúng ta sẽ tạo một meta box kiểu văn bản thông thường. Đối với meta box để nhập thuộc tính sản phẩm, chúng ta sẽ sử dụng meta box lặp vì mỗi sản phẩm có thể có nhiều thuộc tính nên không thể tạo meta box cố định được. Chúng ta sẽ tạo hai meta box này thông qua plugin Piklist đã được cài đặt ở phần 1.

Tham khảo Piklist

  • Bắt đầu với Piklist
  • Tạo siêu hộp và trường

Tạo thư mục cho Piklist trong chủ đề Trẻ em

Theo yêu cầu của Piklist, để tạo một hộp meta, chúng ta phải tạo một thư mục trong chủ đề hoặc plugin của mình theo cấu trúc của Piklist để nó chạy tự động mà không cần đưa vào bất kỳ đâu. Bây giờ chúng ta tạo thư mục / spark-child / piklist / part / meta-box / Xin vui lòng.

Làm trang shop đơn giản với WordPress – 04 [NEW]

Và bây giờ chúng ta có thể tạo bất kỳ tệp .php nào trong thư mục hộp meta và nó sẽ tự động chạy.

Khai báo thông tin chung của Meta box

Đầu tiên bạn tạo tệp /sparkling-child/piklist/parts/meta-boxes/sanpham.php và nhập thông tin sau:


<?php
/*
Title: Thông tin sản phẩm
Post Type: sanpham
*/

Với thông tin trên, chúng tôi đã tạo ra một khu vực có tên là Thông tin sản phẩm và nó sẽ hiển thị trong loại bài đăng sanpham. Sau khi lưu, bạn sẽ thấy bảng đó trong trang thêm sản phẩm:

shopdongian-piklist-metaboxes02

Nhưng nó chưa có các hộp meta, chúng tôi sẽ tiếp tục tạo bên dưới.

Tạo Meta Box để nhập giá

Đây là một meta box nhập văn bản thông thường nên việc tạo nó sẽ không khó. Chúng tôi có mã sau trong sanpham.php:

Tham khảo: Piklist – trường văn bản

/**
* Tạo box nhập giá sản phẩm
* https://piklist.com/learn/doc/text/
*/
piklist(‘field’, array(
‘type’ => ‘text’,
‘field’ => ‘sanpham_price’,
‘label’ => ‘Giá sản phẩm’,
‘description’ => ‘Nhập giá của sản phẩm này’,
‘help’ => ‘Nhập chữ hoặc số và giá trị này sẽ hiển thị ra bên ngoài website’,
‘attributes’ => array(
‘class’ => ‘sanpham_price text’
)
));

Trong đó, type có nghĩa là loại meta box và trường là ID của trường này để sau này chúng ta có thể gọi nó ra bằng hàm get_post_meta ().

xem thêm: Danh sách các loại trường của Piklist

Tạo hộp meta để nhập các thuộc tính sản phẩm

Hộp meta này sẽ là loại nhóm (tức là có nhiều trường bên trong) và có tính năng lặp lại, chúng ta có mã sau trong sanpham.php:

/**
* Tạo field nhập thuộc tính sản phẩm
* đây là field kiểu `group`
* /wp-content/plugins/piklist/add-ons/piklist-demos/parts/meta-boxes/field-add-more-single-level.php
*/
piklist(‘field’, array(
‘type’ => ‘group’,
‘label’ => ‘Thuộc tính sản phẩm’,
‘add_more’ => true,
‘field’ => ‘sanpham_attributes’,
‘fields’ => array(
array(
‘type’ => ‘text’,
‘field’ => ‘sanpham_att_name’,
‘label’ => ‘Thuộc tính’,
‘help’ => ‘Tên thuộc tính sản phẩm là một đoạn chữ miêu tả một thuộc tính đặc biệt của sản phẩm. Ví dụ: Hệ điều hành, Đời máy,…’,
‘columns’ => 6
),
array(
‘type’ => ‘text’,
‘field’ => ‘sanpham_att_value’,
‘label’ => ‘Giá trị thuộc tính’,
‘help’ => ‘Hãy nhập giá trị thuộc tính tương ứng với tên thuộc tính tương ứng.’,
‘columns’ => 6
)
)
)
);

Trong đó, type phải có giá trị là groupadd_more Cần phải true để nó có chức năng lặp lại. Khi hộp meta thuộc loại group thì chúng ta phải có một thuộc tính khác có tên fields Để chứa các hộp meta thuộc nhóm này, trong đoạn mã trên, fields chứa hai hộp meta văn bản.

[alert color=”orange” type=”alert-message-background” title=”Xem demo Piklist” size=”small”]Mặc định Piklist có sẵn nhiều trường demo hơn để chúng ta tham khảo và copy mã, để kích hoạt tính năng demo bạn có thể vào Piklist -> Tiện ích -> Kích hoạt bản demo. Sau đó tham khảo bản demo tại Piklist Demo.[/alert]

Sau khi thêm, chúng ta đã thêm thành công hộp meta như hình:

shopdongian-piklist-metaboxes03

Thêm dữ liệu mẫu

Bây giờ cố gắng thêm khoảng 4 sản phẩm, với đầy đủ hình ảnh đại diện, giá cả và thuộc tính sản phẩm để ở các phần sau chúng ta lấy dữ liệu bên ngoài.

Tạo lại hình thu nhỏ

Sau khi bạn đã thêm tất cả các sản phẩm (ít nhất 4 sản phẩm), hãy cài đặt plugin Regenerate Thumbnails. Sau đó nhập Công cụ -> Regen. Hình thu nhỏ và nhấn nút Tạo lại tất cả hình thu nhỏ để nó tái tạo các hình đại diện theo kích thước mà chúng đã chỉ định khi thực hiện trong bài 2.

Phần kết

Vậy là chúng ta đã hoàn thành bước tạo kiểu bài đăng tùy chỉnh hoàn chỉnh để quản lý sản phẩm, có hỗ trợ các hộp meta để nhập giá và thuộc tính sản phẩm. Bài viết sau mình sẽ hướng dẫn các bạn làm trang chi tiết sản phẩm và gọi thông tin này ra bên ngoài.

5/5 – (2 phiếu bầu)

Tiếp tục đọc trong bộ truyện