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 khác trên trang web của mình không? Hộp meta tùy chỉnh thường được sử dụng nhằm cung cấp một giao diện người dùng tốt hơn, giúp 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.
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 hơn với người dùng, giúp thêm các trường tùy chỉnh (dữ liệu meta) vào 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 viết 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à metadata (siêu dữ liệu) của nó. Metadata là thông tin liên quan đến nội dung đó như ngày và giờ, tên tác giả, tiêu đề,… 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 .
Tuy nhiên, việc 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. Chính vì vậy, bạn cần thêm các hộp meta tùy chỉnh.
WordPress cho phép các developer 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 Yoast SEO là một hộp meta tùy chỉnh:
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 ‘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 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 ‘Add New‘ để tiếp tục.
Bạn sẽ được đưa đến trang ‘Add New Field Group‘.
Tại đây bạn cần cung cấp tiêu đề cho nhóm trường 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. Chỉ cần nhấp vào nút ‘+ Add Field‘ để thêm trường đầu tiên của bạn.
Thao tác này sẽ hiển thị form cài đặt trường. Trước tiên, bạn cần cung cấp nhãn cho trường của mình. Nhãn này sẽ được hiển thị trong hộp meta của bạn.
Sau đó, bạn cần chọn loại trường. Plugin Advanced Custom Fields cho phép bạn chọn loại trường từ một loạt các tùy chọn có sẵn, bao gồm văn bản, nút radio, checbox, hình ảnh,…
Tiếp theo, bạn cần cung cấp hướng dẫn sử dụng để giúp người dùng biết phải thêm những gì vào các trường đó.
Bên dưới đó, 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 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 mình.
Tiếp theo, nhấp vào nút close field để 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 ‘+ Add Field’ để thêm 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 thời điểm và vị trí bạn muốn meta box của mình được hiển thị.
Advanced Custom Fields đ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 loại bài đăng, danh mục bài đăng, phân loại, trang gốc,..
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.
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.
Bên dưới, bạn sẽ cần chọn 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 hiển thị 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 bạn nên bỏ chọn chúng.
Khi bạn đã hoàn tất, hãy nhấp vào nút Publish để làm cho nhóm trường của bạn hoạt động.
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.
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 theme WordPress
Ở phần trên, 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 đăng của bạn. Bước tiếp theo là hiển thị dữ liệu được lưu trữ trong các trường đó trên theme WordPress.
Đầ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 ‘Edit Field Group’, bạn sẽ thấy các 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 mình.
Advanced Custom Fields 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 shortcode để hiển thị trường tùy chỉnh trong 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 code vào các file theme WordPress của mình. Nếu bạn chưa làm điều này trước đây, thì 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 code trong WordPress .
Bạn sẽ cần chỉnh sửa file theme 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,…
Bạn đừng quên phải thêm đoạn code của bạn bên trong vòng lập WordPress . Cách dễ nhất để đảm bảo rằng bạn đang nhập code bên trong vòng lặp là tìm một dòng trong đoạn code của bạn trông giống như sau:
<?php while ( have_posts() ) : the_post(); ?>
Bạn có thể dán code 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. ?>
Code 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 ý rằng bạn phải bọc đoạn code trong tiêu đề h2 với một lớp CSS. Điều này sẽ giúp chúng ta đị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 theme của mình.
Đây là một ví dụ khác:
|
1
2
3
4
5
|
<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. Bạn sẽ có thể thấy dữ liệu meta tùy chỉnh của mình được hiển thị.
Advanced Custom Fields là một plugin hữu ích với rất nhiều tùy chọn đắc lực. Bài viết này chỉ giới thiệu một vài tính năng cơ bản. Nếu bạn cần thêm trợ giúp, bạn có thể truy cập trang plugin để kiểm tra thêm những tùy chọn tuyệt vời khác.
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ý YouTube Channel của chúng tôi để xem thêm các video hướng dẫn. Bạn cũng có thể tìm thấy chúng tôi trên Twitter và Facebook.