Cách tạo trang giới thiệu sản phẩm bằng Meta Box Plugin

Cách tạo trang giới thiệu sản phẩm bằng Meta Box Plugin

Trang giới thiệu sản phẩm được coi là trang quan trọng nhất trên website, vì nó thường là nơi mà khách hàng của bạn sẽ quan tâm và dừng lại đọc lâu nhất, cũng là nơi tác động chính lên quyết định mua hàng của họ. Vì vậy việc xây dựng một trang giới thiệu sản phẩm tốt luôn là vấn đề đặc biệt quan trọng trong quá trình xây dựng và tối ưu website.

Ngoài bố cục đẹp, thì trang giới thiệu sản phẩm cần phải hiển thị các thông tin chính xác, đầy đủ về sản phẩm nhưng cũng phải dễ nhìn và tối ưu để khách hàng dễ dàng ra quyết định mua hàng. Trong khi đó, một sản phẩm có rất nhiều loại thông tin khác nhau, nên bạn không nên tùy tiện viết toàn bộ thông tin ấy vào WordPress Editor như một bài viết thông thường được. Phải có cách để hiển thị thông tin một cách chuyên nghiệp và tự động đúng không nào?

Trong bài viết này, mình sẽ hướng dẫn bạn tạo một trang giới thiệu sản phẩm chuyên nghiệp bằng cách sử dụng Meta Box plugin. Hãy cùng theo dõi dưới đây nhé.

Trang giới thiệu sản phẩm là gì?

Đối với các doanh nghiệp kinh doanh các sản phẩm, dịch vụ trực tuyến thì trang giới thiệu sản phẩm không quá xa lạ.

Đây chính là nơi để doanh nghiệp giới thiệu về sản phẩm / dịch vụ một cách chi tiết và thuyết phục nhất để người tiêu dùng có thể quyết định chọn mua sản phẩm / dịch vụ đó hay không.

Trên trang giới thiệu sản phẩm này thường có các thông tin cơ bản như: hình ảnh sản phẩm / dịch vụ, giá, mẫu mã, thông tin kỹ thuật, màu sắc, đặc điểm nổi bật, … Mỗi thông tin này thường là một trường thông tin riêng biệt và cần nhập vào từ backend và lấy tự động ra frontend. Vì vậy, bạn sẽ cần sử dụng đến công cụ đặc biệt để tạo các trường thông tin này, đó chính là Meta Box plugin.

Ngoài ra, trang web nào cũng vậy, ngoài thông tin cần có trên trang, thì mỗi trang đều cần phải có một giao diện cho nó. Trong bài viết này, mình sẽ thao tác để tạo một trang giới thiệu về dịch vụ cho thuê xe với giao diện như sau:

Cách sử dụng Meta Box Plugin để làm trang giới thiệu sản phẩm - Giao diện một trang cho thuê xe

Giao diện một trang cho thuê xe

Bây giờ, cùng bắt tay vào việc tạo trang này nhé.

Tạo trang giới thiệu sản phẩm bằng Meta Box plugin

Chuẩn bị

Đầu tiên, bạn cần cài đặt Meta Box plugin và một số extension của nó. Đây là một WordPress plugin giúp bạn tạo, thiết lập các custom fields một cách dễ dàng và chuyên nghiệp. Bạn có thể tìm hiểu thêm về plugin này tại đây.

Trong bài hướng dẫn này mình sẽ sử dụng Meta Box plugin và 2 extension của nó là Meta Box BuilderMB Custom Post Type, trong đó:

  • Meta Box plugin: là nền tảng cốt lõi để tạo và làm việc với các custom fields.
  • Meta Box Builder: là công cụ giúp bạn có một giao diện trực quan để tạo và thao tác với các custom fields mà không cần dùng code. Với giao diện này thì bạn chỉ cần kéo thả nên không cần hiểu biết về code cũng có thể dễ dàng tạo các trường thông tin đặc biệt. Công cụ này có tính phí nhé các bạn.
  • MB Custom Post Type: là công cụ giúp bạn tạo một loại post type mới. Trang sản phẩm không phải một dạng bài viết thông thường, nên sẽ cần một loại post type mới cho nó. Công cụ này miễn phí, bạn hoàn toàn có thể tải trực tiếp về từ WordPress.org.

