Đối với những ai làm trang web về công nghệ ( máy tính, điện thoại, laptop,... ). Thì bảng thông số kĩ thuật như là luôn CPU, Ram, bộ nhớ, thông số màn hình, thông số camera,… Lại cực kì cần thiết trong trang biểu thị món đồ của web site phải không? Sau đây vô cùng thôi Tốc Việt sẽ hướng dẫn cụ thể nhanh các bạn thực hiện được 1 bảng thông số kĩ thuật tiên tiến lớn nhất nhé !!! Bạn có thể tự làm 1 bảng thông số kĩ thuật mà chẳng tốt nhất nên nhất kiến thức về code và cũng như mình thường không nên bỏ giá tiền để code cả. Việc này cũng không quá phức tạp, quý khách được chỉ nên làm sâu theo bao giờ bước như mình có các hướng dẫn là được thôi. Bên cạnh đó, mình đang dùng theme Flatsome đưa cho bài có các hướng dẫn này, do đó, bạn nào dùng theme Flatsome có lẽ làm theo y nguyên, còn người dùng dùng theme khác có thể gọi mình để được hướng dẫn thêm. xem thêm: các plugin cần thiết cho wordpress

Cài đặt plugin Advanced Custom Field

Để có thể tự thực hiện không thể được thì việc dùng các plugin là điều đơn giản chẳng hiểu vì chúng không quá phức tạp và cũng không yêu cầu am hiểu rộng rãi đích lập trình mới nên chúng ta bắt đầu tiến hành thiết đặt nhé !!! các bạn vào trang quản trị Wp bỗng nhiên, tìm kiếm sâu tới mục Plugin – Cài mới – Gõ “Advanced Custom Field” vào khung search trên kho plugin không tính phí của Word press. Sau khi người dùng cài đặt trở thành những công plugin “Advanced Custom Fields” thì quý khách có thể kích hoạt để khả năng cao dùng luôn nhé. Do ở đây là mình đã cài rồi . Download File lập trình lớn Fields ở đây và import vào Plugin Sau khi người dùng import ACF- file vào rồi thì người dùng sửa Bất cứ mặt hàng nào sẽ thấy có các field mới được thêm vào để các bạn nhập thông số tặng lớn sản phẩm: Đây mới chỉ đơn thuần là tạo Custom Field đưa cho Post type = sản phẩm đang , nghĩa là chương trình tặng những phép bạn thêm Custom Field để nhập thêm data vào món đồ trong backend thôi, việc quan trọng hơn chúng ta phải tìm đến lắm nó hiển thị ra bên ngoài nữa.

Bước 3: Hiển thị Advance Custom Field ra ngoài giao diện

Đối với theme Flatsome, trong phần tùy biến layout của trang chi tiết sản phẩm nhỏ Woocommerce có tới 9 kiểu layout đưa cho trang mặt hàng khác nhau. Do đó, nếu bạn chọn kiểu layout nào thì phải chọn file .php tương ứng để gọi bảng thông số khoa học ra.

• Chọn kiểu layout tặng cả trang sản phẩm: Giao diện – Tùy biến – Woocommerce (Shop) – Product Page – Product Layout
• Chọn file .php quy tắc đích layout cho trang sản phẩm: Giao diện – Sửa – chọn theme gốc Flatsome – Woocommerce – Single-product – Layout

Mình chọn layout Right Sidebar Full Height đưa cho trang mặt hàng thì phải tìm đến mới file product-right-sidebar-full.php để liên hệ lập trình rất hiển thị bảng thông số kỹ thuật:Các bạn copy mọi đoạn lập trình sẽ sau:

<?php

$bo_nho_trong=get_field('bo_nho_trong');

$camera_chinh=get_field('camera_chinh');

$camera_phu=get_field('camera_phu');

$cpu=get_field('cpu');

$do_phan_giai_man_hinh=get_field('do_phan_giai_man_hinh');

$dung_luong_pin=get_field('dung_luong_pin');

$he_dieu_hanh=get_field('he_dieu_hanh');

$kich_thuoc_man_hinh=get_field('kich_thuoc_man_hinh');

$ram=get_field('ram');$the_sim=get_field('the_sim');

$the_nho=get_field('the_nho');?>

<?php if($bo_nho_trong)?>

<div class="thong-so-ky-thuat" id="thong-so">

<h3 class="tieu-de thong-so">Thông số kỹ thuật</h3>

<div class="row-info">

<div class="left">Bộ nhớ trong</div>

<div class="right"><?php echo $bo_nho_trong;?></div>

</div>

<?php if($camera_chinh)?>

<div class="row-info">

<div class="left">Camera chính</div>

<div class="right"><?php echo $camera_chinh;?></div>

</div>

<?php xa ?>

<?php if($camera_phu)?>

<div class="row-info">

<div class="left">Camera phụ</div>

<div class="right"><?php echo $camera_phu;?></div>

</div>

<?php mới ?>

<?php if($cpu)?>

<div class="row-info">

<div class="left">CPU</div>

<div class="right"><?php echo $cpu;?></div>

</div>

<?php dài ?>

<?php if($do_phan_giai_man_hinh)?>

<div class="row-info">

<div class="left">Độ phân giải màn hình</div>

<div class="right"><?php echo $do_phan_giai_man_hinh;?></div>

</div>

<?php không thể ?>

<?php if($dung_luong_pin)?>

<div class="row-info">

<div class="left">Dung lượng pin</div>

<div class="right"><?php echo $dung_luong_pin;?></div>

</div>

<?php cũ ?>

<?php if($he_dieu_hanh)?>

<div class="row-info">

<div class="left">Hệ điều hành</div>

<div class="right"><?php echo $he_dieu_hanh;?></div>

</div>

<?php nhỏ?>

<?php if($kich_thuoc_man_hinh)?>

<div class="row-info">

<div class="left">Kích thước màn hình</div>

<div class="right"><?php echo $kich_thuoc_man_hinh;?></div>

</div>

<?php những?>

<?php if($ram)?>

<div class="row-info">

<div class="left">Ram</div>

<div class="right"><?php the_field('ram');?></div>

</div>

<?php lại?>

<?php if($the_sim)?>

<div class="row-info">

<div class="left">Thẻ sim</div>

<div class="right"><?php echo $the_sim;?></div>

</div>

<?php lắm ?>

<?php if($the_nho)?>

<div class="row-info">

<div class="left">Thẻ nhớ</div>

<div class="right"><?php echo $the_nho;?></div>

</div>

<?php bỗng nhiên?>

</div>

<?php ?>

Sau đó, khách hàng paste tất cả đoạn code đó lên đầu file share.php như hình dưới. tìm file share.php theo đường dẫn: Giao diện – sửa – theme Flatsome – Woocommerce – Single-product – Share.phpViệc tiếp theo chúng ta CSS cho nó theo đúng có lẽ ý và hiển thị đẹp rực rỡ nha!

CSS cho PC

Khách hàng vào Giao diện – tùy biến – Style – Custom CSS – Custom CSS, paste toàn bộ sâu đoạn CSS này vào nha:

CSS tặng sẽ mobile - copy tất cả đoạn code CSS ở dưới paste vào Giao diện – Tùy chỉnh – Style – Custom CSS – Custom CSS Mobile