Hướng dẫn dùng MB Views để tạo trang chủ

Việc tạo trang chủ bằng các custom field dùng MB Views cũng khá tương tự với các bài viết hướng dẫn mình đã nói trước, ví dụ như bài tạo trang FAQs bằng plugin Meta Box. Cụ thể ta chỉ cần làm các bước như sau:

  1. Tạo 1 trang mới và cài đặt trang này làm trang chủ
  2. Dùng plugin Meta Box tạo các Custom field cần thiết cho trang
  3. Gọi hàm render dữ liệu từ các custom field

Bước 1 & 2 đều có thể thực hiện bằng các thao tác trực quan từ WordPress và plugin Meta Box mà không cần sử dụng thêm công cụ nào khác. Nhưng khi làm đến bước 3, các bạn cần phải truy cập vào máy chủ để thực hiện thay đổi file trong theme. Hoặc nếu dùng FTP để truyền dữ liệu thì cần đến thêm một dụng cụ Code Editor để chỉnh sửa code dễ dàng hơn.

Hôm nay mình sẽ giới thiệu đến các bạn một extension mới nhất của Meta Box, đó là MB Views. Extension này giúp ta có thể tạo trang chủ hay thực hiện cả 3 bước trên mà ko cần động đến bất cứ file hay truy cập vào host hay phía server.

Mình sẽ tạo giao diện trang chủ sử dụng mẫu từ thư viện Bootstrap để làm công cụ cho bài viết hướng dẫn hôm nay.

Thực hiện

Từ một giao diện HTML có sẵn, ta sẽ đưa nó vào WordPress thành một trang “Động” mà không cần truy cập máy chủ hay động đến file code nào nhờ có MB Views.

Bước 1: Tạo và thiết lập trang chủ mới

Trước tiên hãy tạo cho mình một trang mới và đặt tên là “Home” (vào Pages > Add New để tạo trang mới). Sau đó vào Settings > Reading, ở mục Your homepage displays chọn A Static Page và chọn Home để thiết lập trang Home làm trang chủ.

Bước 2: Tạo một view cho trang chủ

Sau khi đã có được Trang chủ mới. Vào Meta Box > Views > Add New.
Tiếp theo, để thiết lập View này hiển thị cho trang chủ, hãy chọn các trường như sau trong phần Settings:

Thiết lập hiển thị cho MB Views
Thiết lập hiển thị cho MB Views

Trang chủ được mình đặt tên như trên là Home, thuộc dạng Page và loại Singular.

Bước 3: Copy template vào view

Từ giao diện mẫu mà mình đưa trên, ta thấy có 3 phần chính:

  • My Carousel
  • Content Marketing
  • Featurette Section

Hãy copy nội dung HTML của 3 phần này và đưa vào trang ở mục Views của plugin Meta Box mà phần 2 chúng ta đã tạo.
Khi đưa vào phần Template của mục Views các hình ảnh hay URL sẽ không hiển thị đúng.
Do đó cần phải thêm đoạn code sau trước mỗi đường dẫn để fix lỗi này:

{{ mb.get_template_directory_uri() }}
Fix lỗi sai đường dẫn hình ảnh
Fix lỗi sai đường dẫn hình ảnh

Copy CSS và dán vào tab CSS.

Thêm CSS vào Views
Thêm CSS vào Views

Bước 4: Tạo các Custom Field cho trang chủ

Phân tích các trường trong slide
Phân tích các trường trong slide

Việc tạo các Custom field cho 1 trang mình đã giới thiệu trong các Tutorials trước. Nên bài này để rút gọn mình xin hướng dẫn mẫu cho 1 section đầu tiên là Slide Home. Các phần khác các bạn tự tạo để phù hợp với giao diện mình mong muốn nhé!

Như phân tích ở trên mình sẽ tạo 1 Group field có thể Clone để tạo nhiều slide item. Trong đó có các trường như sau:

  • Image
  • Title
  • Description
  • Button link

Vào Custom Fields / Add New, sau đó tạo 1 Group như mình mô tả ở trên:

Tạo Group Fields có thể nhân bản
Tạo Group Fields có thể nhân bản

Đừng quên chuyển qua tab Settings để cài đặt hiển thị các Fields này cho Home Page nhé!

Cài đặt hiển thị cho Group Field
Cài đặt hiển thị cho Group Field

Như vậy là bạn đã tạo được các trường cần thiết cho home page rồi đấy! Hãy bắt đầu điền dữ liệu và chuyển qua bước tiếp theo.

tạo được các trường cần thiết cho home page
Kết quả bước 4


Bước 5: Render nội dung field ra giao diện bằng MB Views

MB Views ngoài việc hỗ trợ đưa template vào không cần động đến các File trong Theme, nó còn có thể giúp ta sử dụng Twig code để render “Động” các nội dung và Custom field đã tạo theo ý muốn.

Đầu tiên, di chuyển đến mục Views vào trang Home lúc trước. Click vào button Insert Field ở góc phải. Nó sẽ giúp ta Render các field mà chỉ cần click. Bạn thậm chí không cần nhớ ID trước đó đã đặt.

Với vài cú kích chuột đơn giản, mình đã có thể tạo được 1 đoạn code như sau. Trong đoạn này có 2 dòng mà mình tự viết ra để “Check first item in loop”, sau đó thêm class active cho nó. Còn các công việc khác đã có MB Views đã thực hiện.

Render Custom Field
Render Custom Field

Việc hướng dẫn sử dụng nút Insert Field này cũng đã có sẵn ở video & document, các bạn có thể truy cập vào đây để xem rõ hơn

Kết Luận

Hôm nay mình đã hướng dẫn các bạn một ứng dụng nhỏ trong việc sử dụng extension MB Views của plugin Meta Box. Ngoài việc tạo trang chủ, nó còn có hữu ích rất nhiều cho dân Developer hay người dùng tập mày mò đến code.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *