Hiển thị thêm thông tin từ ACF | Advanced Custom Fields trong WordPress

🗣 Bài viết đăng bởi Pinker vào lúc 19-07-2022 và cập nhật lúc 23-03-2024 👁 6165 lượt xem
Chia sẻ ➯
Thêm Thông Tin Bổ Sung Bằng Acf Trong Wordpress

Bài viết khác

Giới thiệu

Mặc định WordPress hay WooCommerce sẽ chỉ hỗ trợ sẵn một số trường giá trị mặc định như tên, giá, mô tả, ảnh. Trong một số website đặc thù, ta lại muốn hiển thị thêm các thông số khác. Và plugin ACF | Advanced Custom Fields hiện đang là lựa chọn sáng giá nhất cho việc này, với chức năng phong phú, hỗ trợ rất nhiều tùy chọn khác nhau. Việc thêm thông số, thông tin như dưới đây trở nên dễ dàng hơn. Trong bài viết này tôi sẽ hướng dẫn cách thêm thông tin bằng ACF trong WordPress.

Thông Tin Bổ Sung
Thông Tin Bổ Sung
Hiển Thị Thông Tin Phụ Bằng Acf
Hiển Thị Thông Tin Phụ Bằng ACF

Hướng dẫn thêm thông tin bằng ACF

Website tôi hướng dẫn hiện tại đang sử dụng theme Flatsome + WooCommerce.

B1. Cài đặt plugin ACF | Advanced Custom Fields

Tìm kiếm bản mới nhất và download ACF tại đây

B2. Tạo các trường thông tin ACF WordPress

Có 2 cách để có thể tạo thông tin như hình dưới

  1. Tự tạo bằng tay
  2. Download & Import file cấu hình json vào ACF -> Tool
Import Json Data ACF
Import Json Data ACF
Tạo Các Trường Thông Tin Trong Acf
Tạo Các Trường Thông Tin Trong ACF

B3. Cập nhật thông tin sản phẩm

Cập Nhật Thông Tin Sản Phẩm
Cập Nhật Thông Tin Sản Phẩm

B4. Hiển thị thông tin ra ngoài giao diện Website

Để hiển thị được thông tin như hình ảnh trên, ACF | Advanced Custom Fields hỗ trợ hàm để lấy dữ liệu như get_field và show ra bên ngoài bằng ngôn ngữ PHP. Trong phần danh sách sản phẩm của Flatsome có hỗ trợ hàm để hiển thị phía dưới từng item sản phẩm. Copy đoạn code sau vào functions.php. Ở đây tôi dùng thêm font-awesome để tạo ra icon, cái này các bạn có thể tùy chọn dùng cái khác nếu phù hợp

<?php
function vdh_more_info() {
    ?>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <div class="vdh_acf tt_them">
        <ul class="list-project list-pro">
            <li>
	        <i class="fa fa-area-chart" aria-hidden="true"></i> <?php echo get_field( "dien_tich" ); ?>m2
	    </li>
	    <li>
		<i class="fa fa-compass" aria-hidden="true"></i> <?php echo get_field( "huong" ); ?>
	    </li>
	    <li>
		<i class="fa fa-bed" aria-hidden="true"></i> <?php echo get_field('phong_ngu') ?> PN
	    </li>
	    <li>
		<i class="fa fa-bath" aria-hidden="true"></i> <?php echo get_field('phong_ve_sinh') ?> WC
	    </li>
	</ul>
        <?php echo get_field('dia_chi') ?>
    </div>
    <?php
}
add_action('flatsome_product_box_after', 'vdh_more_info');

CSS để ra hình hài dễ nhìn chút

.product-small .product-title a {
    font-size: 1.3em;
}

.product-small span.amount {
    color: #0095d6;
    font-size: 18px;
    line-height: 30px;
}

.product-small .box-text {
    padding-top: .7em;
    padding-bottom: 1.4em;
    padding-left: 1em;
    padding-right: 1em;
    position: relative;
    width: 100%;
    font-size: .9em;
    min-height: 181px;
}

.product-small .box-text {
    padding-left: 1em;
    padding-right: 1em;
    min-height: 181px;
}

.product-small .box {
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid #ddd;
}

.product-small .has-shadow>.col>.col-inner {
    border-radius: 10px;
    background-color: #FFF;
}

.product-small .box .box-image {
    border-radius: 10px;
}

.product-small .box-image img {
    height: 200px !important;
    object-fit: cover;
}

.vdh_acf {
    padding-top: 7px;
}

.vdh_acf .list-project {
    margin-bottom: 0;
}

.vdh_acf .list-project li {
    display: inline-block;
    color: #636982;
    padding: 0 10px 0 0;
    margin-left: 0 !important;
    font-size: 15px;
}

Vậy là đã hoàn thành 1 cách tương đối rồi đó, ở trên là hướng dẫn một cách tổng quan, để cho đẹp hơn hoặc như nào đó thì bạn cần thêm kỹ năng lập trình nhé.

Tham khảo thêm video


4.8/5 - (19 bình chọn)

Bài viết khác

Tổng hợp Download Plugin - Theme cho WordPress : Xem ngay
Nhóm Zalo : Tham gia ngay
TAGS: ACF ACF WORDPRESS ADVANCED CUSTOM FIELDS ADVANCED CUSTOM FIELDS WORDPRESS BẢNG THÔNG SỐ ACF BẢNG THÔNG SỐ KỸ THUẬT ACF HIỂN THỊ THÊM TRƯỜNG THÔNG TIN WORDPRESS PLUGIN ACF THÊM THÔNG TIN BỔ SUNG TRONG WORDPRESS THÊM THÔNG TIN TRONG WORDPRESS THÔNG TIN SẢN PHẨM WOOCOMMERCE

2 thoughts on “Hiển thị thêm thông tin từ ACF | Advanced Custom Fields trong WordPress

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

tám cộng 1 = mấy (trả lời bằng chữ) ?