Đố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 giống như 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 đạt mặt hàng của trang web phải không? Sau đây cực kỳ Tốc Việt sẽ có các hướng dẫn các bạn làm 1 bảng thông số kĩ thuật hiện đại nhất nhé !!! Bạn có lẽ tự làm 1 bảng thông số kĩ thuật mà chẳng cần kiến thức về code và cũng giống như mình có lẽ không cần bỏ chi phí để code cả. Việc này cũng không quá phức tạp, các bạn chỉ cần làm theo bao giờ bước giống 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 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 các bạn dùng theme khác có lẽ gọi mình để được có cá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ó lẽ tự làm được thì việc dùng các plugin là điều dễ hiểu vì chúng không quá phức tạp và cũng không yêu cầu am hiểu đa dạng code cần chúng ta bắt đầu tiến hành cài đặt nhé !!! các bạn vào trang quản trị Word press, search tới mục PluginCài mới – Gõ “Advanced Custom Field” vào khung search trên kho plugin free của Word press. Sau khi các bạn cài đặt biến thành công plugin “Advanced Custom Fields” thì các bạn 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 các bạn import ACF- file vào rồi thì các bạn 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ố cho sản phẩm: Đây mới chỉ đơn thuần là tạo Custom Field cho Post type = mặt hàng, nghĩa là chương trình cho phép bạn thêm Custom Field để nhập thêm data vào mặt hàng trong backend thôi, việc cần thiết hơn chúng ta phải gọi 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 mặt hàng Woocommerce có tới 9 kiểu layout 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ố công nghệ ra.

  • Chọn kiểu layout cho trang sản phẩm: Giao diện – Tùy biến – Woocommerce (Shop) – Product Page – Product Layout
  • Chọn file .php quy 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 cho trang mặt hàng thì phải gọi file product-right-sidebar-full.php để gọi code hiển thị bảng thông số kỹ thuật:Các bạn copy đa số đ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 nhanh ?>
<?php if($camera_phu)?>
<div class=”row-info”>
<div class=”left”>Camera phụ</div>
<div class=”right”><?php echo $camera_phu;?></div>
</div>
<?php thường ?>
<?php if($cpu)?>
<div class=”row-info”>
<div class=”left”>CPU</div>
<div class=”right”><?php echo $cpu;?></div>
</div>
<?php nhanh ?>
<?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 rất ?>
<?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 hữu ích ?>
<?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 chí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 chỉ ?>
<?php if($ram)?>
<div class=”row-info”>
<div class=”left”>Ram</div>
<div class=”right”><?php the_field(‘ram’);?></div>
</div>
<?php cần ?>
<?php if($the_sim)?>
<div class=”row-info”>
<div class=”left”>Thẻ sim</div>
<div class=”right”><?php echo $the_sim;?></div>
</div>
<?php hữu ích ?>
<?php if($the_nho)?>
<div class=”row-info”>
<div class=”left”>Thẻ nhớ</div>
<div class=”right”><?php echo $the_nho;?></div>
</div>
<?php xa ?>
</div>
<?php ?>

Paste đa số đ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

Các bạn copy đa số đoạn code 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 có lẽ ?>
<?php if($khuyen_mai_3)?>
<li><?php the_field(‘khuyen_mai_3’);?></li>
<?php xa ?>
<?php if($khuyen_mai_4)?><li><?php the_field(‘khuyen_mai_4’);?></li>
<?php thường ?>
<?php if($khuyen_mai_5)?><li><?php the_field(‘khuyen_mai_5’);?></li>
<?php chính ?>
</ul>
</div>
<?php ;?>

Sau đó, các bạn paste đa số đoạn code đó lên đầu file share.php giống như hình dưới. search 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 cho PC

Các bạn vào Giao diện – tùy biến – Style – Custom CSS – Custom CSS, paste đa số đ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;
hữu ích
.thong-so-ky-thuat h3
margin-bottom: 0;
padding: 10px;
border-bottom: 1px solid #e9e9e9;
background: #fed700;
hữu ích
.thong-so-ky-thuat .row-info
border-bottom: 1px solid #e9e9e9;
padding: 10px 7px;
display: inline-flex;
clear: both;
width: 100%;
hữu ích
.thong-so-ky-thuat .row-info .left
width: 43% !important;
color: #a0a0a0;
display: inline-block;
float: left;
padding-right: 10px;
thường
.thong-so-ky-thuat .row-info .right
width: 57% !important;
color: black;
display: inline-block;
float: left;
padding-left: 10px;
rất
.khuyen-mai
border: 1px solid #ffdb97;
padding: 8px;
font-size: 14px;
border-radius: 4px;
margin-bottom: 15px;
line-height: 18px;
background: #fffbf4;
chưa
.khuyen-mai h4
color: red;
chưa
.khuyen-mai ul
margin-bottom:0
chỉ
.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; hữu ích

CSS cho mobile – copy đa số đoạn code 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;
thường
.product-footer .container .large-9
order: 1;
cần
.product-footer .container .large-3
order: -3;
có lẽ
Antt cấp 3

Công ty TNHH song song Dịch vụ tác hại Siêu Tốc chần chờ Việt tự...

Chi phí SEO

Chi phí nguyên liệu SEO chuyên giúp nghiệp agency đặc sắc uy tín phòng tránh...

Lập trình web

Bạn đang trang nghiêm tìm dịch hướng tới vụ lập đơn vị uy tín trình...

SEO và PPC

Trong chiến cân nặng lược marketing tăng kỹ thuật tư vấn số hiện nay, hai...

Organic traffic

Organic người dùng traffic Organic traffic gia hạn là giải pháp nhiều chức năng tối...

Google penalty

Google penalty: xin phép được gửi đến Cách khắc đặc biệt phục và rất cần...

Backup restore DirectAdmin

DirectAdmin một cảm giác trong những thất thường công cụ giống như quản trị phòng...

Sử dụng Advanced Custom Fields tạo bảng thông số kĩ thuật nhanh gọn

Nguyễn Thanh Tuấn ()

Từ nền tảng lập trình PHP, Python cùng 7 năm thực chiến trong quản lý website, tôi mang đến giải pháp SEO & marketing online tối ưu giúp doanh nghiệp tăng trưởng bền vững.