Cách thêm hộp meta tùy chỉnh trong bài đăng và loại bài đăng WordPress

Bạn có muốn tạo các hộp meta tùy chỉnh cho các bài đăng, trang WordPress và các loại bài đăng tùy chỉnh của mình không? Hộp meta tùy chỉnh thường được sử dụng để cung cấp giao diện người dùng tốt hơn để thêm các trường tùy chỉnh (dữ liệu meta) vào nội dung của bạn. Trong bài viết này, chúng tôi sẽ giải thích hộp meta tùy chỉnh là gì và cách bạn có thể dễ dàng thêm hộp meta tùy chỉnh trong các bài đăng và loại bài đăng WordPress.

Other :

How to add custom meta boxes in WordPress posts

Hộp Meta Tùy chỉnh trong WordPress là gì?

Hộp meta tùy chỉnh là một giao diện thân thiện với người dùng hơn để thêm các trường tùy chỉnh (dữ liệu meta) trong các bài đăng, trang và các loại bài đăng tùy chỉnh khác của bạn.

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 tế 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.v. 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 các trường tùy chỉnh.

Custom fields

Tuy nhiên, thêm siêu dữ liệu bằng cách sử dụng hộp trường tùy chỉnh mặc định không trực quan cho lắm. Đây là nơi các hộp meta tùy chỉnh xuất hiện.

WordPress cho phép các nhà phát triển tạo và thêm các hộp meta tùy chỉnh của riêng họ trên màn hình chỉnh sửa bài đăng. Đó là cách hầu hết các plugin phổ biến thêm các tùy chọn khác nhau trên màn hình chỉnh sửa bài đăng của bạn.

Ví dụ: tiêu đề SEO và hộp mô tả meta bên trong plugin Tất cả trong một SEO là một hộp meta tùy chỉnh:

AIOSEO meta box

Đã nói rằng, hãy xem cách bạn có thể dễ dàng thêm các hộp meta tùy chỉnh trong các bài đăng và loại bài đăng WordPress.

Tạo các hộp Meta tùy chỉnh trong WordPress

Đầu tiên, điều bạn cần làm là cài đặt và kích hoạt plugin Advanced Custom Fields. Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của chúng tôi về cách cài đặt plugin WordPress.

Khi kích hoạt, plugin sẽ thêm một mục menu mới có nhãn ‘Trường tùy chỉnh’ 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 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.

Add new custom fields group

Bạn sẽ được đưa đến trang ‘Thêm Nhóm Trường Mới’.

Ở đây bạn cần cung cấp tiêu đề cho nhóm lĩnh vực của mình. Tiêu đề này sẽ được sử dụng làm tiêu đề cho hộp meta của bạn.

Sau đó, bạn có thể bắt đầu thêm các trường của mình. Chỉ cần nhấp vào nút ‘+ Thêm trường’ để thêm trường đầu tiên của bạn.

Add your fist field

Thao tác này sẽ hiển thị biểu mẫu cài đặt trường. Trước tiên, bạn cần cung cấp nhãn cho lĩnh vực của mình. Nhãn này sẽ được hiển thị trong hộp meta của bạn trước trường.

Creating a new field for your custom meta box

Sau đó, bạn cần chọn loại trường. Plugin Trường tùy chỉnh nâng cao cho phép bạn chọn từ một loạt các tùy chọn. Điều này bao gồm văn bản, vùng văn bản, nút radio, hộp kiểm, trình chỉnh sửa WYSIWYG đầy đủ, hình ảnh và hơn thế nữa.

Tiếp theo, bạn cần 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ì cần thêm vào trường.

Dưới đó, bạn sẽ tìm thấy các tùy chọn khác cho lĩnh vực 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 để phù hợp với nhu cầu của bạn.

Field settings

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 metabox của mình, hãy nhấp vào nút ‘+ Thêm trường’ để thêm trường khác.

Close field and add another

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 thời gian và vị trí bạn muốn hộp meta của mình được hiển thị.

Location rules

Trường tùy chỉnh nâng cao đi kèm với một số quy tắc được xác định trước để bạn lựa chọn. Ví dụ: bạn có thể chọn các loại bài đăng, danh mục bài đăng, phân loại, trang gốc và hơn thế nữa.

Tiếp theo, là cài đặt tùy chọn hộp meta.

Đầu tiên bạn cần chọn số thứ tự. Nếu bạn có nhiều nhóm trường được xác định cho một vị trí, thì 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, hãy để nó là 0.

Meta box options

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 đó, bạn sẽ cần chọn một kiểu 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ó liền mạch (không có bất kỳ hộp meta nào).

Nếu bạn không chắc chắn, hãy chọn tùy chọn Standard (WP Meta box).

Cuối cùng, bạn sẽ thấy danh sách các trường thường được hiển thị trên màn hình chỉnh sửa bài đăng. Nếu bạn muốn ẩn một 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ó tại đây. Nếu bạn không chắc chắn, thì tốt nhất hãy bỏ chọn chúng.

Khi bạn đã hoàn tất, hãy nhấp vào nút xuất bản để làm cho nhóm lĩnh vực của bạn hoạt động.

Publish your field group

Xin chúc mừng, bạn đã tạo thành công hộp meta tùy chỉnh cho bài đăng hoặc loại bài đăng WordPress của mình.

Tùy thuộc vào cài đặt của bạn, bây giờ bạn có thể truy cập bài đăng hoặc loại bài đăng của mình để xem hộp meta tùy chỉnh của bạn đang hoạt động.

Custom metabox preview

Bạn có thể sử dụng hộp meta tùy chỉnh này để thêm dữ liệu meta vào các bài đăng hoặc loại bài đăng của mình. 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 hộp meta tùy chỉnh của bạn trong chủ đề WordPress

Cho đến nay chúng tôi đã 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 đăng 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.

Đầu tiên, bạn cần chỉnh sửa nhóm trường tùy chỉnh mà bạn đã tạo trước đó. Trên trang ‘Chỉnh sửa Nhóm Trường’, bạn sẽ thấy các trường tùy chỉnh của mình và tên của chúng.

Field names

Bạn sẽ cần những tên trường này để hiển thị chúng trên trang web của mình.

Trường tùy chỉnh nâng cao cho phép bạn làm điều đó theo hai cách khác nhau.

Đầu tiên, bạn có thể sử dụng mã ngắn để hiển thị trường tùy chỉnh trong bài đăng của mình.

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 mình. Nếu bạn chưa làm điều này trước đây, hãy xem hướng dẫn dành cho người 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 chỉnh sửa tệp chủ đề nơi 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 đảm bảo 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 một dòng trong mã của bạn trông giống như sau:

<?php while ( have_posts() ) : the_post(); ?>

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:

<?php endwhile; // end of the loop. ?>

Mã trường tùy chỉnh của bạn sẽ trông giống như sau:

<h2 class="article-byline"><?php the_field('article_byline'); ?></h2>

Mã này sẽ hiển thị dữ liệu được nhập vào trường dòng của bài viết của hộp meta tùy chỉnh của chúng tôi.

Lưu ý cách chúng tôi bọc 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à tạo kiểu cho trường tùy chỉnh sau này bằng cách thêm CSS tùy chỉnh vào chủ đề của chúng tôi.

Đây là một ví dụ khác:

<blockquote class="article-pullquote">

<?php the_field('article_pullquote'); ?>

</blockquote> 

Đừng quên thay thế tên trường bằng tên trường của riêng bạn.

Bây giờ bạn có thể truy cập bài đăng mà bạn đã nhập dữ liệu vào các trường tùy chỉnh của mình. Bạn sẽ có thể thấy dữ liệu meta tùy chỉnh của mình được hiển thị.

Custom fields displayed on a website

Advanced Custom Fields là một plugin rất mạnh mẽ với rất nhiều tùy chọn. Hướng dẫn này chỉ làm xước bề mặt. Nếu bạn cần thêm trợ giúp, đừng quên xem tài liệu của plugin về cách mở rộng thêm.

Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách thêm các hộp meta tùy chỉnh trong các bài đăng và loại bài đăng WordPress. Bạn cũng có thể muốn xem hướng dẫn từng bước của chúng tôi về cách tăng tốc độ và hiệu suất WordPress cho người mới bắt đầu.

Nếu bạn thích bài viết này, vui lòng đăng ký Kênh YouTube của chúng tôi để xem các video hướng dẫn về WordPress. Bạn cũng có thể tìm thấy chúng tôi trên Twitter và Facebook.

Free Download Cách thêm hộp meta tùy chỉnh trong bài đăng và loại bài đăng WordPress :

Trong khi chờ đợi, vui lòng nhấn vao quảng cáo phía trên để tác giả có phí duy trì website , xin cám ơn ^^^

In the meantime, please click on the ad so that the author has a website maintenance fee, very very very thank you ^^^ !!!!

Download Instructions

Join our official telegram group and channel for latest updates.

Để lại một bình luận

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More

© 2021 All Rights Reserved | Shared by Tainguyenwordpress