Bạn cần cài đặt và kích hoạt cả 3 plugin trên trên website của bạn để thao tác được giống như bài mình hướng dẫn. Nếu bạn chưa muốn sử dụng Meta Box Builder, thì bạn hãy tự code một số bước trong bài này hoặc copy đoạn code mà mình đăng trong bài để sử dụng nhé.

Thực hiện

Bước 1: Tạo một Custom Post Type mới

Như mình có nói ở trên, trang sản phẩm không phải là loại bài viết thông thường mà WordPress cung cấp mặc định. Mình sẽ cần tách loại bài viết về sản phẩm riêng ra thành một loại riêng để sau này bạn có thể quản lý danh mục sản phẩm, phân loại, lọc, … Vì vậy bạn sẽ cần một loại post type mới, sử dụng MB Custom Post Type để tạo.

Trong giao diện admin dashboard, bạn hãy tìm đến menu Meta Box > Post Types > New post type.

Cách sử dụng Meta Box Plugin để làm trang giới thiệu sản phẩm - Tạo một custom post type mới

Tạo một custom post type mới

Bạn hãy điền các thông tin khai báo cho post type này như trong ảnh dưới đây, sau đó nhấn Publish.

Cách sử dụng Meta Box Plugin để làm trang giới thiệu sản phẩm - Thiết lập thông tin cho custom post type

Thiết lập thông tin cho custom post type

Ở bước này bạn chú ý các điểm sau:

Post type mình tạo có tên là “Car Rental” với slug là “car-rental”
Mình bỏ chọn mục Editor ở mục Support phía bên phải vì giao diện trang này của mình không cần đến phần Editor mặc định của WordPress.

Bạn tùy chỉnh phần này theo mục đích sử dụng của bạn nhé. Mình có hướng dẫn chi tiết hơn về cách tạo Custom Post Type ở bài viết này, bạn có thể tham khảo thêm.

Sau khi tạo xong, ở menu trong admin dashboard của bạn sẽ xuất hiện thêm một menu mới là “Car Rental” như ảnh dưới đây:

Cách sử dụng Meta Box Plugin để làm trang giới thiệu sản phẩm - Một menu mới xuất hiện tương ứng với loại post type đã tạo

Một menu mới xuất hiện tương ứng với loại post type đã tạo

Bước 2: Tạo custom fields cho custom post type “Car Rental”

2.1. Tạo một custom meta box để chứa các custom fields cần thiết

Trước tiên, bạn cần tạo một custom meta box để chứa tất cả các custom fields của bạn. Trong admin dashboard, bạn tìm đến menu Meta Box > Custom Fields rồi chọn Add New.

Một giao diện để bạn chỉnh sửa meta box (hay còn gọi là field group) có tên là Edit Field Group sẽ hiển thị ra như sau:

Cách sử dụng Meta Box Plugin để làm trang giới thiệu sản phẩm - Tạo custom meta box (field group) để chứa các custom fields bên trong

Tạo custom meta box (field group) để chứa các custom fields bên trong

Mình đặt tên cho meta box này là “Car Rental” ở ô Title và ID là “car-rental”.
Lúc này, bạn hãy chuyển sang tab Settings, ở mục Post Types, bạn hãy chọn tên của loại custom post type mà bạn vừa mới tạo (Car Rental) để quy định cho meta box này sẽ hiển thị ở trang bài viết của loại post type đó.

Cách sử dụng Meta Box Plugin để làm trang giới thiệu sản phẩm - Chỉ định meta box đang tạo là dành cho loại post type về sản phẩm

Chỉ định meta box đang tạo là dành cho loại post type về sản phẩm

Sau đó nhấn Save.

Vậy là bạn đã có một meta box – là một cái khung – để chứa các custom fields mà bạn cần.

2.2. Tạo các custom fields cần thiết

Ở bước này, chúng ta sẽ cần tạo lần lượt từng field tương ứng với một trường thông tin về sản phẩm của bạn. Các field này sẽ đều nằm trong meta box (field group) có tên là Car Rental mà ta vừa mới tạo.

Do mỗi trường thông tin có một kiểu dữ liệu khác nhau như số, chữ, khoảng giá, ảnh, … nên với mỗi loại thông tin, mình cũng sử dụng một loại field riêng như sau:

Loại field Trường thông tin của sản phẩm
Number Price / Car Year / Max Passengers
Select Fuel / Gearbox / Doors
Text Fuel Usage / Engine Capacity / Max Luggage / Mileage
Image Adv Car Gallery

 

Mình sẽ hướng dẫn bạn tạo mỗi loại field này một field (tương ứng là một trường thông tin về sản phẩm), sau đó bạn có thể áp dụng tiếp để tạo cho các trường thông tin còn lại nhé.

  • Tạo Number Field cho trường thông tin Price (Giá thuê xe)

Vẫn trong giao diện Edit Field Group, tại tab Fields, bạn hãy tìm đến cột Input Fields và nhấn chọn Number. Một field loại number sẽ tự động được thêm vào bên trong meta box Car Rental (ở phía bên tay phải màn hình).

Cách sử dụng Meta Box Plugin để làm trang giới thiệu sản phẩm - Chọn loại custom field là Number

Chọn loại custom field là Number

Trường thông tin này khá đơn giản nên mình không cần thiết lập nhiều, mình đặt tên là “Price” luôn và chọn Require để bắt buộc người viết bài luôn phải nhập giá thuê xe.

Cách sử dụng Meta Box Plugin để làm trang giới thiệu sản phẩm - Thiết lập cho number field

Thiết lập cho number field

Mình cũng thao tác tương tự với các trường Car Year và Max Passengers.

  • Tạo Select Field cho trường thông tin Fuel (Loại nhiên liệu của xe)

Ví dụ là có 3 loại nhiên liệu thường được sử dụng cho xe ô tô là xăng, dầu, và điện. Vì có 3 lựa chọn, nên mình sẽ dùng loại field là select để người viết bài chỉ cần chọn một trong số các phương án có sẵn thôi chứ không cần phải nhập thủ công. Như vậy sẽ nhanh và tiện lợi hơn khá nhiều.

Tương tự như với number field, nhưng ở mục Input Fields bạn hãy tìm đến nhóm Basic Fields và chọn Select nhé. Một field dạng select sẽ xuất hiện phía bên phải và bạn hãy thiết lập thông tin cho field này nhé.

Một điểm quan trọng ở đây là: ta có 3 lựa chọn (option) cho 3 loại nhiên liệu, nên sẽ cần nhập mỗi loại nhiên liệu là một option vào field này bằng cách nhập tên mỗi loại nhiên liệu vào 1 dòng trong ô Option.

 Cách sử dụng Meta Box Plugin để làm trang giới thiệu sản phẩm - Thiết lập thông tin cho trường Fuel dạng select

Thiết lập thông tin cho trường Fuel dạng select

Như vậy là bạn đã tạo xong 1 field dạng select cho trường thông tin về nhiên liệu (Fuel) rồi đấy. Bạn cũng làm tương tự với Door (số cửa trên xe) và Gearbox (loại hộp số) nhé.

Ví dụ như mình đã làm cho trường Gearbox như này:

Cách sử dụng Meta Box Plugin để làm trang giới thiệu sản phẩm - Thiết lập thông tin cho trường Gearbox dạng select

Thiết lập thông tin cho trường Gearbox dạng select

  • Tạo Text Field cho trường thông tin về Fuel Usage (lượng nhiên liệu tiêu thụ)

Nhiên liệu tiêu thụ thường hiển thị dưới dạng: lượng nhiên liệu tiêu thụ/km (Ví dụ: 1 lít xăng / 50km). Vì vậy ở đây mình chọn cho trường này là dạng Text.

Tương tự như cách tạo các loại field khác, mình sẽ chọn Text ở mục Input Fields để tạo text field mà mình cần.

Cách sử dụng Meta Box Plugin để làm trang giới thiệu sản phẩm - Tạo text field cho trường thông tin Fuel Usage

Tạo text field cho trường thông tin Fuel Usage

Bạn điền các thông tin để thiết lập cho trường này nhé. Riêng ở mục Description, mình nhập vào đây ví dụ một đoạn text để hướng dẫn thêm cho người viết bài sau này cách nhập thông tin cho chuẩn.

Cách sử dụng Meta Box Plugin để làm trang giới thiệu sản phẩm - Thiết lập thông tin cho text field

Thiết lập thông tin cho text field

Bạn cũng làm tương tự cho các trường Engine Capacity, Max Luggage, và Mileage nhé.

  • Tạo Image Field cho thư viện hình ảnh về sản phẩm (Car Gallery):

Trong giao diện trang giới thiệu dịch vụ cho thuê xe mình làm ví dụ ở đây, có một khu vực bên trái là một slider các ảnh ô tô (ảnh sản phẩm). Để tạo được một album ảnh sản phẩm dạng slider như thế này, bạn cần làm như sau:

Cũng vẫn ở trong phần Edit Field Group cùng với các field ở trên (hoặc bạn có thể tạo một field group mới thì tùy), bạn hãy tìm chọn đến tab Media trong mục Input Fields, và nhấn chọn Image Adv. Image Adv (Image Advance) chính là loại field sẽ cho phép bạn được tải nhiều ảnh về một sản phẩm lên website.

Bạn hãy đặt label, ID và các thông số khác cho field này nhé. Ở đây mình có đặt giới hạn số lượng ảnh tối đa là 7, tức là chỉ cho phép người viết tải không quá 7 ảnh cho 1 sản phẩm. Vì nếu cho phép tải quá nhiều ảnh, thì sẽ ảnh hưởng đến tốc độ tải web đấy, nên bạn cũng nên hạn chế số lượng ảnh là một con số nhất định nào đó nhé.

Đặt giới hạn số lượng ảnh tối đa

Cuối cùng, bạn hãy nhấn Update để lưu lại nhé.

2.3. Kiểm tra hiển thị các custom fields trong backend

Bây giờ, bạn hãy quay lại trang tạo một sản phẩm mới, và xem thử xem các fields của bạn hoạt động như thế nào nhé.

Còn đây là kết quả của mình:

Kiểm tra hiển thị các custom fields trong backend

Các custom fields hiển thị trong backend

Lưu ý:
Ở đây mình tách field Image ra thành một field group riêng và đặt vào sidebar để tiện quản lý. Việc tách ra và đặt ở đâu cũng không quan trọng lắm đâu, việc nhập dữ liệu và lấy dữ liệu ra cũng vẫn giống nhau thôi.

Bước 3: Hiển thị các trường thông tin ra giao diện website (frontend)

Bây giờ, bạn đã có các field để người viết bài nhập các thông tin về sản phẩm và lưu lại trên website. Vậy làm thế nào để hiển thị các thông tin (dữ liệu) đó ra ngoài frontend (giao diện website) để khách hàng có thể xem được?

