Bạn có muốn tạo các hộp meta tùy chỉnh cho các bài đăng, trang và các loại bài đăng tùy chỉnh của WordPress của mình không? Các hộp meta tuỳ chỉnh thường được sử dụng để cung cấp giao diện người dùng tốt hơn cho việc thêm các trường tùy chỉnh (siêu dữ liệu) vào nội dung của bạn. Trong bài này, chúng tôi sẽ giải thích về một hộp meta tùy chỉnh và làm thế nào bạn có thể dễ dàng thêm các hộp meta tuỳ chỉnh trong WordPress posts và post types.
Một Meta Box tùy chỉnh trong WordPress là gì?
Hộp meta tùy chỉnh là giao diện thân thiện hơn với người dùng để thêm các trường tùy chỉnh (dữ liệu meta) trong các bài đăng, trang của bạn và các loại bài đăng tùy chỉnh khác.
WordPress đi kèm với giao diện dễ sử dụng giúp bạn tạo nội dung như bài đăng và trang hoặc các loại bài đăng tùy chỉnh.
Thông thường, mỗi loại nội dung bao gồm nội dung thực và siêu dữ liệu của nó. Siêu dữ liệu là thông tin liên quan đến nội dung đó như ngày và giờ, tên tác giả, tiêu đề và hơn thế nữa. Bạn cũng có thể thêm dữ liệu meta của riêng mình bằng cách sử dụng trường tùy chỉnh.
Tuy nhiên, thêm siêu dữ liệu sử dụng hộp mặc định các trường tùy chỉnh không phải là rất trực quan. Đây là nơi mà hộp meta tùy chỉnh đi vào.
WordPress cho phép các nhà phát triển tạo và thêm các hộp meta tuỳ chỉnh của họ trên các màn hình chỉnh sửa bài đăng. Đó là cách bổ sung phổ biến nhất bổ sung các tùy chọn khác nhau trên màn hình chỉnh sửa bài của bạn.
Ví dụ: tiêu đề SEO và hộp mô tả meta bên trong plugin Yoast SEO là một hộp meta tùy chỉnh:
Có nói rằng, chúng ta hãy xem làm thế nào bạn có thể dễ dàng thêm các hộp meta tuỳ chỉnh trong WordPress posts và post types.
Tạo Custom Meta Boxes trong WordPress
Đầu tiên
Khi kích hoạt, plugin bổ sung thêm một mục menu mới có nhãn ‘Custom Fields’ vào thanh quản trị WordPress của bạn. Nhấp vào nó sẽ đưa bạn đến trang các trường tùy chỉnh.
Trang này sẽ trống rỗng vì bạn chưa tạo bất kỳ trường tùy chỉnh nào. Hãy tiếp tục và nhấp vào nút ‘Thêm Mới’ để tiếp tục.
Bạn sẽ được đưa tới trang ‘Thêm trang trường mới’.
Ở đây bạn cần cung cấp một tiêu đề cho nhóm lĩnh vực của bạn. Tiêu đề này sẽ được sử dụng làm tiêu đề của hộp meta của bạn.
Sau đó bạn có thể bắt đầu thêm các lĩnh vực của bạn. Chỉ cần nhấp vào nút ‘+ Thêm Trường’ để thêm trường đầu tiên của bạn.
Thao tác này sẽ hiển thị biểu mẫu cài đặt trường. Đầu tiên bạn cần phải cung cấp một nhãn cho lĩnh vực của bạn. Nhãn này sẽ được hiển thị trong hộp meta của bạn trước trường.
Sau đó bạn cần phải chọn kiểu trường. Plugin trường tùy chỉnh nâng cao cho phép bạn chọn từ nhiều lựa chọn. Bao gồm văn bản, văn bản, nút radio, hộp kiểm tra, trình chỉnh sửa WYSIWYG đầy đủ, hình ảnh và hơn thế nữa.
Tiếp theo, bạn cần phải cung cấp hướng dẫn thực địa. Những hướng dẫn này sẽ cho người dùng biết những gì để thêm vào trong lĩnh vực này.
Dưới đây, bạn sẽ tìm thấy các tùy chọn khác cho trường của mình. Bạn cần phải xem xét cẩn thận các tùy chọn này và điều chỉnh chúng cho phù hợp với nhu cầu của bạn.
Tiếp theo, nhấp vào nút đóng trường để thu gọn trường.
Nếu bạn cần thêm nhiều trường vào chất trao đổi chất của mình, sau đó nhấp vào nút ‘+ Thêm Trường’ để thêm một trường khác.
Khi bạn đã hoàn tất việc thêm các trường, bạn có thể cuộn xuống phần vị trí. Đây là nơi bạn có thể xác định khi nào và ở đâu bạn muốn hộp meta của bạn được hiển thị.
Trường Tùy chỉnh Nâng cao đi kèm với một số ít các quy tắc được xác định trước để bạn chọn. Ví dụ: bạn có thể chọn các loại bài đăng, đăng danh mục, phân loại, trang mẹ và hơn thế nữa.
Tiếp theo, có các cài đặt tùy chọn hộp meta.
Đầu tiên bạn cần chọn số đơn đặt hàng. Nếu bạn có nhiều nhóm trường được xác định cho một vị trí, sau đó bạn có thể chọn số thứ tự để chúng được hiển thị. Nếu bạn không chắc chắn, sau đó để nó như là 0.
Tiếp theo, bạn cần chọn vị trí hộp meta trên trang. Bạn có thể chọn để hiển thị nó sau nội dung, trước nội dung hoặc trong cột bên phải.
Dưới đây, bạn sẽ cần chọn một phong cách cho hộp meta của mình. Bạn có thể chọn nó giống như tất cả các hộp meta WordPress khác, hoặc bạn có thể chọn nó để được liền mạch (không có bất kỳ hộp meta).
Nếu bạn không chắc chắn, sau đó chọn Standard (WP Meta box).
Cuối cùng, bạn sẽ thấy một danh sách các trường thông thường được hiển thị trên một màn hình chỉnh sửa bài đăng. Nếu bạn muốn ẩn trường cụ thể trên màn hình chỉnh sửa bài đăng của mình, thì bạn có thể kiểm tra nó ở đây. Nếu bạn không chắc chắn, thì tốt nhất bạn nên bỏ chọn chúng.
Khi bạn đã hoàn tất, nhấp vào nút xuất bản để làm cho nhóm trường của bạn trực tiếp.
Xin chúc mừng, bạn đã tạo thành công hộp meta tùy chỉnh cho bài đăng WordPress hoặc loại bài đăng của bạn.
Tùy thuộc vào cài đặt của bạn, bây giờ bạn có thể truy cập vào bài đăng hoặc loại bài đăng của mình để xem hộp meta tùy chỉnh đang hoạt động.
Bạn có thể sử dụng hộp meta tùy chỉnh này để thêm dữ liệu meta vào bài viết hoặc các loại bài đăng của bạn. Dữ liệu này sẽ được lưu trữ trong cơ sở dữ liệu WordPress của bạn khi bạn lưu hoặc xuất bản bài đăng.
Hiển thị dữ liệu Meta Box tùy chỉnh trong WordPress Theme
Cho đến nay chúng ta đã tạo thành công một hộp meta tùy chỉnh và hiển thị nó trên màn hình chỉnh sửa bài của chúng tôi. Bước tiếp theo là hiển thị dữ liệu được lưu trữ trong các trường trên chủ đề WordPress của bạn.
Trước tiên, bạn cần chỉnh sửa nhóm trường tùy chỉnh bạn đã tạo trước đó. Trên trang ‘Chỉnh sửa Nhóm Trường’, bạn sẽ thấy trường tùy chỉnh của mình và tên của chúng.
Bạn sẽ cần những tên trường này để hiển thị chúng trên trang web của bạn.
Trường Tùy chỉnh Nâng cao cho phép bạn làm điều đó bằng hai cách khác nhau.
Trước hết, bạn có thể sử dụng mã ngắn để hiển thị trường tùy chỉnh vào bài đăng của mình.
[acf field = "article_byline"]
Bạn cũng có thể hiển thị chúng bằng cách thêm mã vào các tệp chủ đề WordPress của bạn. Nếu bạn chưa làm điều này trước đây, hãy xem hướng dẫn mới bắt đầu của chúng tôi về cách sao chép và dán mã trong WordPress.
Bạn sẽ cần phải chỉnh sửa tệp chủ đề mà bạn muốn hiển thị dữ liệu từ các trường này. Ví dụ: single.php, content.php, page.php, v.v.
Bạn sẽ cần phải chắc chắn rằng bạn thêm mã bên trong vòng lặp WordPress. Cách dễ nhất để đảm bảo rằng bạn đang nhập mã bên trong vòng lặp là tìm kiếm một dòng trong mã của bạn giống như sau:
Bạn có thể dán mã của mình sau dòng này và trước dòng kết thúc vòng lặp:
Mã trường tùy chỉnh của bạn sẽ giống như sau:
Mã này sẽ hiển thị dữ liệu được nhập vào trường nội tuyến bài viết của hộp meta tuỳ chỉnh của chúng tôi.
Chú ý cách chúng ta quấn mã trong tiêu đề h2 với một lớp CSS. Điều này sẽ giúp chúng tôi định dạng và sắp xếp trường tùy chỉnh sau bằng cách thêm CSS tuỳ chỉnh vào chủ đề của chúng tôi.
Đây là một ví dụ khác:
Đừng quên thay tên trường bằng các tên trường của riêng bạn.
Bây giờ, bạn có thể truy cập vào bài viết nơi bạn đã nhập dữ liệu vào các trường tùy chỉnh của bạn. Bạn sẽ có thể thấy dữ liệu meta tùy chỉnh của mình được hiển thị.
Trường tùy chỉnh nâng cao là một plugin rất mạnh với nhiều tùy chọn. Hướng dẫn này chỉ làm trầy xước bề mặt. Nếu bạn cần trợ giúp thêm, đừng quên kiểm tra tài liệu của plugin về cách mở rộng nó thêm.