Hướng dẫn wordpress custom fields từ a-z

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài Hướng dẫn wordpress custom fields từ a-z Bài viết này mình sẽ hướng dẫn các bạn tạo wordpress custom fields từ a-z , với plugin Advanced Custom Fields bạn có thể thêm trường vào mọi kiểu dữ liệu bạn muốn.

WordPress có hỗ trợ custom fields cho post, page, với kiểu dữ liệu text đơn giản. Tuy nhiên nếu bạn sử dụng custom field phức tạp hơn ở vô số nơi trong wordpress như attachment, category thì cài plugin có tên : Advanced Custom Fields.
advanced-custom-field
Đây là plugin tốt nhất để tạo custom fields post type.

Hỗ trợ kiểu dữ liệu cho field:

  • Text (type text, api returns text)
  • Text Area (type text, api returns text with
    tags)
  • Number (type number, api returns integer)
  • Email (type email, api returns text)
  • Password (type password, api returns text)
  • WYSIWYG (a wordpress wysiwyg editor, api returns html)
  • Image (upload an image, api returns the url)
  • File (upload a file, api returns the url)
  • Select (drop down list of choices, api returns chosen item)
  • Checkbox (tickbox list of choices, api returns array of choices)
  • Radio Buttons ( radio button list of choices, api returns chosen item)
  • True / False (tick box with message, api returns true or false)
  • Page Link (select 1 or more page, post or custom post types, api returns the selected url)
  • Post Object (select 1 or more page, post or custom post types, api returns the selected post objects)
  • Relationship (search, select and order post objects with a tidy interface, api returns the selected post objects)
  • Taxonomy (select taxonomy terms with options to load, display and save, api returns the selected term objects)
  • User (select 1 or more WP users, api returns the selected user objects)
  • Google Maps (interactive map, api returns lat,lng,address data)
  • Date Picker (jquery date picker, options for format, api returns string)
  • Color Picker (WP color swatch picker)
  • Tab (Group fields into tabs)
  • Message (Render custom messages into the fields)
  • Repeater (ability to create repeatable blocks of fields!)
  • Flexible Content (ability to create flexible blocks of fields!)
  • Gallery (Add, edit and order multiple images in 1 simple field)
  • Custom (Create your own field type!)

Tài liệu của advanced custom fields khá đầy đủ, các bạn tìm đọc tại đây: http://www.advancedcustomfields.com/resources/

Mình sẽ khiến một số tỉ dụ để bạn có ánh nhìn tổng quát về plugin này, những gì mà nó làm được vô cùng tuyệt vời.

Thêm hình ảnh đại diện cho category – Tạo field image cho category

Để thêm trường hình ảnh đại diện cho category chúng ta sẽ tạo thêm các fields và áp dụng cho taxonomy term thuộc category. Nhấn add new để thêm trường mới.
advanced-custom-field-new1

Nhập tên nhóm fields, mục rules nhập attachment is equal to all. Nhấn Add field để thêm field mới cho category.
new-field-advanced-custom-field
Giá trị của field này chọn lựa cũng đều có thể trả về Object, url, hoặc ID tùy theo ý bạn. Field ảnh của category được lấy bởi hàm: get_field .

 get_field("field_image", '  ');    

Thay vì return, bạn cũng có thể có thể echo giá trị field với hàm the_field .
Cú pháp:

     

Trong đó:

  • $field_name: đòi hỏi nhập tên của field cần lấy giá trị. VD: “page_content”
  • $post_id: nếu bạn thêm custom fields cho post/custom post type thì chỉ định post ID , nơi chứa fields. Tham số này sẽ không bắt buộc, nếu bạn sử dụng Advanced Custom Fields để tạo options..hoặc lấy fields với post hiện tại.

Các ví dụ khác:

     

<?php endif;

Để hoàn tất việc tạo field mới nhấn vào publish. Ok, vậy là đã xong. Ngay giờ đây bạn vào mục quản lý categories, chỉnh sửa 1 category sẽ thấy có phần nhập ảnh cho category đó.
category-advanced-custom-field

– Advanced custom fields chỉ hiển thị field trong phần nhập dữ liệu, mà không bổ trợ cột hiển thị field của nó trong phần liệt kê dữ liệu.
display-advanced-custom-field
Bạn phải can thiệp bằng hook manage_edit cho hiển thị thêm trường. Thêm dòng sau vào theme functions.php

 //hiển thị columns taxonomy add_filter("manage_edit-category_columns", 'theme_columns'); function theme_columns($theme_columns) { $new_columns = array( 'cb' =>  '  ', 'name' =>  __('Name'), 'image' =>  'Image', 'description' =>  __('Description'), 'slug' =>  __('Slug'), 'posts' =>  __('Posts') ); return $new_columns; } //nội dung cột taxonomy add_filter("manage_category_custom_column", 'manage_theme_columns', 10, 3); function manage_theme_columns($out, $column_name, $term_id) { //$term = get_term($term_id, 'category'); switch ($column_name) { case 'image': // get header image url //$data = maybe_unserialize($theme-> image); $img=get_field("image","category_$term_id"); if(is_array($img)) $img=$img['url']; if(!$img) $img=get_bloginfo('stylesheet_directory').'/images/placeholder.jpg'; $out .= ""; break; default: break; } return $out; }  

Ở code trên, ta đã khai báo thêm cột có tên “image”, tên hiển thị “Image”. Filter manage_category_custom_column nhập vai trò hiển thị nội dung của field, chúng ta sẽ dùng hàm get_field nói ở trên để lấy dữ liệu ảnh của category.
display-attachment-advanced-custom-field

Thêm field cho attachment

Tương tự như thêm field cho category, mục Rules(Show this field group if) chọn attachment is equal to all.

Giống category, advanced custom field cũng không giúp hiển thị dữ liệu cho field của nó. Muốn hiển thị dữ liệu cho field, bạn thêm đoạn code sau vào theme functions.php.

 //display columns function ic_image_attachment_columns($columns) { $columns['background'] = __("background","hoangwebtheme"); return $columns; } add_filter("manage_media_columns", "ic_image_attachment_columns", null, 2); function ic_image_attachment_show_column($name) { global $post;//$post-> ID switch ($name) { case 'background': $value = get_field("background", $post-> ID); echo $value? 'Background':''; break; } } add_action('manage_media_custom_column', 'ic_image_attachment_show_column', null, 2);  

Ví dụ trên, field có name=”background”. kết quả:
manage_media_columns-wp

Chúc bạn thành công !

Hãy cho mình biết suy nghĩ của bạn trong phần bình luận bên dưới bài viết này. Hãy theo dõi kênh chia sẻ kiến thức WordPress của TopVn trên Twitter và Facebook

Bài viết Hướng dẫn wordpress custom fields từ a-z được tổng hợp và biên tập bởi: dinhthuanit.com. Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho dinhthuanit.com để điều chỉnh. dinhthuanit.com xin cảm ơn.

Bài Viết Liên Quan


Bài Viết Khác


Quảng cáo
Ads_ngang