Custom field trong wordpress và các vấn đề liên quan

Ngày đăng: 29 - 04 - 2020 Lượt xem: 131 lượt

Tiếp tục với loạt bài viết về hướng dẫn lập trình theme wordpress hôm nay mình sẽ giới thiệu cho anh em một tính năng khá hay và quan trọng đó là custom field trong wordpress.

Tính năng custom field song kiếm hợp bích với tính năng custom post type giúp wordpress trở thành một CMS vô đối như hiện tại. Hôm nay chúng ta sẽ đi tìm hiêủ chức năng thần thánh này của wordpress.

Custom field trong wordpress là gì?

Mặc định mỗi bài viết trong wordpress sẽ có các trường như: Tiêu đề, nội dung, thumbail, mô tả, đường dẫn… Các thành phần trên được cung cấp bởi wordpress.

Ngoài các trường trên wordpress còn cho phép chúng ta thêm 1 hay nhiều trường mới để phục vụ chức năng nâng cao của website. Việc thêm các trường mới đó người ta gọi là custom field trong wordpress.

Tính năng không chỉ áp dụng cho post, page mà còn áp dụng cho custom post type.

Custom field trong wordpress và các vấn đề liên quan

Hướng dẫn tạo custom field trong wordpress

Tạo custom field

Để dễ hình dung chúng ta sẽ đi làm chức năng ví dụ: Dưới mỗi bài viết hiển thị link dẫn đến bài viết gốc.

Với yêu cầu của chức năng này chúng ta phải đi tạo trong khung viết bài mới một khu vực để nhập link bài viết gốc. Các bước để làm chức năng này như sau:

Bước 1: Vào khu vực viết bài mới ấn vào tùy chọn hiển thị và click vào trường tùy chỉnh

Custom field trong wordpress

Bước 2: Sctroll xuống vị trí trường tùy chỉnh click vào “nhập mới” sau đó nhập têngiá trị

  • Trường tên ở đây là dạng slug các bạn phải nhập liền và không dấu, sau này chúng sẽ sử dụng nó để hiển thị ra ngoài. Trường này do bạn tự đặt ở đây mình đặt là link-goc (Theo ví dụ trên)
  • Trường giá trị là link gốc của bài viết (theo ví dụ trên)

Custom field trong wordpress

Bước 3: Cấc bạn bấm vào thêm trường tùy biến để hoàn thành

Như vậy là chúng ta thêm custom field trong wordpress thành công.

Hiển thị custom field ra ngoài front end

Để hiển thị custom field ra ngoài front end chúng ta sử dụng đoạn code sau, chèn đoạn code này vào khu vực cần hiển thị ở file single.php nhá.

<?php echo get_post_meta(get_the_ID(), 'link-goc', true); ?>

Trong đó link-goc là tên khi chúng ta đặt ở phần nhập custom field.

Làm tới đây các bạn sẽ thắc mắc, cách trên chỉ tạo được những field có dạng là text, đối với những field dạng hình ảnh hay nâng cao là object thì làm sao để tạo? Chắc chắn làm cách trên thì khá là đuối và chuối :))

Vì thế wordpress đã có hàng tá plugin giúp tạo custom field trong wordpress. Một trong số đó là plugin ACF (Advanced Custom Fields) hoặc các bạn cũng có thể xem qua cách tạo custom field sử dụng plugin toolset types

Tạo custom field trong wordpress sử dung plugin ACF (Advanced Custom Fields)

ACF là một trong những plugin tạo custom field hàng đầu hiện nay. Với giao diện dễ sử dụng support nhiều trường, vì vậy hôm nay mình sẽ giới thiệu nó cho mọi người.

Tạo custom field bằng ACF

Đầu tiên chúng ta phải cài plugin này, các bạn vào mục plugin thêm mới và search từ khóa “Advanced Custom Fields”

Tìm và cài plugin như hình dưới

Custom field trong wordpress sử dung acf

Sau khi cài menu admin sẽ xuất hiện thêm menu là custom fields, các bạn click vào add new (thêm mới) để tạo mới custom field.

Custom field trong wordpress sử dụng acf

Nó sẽ hiện ra giao diện thêm custom field như hình trên, bạn ấn vào add field để thêm một field mới trong đó:

  • Field label => là tên field hiển thị ở khu vực post bài mới
  • Field name => là slug của custom field phần này sẽ sử dụng để get custom field ra ngoài front end
  • Field type => là các kiểu mà acf support như: Text, textarea, image (hình ảnh), …
  • Còn lại các phần khác không quan trọng các bạn có thể để mặc định hoặc tùy chỉnh thêm.

Các bạn có thể thêm 1 hoặc nhiều trường tùy mục dích yêu cầu của chức năng nhé.

Tiếp theo đến phần tùy chọn hiển thị của field là phần locations:

Custom field trong wordpress sử dụng acf

Phần này các bạn có thể tùy chọn được nơi hiển thị của các custom field trong wordpress, có thể hiển thị nó ở post, ở page hoặc ở một custom post type nào đó.

Sau khi đã điền đầy đủ thông tin các bạn lưu lại và vào phần thêm bài viết mới, sẽ thấy field hiển thị như hình dưới là thành công.

Hiển thị field ra ngoài front end

Để hiển thị custom field trong wordpress sử dụng plugin acf chúng ta sử dụng đoạn code sau:

<?php the_field('link-goc'); ?>

Đối với những field là mảng hay object chúng ta cần làm như sau:

<?php $field = get_field('array'); ?>
<?php foreach ($field  as $key => $value) {
    echo $value;
} ?>

Plugin Advanced Custom Fields Pro

Plugin này có phiên bản pro support thêm nhiều field rất hay và mạnh mẽ như:

  • Group
  • Repeat content
  • Gallery

Nhân đây mình cũng có plugin pro nên share cho các bạn luôn, bạn nào thấy cần thiết thì có thể download nhé 🙂

Download code "Plugin ACF Pro phiên bản 5.8.9"
Để download code vui lòng thực hiện các bước sau!
Bước 1: Like fan page của học wordpress:
Bước 2: Để lại email, hệ thống sẽ kiểm tra và gởi code về mail trong vòng 10 phút!
Bonus:
Lưu ý: Một số trường hợp mail sẽ gởi vào mục spam. Các bạn vui lòng check kỹ ạ!

Tổng kết

Hôm nay mình đã hướng dẫn cho các bạn chức năng custom field trong wordpress cũng như sử dụng plugin acf để tạo custom field một cách nhanh chóng và tiện lợi. Đây là một trong những chức năng quan trọng nhất trong wordpress.

Hy vọng với chút kiến thức này sẽ giúp bạn học lập trình theme wordpress dễ dàng hơn.

Chào các bạn

0 0 vote
Article Rating

guest
0 Comments
Inline Feedbacks
View all comments

Bài viết liên quan

Hướng dẫn tạo menu và get menu trong wordpress

Hướng dẫn tạo menu và get menu trong wordpress

07 - 05 - 2020

Menu trong wordpress là một thành phần khá quan trọng. Hầu hết các website wordpress đều có chức năng...

Hướng dẫn get user và custom user field trong wordpress

Hướng dẫn get user và custom user field trong wordpress

07 - 05 - 2020

Tiếp tục với seri hướng dẫn lập trình theme wordpress, hôm nay mình sẽ hướng dẫn cho các bạn...

Hướng dẫn custom term field trong wordpress

Hướng dẫn custom term field trong wordpress

05 - 05 - 2020

Bài trước mình đã hướng dẫn cho bạn cách custom taxonomy trong wordpress, để tiếp nối các tính năng...

Custom taxonomy trong wordpress từ a đến z và get chúng ra front end

Custom taxonomy trong wordpress từ a đến z và get chúng ra front end

04 - 05 - 2020

Chào anh em! Tiếp tục với chủ đề hướng dẫn lập trình theme wordpress hôm nay mình sẽ hướng...

Hướng dẫn custom post type trong wordpress từ a đến z

Hướng dẫn custom post type trong wordpress từ a đến z

29 - 04 - 2020

Hôm nay chúng ta sẽ đi tìm hiểu một trong những tính năng biến wordpress trở thành CMS mạnh...

Hướng dẫn get category trong wordpress từ a đến z

Hướng dẫn get category trong wordpress từ a đến z

29 - 04 - 2020

Tiếp tục với chủ đề lập trình theme wordpress, bài viết này mình sẽ hướng dẫn get category trong...

0
Would love your thoughts, please comment.x
()
x