03 cách tạo trường thông tin bằng ACF và chèn code vào file php cho wordpress

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.

Cach Tao Truong Thong Tin Bang Acf Va Chen Code Vao File Php Cho WordPress (6)
Cach Tao Truong Thong Tin Bang Acf Va Chen Code Vao File Php Cho WordPress (6)

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

Cach Tao Truong Thong Tin Bang Acf Va Chen Code Vao File Php Cho WordPress (4)
Cach Tao Truong Thong Tin Bang Acf Va Chen Code Vao File Php Cho WordPress (4)

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

Cach Tao Truong Thong Tin Bang Acf Va Chen Code Vao File Php Cho WordPress (3)
Cach Tao Truong Thong Tin Bang Acf Va Chen Code Vao File Php Cho WordPress (3)
Cach Tao Truong Thong Tin Bang Acf Va Chen Code Vao File Php Cho WordPress (2)
Cach Tao Truong Thong Tin Bang Acf Va Chen Code Vao File Php Cho WordPress (2)

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

Cach Tao Truong Thong Tin Bang Acf Va Chen Code Vao File Php Cho WordPress (8)
Cach Tao Truong Thong Tin Bang Acf Va Chen Code Vao File Php Cho WordPress (8)
Cach Tao Truong Thong Tin Bang Acf Va Chen Code Vao File Php Cho WordPress (7)
Cach Tao Truong Thong Tin Bang Acf Va Chen Code Vao File Php Cho WordPress (7)

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

XEM THÊM:  'Sập bẫy' lừa cộng tác trên sàn TMĐT vì muốn kiếm tiền nhanh

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 ý:
Cach Tao Truong Thong Tin Bang Acf Va Chen Code Vao File Php Cho WordPress Shortcode
Cach Tao Truong Thong Tin Bang Acf Va Chen Code Vao File Php Cho WordPress Shortcode

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/

Chèn code ACF thông thường vào file php

Ví dụ sửa và thêm ACF vào file content.php

<?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 trang: Bạn sẽ phải sửa và thêm vào file content-page.php trong thư mục của giao diện bạn đang sử dụng /public_html/wp-content/themes/emallshop/

XEM THÊM:  3 Giờ chạy đua thần tốc tổ chức thành công sự kiện bàn tiệc siêu dài tại Hà Nội

+ 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; ?>

Cach Tao Truong Thong Tin Bang Acf Va Chen Code Vao File Php Cho WordPress (5)
Cach Tao Truong Thong Tin Bang Acf Va Chen Code Vao File Php Cho WordPress (5)

 

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

XEM THÊM:  Tại sao Người làm vài tháng đã được lên Quản lý còn Kẻ làm 10 năm vẫn ngậm ngùi làm Nhân viên?

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/

Bạn có thấy hữu ích không? Hãy cho chúng tôi +1 nhé

Đă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

Mẹo tìm kiếm: "Từ khóa cần tìm kiếm" site:tranxuanloc.com để tìm được kết quả chính xác trên công cụ tìm kiếm của google

Trần Xuân Lộc Blog cung cấp dịch vụ

TOP ĐỐI TÁC CUNG CẤP DỊCH VỤ DU LỊCH TRỰC TUYẾN HÀNG ĐẦU

(Đặt phòng, đặt tour, đặt xe, đặt vé máy bay...Nhấn vào link logo để đặt dịch vụ với nhiều ưu đãi hấp dẫn)

Cảnh báo: Hiện nay có rất nhiều đơn vị SỬ DỤNG LẠI các THÔNG TIN NỘI DUNG ĐÀO TẠO của KHÓA HỌC SALE OTA TỪ OTAVN mà không đảm bảo chất lượng và hỗ trợ về sau. Các bạn muốn đăng ký học SALE OTA uy tín hãy liên hệ trực tiếp với OTA Việt Nam. OTAVN có xây dựng các hình thức đào tạo trực tiếp offline cho doanh nghiệp, đào tạo 1-1 từ xa và tự học online. Chúng tôi có 2 tên miền là: otavietnam.com và tranxuanloc.com (founder) có chia sẻ và đăng tải các thông tin liên quan về OTA/ Sale OTA/ Digital Marketing/ Thiết kế website... Với khách hàng/ đối tác đã sử dụng dịch vụ của OTAVN sẽ được HỖ TRỢ MIỄN PHÍ các vấn đề phát sinh, tư vấn giải đáp sau khi đã hoàn thành khóa học hoặc sau khi đã sử dụng dịch vụ trọn đời. Hotline:0934552325 (iMessage/ Zalo/ Whatsapp) - Email: [email protected]