Hướng dẫn cài đặt và sử dụng plugin Advanced Custom Field Pro

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.

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.

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).

Xem thêm:  UX/UI là gì? Tầm quan trọng của UX/UI trong thiết kế website

Bước 1: Cài đặt ACF

Advanced Custom Field Pro
Hướng dẫn Plugin ACF

Sau 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 ACF
Hướng dẫn Plugin ACF

Mà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.

Advanced Custom Field Pro
Hướng dẫn Plugin ACF

Hiệ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

Advanced Custom Field Pro
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 ACF

Nó đượ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 thiết kế web wordpress miễn phí

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 ACF

Lĩ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 ACF

Filed 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 ACF

Bướ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 ACF

Về 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
Hướng dẫn Plugin ACF

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:

Xem thêm:  Hướng dẫn sử dụng Plugin Duplicator

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

Sau đó 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 ACF

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 ACF

Click nút xuất bản để xem kết quả.

Hướng dẫn Plugin ACF

Bạ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 ACF

Bướ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 ACF

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.

Chúc bạn thành công.

Xem thêm: Hướng dẫn cài đặt và sử dụng plugin Schema Pro

Én Web – Thiết kế Website thương hiệu chuyên nghiệp

Địa chỉ: 132 Trần Thủ Độ, Quận Cẩm Lệ, thành phố Đà Nẵng

Hotline: 0961. 3737.05 – 0345. 6012.69

Fanpage: Én Web

Bài viết liên quan