Chào mừng các bạn đến với series WordPress thiết kế theme. Ở tập 10 của series, mình sẽ hướng dẫn các bạn về cách Custom Field trên WordPress.
Vậy Custom Field là gì?
Custom Field, còn được gọi là post meta trong WP, cho phép chúng ta có thể thêm các trường trong bài viết. Nhờ đó mà chúng ta có tùy chỉnh bài viết của mình, một cách dễ dàng hơn.
Làm thế nào để sử dụng Custom Field?
Tại series này mình sẽ hướng dẫn các bạn hai cách sử dụng Custom Field trên WordPress.
Cách 1: Các bạn còn nhớ ở bài trước mình có hướng dẫn các bạn tạo Custom Post Type. Tại đó mình có một đoạn code support như sau:
'supports' => array(
'title',
'thumbnail',
'custom-fields',
'editor',
),Ở đoạn code trên mình có dòng custom fields nhằm mục đích hiển thị phần custom trong bài post.
Như hình trên, sau khi ta gọi custom field ở trong code. Thì WP cung cấp cho chúng ta 2 trường, đó là Name và Value. Tại đây các bạn có thể điền name, value theo ý các bạn. Tuy nhiên, cách này có một vấn đề là các bạn sẽ gặp khó khăn trong việc xử lí code, nó rất rườm rà. Bên cạnh đó, khi chúng ta thiết kế website trên WordPress ta phải làm sao cho người dùng có thể dễ dàng sử dụng nhất và mình cũng có thể dễ dàng xử lí thông tin. Vì vậy mình sẽ đi sang cách 2 là sử dụng plugin Advance Custom Field.
Cách 2: ở cách 2 mình chỉ việc cài thêm Plugin vào. Các bạn có thể tìm và tải chúng trên mục Plugin của WordPress. Hoặc các bạn có thể tải tại đây và Import file vào Add Plugin.
Sau khi các bạn tải về xong. Các bạn thiết lập như trong Phần 4 (WordPress: Thiết Kế Theme (P4.1: Tạo Header)) mình đã hướng dẫn nhé.
Giao diện Advance Custom Fields
Kế đến, bạn vào phần Custom Fields >> Chọn Add New. Như ở phần 4, các bạn cần phải đặt tên label cho Field, sau khi đặt xong thì các bạn tiếp tục chọn Add Fields.
Location Custom Fields
Mình sẽ giải thích một tí về công dụng ở Location. Như các bạn thấy, tại mục “Show This Field…” của ACF (Viết tắt là Advance Custom Fields) có chia thành 4 mục lớn: Post, Page, Users, Forms. Bây giờ mình sẽ giải thích một số điều trong Location. Mình sẽ không nói hết. Vì nó rất dài và nhiều, do đó mình sẽ chỉ nói đến những trường hợp thường sử dụng nhất cho các bạn.
Post bao gồm: Type, Template, Status, Format, Category, Taxonomy, Post. Hầu hết các lựa chọn này đều liên quan đến Post khi bạn thiết lập, tạo post trên WordPress. Bây giờ mình sẽ làm một ví dụ cho các bạn xem nhé.
Display Custom Fields trên website
Đầu tiên mình sẽ thử làm như sau:
Giờ mình sẽ vào Post và kiểm tra.
Như các bạn thấy, tại bài Post của mình đã xuất hiện mục Date Time mà mình đã tạo trước đó. Giờ mình sẽ thử đổi sang Page và kiểm tra thử kết quả nhé
Như vậy các bạn có thể thấy chúng ta dễ dàng có thể thay đổi qua lại giữa các option trong Custom Fields. Vậy câu hỏi mình đặt ra là “Làm thế nào để có thể hiển thị chúng trên giao diện? “.
Các bạn còn nhớ ở Phần 4, mình có đoạn code như sau để hiện Logo website chứ? Cụ thể nó như sau:
echo get_field('logo_image','option')Đoạn code trên cho phép mình lấy hình ảnh logo website mà mình đã thiết lập trước đó tại mục Themes Option. Tuy nhiên vì mình cần lấy ở Post / Page nên sẽ khác đi chút, bạn chỉ cần bỏ phần option đi là được.
echo get_field('test_fields');
test_fields: là name fields mà bạn đã tạo trước đó nhé.
Bây giờ tiếp tục, mình đặt ra trường hợp người dùng muốn như sau “Tôi muốn nếu như bài viết tôi chọn có category là ABCXYZ, thì sẽ xuất hiện field ABCXYZ” thì ta làm như thế nào?
Rất đơn giản, bạn chỉ việc thêm điều kiện để hiển thị Fields thôi. Ví dụ:
Các bạn thấy rằng, ở đây mình chọn Post Type là Post và chèn thêm điều kiện là Category của Post phải là development thì mới xuất hiện Fields. Các bạn check và kiểm tra kết quả nhé.
Và đây là kết quả ở mỗi bài post của mình có category là Development.
Vậy nếu như ta muốn tùy chỉnh bài post để hiển thị. Thì phải làm sao?
Đầu tiên, việc bạn cần làm là chọn Option Page để setup.
Sau đó bạn cần phải thiết lập Fields như hình bên dưới, chọn Field Type là Taxonomy và chọn Category.
Tại mục Appearance bạn tùy chọn theo cách select hay Radio Button thì tùy bạn. Với mình thì mình chọn Select.
Và giờ mình sẽ bắt đầu display nó ra bằng cách sửa lại đoạn query của mình.
$CatFromOption = get_field('choice_type_category_post','option');
$args = array(
'cat' => $CatFromOption,
'post_type' => 'post',
'orderby' => 'DESC',
;
$the_query = new WP_Query($args);Có lẽ các bạn sẽ thắc mắc là tại sao ở đây mình lại dùng ‘cat‘ mà không phải ‘category_name‘. Bởi vì đối với việc bạn lấy category ra, nó sẽ trả về cho bạn là giá trị id của category đó chứ không phải là name của category. Vì vậy nên mình dùng ‘cat’ để lấy bài viết.
Như vậy mình đã giới thiệu cho các bạn về cách Custom Field trên Post. Tương tự như vậy các bạn có thể làm trên Page hoặc, trên Custom Post Type mà bạn tạo.
Chưa dừng lại ở đó, mình sẽ hướng dẫn tiếp phần cuối cùng của bài hôm nay. Đó là custom fields trên Taxonomy.
Vậy Custom Fields trên Taxonomy có khác gì so với Post và Page không? câu trả lời là CÓ.
Đầu tiên, cũng giống như post và page. Việc các bạn cần tạo là một field trong Custom Field. Ở đây mình tạo một Field Group mới có tên là Add More In My Category.
Sau đó mình tạo hai field mới là Image Category và Color với field type lần lượt là Image và Color Picker.
Cuối cùng là chọn Field Taxonomy ở Location và chọn mục là Category.
Bây giờ thì mình cùng vào Category xem thử nhé.
Như các bạn thấy, giờ đây Category chúng ta đã có thêm 2 mục mới là Image và Color. Vậy giờ các bạn hãy cứ chọn màu và image mà mình thích trước nhé.
Sau khi chọn xong bạn cần vào code để display color và image ra. Tuy nhiên cách lấy field ở Taxonomy có khác so với POst và Page. Cụ thể như sau:
// lấy taxonomy hiện tại
$term = get_queried_object();
// vars
$image = get_field('image_category', $term);
$color = get_field('color', $term);Sau đó mình style lại một tí.
<style type="text/css">
.entry-title{
color: <?php echo $color; ?>;
}
.title__category{
padding-top:50px;
text-align: center;
}
<?php if( $image ): ?>
.site-header {
background-image: url(<?php echo $image; ?>);
height:150px;
}
<?php endif; ?>
</style>Sau đó bạn chỉ cần đưa tên class bạn đặt trên Css vào nơi cần hiển thị là được. Và đây là kết quả của mình
Các bạn thấy đấy, để lấy field ở trong Taxonomy thì các bạn cần phải truyền object vào thì mới lấy được field từ trong Taxonomy. Do đó nó có khác về cách lấy dữ liệu ra so với các bạn lấy Custom Field từ theme Option hay Post, Page. Như vậy ở bài này mình đã hướng dẫn các bạn về Custom Post Field bằng ACF ( các bạn có thể đọc thêm tài liệu về ACF tại đây ) kèm với các trường hợp khác nhau. Mọi thông tin thắc mắc bạn hãy để lại comment + tên bài ở dưới hoặc liên hệ fanpage trực tiếp để được giải đáp thắc mắc nha. Chúc các bạn thành công.