Advanced Custom Fields [ACF] là một plugin mà rất nhiều lập trình viên WordPress trên thế giới đã và đang khuyên dùng vì nó sẽ rút ngắn thời gian tạo Meta Box chỉ với vài cú click, thậm chí khâu gọi giá trị Custom Fields của nó để hiển thị ra ngoài giao diện cũng rất nhanh vì hầu như chúng ta chỉ sử dụng một hàm duy nhất mà plugin này hỗ trợ sẵn.
Giới thiệu ACF
Bạn có thể tạo một Meta Box [gồm các trường tùy chỉnh] áp dụng cho mọi thứ trong trang WordPress:
- Post Type: Post, Page, Custom Post Types
- Một Post [bài viết], Page [trang] cụ thể
- Category, Page Template
- Taxonomy Term [Category, Tag, Custom Taxonomy]
- User
- …
Với các trường như:
- Text, Text Area, Number, Email, Password
- Wysiwyg Editor
- Image
- Select, Checkbox, Radio Button
- …
Cài đặt plugin ACF
Trong WordPress Dashboard, vào Gói mở rộng → Cài mới, nhập Advanced Custom Fields vào ô tìm kiếm, bấm Cài đặt ngay bây giờ tại plugin được tìm ra, bấm tiếp Kích hoạt.
Bấm vào hình ảnh để xem kích thước lớn hơn.
Tạo một Meta Box
Ví dụ mình tạo một Meta Box Thông tin Giảng viên áp dụng cho Post, gồm Tên giảng viên [Text], Hình đại diện [Image], Chuyên môn [Text], Giới thiệu [Wysiwyg Editor]. Trong trang Custom Fields, bấm Add New, nhập Tiêu đề của Meta Box này và chọn như hình sau.
Advanced Custom Field Pro – Là một plugin cho phép bạn tạo những meta box, hoặc thêm một custom filed nào đó vào trang mà bạn muốn. Bạn có thể dễ dàng Export và sử dụng lại tiếp tục ở những trang web khác. Một plugin mà mọi Developer đều cần để custom website theo ý muốn. Trong bài viết hôm nay Én sẽ hướng dẫn các bạn cách cài đặt và sử dụng ACF Pro.
MỤC LỤC
- Plugin Advanced Custom Field là gì?
- Các tính năng của ACF
- Hướng dẫn cách cài đặt và sử dụng ACF
- Bước 1: Cài đặt ACF
- Bước 2: Thêm các trường vào nhóm bên bạn
- Bước 3: Thêm nhiều trường vào nhóm
- Bước 4: Đặt vị trí trường
- Bước 5: Hiển thị thông tin Advanced Custom Field ở mặt trước bên website
- Bước 6: Nếu vẫn thất bại
- Lời kết
Plugin Advanced Custom Field là gì?
Là một Plugin dành cho mã nguồn mở WordPress, cho phép bạn thêm các trường tùy chỉnh nội dụng vào màn hình soạn thảo bài viết. Với Plugin Advanced Custom Fields Pro [ACF] hỗ trợ quản trị viên trang web xây xựng bố cục layout theo phong cách riêng chuyên nghiệp hơn. Với các trường được tạo bởi Advanced Custom Fields Pro [ACF] này gọi là các trường tùy biến hay tùy chỉnh cho website của bạn.
Các tính năng của ACF
- Gíup bạn thu thập thông tin bổ sung về nội dung bên mình tại trình chỉnh sửa WordPress.
- WordPress là nền tảng mã nguồn mở linh hoạt, vì vậy bạn sẽ được tạo bất kỳ website nào bạn muốn, với chức năng khác nhau với những thứ như thương mại điện tử, sự kiện…
- Trình chỉnh sửa trực quan Wordpres có công cụ tuyệt vời như chỉnh sửa nội dung phong phú đến định dạng phương tiện
- ACF giúp giảm bớt quá trình này bằng cách bạn được phép sửa trình chỉnh sửa nội dung, chuẩn hóa cách bạn thu thập, hiển thị thông tin nhất định.
Xem ngay: Hướng dẫn cài đặt và sử dụng plugin WP Rocket
Hướng dẫn cách cài đặt và sử dụng ACF
Phiên bản trả phí bạn cần mua tại đây cung cấp nhiều tính năng hơn, chẳng hạn như bạn có thể chọn danh sách bài viết hoặc chuyên mục chứa bài viết [để thực hiện các query phức tạp hơn].
Bước 1: Cài đặt ACF
Hướng dẫn Plugin ACFSau khi cài đặt xong bạn vào Dashboard >> Custom Fields >> Custom Fields
để tạo field và quản lý các field đã tạo. Ở đây bạn sẽ tạo field theo từng nhóm [group] bởi vì nó sẽ hiển thị theo nhóm trong khu vực viết bài.
Ấn nút Add New để bắt đầu tạo field.
Hướng dẫn Plugin ACFMàn hình sau đây sẽ trông đáng sợ, tuy nhiên bạn thường chỉ cần thay đổi vài yêu tố. Bạn cũng kiểu tra được chúng để xem cách chíng hoạt động trên website bên bạn.
Hướng dẫn Plugin ACFHiện tại, hãy đặt tên nhóm lĩnh vực bên bạn cái gì đó
Bước 2: Thêm các trường vào nhóm bên bạn
Bây giờ là lúc để thêm Advanced Custom Field cá nhân.
Click nút thêm trường màu xanh
Hướng dẫn Plugin ACFĐiều này mở ra hình thức dài khác hơi khó hiểu, nhưng dễ nắm bắt sau 1,2 lần sử dụng.
Bắt đầu cách nhập vào nhấn trường. Đối với hướng dẫn này, chúng tôi đang sử dụng năm phát hành.
Hướng dẫn Plugin ACFNó được sử dụng để đjăt kết quả tại mẫu cùng mã hóa. Điều đó sẽ được sử dụng bởi đơn vị thiết kế website bên bạn
Chọn loại trường bên bạn. Đối với trường hợp này, chúng tôi đang chọn loại trường văn bản, tuy nhiên bạn có nhiều sự lựa chọn từ hình ảnh đến hộp kiểm hay accordion.
Toàn bộ loại trường có tùy chọn khác nhau, tuy nhiên đây là vài mục bạn điền vào với loại trường văn bản.
- Hướng dẫn trường – bạn muốn nhắc nhở nhà văn bên bạn chỉ gõ bốn chữ số
- Bắt buộc – Bạn đặt được trường này thành yêu cầu trước khi xuất bản.
- Gía trị mặc định – Đi9ều này hữu ích nếu bạn muốn giá trị luôn hiển thị, ngay cả khi để trống
- Văn bản giữ chỗ – Điều này hiển thị tại trường đầu vào khi nhà văn ở trình chỉnh sửa
- Giới hạn ký tự – Bạn không muốn nhà văn vượt qua vài lượng nhân vật nhất định.
Đó không phải là toàn bộ lĩnh vực trên đó, nhưng không có trường nào phụ thuộc số này là bắt buộc. Vì vậy tốt nhất bạn nên tự kiểm tra chúng. Ngoài ra, bạn thất tùy chịn khác tùy thuộc vào loại trường
Xem thêm: Hướng dẫn cài đặt và sử dụng Plugin All in One WP Migration
Bước 3: Thêm nhiều trường vào nhóm
Sau khi lưu trường đầu tiên, đã đến lúc thêm các trường khác vào cùng.
Đó là quá trình tương tự
Chỉ cần quay lại nhóm trường, bấm thêm trường, sau đó đặt tên cho chúng.
Hướng dẫn Plugin ACFLĩnh vực công ty không có gì đặc biệt, nhưng tận dụng được công cụ để xếp hạng
Hướng dẫn Plugin ACFFiled Type là 1 con số
Chúng tôi cũng được chỉ định ở hướng dẫn trường để đánh giá chất lượng của sản phẩm của bạn từ 1 đến 10.
Sau đó chúng tôi sẽ đánh dấu giá trị tối thiểu là 1, giá trị tối đa 10 cùng kích thước bước là 1.
Hướng dẫn Plugin ACFBước 4: Đặt vị trí trường
Bây giờ cấu hình vị trí cùng cách hiển thị trường trên website.
Chuyển đến bảng điều khiển vị trí.
Hướng dẫn Plugin ACFĐiều này yêu cầu quy tắc về nơi trường sẽ xuất hiện.
Nếu bạn đang sử dụng loại bài đăng tùy chỉnh, bạn cũng liên kết nhóm trường tùy chỉnh bên mình với loại bài đăng tùy chỉnh.
Ở cài đặt, bạn có cơ hội thiết kế cách trường hiển thị trên trình chỉnh sửa wordpress bên bạn.
Hướng dẫn Plugin ACFVề cơ bản, phần này giúp bạn tùy chỉnh giao diện thiết kế nhu cầu riêng của bạn
Ví dụ:
- Vị trí – Có tùy chọn để hiển thị trường trên hay dưới trình chỉnh sửa
- Phong cách – Cân nhắc việc đặt trường vào metabox
- Ẩn trên màn hình – Xóa bảng mà bạn không cần
Bước 5: Hiển thị thông tin Advanced Custom Field ở mặt trước bên website
Bây giờ khi bạn thêm vài dữ liệu trường tùy chỉnh tại trình chỉnh sửa wordpress, bạn cần cách để hiển thị thông tin đó ở mặt trước bên website.
Bạn phải thuê đơn vị thiết kế website để có được kết quả bên trường tùy chỉnh bên mình trên frontend. Tuy nhiên, có vài giải pháp thân thiện với người mới bắt đầu.
- Sử dụng mã ngắn để hiển thị trường ACF tại trình chỉnh sửa.
- Tìm plugin xây dựng trang với sự hỗ trợ để hiển thị trường ACF
- Đặt mã ngắn với trường tại nhóm khối có khả năng tái sử dụng
Tùy chọn đầu tiên liên quan đeén việc sử dụng mã ngắn ACF. Plugin không có trình tại mã ngắn, vì vậy bạn sẽ phải sử dụng định dạng như sau:
Điều này chỉ hoạt động trường dựa trên văn bản, bạn phải thay thế field_name bằng tên trường bên bạn
Chẳng hạn, bạn tìm thấy tên trường tại danh sách trường bên bạn.
Hướng dẫn Plugin ACFSau đó chỉ mất chút thời gian để thêm trường vào mã ngắn đó tạo trình chỉnh sửa.
Hướng dẫn Plugin ACFXem thêm: Công ty thiết kế website chuyên nghiệp tại Đà Nẵng
Hãy chắc chắn rằng dữ liệu trường bên bạn được điền vào bài viết.
Hướng dẫn Plugin ACFClick nút xuất bản để xem kết quả.
Hướng dẫn Plugin ACFBạn cũng thấy trình tạo trang mà bạn được phép hiển thị trường ACF tại trình chỉnh sửa. Ví dụ Elementor Pro [đánh giá bên chúng tôi], Divi, Beaver Builder + Beaver Themer cùng vài tùy chọn khác được phép làm điều này.
Gỉai pháp tuyệt vời khác là tạo khối tại trình chỉnh sửa, đặt shortcode vào đó, sau đó lưu nó thành khối tái sử dụng để sử dụng ở tương lai.
Hướng dẫn Plugin ACFBước 6: Nếu vẫn thất bại
Hãy gửi nó cho đơn vị thiết kế website bên bạn để hiển thị trên website.
Hướng dẫn Plugin ACFXem thêm: Thiết kế web chuyên nghiệp Đà Nẵng
Nếu phương pháp không có mã trên không làm điều đó giúp bạn, tùy chọn tiếp theo bên bạn là gửi nó đến đơn vị thiết kế website wordpress, việc này không mất nhiều thời gian.
Về cơ bản, toàn bộ đơn vị thiết kế website đang làm là thêm chút mã tại tệp mẫu bên bạn hoặc là tệp bài đăng duy nhất.
Do đó, chúng tôi khuyên bạn nên tìm đơn vị thiết kế website uy tín để giúp giải quyết vấn để này.
Lời kết
Advanced Custom Fields xứng đáng là một plugin được tin tưởng sử dụng, trước hết là bởi giao diện UI tương tác người dùng trong Backend tương đối thân thiện, và hiển thị ngoài website cũng không quá khó. Nếu bạn muốn giảm thiểu thời gian coding cho việc hiển thị dữ liệu backend ngoài frontend, đây là plugin tốt nhất hiện nay.