Đối với những ai thực hiện web site về kỹ thuật ( máy tính, điện thoại, laptop,… ). Thì bảng thông số kĩ thuật như CPU, Ram, bộ nhớ, thông số màn hình, thông số camera,… Lại cực kì rất cần thiết trong trang biểu thị món đồ của web phải không? Sau đây rất Tốc Việt sẽ hướng dẫn người mua thực hiện 1 bảng thông số kĩ thuật hiện đại nhất nhé !!! Bạn thường tự làm 1 bảng thông số kĩ thuật mà chẳng tốt nhất nên kiến thức về code và như mình có lẽ không cần bỏ giá tiền để code cả. Việc này cũng không quá phức tạp, người dùng chỉ nên làm theo từng bước như là mình hướng dẫn là được thôi. Tuy nhiên, mình đang dùng theme Flatsome đưa cho bài hướng dẫn cụ thể này, do đó, bạn nào dùng theme Flatsome có thể thực hiện theo y nguyên, còn người dùng dùng theme khác có lẽ tìm đến 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ự làm được thì việc dùng các plugin là điều đơn giản hiểu vì chúng không quá phức tạp và cũng không yêu cầu am hiểu phổ biến lập trình cần chúng ta khởi đầu tiến hành setup nhé !!! khách hàng vào trang quản trị Wp, tìm tới mục PluginCài mới – Gõ “Advanced Custom Field” vào khung tìm kiếm trên kho plugin miễn phí của Word press. Sau khi người dùng setup thành công plugin “Advanced Custom Fields” thì khách hàng kích hoạt để có lẽ dùng luôn nhé. Do ở đây là mình đã cài rồi . Download File code Fields ở đây và import vào Plugin Sau khi người dùng import ACF- file vào rồi thì quý khách sửa Bất kì sản phẩm nào sẽ thấy có các field mới được thêm vào để khách hàng nhập thông số cho sản phẩm: Đây mới chỉ đơn thuần là tạo Custom Field đưa cho Post type = sản phẩm, nghĩa là chương trình đưa cho phép bạn thêm Custom Field để nhập thêm dữ liệu vào mặt hàng trong backend thôi, việc quan trọng hơn chúng ta phải liên hệ 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 khía cạnh sản phẩm Woocommerce nắm tới tới 9 kiểu layout cho trang sản phẩm 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 với để liên hệ bảng thông số khoa học ra.

  • Chọn kiểu layout tặng 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 layout đưa 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 cho trang sản phẩm thì phải liên hệ file product-right-sidebar-full.php để tìm đến lập trình hiển thị bảng thông số kỹ thuật:Các bạn copy hầu hết đoạn code 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 ?>
<?php if($camera_phu)?>
<div class=”row-info”>
<div class=”left”>Camera phụ</div>
<div class=”right”><?php echo $camera_phu;?></div>
</div>
<?php ?>
<?php if($cpu)?>
<div class=”row-info”>
<div class=”left”>CPU</div>
<div class=”right”><?php echo $cpu;?></div>
</div>
<?php ?>
<?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 ?>
<?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 ?>
<?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 ?>
<?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 ?>
<?php if($ram)?>
<div class=”row-info”>
<div class=”left”>Ram</div>
<div class=”right”><?php the_field(‘ram’);?></div>
</div>
<?php ?>
<?php if($the_sim)?>
<div class=”row-info”>
<div class=”left”>Thẻ sim</div>
<div class=”right”><?php echo $the_sim;?></div>
</div>
<?php ?>
<?php if($the_nho)?>
<div class=”row-info”>
<div class=”left”>Thẻ nhớ</div>
<div class=”right”><?php echo $the_nho;?></div>
</div>
<?php ?>
</div>
<?php ?>

Paste toàn bộ đoạn code trên vào ngay sau thẻ mở <div id=”product-sidebar”….>

Hiển thị bảng tin khuyến mại bằng advanced custom fields

Người mua copy tất cả đoạn lập trình dưới đây:

<?php
$khuyen_mai_1=get_field(‘khuyen_mai_1’);
$khuyen_mai_2=get_field(‘khuyen_mai_2’);
$khuyen_mai_3=get_field(‘khuyen_mai_3’);
$khuyen_mai_4=get_field(‘khuyen_mai_4’);
$khuyen_mai_5=get_field(‘khuyen_mai_5’);?>
<?php if($khuyen_mai_1) ?>
<div class=”khuyen-mai”>
<h4>Thông tin khuyến mại</h4>
<ul>
<li><?php the_field(‘khuyen_mai_1’);?></li>
<?php if($khuyen_mai_2)?>
<li><?php the_field(‘khuyen_mai_2’);?></li>
<?php ?>
<?php if($khuyen_mai_3)?>
<li><?php the_field(‘khuyen_mai_3’);?></li>
<?php ?>
<?php if($khuyen_mai_4)?><li><?php the_field(‘khuyen_mai_4’);?></li>
<?php ?>
<?php if($khuyen_mai_5)?><li><?php the_field(‘khuyen_mai_5’);?></li>
<?php ?>
</ul>
</div>
<?php ;?>

Sau đó, người dùng paste đa số đoạn lập trình đó lên đầu file share.php như là hình dưới. tìm kiế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 chính xác ý và hiển thị đẹp rực rỡ nha!

CSS đưa cho PC

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

.thong-so-ky-thuat
border: 1px solid #e9e9e9;
font-size: 14px;
display: inline-block;
border-radius: 5px;
margin-bottom:20px;
.thong-so-ky-thuat h3
margin-bottom: 0;
padding: 10px;
border-bottom: 1px solid #e9e9e9;
background: #fed700;
.thong-so-ky-thuat .row-info
border-bottom: 1px solid #e9e9e9;
padding: 10px 7px;
display: inline-flex;
clear: both;
width: 100%;
.thong-so-ky-thuat .row-info .left
width: 43% !important;
color: #a0a0a0;
display: inline-block;
float: left;
padding-right: 10px;
.thong-so-ky-thuat .row-info .right
width: 57% !important;
color: black;
display: inline-block;
float: left;
padding-left: 10px;
.khuyen-mai
border: 1px solid #ffdb97;
padding: 8px;
font-size: 14px;
border-radius: 4px;
margin-bottom: 15px;
line-height: 18px;
background: #fffbf4;
.khuyen-mai h4
color: red;
.khuyen-mai ul
margin-bottom:0
.khuyen-mai ul li
list-style: none;
background: url(http://dienthoai3.ninhbinhweb.info/cdn/2019/08/check@2x.png);
background-repeat: no-repeat;
background-size: 14px;
background-position-y: 2px;
padding-left: 22px;
margin-left: 0;
margin-bottom: 10px;

CSS đưa cho mobile – copy hầu hết đoạn lập trình CSS ở dưới paste vào Giao diện – Tùy chỉnh – Style – Custom CSS – Custom CSS Mobile

.product-footer .container
display: inline-grid;
.product-footer .container .large-9
order: 1;
.product-footer .container .large-3
order: -3;
5/5 - (1 bình chọn)

Sử dụng Advanced Custom Fields tạo bảng thông số kĩ thuật cách nào

Lê Trương Tấn Lộc (sieutocviet.vip)

Có hơn 5 năm thực chiến Python, PHP 6 năm thực chiến trong quản lý website tư vấn giải pháp SEO từ khóa, Kinh doanh online tối ưu nhất cho doanh nghiệp.
Hiện là leader kinh doanh tại Siêu Tốc Việt. ping post