Hướng dẫn sử dụng ACF cơ bản

Advanced Custom Field viết tắt ACF

Sử dụng ACF ( Advanced custom fileds ) cơ bản để tạo các file tùy biến phục vụ cho nhu cầu website của bạn.

Cài đặt ACF

Đầu tiên bạn download Plugin ACF Pro tại đây  hoặc tải bản miễn phí của ACF ( giới hạn một số chức năng )

Sau khi download Plugin về các bạn tiến hành cài đặt plugin bình thường, kích hoạt ACF lên

Hướng dẫn sử dụng ACF cơ bản

Sau khi kích hoạt Plugin thì nó sẽ hiện ra Menu ACF : Custom Fields

Sử dụng cơ bản ACF

Ở đây mình lấy ví dụ tạo custom field cho bài viết download apk android

Yêu cầu

  • Tạo ô nhập link download cho apk
  • Thư viện hình ảnh cho apk
  • Thông tin bổ sung cho apk

Demo sau khi hiển thị các trường tùy chỉnh acf

Hướng dẫn sử dụng ACF cơ bản

Bắt đầu tạo field bằng ACF và hiển thị ra ngoài

Tạo các field cần thiết

Đầu tiên chúng ta sẽ Add New Field Group

Đặt tên cho Field Group

Phần rules các bạn chọn theo bài viết vì ở đây mình sẽ post phần mềm vào post type bài viết ( post )

Để tạo các field thì các bạn bấm vào nút  Add Field

Hướng dẫn sử dụng ACF cơ bản

Đầu tiên mình sẽ tạo field để nhập link download cho file apk

Field này thì đơn giản là khi post bài viết thì mình sẽ nhập link download cho file apk đó, ví dụ như file apk mình lưu ở drive google thì mình sẽ nhập link download từ google drive vào đó

Mục field label : Tên hiển thị

Field Name : tên field sau này sẽ được gọi để show ra ngoài web ( cái này là quan trọng nhất để chúng ta gọi )

Field Type : Mình nhập link nên sẽ chọn URL, các bạn chọn text cũng được nhé.

Instructions : Viết hướng dẫn cho người viết bài biết đây là ô gì

Required : Có bắt buộc nhập vào ô này không, nếu bật thì khi soạn bài viết bắt buộc phải nhập link vào thì mới đăng bài được. Ở đây mình để tùy chọn không bật.

Mục link download Apk mình tạo Field Name là : link_download_apk có filed type là Url

Hướng dẫn sử dụng ACF cơ bản

Tiếp tục chúng ta sẽ tạo field thông tin bổ sung thư viện hình ảnh

Thư viện bổ sung mình tạo Field Name là : thong_tin_bo_sung và field type là Wysiwyg Editor ( trình soạn thảo của wp )

Thư viện hình ảnh mình tạo Field Name là : thu_vien_hinh_anh

Hướng dẫn sử dụng ACF cơ bản

Field thu_vien_hinh_anh mình chọn return format ( định dạng trả về ) là image url nhé

Hướng dẫn sử dụng ACF cơ bản

Sau khi tạo xong thì các bạn bấm Đăng

Sau đó các bạn vào Bài viết – Viết bài mới sẽ được như hình

Các field mà bạn tạo sẽ được thực thi ngay sau khi bấm nút Đăng lúc nãy.

Bây giờ bạn chỉ cần viết bài là thêm các thông tin bổ sung cho bài viết ở các mục field đã tạo bằng acf trước đó

Hướng dẫn sử dụng ACF cơ bản

Giờ chúng ta sẽ thử tạo một bài viết và nhập giá trị cho các field vừa tạo

Hướng dẫn sử dụng ACF cơ bản

Hướng dẫn sử dụng ACF cơ bản

Hướng dẫn sử dụng ACF cơ bản

Nhìn 3 hình trên mình đã tạo bài viết gồm tiêu đề bài viết, nội dung bài viết, hình đại diện bài viết

Đồng thời một số field tùy chỉnh được tạo bởi ACF mình cũng nhập giá trị của nó ( Link download – Nội dung bổ sung – Thư viện hình ảnh )

Sau khi đăng bài viết bạn sẽ được như thế này

Tức là chỉ có tiêu đề bài viết, hình ảnh đại diện và nội dung bài viết, còn các field mà chúng ta nhập vẫn chưa hiện ra

Hướng dẫn sử dụng ACF cơ bản

Hiển thị các giá trị của field tùy biến ra ngoài

Để đưa các giá trị đã nhập vào hiện ra ngoài trang bài viết thì chúng ta sẽ tiến hành sửa file single.php của theme để lấy giá trị các field show chúng ra ngoài.

