Hướng dẫn trường tùy chỉnh nâng cao cho người mới bắt đầu: Tạo và hiển thị các trường

Chưa được phân loại

Được tiếp thị là “trình chỉnh sửa nội dung cho các nhà phát triển WordPress”, plugin Trường tùy chỉnh nâng cao (ACF) có vẻ đáng sợ đối với một số người không quen thuộc với những gì plugin làm. Tuy nhiên, đừng để những từ thông dụng này đến với bạn, bởi vì ai ai nên sử dụng Trường tùy chỉnh nâng cao, xem đây là một trong những cách tiết kiệm thời gian lớn nhất để phát triển web. Đó là lý do tại sao chúng tôi tập hợp một hướng dẫn Trường tùy chỉnh nâng cao để hiển thị cho bạn mọi thứ.

Có, plugin Advanced Custom Fields gây nhầm lẫn cho người mới bắt đầu. Nhưng đường cong học tập không tệ và những lợi thế của việc sử dụng plugin này một cách thường xuyên sẽ biến bạn thành một tín đồ.

Quan trọng: Mặc dù chúng tôi sẽ đề cập đến một số phương pháp không phải mã để hiển thị các trường tùy chỉnh trên trang web của bạn, nhưng bạn có thể cần sự trợ giúp của nhà phát triển nếu các giải pháp không có mã đó không đủ linh hoạt cho bạn.

Plugin Advanced Custom Fields làm gì?

Trường tùy chỉnh nâng cao cho phép bạn thu thập thông tin bổ sung về nội dung của mình trong trình chỉnh sửa WordPress.

WordPress là một nền tảng linh hoạt, mã nguồn mở, vì vậy bạn sẽ có thể tạo bất kỳ trang web nào bạn muốn, với các chức năng khác nhau cho những thứ như Thương mại điện tử, viết blog, sự kiện và hơn thế nữa.

Trình chỉnh sửa trực quan WordPress có các công cụ tuyệt vời từ chỉnh sửa nội dung phong phú đến định dạng phương tiện.

Tuy nhiên, đôi khi một nhà phát triển có thể làm cho nó trực quan hơn cho các trường hợp sử dụng cụ thể.

Vấn đề là tùy chỉnh trình chỉnh sửa nội dung WordPress thường yêu cầu định dạng cẩn thận và chỉnh sửa mã tiềm năng.

Trường tùy chỉnh nâng cao giúp giảm bớt quá trình này bằng cách cho phép bạn thay đổi trình chỉnh sửa nội dung và chuẩn hóa cách bạn thu thập và hiển thị một số thông tin nhất định.

Giúp cập nhật nội dung theo kiểu dễ dàng hơn

Sau khi trang web của bạn được phát triển và sẵn sàng khởi chạy, phần lớn quy trình quản lý của bạn liên quan đến việc thay đổi các chi tiết nhỏ.

Ví dụ: một điều chỉnh phổ biến cho các công ty là thay đổi tiêu đề hoặc nền trang chủ cho các đợt bán hàng và thông báo mới. Thay đổi văn bản trong khu vực tiêu đề đó cũng rất phổ biến.

ảnh anh hùng tiêu đề

Đôi khi đó là tất cả những gì chủ doanh nghiệp làm với một trang web một cách thường xuyên!

Và điều đó hoàn toàn ổn, nhưng làm việc với WordPress khiến bạn nhận ra trình chỉnh sửa trực quan nhạy cảm như thế nào. Một khoảng lùi sai và bạn có thể xóa định dạng văn bản. Tải lên hình ảnh sai và bạn có thể làm cho toàn bộ trang chủ trông giống như rác.

Chuẩn hóa việc hiển thị nội dung lặp lại

Các hành động lặp đi lặp lại cũng đảm bảo việc sử dụng ACF.

Một ví dụ sẽ là cho một blog đánh giá phim.

Giả sử mỗi bài đánh giá của bạn đều yêu cầu bạn nhập công ty sản xuất, năm phát hành và xếp hạng phim.

Hoặc có thể bạn có một xếp hạng phim đơn giản và mô tả về thang điểm đánh giá của bạn.

đánh giá phim

Điều này có thể được thực hiện trong trình chỉnh sửa WordPress, nhưng sẽ thật tuyệt nếu tiếp tục định dạng giống nhau trên các bài đăng. Ngoài ra, việc có cùng các trường để điều chỉnh sẽ cắt giảm quá trình xuống còn vài cú nhấp chuột thay vì phải nhập mọi thứ vào.

Hướng dẫn Advanced Custom Fields

Điều đầu tiên cần làm là tải xuống plugin Advanced Custom Fields. Kiểm tra của chúng tôi hướng dẫn cài đặt và kích hoạt plugin WordPress nếu bạn cần bất kỳ sự giúp đỡ nào.

Chúng tôi có thể tạo một hướng dẫn Trường tùy chỉnh nâng cao với hàng nghìn ví dụ. Nó rất linh hoạt.

Tuy nhiên, chúng tôi sẽ sử dụng ví dụ về việc chạy một trang web đánh giá phim.

Đối với mỗi bài đánh giá mới, chúng tôi muốn hiển thị dữ liệu sau:

  • Năm phát hành
  • Phòng thu
  • Xếp hạng phim

Hãy tiếp tục đọc để xem điều này hoạt động như thế nào.

Bước 1: Tạo một nhóm trường mới

Nhóm trường là một tập hợp các trường tùy chỉnh.

Tất cả các trường tôi dự định có trên trang web đánh giá phim của mình đều thuộc cùng một danh mục, vì vậy sẽ rất hợp lý khi đặt chúng vào cùng một nhóm trường.

Để tạo một nhóm trường mới, hãy đi tới Trường tùy chỉnh trong WordPress.

trường tùy chỉnh

Trên màn hình mới, nhấp vào Thêm mới nút.

thêm mới

Màn hình sau đây có thể trông đáng sợ, nhưng bạn thường chỉ cần thay đổi một vài yếu tố. Bạn cũng có thể kiểm tra chúng để xem chúng hoạt động như thế nào trên trang web của bạn.

thêm nhóm trường

Hiện tại, hãy đặt tên cho nhóm trường của bạn đểmething như Dữ liệu đánh giá phim.

Bước 2: Thêm trường vào nhóm của bạn

Bây giờ là lúc để thêm các trường tùy chỉnh riêng lẻ.

Nhấp vào màu xanh lam Thêm trường nút.

thêm trường - Hướng dẫn Advanced Custom Fields

Điều này mở ra một dạng dài khác có phần khó hiểu, nhưng dễ nắm bắt sau một hoặc hai lần sử dụng.

Bắt đầu bằng cách nhập vào nút 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.

trường đầu tiên

Các Tên trường sau đó được tự động điền. Nó được sử dụng để đặt kết quả trong các mẫu và mã hóa. Điều đó sẽ được sử dụng bởi nhà phát triển của bạn.

Chọn của bạn Loại trường cũng. Đối với trường này, chúng tôi đang chọn loại trường Văn bản, nhưng bạn có hàng tá tùy chọn từ hình ảnh đến hộp kiểm và đàn accordion.

Tất cả các loại trường đều có các tùy chọn khác nhau, nhưng dưới đây là một số mục bạn có thể điền vào cho loại trường văn bản:

  • Hướng dẫn thực địa – bạn có thể muốn nhắc nhở người viết của mình chỉ nhập bốn chữ số.
  • Bắt buộc – Bạn có thể làm cho lĩnh vực này trở thành một yêu cầu trước khi xuất bản.
  • Giá trị mặc định – Điều này rất hữu ích nếu bạn muốn một giá trị luôn hiển thị, ngay cả khi để trống.
  • Văn bản chỗ dành sẵn – Điều này hiển thị trong các trường đầu vào khi một nhà văn ở trong trình chỉnh sửa.
  • Giới hạn ký tự – Có thể bạn không muốn các nhà văn vượt qua một số lượng nhân vật nhất định.

Đó không phải là tất cả các lĩnh vực trên đó, nhưng không có lĩnh vực nào trong số này là bắt buộc. Do đó, tốt nhất bạn nên tự mình kiểm tra chúng. Ngoài ra, bạn có thể thấy các tùy chọn khác tùy thuộc vào Loại trường.

Bước 3: Thêm các trường khác vào nhóm

Sau khi lưu trường đầu tiên, đã đến lúc thêm trường quay và các trường xếp hạng phim của chúng tôi.

May mắn thay, đó là quá trình tương tự!

Chỉ cần quay lại Field Group, nhấp vào Thêm trường, sau đó đặt tên cho chúng là những thứ khác nhau.

tùy chọn trường

Lĩnh vực công ty sản xuất không có gì đặc biệt, nhưng chúng tôi có thể tận dụng các công cụ để xếp hạng phim.

nhãn trường

Này Loại trường là một con số.

Chúng tôi cũng có thể chỉ định trong Hướng dẫn thực địa để “Đánh giá chất lượng của bộ phim này từ một đến mười.

Sau đó, chúng tôi sẽ đánh dấu Giá trị tối thiểu là 1, Giá trị tối đa là 10 và Kích thước bước là 1.

giá trị

Kích thước Bước cho biết các mức tăng có sẵn.

Bước 4: Đặt vị trí trường

Bây giờ là lúc để định cấu hình vị trí và cách các trường hiển thị trên trang web.

Đi tới trang Vị trí Bảng.

vị trí - Hướng dẫn trường tùy chỉnh nâng cao

Điều này yêu cầu các quy tắc về vị trí các trường sẽ xuất hiện. Đối với ví dụ này, sẽ rất hợp lý khi hiển thị nhóm trường khi “Loại bài đăng bằng với bài đăng”, vì điều đó có nghĩa là mọi bài đăng.

Nếu bạn đang sử dụng các loại bài đăng tùy chỉnh, bạn cũng có thể liên kết nhóm trường tùy chỉnh của mình với một loại bài đăng tùy chỉnh.

Dưới Cài đặt, bạn có cơ hội thiết kế cách các trường hiển thị trên Trình chỉnh sửa WordPress của mình.

cài đặt - Hướng dẫn trường tùy chỉnh nâng cao

Về cơ bản, phần này cho phép bạn tùy chỉnh giao diện thiết kế theo nhu cầu của riêng bạn.

Chẳng hạn:

  • Đặt hàng Không. – Cho phép bạn sắp xếp danh sách các trường bạn có trong một nhóm.
  • Vị trí – Có các tùy chọn để hiển thị các trường ở trên hoặc bên dưới trình chỉnh sửa.
  • Phong cách – Xem xét việc đặt các trường trong một metabox.
  • Ẩn trên màn hình – Loại bỏ các bảng mà bạn không cần.
phụ trợ hoàn thành

Bước 5: Hiển thị thông tin trường tùy chỉnh trên giao diện người dùng của trang web của bạn

Bây giờ, khi bạn đã thêm một số dữ liệu trường tùy chỉnh trong trình chỉnh sửa WordPress, bạn cần một cách để hiển thị thông tin đó trên giao diện người dùng của trang web của mình.

Như đã thảo luận trước đó, bạn có thể phải thuê một nhà phát triển để có được kết quả của các trường tùy chỉnh của mình trên giao diện người dùng. Tuy nhiên, có một số giải pháp thân thiện với người mới bắt đầu để xem xét đầu tiên!

  • Sử dụng mã ngắn để hiển thị các trường ACF trong trình chỉnh sửa.
  • Tìm một plugin trình tạo trang với sự hỗ trợ để hiển thị các trường ACF.
  • Đặt một shortcode cho trường trong một nhóm khối có thể tái sử dụng.

Tùy chọn đầu tiên liên quan đến sử dụng mã ngắn ACF. Plugin không có trình tạo shortcode, vì vậy bạn sẽ phải sử dụng định dạng sau:

Điều này chỉ hoạt động cho các trường dựa trên văn bản và bạn phải thay thế field_name với tên trường của bạn.

Ví dụ: bạn có thể tìm thấy tên trường trong danh sách trường của mình.

Sau đó, chỉ mất một chút thời gian để thêm tên trường vào các mã ngắn đó trong trình chỉnh sửa.

Đảm bảo dữ liệu trường của bạn được điền cho bài đăng.

Nhấp vào Xuất bản để xem kết quả trên giao diện người dùng!

Bạn cũng có thể tìm thấy trình tạo trang cho phép bạn hiển thị các trường ACF trong trình chỉnh sửa. Chẳng hạn Yếu tố chuyên nghiệp (đánh giá của chúng tôi), Thần điện, Beaver Builder + Beaver Themervà một số tùy chọn khác cho phép điều này.

Một giải pháp tuyệt vời khác là tạo ra một khối trong trình chỉnh sửa, đặt shortcode vào đó, sau đó lưu nó dưới dạng khối có thể tái sử dụng để sử dụng trong tương lai.

Bước 6: Nếu vẫn thất bại, hãy gửi nó cho nhà phát triển của bạn để hiển thị trên trang web của bạn

giao diện người dùng của hướng dẫn Advanced Custom Fields

Nếu các phương pháp không có mã ở trên không làm điều đó cho bạn, tùy chọn tiếp theo của bạn là gửi nó cho một nhà phát triển WordPress, điều này sẽ không mất nhiều thời gian và sẽ rẻ.

Về cơ bản, tất cả những gì nhà phát triển đang làm là thêm một chút mã vào tệp mẫu của bạn hoặc có thể là một tệp bài đăng duy nhất.

Do đó, chúng tôi đề nghị tìm một nhà phát triển uy tín để giúp đỡ với điều này.

Hướng dẫn Về các trường tùy chỉnh nâng cao: Chúc bạn vui vẻ làm cho trình chỉnh sửa WordPress của bạn thân thiện hơn với người dùng!

Với Trường tùy chỉnh nâng cao, bạn có thể sử dụng WordPress theo những cách mới và thú vị. Nếu bạn muốn mở rộng hơn nữa trang web của mình, bạn có thể tìm hiểu cách tạo loại bài viết tùy chỉnh rồi thêm các trường tùy chỉnh vào các loại bài đăng mới đó.

Nếu bạn có bất kỳ câu hỏi nào về hướng dẫn Trường tùy chỉnh nâng cao của chúng tôi, hãy cho chúng tôi biết trong phần bình luận bên dưới!

Hướng dẫn miễn phí

5 mẹo cần thiết để tăng tốc độ
Trang web WordPress của bạn

Giảm thời gian tải của bạn thậm chí 50-80%
chỉ bằng cách làm theo các mẹo đơn giản.

* Bài đăng này chứa các liên kết liên kết, có nghĩa là nếu bạn nhấp vào một trong các liên kết sản phẩm và sau đó mua sản phẩm, chúng tôi sẽ nhận được hoa hồng. Tuy nhiên, đừng lo lắng, bạn vẫn sẽ trả số tiền tiêu chuẩn nên bạn không phải trả phí.

Bài viết liên quan

Trả lời

Email của bạn sẽ không được hiển thị công khai.