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

Đối với những món đồ 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 chỉ cũng không được quá phức tạp, các bạn có lẽ 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 chỉ cần thiết có thể cho wordpress

Cài máy đặt plugin Advanced Custom Field

Để có lẽ tự chậm làm được thì việc dùng nhất các plugin là điều dễ thôi 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 dễ – Cài thôi mới – đích Gõ “Advanced ngay Custom Field” plugin vào khung search trên kho plugin free của Word press. Sau đồng nghĩa khi các bạn cài đặt biến thành công plugin “Advanced Custom duy trì Fields” thì tượng trưng 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 có ích File code Fields ở đây và vps import vào Plugin Sau khi nhất các bạn chỉ import ACF- file chỉ 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 chủ hộ 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 quản 3: Hiển thị Advance Custom Field ra ngoài giao diện

Đối vừa ý 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 search engine kiểu layout cho trang sản phẩm: Giao hoàn toàn diện – Tùy biến – Woocommerce (Shop) – Product Page – Product Layout
Chọn setup file .php quy cách layout cho trang sản cần phẩm: Giao diện đã – Sửa – chọn có thể theme gốc Flatsome – Woocommerce cũng – Single-product – Layout

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

&lt rất ;?php

$bo dễ _nho_trong=get_field(‘bo_nho_trong’);

$camera theo quan điểm _chinh=get_field(‘camera_chinh’);

$camera đáp ứng _phu=get_field(‘camera_phu’);

$cpu cuối =get_field(‘cpu’);

$do lại _phan_giai_man_hinh=get_field(‘do_phan_giai_man_hinh’);

$dung không thể _luong_pin=get_field(‘dung_luong_pin’);

$he mất _dieu_hanh=get_field(‘he_dieu_hanh’);

$kich nhanh _thuoc_man_hinh=get_field(‘kich_thuoc_man_hinh’);

$ram dễ =get_field(‘ram’);$the_sim=get_field(‘the_sim’);

$the tên _nho=get_field(‘the_nho’);?>

&lt ưu đãi ;?php if($bo_nho_trong)?>

&lt nâng cao ;div class=”thong-so-ky-thuat” id=”thong-so”>

&lt an ;h3 class=”tieu-de thong-so”>Thông số kỹ thuật</h3>

&lt thâm niên ;div class=”row-info”>

&lt thuận tiện ;div class=”left”>Bộ nhớ trong</div>

<div class=”right”><?php nhất echo $bo_nho_trong;?></div>

&lt đột nhiên ;/div>

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

&lt chạy thử ;div class=”row-info”>

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

&lt nguồn gốc xuất xứ ;div class=”right”><?php echo $camera_chinh;?></div>

&lt nỗ lực ;/div>

&lt thôi ;?php nhanh ?>

&lt quá ;?php if($camera_phu)?>

&lt chưa ;div class=”row-info”>

&lt vừa mới qua ;div class=”left”>Camera phụ</div>

&lt bất kể ;div class=”right”><?php echo $camera_phu;?></div>

&lt hình ;/div>

&lt nhanh ;?php thường ?>

&lt quá ;?php if($cpu)?>

&lt theo sở thích ;div class=”row-info”>

&lt khách hàng ;div class=”left”>CPU</div>

<div class=”right”><?php echo chậm $cpu;?></div>

&lt nhất ;/div>

&lt đừng ;?php nhanh ?>

&lt có lẽ ;?php if($do_phan_giai_man_hinh)?>

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

<div class=”left”>Độ phân mất giải màn được hình</div>

&lt thôi ;div class=”right”><?php echo $do_phan_giai_man_hinh;?></div>

&lt được ;/div>

<?php rất chính ?>

&lt chuyển động ;?php if($dung_luong_pin)?>

&lt từ ;div class=”row-info”>

&lt điểm cộng ;div class=”left”>Dung lượng pin</div>

<div class=”right”><?php echo có thể $dung_luong_pin;?></div>

&lt huyền bí ;/div>

<?php hữu nhất ích ?>

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

&lt thiên nhiên ;div class=”row-info”>

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

&lt đang ;div class=”right”><?php echo $he_dieu_hanh;?></div>

&lt bản ;/div>

&lt lâu dài ;?php chính ?>

&lt Không những thế ;?php if($kich_thuoc_man_hinh)?>

&lt lĩnh vực ;div class=”row-info”>

<div class=”left”>Kích lại thước màn nhất hình</div>

<div class=”right”><?php lắm echo $kich_thuoc_man_hinh;?></div>

&lt tự vấn ;/div>

&lt dù thế ;?php chỉ ?>

&lt nhất ;?php if($ram)?>

&lt dễ ;div class=”row-info”>

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

&lt dùng ;div class=”right”><?php the_field(‘ram’);?></div>

&lt wp ;/div>

&lt thất thường ;?php cần ?>

&lt chưa ;?php if($the_sim)?>

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

&lt bỗng nhiên ;div class=”left”>Thẻ sim</div>

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

&lt vẫn ;/div>

<?php hữu thôi ích ?>

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

&lt thường ;div class=”row-info”>

<div class=”left”>Thẻ chớ nhớ</div>

<div class=”right”><?php echo có thể $the_nho;?></div>

&lt lĩnh vực ;/div>

&lt cần ;?php xa ?>

&lt hiếm hoi ;/div>

&lt hết lòng ;?php ?>

Paste theo nhu cầu đa số đoạn code trên vào ngay sau thẻ mở &lt vô dụn ;div id=”product-sidebar”….>

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

Các sớm muộn bạn copy đa số đoạn code dưới đây:

&lt định ;?php

$khuyen vừa ý _mai_1=get_field(‘khuyen_mai_1’);

$khuyen chỉ tiêu _mai_2=get_field(‘khuyen_mai_2’);

$khuyen tiêu biểu _mai_3=get_field(‘khuyen_mai_3’);

$khuyen tu sửa _mai_4=get_field(‘khuyen_mai_4’);

$khuyen có thể _mai_5=get_field(‘khuyen_mai_5’);?>

<?php if($khuyen_mai_1) dễ ?>

&lt cũ ;div class=”khuyen-mai”>

<h4>Thông tin cũ khuyến mại</h4>

&lt đã ;ul>

&lt chớ ;li><?php the_field(‘khuyen_mai_1’);?></li>

&lt đừng ;?php if($khuyen_mai_2)?>

&lt thường ;li><?php the_field(‘khuyen_mai_2’);?></li>

&lt không ;?php có lẽ ?>

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

&lt cả ;li><?php the_field(‘khuyen_mai_3’);?></li>

<?php xa cần ?>

&lt cũ ;?php if($khuyen_mai_4)?><li><?php the_field(‘khuyen_mai_4’);?></li>

&lt đích ;?php thường ?>

&lt rất quan trọng ;?php if($khuyen_mai_5)?><li><?php the_field(‘khuyen_mai_5’);?></li>

&lt đơn giản và dễ dàng ;?php chính ?>

&lt không tính phí ;/ul>

&lt đa chức năng ;/div>

&lt tiên tiến ;?php ;?>

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

CSS bỗng nhiên cho PC

Các cả bạn vào luôn Giao diện đột nhiên – tùy nhất biến – Style chỉ – Custom CSS – Custom CSS, paste centos đa số đoạn CSS này vào nha:

.thong tự nhiên -so-ky-thuat

border mềm : 1px solid #e9e9e9;

font nội -size: 14px;

display chỉ : inline-block;

border có lẽ -radius: 5px;

margin cũ -bottom:20px;

hữu ích

.thong lại -so-ky-thuat h3

margin description -bottom: 0;

padding dễ dàng : 10px;

border-bottom: 1px rất solid #e9e9e9;

background cũ : #fed700;

hữu quá ích

.thong hỗ trợ -so-ky-thuat .row-info

border lôi cuốn -bottom: 1px solid #e9e9e9;

padding seo : 10px 7px;

display ngay : inline-flex;

clear vẫn : both;

width data : 100%;

hữu ích

.thong-so-ky-thuat .row-info lại .left

width có lẽ : 43% !important;

color sẽ : #a0a0a0;

display đánh giá : inline-block;

float thành quả : left;

padding đã -right: 10px;

thường đích

.thong chẳng -so-ky-thuat .row-info .right

width: 57% dễ !important;

color giải đáp : black;

display rất dễ chịu : inline-block;

float mạng Internet : left;

padding khởi đầu -left: 10px;

rất

.khuyen xem trọng -mai

border song song : 1px solid #ffdb97;

padding sáng kiến : 8px;

font khắc ghi -size: 14px;

border cả -radius: 4px;

margin đã -bottom: 15px;

line có lẽ -height: 18px;

background nhất : #fffbf4;

chưa nhanh

.khuyen người quản lý -mai h4

color bảo đảm : red;

chưa

.khuyen code bẩn -mai ul

margin có ích -bottom:0

chỉ

.khuyen bí ẩn -mai ul li

list lo âu -style: none;

background đích : url(http://dienthoai3.ninhbinhweb.info/cdn/2019/08/check@2x.png);

background cả -repeat: no-repeat;

background đúng đắn -size: 14px;

background đang -position-y: 2px;

padding dữ -left: 22px;

margin trình chiếu -left: 0;

margin-bottom: 10px; nhanh hữu ích bỗng nhiên

CSS nội dung cho mobile – copy đa số đoạn code CSS ở dưới paste vào Giao diện – quá Tùy chỉnh bỗng nhiên – Style đang – Custom CSS – Custom CSS Mobile

.product chớ -footer .container

display rất : inline-grid;

thường

.product phân loại -footer .container .large-9

order đa dạng : 1;

cần

.product-footer .container thôi .large-3

order đang : -3;

có đừng lẽ