Hướng dẫn cơ bản về Advanced Custom Fields và cách sử dụng

Bạn đang xem: Hướng dẫn cơ bản về Advanced Custom Fields và cách sử dụng Tại Compa Marketing

Các trường tùy chỉnh của WordPress là một phần quan trọng giúp WordPress biến thành một hệ thống quản lý nội dung linh hoạt, thay vì chỉ là một nền tảng blog.

Khi nói đến các trường WordPress tùy chỉnh, plugin Freemium Advanced Custom Fields là một trong những không gian tên sau được nhiều người biết đến nhất. Nó giúp bạn làm việc với các trường tùy chỉnh dễ dàng hơn trên mọi phương diện và đó cũng là chủ đề của bài đăng hôm nay của Tài.

Cụ thể, Tai sẽ giải thích lý do tại sao Advanced Repair School lại có giá trị như vậy và sau đó chỉ cho bạn từng bước cách bạn có thể áp dụng nó vào trang web WordPress của mình.

Đây là tất cả những gì của tôi mà bạn sẽ tìm thấy trong bài đăng này:

Có rất nhiều thứ để bao quát, vì vậy hãy đi sâu vào

Plugin Advanced Custom Field là gì?

Được phát triển bởi Elliot Condon, Trường tùy chỉnh nâng cao – thường được viết tắt là ACF – là một plugin WordPress cho phép bạn thêm và quản lý Trường chỉnh sửa WordPress vào một trang web. Nó có sẵn cả dưới dạng plugin miễn phí và plugin cao cấp, được gọi là ACF PRO, bắt đầu từ $ 25 cho các bản cập nhật và cho 1 trang web.

Ủng hộ

Trường tùy chỉnh WordPress là gì? Họ để bạn làm gì?

Các trường tùy chỉnh của WordPress cho phép bạn thêm, lưu trữ và hiển thị thông tin bổ sung về một phần nội dung trong WordPress. Ở cấp độ kỹ thuật hơn, các trường giúp bạn lưu trữ siêu dữ liệu.

Ngay cả khi bạn không quen thuộc với ngôn ngữ, các trường tùy chỉnh cung cấp rất nhiều chức năng trong các plugin và chủ đề yêu thích của bạn.

Ví dụ: WooCommerce, cách phổ biến nhất để xây dựng cửa hàng Thương mại điện tử, sử dụng các trường sửa chữa để lưu trữ thông tin bổ sung về sản phẩm như:

  • Giá bán
  • Cân nặng
  • Màu sắc

Hoặc, nếu bạn có plugin lịch sự kiện WordPress , plugin đó sẽ sử dụng các trường tùy chỉnh để lưu trữ thêm thông tin về một sự kiện, chẳng hạn như:

  • Vị trí
  • Thời gian bắt đầu / kết thúc
  • Giá bán

Bạn cũng có thể tạo các tùy chỉnh của riêng mình để lưu trữ thông tin phù hợp với nhu cầu riêng của bạn, đó là nội dung của toàn bộ bài đăng này.

Các trường hợp sửa lỗi trong WordPress tuyệt vời như thế nào? Tìm hiểu cách tận dụng lợi thế của chúng tôi với @wp_acf tuyệt vời trong hướng dẫn mới nhất của chúng tôi! ???

Khi nào bạn nên sử dụng trường tùy chỉnh?

Bây giờ, bạn có thể tự hỏi tại sao bạn thậm chí cần phải điều chỉnh các trường ngay từ đầu.

Ví dụ: nếu bạn muốn đăng một sự kiện trên trang web WordPress của mình, bạn không thể đặt tất cả thông tin đó ở dạng văn bản thuần túy trong các mod của WordPress?

Có, có, bạn có thể. Nhưng sử dụng các trường là một cách tốt hơn vì một số lý do:

  • Nhập liệu dễ dàng hơn – bởi vì nhập mọi thứ từ đầu, trường nhóm được tổ chức tốt giúp nhập liệu dễ dàng hơn nhiều. Ví dụ: thay vì nhập ngày, bạn chỉ có thể chọn một ngày từ ngày đã chọn.
  • Nhất quán – thông tin bạn nhập vào các trường tùy chỉnh sẽ luôn hiển thị theo cài đặt của bạn, có nghĩa là thông tin đó sẽ nhất quán trên toàn bộ trang web của bạn.
  • Dễ dàng cập nhật và bảo trì – nếu bạn muốn thay đổi điều gì đó về cách hiển thị thông tin đó trong tương lai, bạn chỉ có thể cập nhật một điều kiện vì mỗi bài đăng phải được chỉnh sửa.

WordPress bao gồm chức năng trường tùy chỉnh tích hợp

WordPress thực sự hợp tác bao gồm các chức năng để thêm các trường hợp sửa đổi vào nội dung của bạn. Trong sửa chữa TinyMCE cổ điển, bạn có thể bật tùy chọn này từ màn hình tùy chọn trong khu vực. Hoặc, trong khối sửa chữa mới, bạn có thể bật nó từ khu vực tùy chọn:

Cách truy cập các trường tùy chỉnh trong trình chỉnh sửa khối

Cách truy cập các trường tùy chỉnh trong trình chỉnh sửa khối

Sau đó, bạn có thể nhập dữ liệu trường tùy chỉnh của mình bằng cặp khóa / giá trị:

Chức năng trường tùy chỉnh WordPress tích hợp

Chức năng trường tùy chỉnh WordPress tích hợp

Chức năng trường tùy chỉnh này hoàn thành chức năng, nhưng nó không phải là cơ quan tốt nhất để thực hiện tất cả công việc, đó là lý do tại sao nhiều người chuyển sang plugin Trường tùy chỉnh nâng cao thay thế.

Trường tùy chỉnh nâng cao làm cho nó dễ dàng hơn nhiều

Nói một cách đơn giản, Trường tùy chỉnh nâng cao giúp làm việc dễ dàng hơn rất nhiều với các trường tùy chỉnh trong WordPress trong nhiều khía cạnh.

Nó đơn giản hóa giao diện để thêm và quản lý các trường hợp sửa chữa trong bảng điều khiển WordPress của bạn và nó cũng đơn giản hóa việc trình diễn quy trình hiển thị thông tin từ các trường hợp sửa chữa trong các lối đi của trang web của bạn. Bạn bè. Thực tế đó chỉ giúp giải thích tại sao nó hoạt động trên hơn 1 triệu trang web với xếp hạng 4,9 sao trong số 1.000 bài đánh giá.

Trong phần phụ trợ, nó sẽ cho phép bạn tạo các hộp meta thân thiện với người dùng bao gồm các trường loại được chọn trước. Vì vậy, thay vì cặp khóa-giá trị giao diện (như những gì bạn đã thấy ở trên), bạn sẽ có thể sử dụng công cụ chọn ngày, hộp kiểm và hơn thế nữa:

Trường tùy chỉnh nâng cao trong trình chỉnh sửa khối

Trường tùy chỉnh nâng cao trong trình chỉnh sửa khối

Tổng cộng, Trường chỉnh sửa nâng cấp hơn 30 danh mục khác nhau mà bạn có thể thêm vào bất kỳ khu vực nào trên trang tổng quan của mình, bao gồm bài đăng, người dùng, phân loại, phương tiện, nhận xét và thậm chí cả các tùy chọn của trang.

Bạn có thể xem thông tin chi tiết về từng loại lĩnh vực ở đây .

Trường tùy chỉnh nâng cao cũng giúp hiển thị thông tin đó dễ dàng hơn rất nhiều, với các chức năng được ghi chép tốt, mã ngắn, khối Gutenberg, v.v.

Hoặc, bạn có thể tìm thấy tích hợp với các công cụ khác, như một số trình tạo trang WordPress kéo và thả .

Trường tùy chỉnh nâng cao Miễn phí vs Pro: Bạn cần cái nào?

Các cải tiến tùy chỉnh của trường có cả phiên bản cao cấp miễn phí và giá cả phải chăng.

Đối với hầu hết các mục đích sử dụng cơ bản, phiên bản miễn phí là hoàn toàn ổn. Nó cho phép bạn truy cập vào hầu hết các trường, vì tất cả đều tiết kiệm tính năng và thân thiện với người dùng.

Nếu bạn chỉ muốn lưu trữ một số thông tin bổ sung về nội dung của mình, phiên bản miễn phí là tất cả những gì bạn cần.

Như đã nói, phiên bản Pro bổ sung một số tính năng khá tiện lợi giúp bạn sử dụng Trường nâng cao tùy chỉnh theo những cách thú vị hơn:

  • Các trường lặp lại – những trường này cho phép bạn lặp lại các trường / nhóm nhất định trên mỗi bài đăng. Ví dụ: nếu bạn thêm thông tin ổ bánh vào một sự kiện, trường lặp lại sẽ giúp bạn giải quyết tình huống có nhiều ổ bánh (bạn có thể chỉ cần lặp lại các trường ổ bánh nhiều lần nếu cần, cho phép bạn xử lý các trường hợp nhiều ổ) .
  • Block ACF hiển thị các trường của bạn dưới dạng khối Gutenberg, thay vì meta hộp. Điều này đặc biệt hữu ích nếu bạn đang xây dựng một trang web cho khách hàng và muốn cung cấp cho họ một cách dễ dàng để nhập và quản lý các trường dữ liệu trực tiếp.
  • Các trường nội dung linh hoạt – tạo bố cục từ các trường khác. Nó giống như một trình tạo trang nhẹ dựa trên các trường sửa thông tin.
  • Thư viện trường – tải nhiều hình ảnh lên một trường.
  • Ngoài ra còn có một số khác biệt, như các trang tùy chọn, các trường có thể trùng lặp, hệ thống trường được cải thiện và các chỉnh sửa nhỏ hơn.

Bạn có thể xem tất cả các tính năng ACF PRO tại đây .

ACF PRO bắt đầu ở mức 25 đô la để sử dụng trọn đời trên một trang web. Hoặc, bạn có thể trả 100 đô la để sử dụng trọn đời trên các trang web không giới hạn.

Khi nghi ngờ, hãy bắt đầu với phiên bản miễn phí cho đến khi bạn tìm ra chính xác chức năng bạn cần. Bạn luôn có thể nâng cấp sau nếu cần.

Hướng dẫn trường tùy chỉnh nâng cao: Cách thêm trường của bạn

Bây giờ chúng ta hãy đi sâu vào hướng dẫn chỉnh sửa và tài trợ lĩnh vực nâng cao sẽ chỉ cho bạn cách tạo và hiển thị ban đầu một trường chỉnh sửa.

Trong ví dụ này, giả sử bạn có một blog về việc chạy. Bạn thực sự yêu thích chạy bộ và bạn muốn chia sẻ thói quen hàng ngày của mình với độc giả. Cụ thể, đối với mỗi bài đăng trên blog mà bạn muốn chia sẻ một lần chạy:

  • Mục đích – giả sử bạn có hai loại hoạt động khác nhau: tốc độ Google và điều kiện trực tuyến.
  • Khoảng cách – bạn chạy bao lâu.
  • Thời gian bắt đầu – khi bạn bắt đầu chạy.
  • Thời gian kết thúc – khi bạn kết thúc cuộc chạy của mình.
  • Vị trí – khỏi đường chạy của bạn.
  • Đối với thông tin đó ở dạng thập phân, bạn sẽ muốn thêm các tùy chỉnh trường năm.

Điều quan trọng cần lưu ý là các nguyên tắc bạn sẽ học theo hướng dẫn sửa đổi của trường trung học áp dụng cho tất cả các trường hợp sử dụng. Tài khoản chỉ chọn một phiên bản cụ thể vì nó giúp có một phiên bản cụ thể để kết nối.

Tài khoản sẽ chia sẻ hướng dẫn này thành hai phần:

  • Cách thêm và quản lý các tùy chọn của riêng bạn trên các đăng ký.
  • Cách hiển thị các tùy chọn trường thông tin trên giao diện người dùng của trang web của bạn.

1. Tạo một nhóm lĩnh vực mới

Khi bạn đã cài đặt và kích hoạt phiên bản miễn phí của Trường tùy chỉnh nâng cao từ WordPress.org , Vui lòng chuyển đến tùy chọn trường> Thêm mới để tạo nhóm trường đầu tiên của bạn.

Như tên cho thấy, “nhóm trường” là một nhóm gồm một hoặc nhiều trường tùy chỉnh được hiển thị giống nhau trong bảng điều khiển WordPress của bạn.

Trong ví dụ này, bạn sẽ tạo một trường nhóm chứa các tùy chọn trường năm.

Đặt tên cho trường nhóm của bạn và sau đó chọn Vị trí của nó. Trong ví dụ này, Tai muốn hiển thị các điều chỉnh trường cho các bài đăng trên blog WordPress thông thường, vì vậy bạn có thể để nó làm Bài đăng mặc định.

Tuy nhiên, nếu bạn muốn hiển thị các điều chỉnh trường ở một nơi khác, chẳng hạn như bên cạnh loại bài đăng tùy chỉnh hoặc với phân loại, bạn muốn thay đổi điều này. Bạn cũng có thể thiết lập nhiều quy tắc để hiển thị các trường của mình ở nhiều vị trí:

Tạo một nhóm trường ACF mới

Tạo một nhóm trường ACF mới

2. Thêm trường tùy chỉnh

Tiếp theo, nhấp vào nút + Thêm trường để thêm trường tùy chỉnh đầu tiên của bạn:

Thêm một lĩnh vực mới

Thêm một lĩnh vực mới

Điều này sẽ mở ra rất nhiều lựa chọn, nhưng bạn lưu ý là phải điền đầy đủ thứ hai.

Hai tùy chọn quan trọng nhất là:

  • Trường Nhãn – đây là những gì sẽ xuất hiện trong bản sửa đổi. Nó cũng sẽ được sử dụng để tạo Trường tên, là tên bạn sẽ sử dụng trong mã. Bạn không cần phải thay đổi trường tên (mặc dù bạn có thể nếu cần).
  • Trường loại – đây là loại thông tin mà bạn muốn thu thập. Ví dụ: bạn muốn trường thông tin thập phân hoặc trường Email cho email địa chỉ thập phân.

Đối với trường đầu tiên này, bạn muốn loại Radio Node:

Cấu hình một trường

Cấu hình một trường

Tiếp tục xuống, bạn có thể nhập các tùy chọn lựa chọn nút radio trong hộp Lựa chọn :

Nhập tùy chọn hộp radio

Nhập tùy chọn hộp radio

Ngoài ra còn có một số lựa chọn khác mà bạn có thể thực hiện, chẳng hạn như liệu tài liệu có nên có một trường và các giá trị mặc định hay không. Vui lòng cấu hình điều này theo nhu cầu của bạn.

Vui lòng xem một ví dụ khác: tùy chọn trường để chạy số thập phân. Lần này, bạn muốn có trường loại Số:

Tạo trường số

Tạo trường số

Bạn cũng có thể làm cho mọi thứ thân thiện với người dùng hơn một chút bằng cách chọn Nối Đơn vị Khoảng cách. Và nếu muốn, bạn cũng có thể thêm xác thực với Giá trị nhỏ nhất và Giá trị tối đa. Ví dụ, bạn có thể sẽ không chạy 1000 dặm (và nếu bạn thực hiện OM OMG, bạn sẽ là người cuối cùng của Forump Gump)!

Thêm cài đặt trường

Thêm cài đặt trường

Chỉ cần lặp lại quy trình cho tất cả các trường tùy chỉnh khác mà bạn muốn thu thập. Khi hoàn thành, nó sẽ trông giống như thế này:

5 trường ACF khác nhau

5 trường ACF khác nhau

3. Cấu hình cài đặt và xuất bản

Để hoàn tất mọi thứ, hãy cuộn xuống hộp Cài đặt . Tại đây, bạn có thể kiểm soát cách các trường của bạn hiển thị trong trình chỉnh sửa WordPress .

Hầu hết thời gian, bạn có thể để chúng làm mặc định. Nhưng hãy thoải mái thay đổi mọi thứ nếu bạn muốn. Ví dụ: bạn có thể chọn hiển thị các trường của mình chỉnh sửa trên một bản chỉnh sửa WordPress thông thường:

Định cấu hình cài đặt nhóm trường ACF

Định cấu hình cài đặt nhóm trường ACF

Khi bạn đã lựa chọn, hãy xuất bản nhóm lĩnh vực của bạn để làm cho nó tồn tại.

4. Thêm một số thông tin trong Trình chỉnh sửa WordPress

Khi bạn đã xuất bản nhóm trường của mình, bạn sẽ thấy các trường của mình xuất hiện khi bạn đi để tạo một bài đăng mới.

Theo mặc định, chúng sẽ xuất hiện cùng nhau bên dưới trình chỉnh sửa trong cả trình chỉnh sửa TinyMCE cổ điển và trình chỉnh sửa khối mới:

Trường tùy chỉnh nâng cao trong trình chỉnh sửa khối

Trường tùy chỉnh nâng cao trong trình chỉnh sửa khối

Thông tin bạn nhập vào đây sẽ được lưu trữ trong cơ sở dữ liệu WordPress của trang web của bạn để dễ dàng truy xuất (bạn sẽ thấy điều đó trong phần tiếp theo của hướng dẫn Trường tùy chỉnh nâng cao của Tài).

Khám phá logic có điều kiện

Trước khi tiến về phía trước, chúng ta hãy đi đường vòng nhanh chóng.

Hãy xem, một trong những lý do tại sao Trường tùy chỉnh nâng cao rất phổ biến là do tất cả các nhà phát triển thú vị mà nó cho phép.

Và một sức mạnh tùy chọn ở đây là Logic có điều kiện, cho phép bạn hiển thị / ẩn các trường dựa trên cách một trường trước đó được trả lời.

Vui lòng xem một ví dụ nhanh về cách hoạt động của điều này

Giả sử bạn muốn viết blog về đồ ăn, chuyến du lịch của mình hoặc bất cứ điều gì khác ngoài thời gian chạy bộ. Khi bạn đang viết về một chủ đề không chạy, sẽ không có ý nghĩa gì khi hiển thị các chỉnh sửa của các trường để biết thông tin về hoạt động, phải không?

Điều gì sẽ xảy ra nếu thay vì tự động hiển thị tất cả các trường bạn vừa tạo, bạn có thể thêm một trường tùy chỉnh cho biết Bài đăng đã chạy?

Ví dụ logic có điều kiện

Ví dụ logic có điều kiện

Nếu bạn chọn hộp, thì các trường thông tin chạy sẽ tự động xuất hiện. Nếu bạn không chọn nó, chúng sẽ được ẩn đi:

Các trường khác hiển thị khi được chọn

Các trường khác hiển thị khi được chọn

Đó là những gì logic có điều kiện cho phép bạn làm!

Để thiết lập tính năng này, bạn sẽ chỉnh sửa nhóm trường của mình và thêm trường Đúng / Sai mới cho tên Đây có phải là chạy không?

Thêm trường Đúng / Sai

Thêm trường Đúng / Sai

Sau đó, bạn sẽ chỉnh sửa các trường hiện có và bật Logic có điều kiện để mỗi trường chỉ hiển thị khi điều này có phải là chạy không? lĩnh vực được kiểm tra:

Thêm logic điều kiện vào các lĩnh vực khác

Thêm logic điều kiện vào các lĩnh vực khác

Cách hiển thị các trường tùy chỉnh nâng cao trên Frontend

Được rồi, chúng ta đã đi được nửa chặng đường của Trường nâng cao tùy chỉnh. Bây giờ bạn có thể thêm thông tin vào các trường hợp của mình, liên kết nó với loại bài đăng có liên quan và lưu trữ nó trong cơ sở dữ liệu của bạn.

Tuy nhiên, vẫn còn một vấn đề tiềm ẩn: thông tin từ các trường hợp của bạn không được xuất hiện ở bất kỳ đâu trên giao diện người dùng!

Nghĩa là, ngay cả khi bạn đã thêm một số trường tùy chỉnh vào trình chỉnh sửa cho bài đăng trên blog của mình, bài đăng trên blog của bạn vẫn trông giống như một bài đăng blog bình thường ở giao diện người dùng:

Không có trường tùy chỉnh trên frontend

Hãy sửa chữa nó.

Có một số cách khác nhau để bạn có thể hiển thị dữ liệu đã chỉnh sửa trong giao diện người dùng của trang web của mình. Phương pháp chính xác bạn chọn sẽ phụ thuộc vào yêu cầu và kiến ​​thức trình độ của bạn. Dưới đây là ba cách khác nhau để đạt được điều đó:

Tệp mẫu trên chủ đề của bạn – điều này sẽ yêu cầu một chút kiến ​​thức kỹ thuật, nhưng đó là cách tiếp cận tốt nhất mọi lúc, đặc biệt nếu bạn cảm thấy thoải mái khi làm việc với tệp mẫu. chủ đề.
Với shortcode – điều này cực kỳ đơn giản và là một lựa chọn tốt nếu bạn chỉ muốn chèn các trường dữ liệu trong từng trường hợp. Tuy nhiên, nó sẽ yêu cầu nhiều công việc hơn vì bạn sẽ cần thêm shortcode vào mỗi bài đăng.
Với Elementor Pro – điều này thực sự tuyệt vời vì nó loại bỏ hoàn toàn yêu cầu làm việc với PHP, nhưng đây là một sản phẩm cao cấp và điều đó cũng có nghĩa là bạn sẽ cần sử dụng Elementor Pro để xây dựng các mẫu của mình.
Bạn có thể đi đến một phương pháp hoặc bạn có thể đọc qua tất cả chúng. Bạn chọn

Cách thêm trường tùy chỉnh nâng cao trong tệp mẫu chủ đề

Đầu tiên, việc đầu tiên hiển thị thông tin trường của bạn là thêm trực tiếp vào chức năng PHP của Trường chỉnh sửa nâng cao vào các mẫu tệp chủ đề của bạn.

Đây là một nâng cấp lớn vì nó yêu cầu bạn đào sâu vào các tệp mẫu của chủ đề, nhưng nó đảm bảo rằng bạn luôn tự động hiển thị các tùy chọn trường học ở cùng một nơi.

Đặc biệt, bạn sẽ chỉ cần chỉnh sửa mẫu cho các loại bài đăng được cập nhật.

Đối với một bài đăng trên blog thông thường, đây là single.php. Hoặc, một số chủ đề chia sẻ mọi thứ thành các mẫu phần. Ví dụ, đối với chủ đề TwentyNineteen, bạn thực sự cần chỉnh sửa nội dung của mẫu của dung-single.php.

Nếu bạn cảm thấy bị mất ở đây, bạn có thể muốn sử dụng phương pháp khác.

Khi bạn tìm thấy tệp mẫu cho một bài đăng của mình, bạn có thể sử dụng hàm the_field () trường tùy chỉnh nâng cao để hiển thị trường thông tin. Ví dụ,

<? php the_field (‘FIELD_NAME’); ?>

Tìm hiểu thêm ở đây về nó.

Ví dụ: để hiển thị trường mục đích của mục đích, bạn sẽ sử dụng

<?php the_field(‘purpose’); ?>

Bạn có thể tìm thấy tên trường khi bạn chỉnh sửa một nhóm trường:

Nơi tìm tên trường ACF

Nơi tìm tên trường ACF

Vì vậy, khi kết hợp một đánh dấu HTML nhỏ với PHP, bạn có thể nhận được một cái gì đó như thế này để hiển thị tất cả các trường:

<div class=”run-information”>

<ul>

<li><strong>Purpose:</strong> <?php the_field(‘purpose’); ?></li>

<li><strong>Distance:</strong> <?php the_field(‘distance’); ?></li>

<li><strong>Start Time:</strong> <?php the_field(‘start_time’); ?></li>

<li><strong>End Time:</strong> <?php the_field(‘finish_time’); ?></li>

<li><strong>Location:</strong> <?php the_field(‘location’); ?></li>

</ul>

</div>

Để thêm nội dung này phía trên nội dung bài đăng thông thường, bạn sẽ thêm nội dung này vào tệp mẫu chủ đề của mình phía trên the_content () :

Nơi để thêm mã trong tệp mẫu chủ đề

Nơi để thêm mã trong tệp mẫu chủ đề

Và bây giờ, sau khi làm mới bài đăng trên blog, bạn có thể thấy dữ liệu trường tùy chỉnh bên trên nội dung WordPress thông thường:

Bây giờ bạn có thể thấy các trường trên frontend

Bây giờ bạn có thể thấy các trường trên frontend

Để tìm hiểu thêm, hãy xem tài liệu đầy đủ của Trường tùy chỉnh nâng cao .

Cách hiển thị dữ liệu trường tùy chỉnh nâng cao với một mã ngắn

Để đơn giản hơn nhiều để hiển thị dữ liệu của các trường của bạn, bạn cũng có thể sử dụng shortcode. Tuy nhiên, điểm yếu ở đây là bạn sẽ cần thêm shortcode mỗi khi bạn muốn hiển thị tùy chọn trường. Không có cách nào dễ dàng để tự động hóa nhiệm vụ này.

Mã ngắn là đây:

[acf field=”FIELD_NAME”]

Ví dụ: nếu bạn đã nhập cái này trong trình chỉnh sửa WordPress:

Sử dụng mã ngắn để hiển thị dữ liệu ACF

Sử dụng mã ngắn để hiển thị dữ liệu ACF

Sau đó, frontend của trang web của bạn sẽ trông giống hệt như phương thức mẫu chủ đề trước đó:

Các mã ngắn trông giống hệt với tệp mẫu chủ đề

Các mã ngắn trông giống hệt với tệp mẫu chủ đề

Cách hiển thị các trường tùy chỉnh nâng cao với Elementor Pro

Với Elementor Pro, một tiện ích bổ sung trả phí, bạn cũng có thể tạo các tệp mẫu chủ đề, bao gồm tùy chọn chèn các trường dữ liệu từ Trường Nâng cao Tùy chỉnh vào thiết kế của mình.

Đây là một tùy chọn tuyệt vời nếu bạn muốn tính linh hoạt để tự động bao gồm các trường dữ liệu tùy chỉnh trong các mẫu của mình, nhưng không cảm thấy thoải mái khi thực hiện các chỉnh sửa mã trực tiếp cho các tệp của chủ đề của bạn. .

Để bắt đầu, hãy chuyển đến Mẫu> Chủ đề và tạo một mẫu Elementor mới cho bài đăng của bạn Đơn vị:

Tạo một mẫu Elementor mới

Tạo một mẫu Elementor mới

Bạn có thể thêm các yếu tố hữu ích thông thường cho Tiêu đề bài đăng và Nội dung bài đăng của mình. Sau đó, để hiển thị các tùy chỉnh trường dữ liệu, bạn sẽ thêm các tiện ích con khác với Trình chỉnh sửa thông thường. Chỉ khác duy nhất một ở đây, thay đổi vì chỉnh sửa mô hình văn bản, bạn sẽ chọn tùy chọn Hoạt ảnh:

Tùy chọn "Động" Elementor Pro

Tùy chọn Elementor Pro hung động

Sau này, bạn có thể chọn Trường ACF từ trình đơn thả xuống:

Chọn "Trường ACF"

Chọn vùng ACF Field

Từ đó, bạn có thể chọn trường cụ thể mà bạn đã thêm với Trường tùy chỉnh nâng cao:

Chọn trường cụ thể bạn muốn hiển thị

Chọn trường cụ thể bạn muốn hiển thị

Và bạn cũng có thể sử dụng tab accordion nâng cao để thêm hoặc thêm thông tin, cho phép bạn thêm nhãn và đơn vị:

Chuẩn bị hoặc chắp thêm thông tin

Chuẩn bị hoặc chắp thêm thông tin

Dễ thôi phải không? Bây giờ chỉ cần lặp lại cho các lĩnh vực tùy chỉnh khác!

Tóm lược

Sử dụng Trường nâng cao, bạn có thể làm phong phú thêm các trang và bài đăng trên blog của mình với nhiều dữ liệu và thông tin hơn bằng một giải pháp dễ sử dụng. Thêm: bạn có thể bắt đầu thêm thông tin thập phân vào bất kỳ nội dung nào trên trang web của mình và sau đó hiển thị thông tin trên giao diện khách hàng của bạn.

Để làm điều đó, bạn có 3 lựa chọn:

  • Tệp mẫu của chủ đề của bạn
  • Với một mã ngắn
  • Với Elementor Pro

Kiến thức bạn có được trong bài đăng này sẽ cho phép bạn mở khóa tiềm năng sâu sắc của WordPress để xây dựng các trang web tùy chỉnh 100% vượt xa gốc rễ viết blog của WordPress.

Câu hỏi duy nhất còn lại là đây:

Bạn sẽ tạo gì với Trường tùy chỉnh nâng cao? Chia sẻ nó với Tài ở phần comment nhé!

Từ khóa:

hướng dẫn sử dụng advanced custom field

advanced custom fields logo

customize là gì

field là gì

cuộc thị acf

advanced custom fields pro là gì

Xem thêm bài viết thuộc chuyên mục: Thủ Thuật WordPress

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *