Đối với những đang ai làm chớ trang web lại 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 mới có lẽ tự làm cũng 1 bảng thông số kĩ thuật mà chẳng vẫn 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 nhanh cũng không quá phức tạp, các chậm bạn chỉ cần chẳng 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 quá cần thiết cho wordpress

Cài đặt cần plugin Advanced Custom Field

Để thường có lẽ mất tự làm được 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 Plugin cũ – Cài đừng mới – Gõ “Advanced chưa Custom Field” vào khung thôi search trên chỉ kho plugin cả free của Word press. Sau chưa khi các bạn chớ cài đặt biến sẽ thành công plugin “Advanced C cần ustom Fields” thì đột nhiên các bạn thường kích hoạt để cần có lẽ dùng luôn nhé. Do ở đây là mình đã cài rồi . Download File lại code Fields nhanh ở đây dễ và nhanh import vào đích Plugin Sau chưa khi các bạn import ACF- mất file vào nhanh 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 thúc đẩ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 lớn mạnh 3: Hiển thị Advance Custom Field ra ngoài giao diện

Đối với đột nhiên theme Flatsome, trong phần tùy đã biến layout cũ 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 tệp kiểu layout cho trang sản phẩm: Giao chờ mong diện – Tùy biến – Woocommerce (Shop) – Product Page – Product Layout
• Chọn mọi file .php quy sáng tạo cách layout cho trang sản phẩm: Giao diện được – Sửa – có thể chọn theme gốc Flatsome thôi – Woocommerce – Single-product – Layout

Mình chọn không layout Right nhất Sidebar Full Height cho trang mặt dễ hàng thì cần phải gọi file cũng product không -right-sidebar-full.php để gọi code hiển thị bảng thông số kỹ lại thuật:Các bạn copy đa cả số đoạn code nhanh sau:

&lt tạo nên ;?php

$bo nhắm tới _nho_trong=get_field(‘bo_nho_trong’);

$camera plugin _chinh=get_field(‘camera_chinh’);

$camera thủ công _phu=get_field(‘camera_phu’);

$cpu cần làm =get_field(‘cpu’);

$do nhất _phan_giai_man_hinh=get_field(‘do_phan_giai_man_hinh’);

$dung setup _luong_pin=get_field(‘dung_luong_pin’);

$he bất kể _dieu_hanh=get_field(‘he_dieu_hanh’);

$kich có thể _thuoc_man_hinh=get_field(‘kich_thuoc_man_hinh’);

$ram cả =get_field(‘ram’);$the_sim=get_field(‘the_sim’);

$the đơn giản và dễ dàng _nho=get_field(‘the_nho’);?>

&lt ưa thích ;?php if($bo_nho_trong)?>

&lt viết ;div class=”thong-so-ky-thuat” id=”thong-so”>

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

&lt không nhiều ;div class=”row-info”>

&lt liền ;div class=”left”>Bộ nhớ trong</div>

&lt tiện lợi ;div class=”right”><?php echo $bo_nho_trong;?></div>

&lt Tuy nhiên ;/div>

&lt chẳng ;?php if($camera_chinh)?>

&lt nhanh ;div class=”row-info”>

<div class=”left”>Camera đột nhiên chính</div>

&lt Công ty ;div class=”right”><?php echo $camera_chinh;?></div>

&lt trong khoảng ;/div>

&lt lo lắng ;?php nhanh ?>

&lt cũ ;?php if($camera_phu)?>

&lt cộng tác ;div class=”row-info”>

&lt nhịp nhàng ;div class=”left”>Camera phụ</div>

&lt đặc biệt ;div class=”right”><?php echo $camera_phu;?></div>

&lt bố ;/div>

<?php thường bỗng nhiên ?>

&lt mới ;?php if($cpu)?>

&lt yên bình ;div class=”row-info”>

&lt google ;div class=”left”>CPU</div>

<div class=”right”><?php lại echo $cpu;?></div>

&lt bỗng nhiên ;/div>

<?php nhanh có thể ?>

&lt xuất xứ ;?php if($do_phan_giai_man_hinh)?>

&lt dẻo dai ;div class=”row-info”>

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

&lt bừa bộn ;div class=”right”><?php echo $do_phan_giai_man_hinh;?></div>

&lt hữu dụng ;/div>

<?php rất lắm ?>

&lt vừa qua ;?php if($dung_luong_pin)?>

&lt với nghiên cứu ;div class=”row-info”>

&lt rất ;div class=”left”>Dung lượng pin</div>

&lt bắt mắt ;div class=”right”><?php echo $dung_luong_pin;?></div>

&lt thâm niên ;/div>

&lt nhất ;?php hữu ích ?>

&lt rất ;?php if($he_dieu_hanh)?>

&lt chu đáo ;div class=”row-info”>

&lt lắm ;div class=”left”>Hệ điều hành</div>

<div class=”right”><?php đã echo $he_dieu_hanh;?></div>

&lt mất ;/div>

&lt theo nghiên cứu ;?php chính ?>

&lt thôi ;?php if($kich_thuoc_man_hinh)?>

&lt ném tiền ;div class=”row-info”>

&lt gọn ;div class=”left”>Kích thước màn hình</div>

&lt bừa bãi ;div class=”right”><?php echo $kich_thuoc_man_hinh;?></div>

&lt chưa ổn ;/div>

&lt quanh quéo ;?php chỉ ?>

&lt vừa mới đây ;?php if($ram)?>

&lt tư vấn ;div class=”row-info”>

&lt chính ;div class=”left”>Ram</div>

<div class=”right”><?php đừng the_field(‘ram’);?></div>

&lt nhanh gọn ;/div>

<?php cần thường ?>

&lt nhanh ;?php if($the_sim)?>

&lt không ;div class=”row-info”>

&lt tận tâm ;div class=”left”>Thẻ sim</div>

<div class=”right”><?php echo đích $the_sim;?></div>

&lt chế độ ;/div>

<?php hữu chậm ích ?>

&lt ngay ;?php if($the_nho)?>

&lt ngay ;div class=”row-info”>

&lt giảm ;div class=”left”>Thẻ nhớ</div>

<div class=”right”><?php echo bỗng nhiên $the_nho;?></div>

&lt cũng ;/div>

&lt chưa ;?php xa ?>

&lt dễ ;/div>

&lt đã ;?php ?>

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

CSS ưng ý cho PC

Các sớm muộn bạn vào Giao diện – lắm tùy biến – chính Style – Custom CSS – Custom mất CSS, paste phổ biến đa số đoạn CSS này vào nha:

CSS chờ đợi cho mobile – copy đa số đoạn code CSS ở dưới paste vào Giao vận dụng diện – Tùy chỉnh – Style – Custom CSS – Custom CSS Mobile

đích