Trước hết, bạn hãy tạo một file có tên theo cú pháp là single-[$custom_post_type_slug].php. Với sản phẩm mình đang tạo, thì file này sẽ có tên là single-car-rental.php. Bạn hãy đặt file này vào trong thư mục của theme nhé. File này có ý nghĩa là giao diện sẽ hiển thị các các bài viết có dạng post type có slug (ID) là “car-rental”.

Tiếp theo, mở file single-car-rental.php vừa tạo và chúng ta lần lượt lấy giá trị của các field để hiển thị bằng các hàm tương ứng như sau:

  • Với các custom field dạng text, number, hay select:

Bạn cần dùng hàm sau để lấy giá trị các field:

$value = rwmb_meta( $field_id );
echo $value;

Trong đó, $field_id là tham số ID của custom field mà chúng ta cần lấy giá trị.

Ví dụ: Hiển thị giá trị của trường thông tin về giá (Price):

<?php
$price = rwmb_meta(‘price’);
echo $price;
?>

Riêng với trường Select, bạn sẽ có nhiều lựa chọn với cú pháp khác nhau để lấy giá trị. Nếu trong lúc thiết lập field, bạn cho phép người viết lựa chọn nhiều option, hoặc nhân bản, hoặc cả 2 điều trên, thì tùy trường hợp bạn sẽ có cách lấy giá trị khác nhau. Bạn có thể tham khảo thêm tại đây.

Với trường hợp của mình, mình chỉ cho phép chọn một option thôi nên cú pháp vẫn tương tự với các custom field dạng text hay number.

  • Với custom field dạng Image Advance:

Bạn sử dụng hàm sau:

$images = rwmb_meta( $field_id, array( ‘size’ => ‘thumbnail’ ) );
foreach ( $images as $image ) {
echo '<a href="'.$image['full_url'].'"><img src="'.$image['url'].'"></a>';
}

Trong đó:

+ $field_id: ID của custom field dạng Image Adv mà bạn dùng để đăng ảnh sản phẩm.
+ array(): mảng chứa các tham số trả về. Cụ thể như sau:

Tham số Mô tả
size Kích cỡ ảnh trả về. Mặc định là “thumbnail
link Hiển thị kích thước ảnh đầy đủ nếu là true
limit Giới hạn số lượng hình ảnh trả về

 

Ví dụ: Hiển thị hình ảnh trong “Car gallery”

<?php
$gallery = rwmb_meta( ‘car_gallery’, array( ‘size’ => ‘thumbnail’, ‘limit’ => ‘5’ ) );
foreach ( $gallery as $img ) {
echo '<a href="'. $img['full_url']. '"><img src=" '.$img['url']. '"></a>';
}
?>

Bạn cũng có thể tham khảo toàn bộ đoạn code mình đã sử dụng trong bài như dưới đây:

  • Tạo custom field bằng Meta Box: bạn cần đặt đoạn code dưới đây vào trong file function.php của theme.
  • Hiển thị giá trị các custom field ra front end:

Kết luận

Trên thực tế, có rất nhiều trang giới thiệu sản phẩm có số lượng nội dung rất lớn, với nhiều loại trường thông tin khác nhau. Nhưng, về cơ bản thì các trường thông tin đó đều được xây dựng dựa trên các trường cơ bản mà mình lấy ví dụ trong bài viết này. Trong mỗi trường hợp cụ thể, thì số lượng các trường sẽ khác và có thể lớn hơn nhiều mà thôi.

Với các trường hợp số lượng custom field quá lớn, thì mình khuyên là bạn nên tách các custom field đó ra thành từng nhóm, đặt trong các field group khác nhau. Nếu bạn kết hợp sử dụng thêm các extension khác của Meta Box để tạo group, phân cấp các fields và đặt các điều kiện để ẩn/hiện các custom fields nữa thì còn tuyệt vời hơn.

Mặc dù vậy, hy vọng là với một ví dụ đơn giản trên đây, có thể giúp bạn bước đầu tạo được các trang sản phẩm như ý. Chúc các bạn thành công!

Gửi phản hồi