Cùng tìm hiểu về Plugin Advanced Custom Field

Advanced Custom Field viết tắt là (ACF), là một plugin hỗ trợ mạnh mẽ trong wordpress. Với plugin này sẽ cho phép người lập trình website wordpress dễ dàng tạo các meta box với những thao tác đơn giản. Chỉ vào thao tác cài đặt plugin Advanced Custom Field bạn hoàn toàn thấy quá đơn giản trong việc làm tùy biến cho wordpress



Advanced Custom Field tải và cài đặt như thế nào ? Tìm hiểu các trường trong AFC hiện có
Plugin Advanced Custom Field có cung cấp tất tầng tật về tài liệu hướng dẫn sử dụng khá chi tiết. Trong bài viết này, Công ty thiết kế website chuyên nghiệp Tùng Phát sẽ làm bài hướng dẫn giới thiệu cơ bản về chức năng của Plugin ACF.

Đội ngũ nhân viên chúng tôi sẽ hướng dẫn tư việc thực hiện cài đặt Plugin Advanced Custom Field đến việc làm một theme options cơ bản nhất bằng cách sử dụng plguin Advanced Custom Fields PRO này

Bắt đầu tải và cài đặt Plugin ACF
Lập trình viên wordpress cần tìm hiểu như sau: Hiên nay có 2 phiên bản đó là phiên bản advanced custom fields wordpress miễn phí và advanced custom fields pro

Phiên bản advanced custom fields pro bạn cần mua tại đây, Đây là phiên bản đầy đủ giúp cho người lập trình wordpress dễ dàng tùy chỉnh hơn. Sau khi đã tạo và cài đặt được plugin AFC rồi. Công việc tiếp theo bạn cần tìm hiểu Group Field và Field nhé.

Khởi tạo field
Việc đầu tiên bạn cần làm là khởi tạo các field. Trong Bảng quản trị, bạn tìm menu “Custom Fields” và chọn “Field Groups”. Click “Add New” để thêm mới một field group mới.

Field Groups là gì?
Đây là tập hợp các field sẽ hiển thị trong backend theo một điều kiện nào đó. Ví dụ cụ thể nhé:

Ta muốn nếu là Posts (Bài viết), thì ở trong mỗi bài viết đều hiển thị một mục tên là “Nguồn tin” (loại field là text bình thường), và thêm một field để nhập “Tác giả” thay vì tên tác giả của WordPress.

Như vậy, đây là 2 fields có cùng một điều kiện là hiện trên Single Post. Nó sẽ nên nằm cùng Field Group để bạn set điều kiện đúng không nào? Đó là cách Field Groups hoạt động!!!

Tìm hiểu các trường Field là gì?
Field chính là một loại nhập dữ liệu đầu vào như ta thường thấy. Field trong ACF (đặc biệt là bản Pro) cung cấp rất nhiều kiểu (document gọi là Field Type). Dưới đây là các field thường được sử dụng:

FIELD TYPE CƠ BẢN

• Text
• Number
• Email
• Textarea
• Select
• Radio Button
• True/False

FIELD TYPE LÀM VIỆC VỚI WP_QUERY

• Page Link
• Post Object
• Relationship
• Taxonomy
• User

FIELD TYPE CHỨA CÁC FIELD HOẶC LỚP CON (NHIỀU TẦNG DỮ LIỆU)

• Repeater
• Flexible Content
• Field Type chỉ hiển thị trong backend
• Message
• Tab

Nhìn chung tổng quan plugin advanced custom fields pro wodpress đã có hầu hết các trường và các chức năng. Công việc còn lại của bạn là phải nắm hết các chức năng này. Để từ đó áp dụng vào việc triển khai trên từng dụng án thiết kế website wordpress của mình sao cho hiệu quả nhất.

Hướng dẫn từng bước làm theme option với Plugin advanced custom fields pro chi tiết nhất
Tiến hành làm Theme options Plugin advanced custom fields pro. Với chức năng này trong wordpress đây là một nơi mà người lập trình viên muốn điều chỉnh một số nơi trên theme WordPress. Chẳng hạn như cho phép người dùng có thể thay đổi logo, các thông tin lên hệ, thay đổi màu sắc của website… Với chức năng này sẽ hỗ trợ người dùng không cần phải vào chỉnh sửa lại code trên website

Các bước làm theme option bằng Plugin advanced custom fields

1. Bước 1 tiến hành cài đặt them đoạn code này vào file functions.php của website

if( function_exists(‘acf_add_options_page’) ) {
acf_add_options_page(array(
‘page_title’ => ‘Theme options’, // Title hiển thị khi truy cập vào Options page
‘menu_title’ => ‘Theme options’, // Tên menu hiển thị ở khu vực admin
‘menu_slug’ => ‘theme-settings’, // Url hiển thị trên đường dẫn của options page
‘capability’ => ‘edit_posts’,
‘redirect’ => false
));
}

Tiến hành thêm Group Field và File vào chức năng tùy chỉnh
Sau đây các lập trình viên website wordpress sẽ học thêm cách tùy biến cụ thể nhất của Plugin advanced custom fields pro

• Thêm sửa logo website
• Thêm sửa địa chỉ
• Thêm sửa email

Các bước thao tác thục hiện

Bước 1: Bạn tìm đến menu Custom Fields chọn Add New

Bước 2: Trong khu vực Add New Field Group các bạn tiến hành thêm tên group field và thêm các field mong muốn.

• Với chức năng tùy chỉnh logo: Tên field là logo kiểu của field là image
• Với chức năng tùy chỉnh địa chỉ: Tên field là address kiểu field là text
• Với chức năng tùy chỉnh email: Tên field là email kiểu là text

Sau khi đã hoàn thiện đầy đủ các Group field và Field bạn chọn Đăng bài viết bên góc phải.

Và đây là kết quả sau khi bạn đã thực hiện đúng các bước nhưng mình đã hướng dẫn.

Tìm hiểu cách lấy dữ liệu các field vừa thêm vào ra ngoài trang chủ
Sau khi đã hoàn thành thêm nội dung cần hiển thị ở các trường các bạn sẽ tập làm quen với những code hiển thị của AFC

Code Get dữ liệu ra giao diện: Chúng ta sẽ sử dụng cú pháp sau để get dữ liệu:

<?php
the_field({field_name}, ‘option’);
?>
lưu ý {field_name} là tên field khi chúng ta tạo các field nhé. Cụ thể trong ví dụ mà chúng ta đang làm sẽ như sau:

Code Get logo:

<?php $logo = get_field(‘logo’, ‘option’); ?>
<img src=“<?php echo $logo; ?>“ alt=“My website”>
hoặc

<img src=“<?php the_field(‘logo’, ‘option’); ?>“ alt=“My website”>
Code Get địa chỉ:

<p>
<strong>Địa chỉ:</strong>
<?php the_field(‘address’, ‘option’); ?>
</p>
Code Get email:

<p>
<strong>Email:</strong>
<?php the_field(’email’, ‘option’); ?>
==> Đây là những đoạn code cơ bản mà đội ngữ nhân viên thiết kế website chuyên nghiệp Tùng Phát hay dùng để tùy biến thường gặp khi sử dụng Plugin Advanced Custom. Ngoài ra với Plugin Advanced Custom Pro bạn sẽ đọc thêm những hướng dẫn chi tiết về cách sử dụng plugin AFC này. Hy vọng bài viết này sẽ giúp ít nhiều cho các bạn khi tập làm quen với chức năng làm theme option wordpress bằng Plugin Advanced Custom Pro. Chúc các bạn thực hành thành công !

Công Ty SEO Webite Giải Pháp Công Nghệ Tùng Phát

MSTDN: 0314 832 961

Hostline: 0902 313 677

Email: info.tungphat@gmail.com

Đ/c: 62 Cách Mạng, P. Tân Thành, Q. Tân Phú, Tp. Hồ Chí Minh

Vplv: 11 Đặng Thế Phong, P.Tân Sơn Nhì, Q.Tân Phú, Tp.Hồ Chí Minh

Trích dẫn: https://tungphat.com/advanced-custom-fields-la-gi.html