Chắc hẳn nhiều bạn khi đi tìm các thông tin như cách tạo thêm các trường thông tin bằng ACF (Advance Custom Field) thì nhiều bài chia sẻ, nhưng đến bước làm sao biết cách chèn code  ACF vào file php vào wordpress như thế nào để nó hiển thị ra ngoài trang cho người dùng thì thật sự không có hoặc rất ít. Bài viết này sẽ hướng dẫn các bạn và có thể làm được dễ dàng. Các trường thông tin tùy biến có thể ứng dụng để gọi các dữ liệu ra để hiển thị vào phần nội dung hiển thị mong muốn. Bạn nên sử dụng child theme và tải lại phần ACF đã thêm vào để backup dữ liệu.

Các bước để tạo và sử dụng được ACF trên wordpress

B1: Tải ACF (Advance custom field) về, với bản thường thì không dùng được phần vòng lặp
B2: Tạo các trường thông tin ACF và các điều kiện để hiển thị như cho từng loại như bài viết, sản phẩm, trang… (post type)

Tạo mới và đặt tên cho trường dữ liệu thêm vào bằng ACF

Chọn điều kiện áp dụng ACF áp dụng cho Loại trang, danh mục…

Thêm các trường dữ liệu tùy chỉnh theo mục đích sử dụng

B3: Sửa và chèn file vào php trong theme của bạn để hiển thị ra ngoài

Phần này yêu cầu kỹ năng 1 chút tuy nhiên với cách mình chia sẻ và code chia sẻ thì chắc chắn bạn sẽ làm được và tùy vào nhu cầu. Cái nào cao siêu quá thì có thể thuê các bạn có kiến thức về php code và trả phí.

03 cách chèn code ACF để hiển thị ra ngoài

Cách 1: cách chèn code ACF vào wordpress sử dụng shortcode

Thay phần bôi đỏ là phần trường thông tin acf_test_huong_dan_truong_thong_tin_xep_hang theo tên mà bạn để (không phải là trường Label) vào trực tiếp bài viết như khi đăng bài thông thường. Vì khi chèn shortcode không có dữ liệu nó không hiển thị ra nên bạn xem phần ảnh

Ví dụ chèn thay thế vào sau shortcode. Bỏ phần *** ở sau và trước dấu [] đi bạn nhé! shortcode=[***acf field=”acf_test_huong_dan_truong_thong_tin_xep_hang” post_id=””***]/10

• Xếp hạng (theo sao): /10
• Năm xây dựng:
• Lưu ý:

Cách 2: cách chèn code ACF vào file php vào wordpress

Để chèn code ACF (Adavance Custom Field) vào file php vào wordpress thì đầu tiên bạn hãy xác định vị trí bạn muốn thêm vào ở đây mình ví dụ sử dụng file giao diện là emallshop như:
+ Thêm ACF code vào bài viết: Bạn sẽ phải sửa và thêm vào file content-single-product.php trong thư mục của giao diện bạn đang sử dụng /public_html/wp-content/themes/emallshop/

<?php
/**
* The default template for displaying content
*
* Used for both single and index/archive/search.
*
* @package WordPress
* @subpackage EmallShop
* @since EmallShop 1.0
*/
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php if( (is_single() && emallshop_get_option('show-post-thumbnail', 1) ==1) || (!is_single() && emallshop_get_option('show-blogs-thumbnail', 1) ==1)):
// Post thumbnail.
emallshop_get_post_thumbnail('large');
endif; ?>
<?php if( emallshop_get_option('show-postdate', 1) ==1):?>
<div class="entry-date">
<span class="entry-day"><?php  echo esc_html( get_the_time('d') );?></span>
<span class="entry-month"><?php  echo esc_html( get_the_time('M') );?></span>
</div>
<?php endif; ?>
<header class="entry-header">
<?php
if ( is_single() ) :
the_title( '<h2 class="entry-title">', '</h2>' );
else :
the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' );
endif;
?>
</header><!-- .entry-header -->
<?php if( emallshop_get_option('show-postmeta', 1) ==1):?>
<footer class="entry-footer">
<?php emallshop_entry_meta(); ?>
<?php edit_post_link( esc_html__( 'Edit', 'emallshop' ), '<span class="edit-link">', '</span>' ); ?>
</footer><!-- .entry-footer -->
<?php endif;?>
<div class="entry-content">
<?php
/**
* CHÈN THÔNG TIN HIỂN THỊ THÔNG TIN ACF  RA NGOÀI CHO NGƯỜI TRUY CẬP (KHI ACF CÓ NHẬP DỮ LIỆU)
*/
?>
<?php if( get_field('acf_test_huong_dan_truong_thong_tin_xep_hang') ): ?>
<p><strong>  Xếp hạng (theo sao):</strong><?php the_field('acf_test_huong_dan_truong_thong_tin_xep_hang'); ?></p>
<?phpendif;?>
<?php if( get_field('acf_test_huong_dan_truong_thong_tin_nam_xay_dung') ): ?>
<p><strong>Năm xây dựng: </strong><?php the_field('acf_test_huong_dan_truong_thong_tin_nam_xay_dung'); ?></p>
<?phpendif;?>
<?php if( get_field('acf_test_huong_dan_truong_thong_tin_nhap_san') ): ?>
<p><strong>Lưu ý: </strong><?php the_field('acf_test_huong_dan_truong_thong_tin_nhap_san'); ?></p>
<?phpendif;?>
<?php if( ! is_single() && emallshop_get_option('show-blog-excerpt', 0 ) ==1):
$length=emallshop_get_option('blog-excerpt-length', 75);
echo esc_html( emallshop_excerpt($length) );
else:
/* translators: %s: Name of current post */
the_content( sprintf(
esc_html__( 'Read more %s', 'emallshop' ),
the_title( '<span class="screen-reader-text">', '</span>', false )
) );
endif;
wp_link_pages( array(
'before'      => '<div class="page-links"><span class="page-links-title">' . esc_html__( 'Pages:', 'emallshop' ) . '</span>',
'after'       => '</div>',
'link_before' => '<span>',
'link_after'  => '</span>',
'pagelink'    => '<span class="screen-reader-text">' . esc_html__( 'Page', 'emallshop' ) . ' </span>%',
'separator'   => '<span class="screen-reader-text">, </span>',
) );
?>
</div><!-- .entry-content -->
<?php
// Author bio.
if ( is_single() && get_the_author_meta( 'description' ) ) :
get_template_part( 'author-bio' );
endif;
?>
</article>

<!-- #post-## -->

+ Thêm ACF code vào sản phẩm woocommerce: Bạn sẽ phải sửa và thêm vào file content.php trong thư mục của giao diện bạn đang sử dụng /public_html/wp-content/themes/emallshop/woocommerce/ Giải thích về code ACF này: <?php if( get_field(‘acf_test_huong_dan_truong_thong_tin_xep_hang’) ): ?> <p><strong>  Xếp hạng (theo sao):</strong><?php the_field(‘acf_test_huong_dan_truong_thong_tin_xep_hang‘); ?></p> <?phpendif;?> acf_test_huong_dan_truong_thong_tin_xep_hang là trường tên ACF Đoạn code: <?php if( get_field(‘acf_test_huong_dan_truong_thong_tin_xep_hang‘) ): ?> <?phpendif;?> là phần hiển thị khi ACF có dữ liệu (không để trống); nếu để trống nó sẽ không hiển thị trường dữ liệu này. Tham khảo từ: https://www.advancedcustomfields.com/resources/checkbox/

Chèn code ACF có vòng lặp repeater vào file php

Ví dụ code bên dưới (thay thế %20 bằng khoảng trống/ cách nếu bạn thấy lỗi)

<?php
/**
* HIỂN THỊ THÔNG TIN LINK ỨNG DỤNG OTA
*/
?> 
<?php if( have_rows('link_kenh_ota') ): ?>
<table class="table-sco">
<h2>THÔNG TIN WEBSITE/ ỨNG DỤNG (APP)</h2>
<?php while( have_rows('link_kenh_ota') ): the_row(); 
$link_website = get_sub_field('link_website');
$link_ios = get_sub_field('link_ios');
$link_android = get_sub_field('link_android');
$link_extranet_partner = get_sub_field('link_extranet_partner');
$link_ios_parter = get_sub_field('link_ios_parter');
$link_android_parter = get_sub_field('link_android_parter');

?>
<tr>
<td><a class="button" href="<?php%20echo%20esc_url(%20$link_website%20);%20?>">LINK WEBSITE</a></td><td><a class="button" href="<?php%20echo%20esc_url(%20$link_ios%20);%20?>">APP IOS</a></td><td><a class="button" href="<?php%20echo%20esc_url(%20$link_android);%20?>">APP ANDROID</a></td><td>(cho người dùng)</td></tr> <tr> <td><a class="button" href="<?php%20echo%20esc_url(%20$link_extranet_partner%20);%20?>">LINK EXTRANET PARTNER</a></td><td><a class="button" href="<?php%20echo%20esc_url(%20$link_ios_parter);%20?>">APP IOS PARTNER</a></td> <td><a class="button" href="<?php%20echo%20esc_url(%20$link_android_parter);%20?>">APP ANDROID PARTNER</a></td><td>(cho chủ CSLT)</td></tr> <?php endwhile; ?> </table> <?php endif; ?>

Cách 3: Sử dụng plugin như WPCode Lite/ Snipset để hỗ trợ chèn PHP file nhanh và thuận tiện

Ở cách thứ 3 này việc chèn thì dễ nhưng code yêu cầu chính xác và phụ thuộc nhiều kỹ năng và kiến thức. Dưới đây mình sẽ share một số code chèn code bên ngoài và bên trong WooCommerce. Bạn có thể tìm hiểu thêm các vị trí có Hook action của WooCommerce hỗ trợ nhé! Chọn cách chèn PHP Snipset

Tham khảo:

• https://www.businessbloomer.com/woocommerce-display-advanced-custom-fields-single-product/
• https://www.businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/

<?php add_action( 'woocommerce_product_thumbnails', 'bbloomer_display_acf_field_under_images', 30 ); function bbloomer_display_acf_field_under_images() { echo '<b>Trade Price:</b> ' . get_field('trade');    }

Một số cách vận dụng để sử dụng ACF

• Trường thông tin bài viết nào cũng giống nhau cho 1 danh mục (cài sẵn giá trị)
• Trường thông tin tự nhập liệu ACF dạng văn bản, số…
• Trường thông tin lặp/ tạo mới bằng ACF

Một số ACF hay sử dụng

– ACF dạng văn bản/ text
– ACF dạng số/ number
– ACF dạng chọn nhiều/ checkbox
– ACF dạng chọn một/ select

Tất cả ACF hỗ trợ

Accordion
Basic
Button Group
Checkbox
Choice
Clone
Color Picker
Content
Date Picker
Date Time Picker
File
Flexible Content
Functions
Gallery
Google Map
Group
Image
jQuery
Layout
Link
oEmbed
Page Link
Post Object
Radio Button
Range
Relational
Relationship
Repeater
Select
Tab
Taxonomy
Text
Text Area
Time Picker
True / False
User
Wysiwyg Editor

Trang tài liệu của ACF khá đầy đủ và có hạn chế là toàn tiếng Anh: https://www.advancedcustomfields.com/resources/

Vui lòng nhấn vào biểu tượng kênh hỗ trợ dưới đây nếu Bạn vẫn cần thêm thông tin/ Hỗ trợ:

Đăng ký nhận bản tin từ Website TXL

Tìm kiếm tức thì các thông tin tại website: tranxuanloc.com