Chúng ta sẽ mở code file single.php lên

  1. Ở đây mình sẽ chèn nội dung bổ sung vào trước content ( nội dung bài viết )
  2. Tiếp theo đến là thư viện hình ảnh
  3. Tiếp đến là link Download
  4. Và cuối cùng là nội dung bài viết

Hướng dẫn sử dụng ACF cơ bản

Vì vậy đối với theme mình đang sử dụng thì mình sẽ thêm một div trước div.entry-content nhé

Nhớ lại lúc nãy khi add field chúng ta có 3 trường tương ứng với 3 field name sau :

  1. link_download_apk
  2. thong_tin_bo_sung
  3. thu_vien_hinh_anh

Đầu tiên mình thử show trường link donwload file apk ra ngoài nhé

Thêm đoạn code sau vào trước <div class=”entry-content”>

<!-- show các trường giá trị được tạo bằng acf ra đây -->
<div class="acf-show">
    <?php 
        $linkdownload = get_field('link_download_apk') ;
        echo $linkdownload ;
     ?>
</div>
<!-- end show các trường giá trị được tạo bằng acf ra đây -->


Mình sẽ tạo biến $linkdownload và gán giá trị là get_field(‘link_download_apk’) ;

get_field(‘link_download_apk’) ; hàm này sẽ lấy giá trị của trường có field name là link_download_apk mà mình đã tạo ở trên bằng ACF

Và chúng ta sẽ show được link download đã nhập ra như thế này

Hướng dẫn sử dụng ACF cơ bản

Tương tự mình sẽ lấy giá trị của field thong_tin_bo_sung để show ra, viết tiếp theo phía dưới $linkdownload

<!-- show các trường giá trị được tạo bằng acf ra đây -->
<div class="acf-show">
    <?php 
        $linkdownload = get_field('link_download_apk') ;
        echo "<p>" . $linkdownload . "</p>" ;
        
        $noidungbosung = get_field('thong_tin_bo_sung') ;
        echo wpautop( $noidungbosung );

     ?>
</div>
<!-- end show các trường giá trị được tạo bằng acf ra đây -->

Và sẽ show được 2 field như thế này :

Hướng dẫn sử dụng ACF cơ bản

Tiếp tục chúng ta sẽ show những hình ảnh trong gallery ra ngoài

Thằng này nó sẽ là một mảng các giá trị url hình ảnh nên chúng ta sẽ print_r mảng đó ra xem

<!-- show các trường giá trị được tạo bằng acf ra đây -->
<div class="acf-show">
    <?php 
        $linkdownload = get_field('link_download_apk') ;
        echo "<p>" . $linkdownload . "</p>" ;

        $noidungbosung = get_field('thong_tin_bo_sung') ;
        echo wpautop( $noidungbosung );

        $thuvien = get_field('thu_vien_hinh_anh') ;
        echo "<pre>";
        print_r($thuvien) ;
        echo "</pre>";
     ?>
</div>
<!-- end show các trường giá trị được tạo bằng acf ra đây -->

Mình sẽ lấy được giá trị của thư viện hình ảnh như sau :

Hướng dẫn sử dụng ACF cơ bản

Đến đây là ok rồi, bây giờ chỉ cần forearch và img tag để show cái mảng kia ra

<!-- show các trường giá trị được tạo bằng acf ra đây -->
<div class="acf-show">
    <?php 
        $linkdownload = get_field('link_download_apk') ;
        echo "<p>" . $linkdownload . "</p>" ;

        $noidungbosung = get_field('thong_tin_bo_sung') ;
        echo wpautop( $noidungbosung );

        $thuvien = get_field('thu_vien_hinh_anh') ;

        if ($thuvien) {
            echo "<div class='row'>";
            foreach ($thuvien as $hinhanh) {
                echo '<div class="col-12 col-lg-4 col-xs-4 col-md-4"><img src="'.$hinhanh.'"></div>';
            }
            echo "</div>";
        }
     ?>
</div>
<!-- end show các trường giá trị được tạo bằng acf ra đây -->

Và đây là kết quả sau khi show tất cả các giá trị của ACF ra ngoài

Hướng dẫn sử dụng ACF cơ bản

Bài viết này mình hướng dẫn sử dụng ACF cơ bản cho các bạn về cách tạo các trường tùy biến để nhập giá trị và show các trường đó ra ngoài bài viết.

Còn lại bạn chỉ việc css lại cho đẹp nữa là xong.

Các bài tiếp theo mình sẽ hướng dẫn sử dụng các field khác và cách tạo Options Page bằng Advance Custom Field

0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments