Học Advance custom fields bài 1 – Cách làm từng bước thành công 100%

Học Advance custom fields bài 1 – Cách làm từng bước thành công 100%

Cái khó nhất khiến mọi người không hiểu cách thức hoạt động của Advanced custom fields là do nó cũng chẳng có ví dụ cụ thể gì cả.

Tài liệu chính thức của Advanced custom fields nằm ở link này. Các bạn cần tổng hợp kiến thức thì xem phía dưới.

https://www.advancedcustomfields.com/resources/

Thật ra các bạn có thể hình dung như này, các mục tùy biến giao diện ở các web khác. Họ lôi ra các thông số, icon hoặc nội dung bảng biểu rất trực quan mà mình lại không biết từ đâu ra. Rất có thể nó được làm bằng advanced custom fields đấy.

Trong bài viết hôm nay, mình có tổng hợp lại kiến thức giúp anh em có cái nhìn tổng quan về advanced custom fields. Phải làm thành công 1 cái. Biết cách nó vận hành được, thì mình mới có thể phát triển thêm kĩ năng.

Các trường tùy chỉnh WordPress là một phần quan trọng trong việc biến WordPress 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 viết blog.

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

Cụ thể, chúng tôi sẽ giải thích lý do tại sao Trường tùy chỉnh nâng cao rất có giá trị và sau đó chỉ cho bạn từng bước cách bạn có thể áp dụng nó cho trang web WordPress của mình.

Có rất nhiều thứ để trang trải, vì vậy hãy lặn xuống

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

Các trường tùy chỉnh 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 tùy chỉnh giúp bạn lưu trữ siêu dữ liệu.

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

Ví dụ: Woo Commerce , 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 tùy chỉnh để lưu trữ thông tin bổ sung về một 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 trường tùy chỉnh của riêng mình để lưu trữ thông tin phù hợp với nhu cầu duy nhất của bạn, đó là những gì toàn bộ bài đăng này nói về.

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 các trường tùy chỉnh ở nơi đầu tiên.

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ưới dạng văn bản thông thường trong trình chỉnh sửa WordPress?

Vâng, vâng, bạn có thể. Nhưng sử dụng các trường tùy chỉnh là một cách tiếp cận tốt hơn vì một vài lý do:

  • Nhập liệu dễ dàng hơn – thay vì nhập mọi thứ từ đầu, một nhóm trường tùy chỉnh được bố trí tốt sẽ giúp việc nhập dữ liệu dễ dàng hơn nhiều. Ví dụ: thay vì nhập một ngày, bạn chỉ có thể chọn ngày từ bộ chọn ngày.
  • Tính nhất quán – thông tin bạn nhập trong các trường tùy chỉnh sẽ luôn hiển thị theo thiết lập của bạn, điều đó 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 thông tin đó hiển thị trong tương lai, bạn chỉ có thể cập nhật một điều thay vì phải chỉnh sửa từng bài đăng.

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

WordPress thực sự bao gồm chức năng tích hợp để thêm các trường tùy chỉnh vào nội dung của bạn. Trong trình chỉnh sửa TinyMCE cổ điển , bạn có thể bật tùy chọn này từ khu vực Tùy chọn màn hình . Hoặc, trong trình chỉnh sửa khối 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 riêng này hoàn toàn có chức năng, nhưng đó không phải là cách thân thiện nhất để thực hiện mọi việc, đó là lý do tại sao nhiều người chuyển sang plugin Advanced Custom Field 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 tùy chỉnh trong bảng điều khiển WordPress của bạn và nó cũng đơn giản hóa quy trình hiển thị thông tin từ các trường tùy chỉnh trên lối vào trang web của bạn. Thực tế đó chỉ giúp giải thích lý do 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 trên hơn 1.000 đá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 loại trường được chọn trước. Vì vậy, thay vì giao diện cặp khóa-giá trị chung (như những gì bạn đã thấy ở trên), bạn sẽ có thể sử dụng các 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 tùy chỉnh nâng cao cung cấp hơn 30 loại trường khác nhau mà bạn có thể thêm vào bất kỳ khu vực nào trong bảng điều khiển 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 trang tùy chọn tùy chỉnh.

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 trường tùy chỉnh nâng cao có cả phiên bản cao cấp miễn phí cũng như giá cả phải chăng.

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

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 có thêm một số tính năng khá tiện lợi giúp bạn sử dụng Trường tùy chỉnh nâng cao theo những cách thú vị hơn:

  • Các trường lặp lại – các trường này cho phép bạn lặp lại các trường / nhóm trường nhất định trên cơ sở từng bài. Ví dụ: nếu bạn thêm thông tin về loa vào một sự kiện, trường lặp sẽ giúp bạn xử lý tình huống có nhiều hơn một loa ( bạn có thể chỉ cần lặp lại lặp lại các trường cho loa nhiều lần nếu cần , cho phép bạn xử lý các trường hợp cạnh có nhiều loa ).
  • Khối ACF – hiển thị các trường của bạn dưới dạng khối Gutenberg, thay vì hộp meta. Điều này đặc biệt thuận tiện 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à trực quan hóa dữ liệu trường tùy chỉnh.
  • 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 thông tin trường tùy chỉnh.
  • Trường thư viện – 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 khác, như các trang tùy chọn, khả năng sao chép các trường, cải tiến cho các trường quan hệ và các điều chỉnh nhỏ hơn khác.

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 Trường tùy chỉnh nâng cao thực tế và tôi sẽ chỉ cho bạn cách tạo và hiển thị bộ trường tùy chỉnh đầu tiên của bạn.

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

  • Mục đích – giả sử bạn có hai loại hoạt động khác nhau: tốc độ làm việc của Google và điều hòa trực tuyến.
  • Khoảng cách – thời gian chạy của bạn là bao lâu.
  • Thời gian bắt đầu – khi bạn bắt đầu chạy.
  • Kết thúc thời gian – khi bạn hoàn thành việc chạy của bạn.
  • Địa điểm – nơi diễn ra cuộc chạy của bạn.

Để thu thập thông tin đó, bạn sẽ muốn thêm năm trường tùy chỉnh.

Điều quan trọng cần lưu ý là các nguyên tắc bạn sẽ học trong hướng dẫn Trường tùy chỉnh nâng cao này áp dụng cho mọi trường hợp sử dụng. Chúng tôi chỉ chọn một ví dụ cụ thể vì nó giúp có một ví dụ hữu hình để kết nối.

Chúng tôi sẽ chia hướng dẫn này thành hai phần:

  1. Cách thêm và quản lý các trường tùy chỉnh của bạn trên phụ trợ.
  2. Cách hiển thị thông tin trường tùy chỉnh trên frontend 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 , hãy đi tới Trường tùy chỉnh> Thêm mới để tạo Nhóm trường đầu tiên của bạn .

Như tên cho thấy, một nhóm lĩnh vực nhóm trực tuyến là một nhóm gồm một hoặc nhiều trường tùy chỉnh được hiển thị cù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 nhóm trường có chứa năm trường tùy chỉnh.

Đặt tên cho nhóm trường của bạn và sau đó chọn Vị trí của nó . Trong ví dụ này, chúng tôi muốn hiển thị các trường tùy chỉnh này cho các bài đăng 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 trường tùy chỉnh của mình ở nơi khác, 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 tùy chọn, nhưng bạn không nhất thiết phải điền vào mọi thứ.

Hai lựa chọn quan trọng nhất là:

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

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

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, như liệu có cần một trường hay không và giá trị mặc định. Hãy cấu hình những thứ này theo nhu cầu của bạn.

Hãy xem xét một ví dụ khác: trường tùy chỉnh để thu thập khoảng cách chạy. Lần này, bạn muốn có loại trường 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 hơn với người dùng một chút bằng cách chọn Nối thêm đơn vị khoảng cách. Và nếu bạn muốn, bạn cũng có thể thêm xác thực với Giá trị tối thiểu và Giá trị tối đa . Ví dụ: có thể bạn sẽ không chạy 1000 dặm (và nếu bạn thực hiện OMG, bạn là Forump Gump cuối cùng)!

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ể để những thứ này 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 tùy chỉnh của mình phía trên trình 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 tại đâ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 chúng tôi).

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

Trước khi chúng ta tiến lên phía trước, hãy nhanh chóng đi đường vò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à vì tất cả các triển khai thú vị mà nó cho phép.

Và một tùy chọn mạnh mẽ ở đâ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.

Hãy xem một ví dụ nhanh về cách thức hoạt động này

Giả sử bạn muốn viết blog về thực phẩm , chuyến đi của bạn hoặc bất cứ điều gì khác ngoài chạy bộ. Khi bạn viết về một chủ đề không chạy, sẽ không có ý nghĩa gì khi hiển thị các trường tùy chỉnh để 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 tùy chỉnh bạn vừa tạo, bạn có thể thêm một trường tùy chỉnh có nội dung là Bài đăng này có chạy không?

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

Ok, chúng ta đang đi được nửa chặng hành trình Trường tùy chỉnh nâng cao. Bây giờ bạn có thể thêm thông tin vào các trường tùy chỉnh 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 tùy chỉnh của bạn chưa xuất hiện ở bất kỳ đâu trên frontend!

Đó là, mặc dù 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 trên frontend:

Mệt mỏi vì các vấn đề WordPress và một máy chủ chậm? Chúng tôi cung cấp hỗ trợ đẳng cấp thế giới từ các chuyên gia WordPress có sẵn 24/7 và các máy chủ nhanh. Kiểm tra kế hoạch của chúng tôi

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

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

Hãy sửa nó đi.

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

  1. Các tệp mẫu của chủ đề của bạn – điều này đòi hỏi 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 là nếu bạn cảm thấy thoải mái khi làm việc trong các tệp mẫu của chủ đề.
  2. Với một shortcode – đây là siêu đơn giản và là một lựa chọn tốt nếu bạn chỉ muốn chèn dữ liệu trường tùy chỉnh trên cơ sở từng trường hợp. Tuy nhiên, nó đòi hỏi nhiều công việc thủ công hơn vì bạn sẽ cần thêm mã ngắn vào mỗi bài đăng.
  3. Với Elementor Pro – điều này thật tuyệt vời vì nó loại bỏ hoàn toàn nhu 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 cho việc tạo khuôn mẫu của mình.

Bạn có thể nhấp vào bên trên để chuyển thẳng đến một phương thức cụ thể hoặc bạn có thể đọc qua tất cả chúng. Tùy bạn

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

Cách đầu tiên để hiển thị thông tin trường tùy chỉnh của bạn là thêm trực tiếp các hàm PHP của Trường tùy chỉnh nâng cao vào các tệp mẫu của chủ đề con bạn .

Đây là một chút nâng cao 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 các trường tùy chỉnh của bạn sẽ tự động hiển thị ở cùng một vị trí mỗi lần.

Cụ thể, bạn sẽ cần chỉnh sửa mẫu duy nhất cho loại bài đăng được đề cập.

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

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

Khi bạn đã tìm thấy tệp mẫu chủ đề cho một bài đăng của mình, bạn có thể sử dụng chức năng the_field () của Trường tùy chỉnh nâng cao để hiển thị thông tin của trường. 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 tùy chỉnh của bạn, bạn cũng có thể sử dụng mã ngắn. Tuy nhiên, nhược điểm ở đây là bạn sẽ cần thêm mã ngắn mỗi lần bạn muốn hiển thị trường tùy chỉnh. Không có cách nào dễ dàng để tự động hóa nhiệm vụ này.

Mã ngắn là đây:

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

Elementor là một trong những người xây dựng trang WordPress phổ biến nhất . Nó cho phép bạn xây dựng các thiết kế của mình bằng cách chỉnh sửa trực quan, kéo và thả.

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

Đâ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 dữ liệu trường tùy chỉnh trong các mẫu của bạn, 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 mẫu của chủ đề.

Để bắt đầu, bạn hãy truy cập Mẫu> Trình tạo chủ đề và tạo mẫu Elementor mới cho bài đăng của bạn Đơn:

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 tiện ích Elementor 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ị dữ liệu trường tùy chỉnh, bạn sẽ thêm các tiện ích Trình soạn thảo văn bản thông thường . Sự khác biệt duy nhất ở đây, thay vì chỉnh sửa văn bản, bạn sẽ chọn 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:

Lựa chọn

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 tùy chỉnh nâng cao, bạn có thể làm phong phú 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 với giải pháp dễ sử dụng. Thêm: bạn có thể bắt đầu thu thập thông tin bổ sung cho 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 lối vào cho khách truy cập của bạn.

Để làm điều đó, bạn có 3 tùy 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.

5 1 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
Hotline: 0974.0707.83(Zalo/Viber)
%d bloggers like this: