Hướng dẫn Khởi tạo và sử dụng Plugin với Secure Custom Fields

huong-dan-khoi-tao-va-su-dung-plugin-voi-secure-custom-fields

Secure Custom Fields là một plugin mạnh mẽ giúp bạn thêm các trường dữ liệu tùy chỉnh vào bài viết, sản phẩm, hoặc bất kỳ nội dung nào trên WordPress. Nhờ đó, bạn có thể dễ dàng tạo ra các trang web mang tính cá nhân hóa cao và đáp ứng nhu cầu đa dạng của khách hàng. Dưới đây là hướng dẫn chi tiết cách cài đặt, sử dụng, và tùy chỉnh của wiweb về plugin này.

Cài đặt và kích hoạt Secure Custom Fields

  • Truy cập vào bảng quản trị WordPress, chọn Plugins > Add New.
  • Tìm kiếm “Secure Custom Fields” trong thanh tìm kiếm.
  • Nhấn Install Now (Cài đặt) và sau đó Activate (Kích hoạt) để bắt đầu sử dụng plugin.
Plugin Secure Custom Fields
Plugin Secure Custom Fields

Tạo nhóm trường tùy chỉnh trong SCF

  1. Tạo nhóm trường mới:
    • Truy cập Custom Fields > Add New trong bảng điều khiển.
    • Đặt Tên nhóm trường (Field Group) phù hợp với mục đích sử dụng (ví dụ: “Thông tin sản phẩm”).
  2. Thêm các trường dữ liệu:
    • Trong nhóm trường, nhấn Add Field để thêm các loại trường dữ liệu tùy chỉnh:
      • Text: Văn bản (tên, tiêu đề).
      • Number: Số (giá, số lượng).
      • Image: Hình ảnh (ảnh sản phẩm).
  3. Thiết lập điều kiện hiển thị:
    • Cài đặt Location Rules để quyết định nơi nhóm trường sẽ xuất hiện (ví dụ: chỉ hiển thị trên bài viết hoặc sản phẩm).
  4. Lưu lại:
    • Nhấn Publish (Xuất bản) để hoàn thành việc tạo nhóm trường.
Trường tùy chỉnh trong SCF
Trường tùy chỉnh trong SCF

Sử dụng các trường tùy chỉnh trong bài viết hoặc sản phẩm

Sau khi nhóm trường đã được thiết lập, bạn có thể sử dụng chúng để nhập liệu trực tiếp trên giao diện chỉnh sửa bài viết hoặc sản phẩm.

  1. Truy cập giao diện chỉnh sửa:
    • Mở bài viết hoặc sản phẩm mà bạn muốn thêm dữ liệu tùy chỉnh.
  2. Nhập dữ liệu:
    • Điền thông tin vào các trường ACF đã tạo (ví dụ: Tên sản phẩm, Giá, Hình ảnh minh họa).
  3. Lưu bài viết:
    • Nhấn Update hoặc Publish để lưu dữ liệu.
SCF trong bài viết
SCF trong bài viết

Tùy chỉnh hiển thị dữ liệu trên giao diện

Để hiển thị các trường tùy chỉnh trên giao diện trang web, bạn cần chỉnh sửa file giao diện (theme files).

  1. Vào mục chỉnh sửa giao diện:
    • Truy cập Appearance > Theme File Editor trong WordPress.
  2. Sửa file function.php:

Thêm đoạn code sau vào file function.php của giao diện:
php
Sao chép mã:function hien_thi_san_pham($content) {
// Chỉ áp dụng cho bài viết đơn (single post)
if (is_single() && in_the_loop() && is_main_query()) {
global $post;
// Lấy giá trị từ các trường ACF
$ten_san_pham = get_field(‘ten_san_pham’, $post->ID);
$gia = get_field(‘gia’, $post->ID);
$anh_san_pham = get_field(‘anh_san_pham’, $post->ID);
// Kiểm tra nếu các trường có dữ liệu
if ($ten_san_pham && $gia && $anh_san_pham) {
// Xây dựng HTML hiển thị
$html = ‘<div style=”width: 25%; text-align: center; border: 1px solid #ccc; padding: 10px; margin: 10px auto;”>’;
$html .= ‘<div style=”margin-bottom: 10px;”>’;
$html .= ‘<img src=”‘ . esc_url($anh_san_pham[‘url’]) . ‘” alt=”‘ . esc_attr($ten_san_pham) . ‘” style=”width: 100%; height: auto;”>’;
$html .= ‘</div>’;
$html .= ‘<h3 style=”font-size: 16px; margin-bottom: 5px;”>’ . esc_html($ten_san_pham) . ‘</h3>’;
$html .= ‘<p style=”font-size: 14px; color: #555;”>Giá: ‘ . number_format($gia, 0, ‘,’, ‘.’) . ‘ VND</p>’;
$html .= ‘</div>’;
// Thêm HTML vào cuối nội dung bài viết
$content .= $html;
}
}
return $content;
}
// Thêm filter vào nội dung bài viết
add_filter(‘the_content’, ‘hien_thi_san_pham’);

Kết quả sau khi hoàn tất
Kết quả sau khi hoàn tất

Sử dụng Secure Custom Fields không chỉ giúp bạn tối ưu hóa việc quản lý nội dung mà còn mang lại trải nghiệm tốt hơn cho người dùng. Hãy bắt đầu tùy chỉnh trang web của bạn ngay hôm nay để tận dụng tối đa tính năng mạnh mẽ của plugin này!

Video hướng dẫn Khởi tạo và sử dụng Plugin với Secure Custom Fields

Dịch vụ thiết kế website

Dịch vụ thiết kế website

Giá: 10.000.000 VND

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *