Cách tạo và import portfolio dự án bằng Meta Box, Elementor và WP All Import

Trong quá trình tạo website cho khách hàng, bạn sẽ bắt gặp những trường hợp mà khách muốn hiển thị rất nhiều dự án  lên trang của họ. Mình từng nhận được yêu cầu chèn 30 dự án lên website, mỗi dự án lại gồm cực nhiều ảnh và page, chỉ nghe thôi đã thấy mệt rồi đúng không nào? May thay, vấn đề này có thể được giải quyết một cách nhanh gọn với sự trợ giúp của ba plugin Meta Box, Elementor và WP All Import.

Nếu bạn vẫn chưa hình dung được một portfolio dự án trông như thế nào, hãy xem ví dụ về dự án của một công ty kinh doanh gas tại đây.

Sau đây mình sẽ hướng dẫn các bạn từng bước một cách tạo một portfolio dự án giống như ở trên. Cùng xem nhé!

Các công cụ cần dùng

Để bắt đầu, bạn cần cài đặt một số công cụ miễn phí và trả phi sau:

  • Elementor Pro (trả phí) – dùng để tạo template cho custom post type.
  • WP All Import (trả phí) – import project của bạn vào WordPress.
  • SiteGround Hosting (trả phí) – một nền tảng hosting để upload hình ảnh của project. Bạn có thể dùng các giải pháp cPanel khác nếu muốn.
  • Core plugin Meta Box (miễn phí) – dùng để tạo custom field cho các custom post type của dự án.
  • MB Custom Post Types & Custom Taxonomies (miễn phí) – extension của plugin Meta Box để tạo custom post type.
  • Meta Box – Elementor Integrator (miễn phí) – extension của plugin Meta Box cho phép đặt các custom field tạo bởi plugin này vào các custom post type của dự án.
  • Google Sheets (miễn phí) – dùng để tạo trang tính mà chúng ta sẽ import vào website bằng plugin WP All Import.

Ok, đây là tất cả những gì bạn cần, giờ hãy chuyển sang bước tiếp theo!

Tạo custom post type

Đầu tiên, chúng ta cần tạo một custom post type và đặt tên là Project. Trong bài này, mình sẽ tạo bằng plugin MB Custom Post Types & Custom Taxonomies.

Chú ý: Bạn có thể tạo custom post type bằng một công cụ miễn phí khác của Meta Box là Post Type Generator, xem hướng dẫn sử dụng tại đây.

Trên Admin Dashboard, tìm tới mục Plugins > Add New, nhập vào MB Custom Post Types & Custom Taxonomies trong thanh tìm kiếm rồi tiến hành cài đặt và kích hoạt plugin như thường.

Cài đặt plugin MB Custom Post Types & Custom Taxonomies trên website WordPress

Tiếp theo, tìm tới mục Meta Box > Post Types và click New Post Type.

Thêm post type mới bằng plugin Meta Box

Hãy nhập vào Plural name (tên số nhiều), Singular name (tên số ít) và Slug của custom post type mới như sau:

Nhập thông tin cho post type của dự án được tạo bởi plugin Meta Box

Và hãy chắc chắn rằng bạn đã tick vào mục Hierarchical?:

Thiết lập post type được tạo bởi plugin Meta Box

Cuối cùng, hãy nhấn Publish để tạo custom post type.

Tạo một template trong Elementor cho custom post type

Nếu bạn đã cài Elementor Pro rồi, hãy vào mục Templates > Theme Builder rồi click Add New.

Dùng Elementor Theme Builder để tạo một template cho porfolio của dự án

Tiếp theo, hãy chọn template type là Single và post type là Project.

Chọn loại template và post type cho template mới của Elementor

Sau đó, bạn hãy tự thiết kế một layout cho riêng mình bằng Elementor nhé!

Thiết lập các custom field

Sau khi bạn đã có một layout của riêng mình, hãy tạo các custom field để thêm một số mục đặc biệt cho dự án. Chúng ta cần thêm hai custom field sau:

  • Project Budget (Ngân sách dự án)
  • Medical Gas Installation Budget (Ngân sách lắp đặt bình gas)

Chú ý: Đây là hai mục của dự án kinh doanh gas mà mình đã nói ở trên. Với dự án của bạn, hãy thêm các custom field khác phù hợp nhé. Tất nhiên là nếu không cần thêm một số mục đặc biệt thì bạn hoàn toàn có thể bỏ qua phần này.

Để tạo hai custom field trên, mình sẽ sử dụng công cụ miễn phí Online Generator của Meta Box. Công cụ này sẽ cung cấp cho bạn UI giúp tạo custom field nhanh chóng và đơn giản, trực quan hơn. Ngoài ra, nếu muốn có giao diện tạo custom field ngay trong back end, bạn có thể dùng một extension trả phí của plugin Meta Box là Meta Box Builder. Và tất nhiên, bạn cũng có thể code một cách thủ công nếu là coder.

Thiết lập 2 custom field của portfolio dự án với công cụ Online Generator

Trong tab Settings, hãy đặt title và ID cho từng custom field, rồi chọn Post TypesPost. Sau đó, click Generate Code để tạo code rồi copy và paste đoạn code đó vào file functions.php của theme mà bạn đang sử dụng.

Paste code vào file functions.php để tạo custom field cho portfolio dự án

Xem thêm: Cách dùng Online Generator.

Tuy nhiên, chúng ta sẽ cần chỉnh sửa lại phần code này một chút cho phù hợp với dự án. Đầu tiên, đổi post type từ project sang post:

'post_types' => ['project'],

Tiếp theo, đổi prefix thành mb_

$prefix = 'mb_';

Bạn có thể xem toàn bộ đoạn code trên tại đây.

Xong, hai custom field đã được tạo thành công và hiển thị trong post type Projects:

Các custom field được hiển thị trong post type Projects

Giờ chúng ta đã có custom field, việc tiếp theo cần làm là liên kết chúng tới Elementor template mà bạn vừa tạo ở trên bằng extension Meta Box – Elementor Integrator.

Sau khi đã liên kết thành công, bạn cần thiết lập các custom field này một chút theo hướng dẫn trong video sau:

Vậy là xong, chúng ta đã tạo thành công custom field cho dự án rồi.

Import danh sách dự án

Trong trường hợp của mình, khách hàng yêu cầu đưa tới 27 dự án lên website. Và họ gửi cho mình một Google Sheet như sau:

Danh sách các dự án cần import vào portfolio bằng plugin WP All Import

Lúc này, mình phải đối mặt với hai vấn đề khó khăn:

  • Cột Featured Image là link Google Drive, và vì WP All Import không thể import các thư mục Google Drive, và việc import link sẽ mất kha khá thời gian nên mình sẽ phải tìm cách khác
  • Có quá nhiều ảnh, nên dung lượng file sẽ rất lớn

Để import các dự án, giải quyết các vấn đề ơ trên đơn giản nhất có thể, mình làm theo các bước sau:

Bước 1: Download ảnh từ link Google Drive rồi upload lên Siteground

Mình download từng ảnh featured image về rồi upload chúng lên Siteground. Cách làm này khá “cơ bắp” và tốn thời gian, nhưng dễ thực hiện và không lòng vòng. Sau khi tải ảnh về, mình sẽ đổi tên chúng thành 1.jpg, 2.jpg, … theo thứ tự. Lý do thì mình sẽ nói ở bước 2. Bạn có thể tham khảo cách đổi tên file hàng loạt tại đây.

Tiếp theo là upload ảnh lên Siteground. Để giảm tối đa dung lượng, mình sẽ đặt tất cả ảnh vào file p_uploads rồi nén nó lại trước khi đăng nhập vào SiteGround File Manager và upload nó lên.

Cuối cùng, mình sẽ có một link tới thư mục được upload như sau:

websitecuaminh.com/p_uploads/project1/1.jpg

Bước 2: Thiết lập plugin WP All Import

Sau khi đã kích hoạt plugin, mình tìm tới mục All Import > New Import, click Download from URL rồi paste link Google Sheets vào.

Import dự án với plugin WP All Import

Chú ý: Bạn cần cài đặt link để ai cũng có quyền xem.

Thiết lập link trang sheet của các dự án để ai cũng có thể xem

Tới đây thì mình cần giải thích một chút, nếu bạn muốn import tất cả các link featured image trên Google Sheet ban đầu bằng plugin WP All Import thì sẽ khá là rắc rối. Đó là bởi bạn cần liệt kê các link thành một danh sách dài, ngăn cách với nhau bởi dấu phẩy, và bởi vì có quá quá nhiều ảnh, nên đây thực sự là một cơn ác mộng.

Tuy nhiên, mình đã làm theo cách khác đó là đổi tên file ảnh (trong bước 1) rồi làm như sau:

Đầu tiên, mình tạo một cột mới trong Google Sheet là Images rồi điền vào các giá trị là từ 1.jpg, 2.jpg, … đến 60.jpg (ngăn cách nhau bởi dấu phẩy) như sau:

Nhập vào string cho các dự án

Sau đó, mình sao chép ô này và paste vào tất cả các ô trong cột Images. Giờ thì mình cần đổi tên các file một lần nữa sao cho nó tương ứng với file ảnh được upload lên SiteGround ở bước 1. Ví dụ: 1.jpg sẽ đổi thành https://mysite.com/p_uploads/project_folder/1.jpg.

Để làm điều này, mình sẽ sử dụng hàm regex và app Atom – một code editor – để thực thi hàm này. Mình lấy từng hàng riêng biệt sau đó paste nó vào app Atom rồi sử dụng biểu thức regex, bạn có thể xem biểu thức đó tại đây.

Trong trường hợp này, mình cần thay URL [what the regex said] bằng URL của mình. Sau đó, mình copy toàn bộ nội dung và paste nó ngược lại vào Google Sheet. Dưới đây là video hướng dẫn:

Giờ chúng ta đã có cột Images với các link ảnh được liệt kê và ngăn cách nhau bởi dấu phẩy. Hãy chuyển sang bước 4 để thực hiện import nhé!

Bước 3: Thiết lập phần import

Sau khi đã nhập vào URL của Google Drive, hãy đảm bảo rằng bạn đã chọn đúng custom post type mà mình muốn import các dự án vào. Trong trường hợp của mình là custom post type Projects.

Thiết lập phần Import của plugin WP All Import

Tiếp theo, click Continue to Step 3.

Import các dự án với plugin WP All Import

Lúc này, chúng ta cần liên kết các cột trong Google Sheet với post type của dự án. Việc này khá đơn giản, bạn chỉ cần kéo tiêu đề cột và thả vào field thích hợp. Bên cạnh đó, chúng ta cũng cần import một số dữ liệu vào trong các custom field được tạo ở phần đầu bằng cách làm như sau:

Import các custom field

Hãy kéo xuống dưới phần custom field và click See Detected Fields.

Import các custom fields của portfolio dự án

Sau đó, bạn chỉ cần kéo và thả các giá trị cần thiết cho các field này:

Import các custom field của portfolio dự án bằng cách kéo thả đơn giản

Hãy nhớ rằng bạn cần xóa các giá trị mặc định của field trước nhé!

Vậy là chúng ta đã import xong các custom field, giờ hãy chuyển qua phần import hình ảnh.

Import ảnh

Đầu tiên, mở menu Images và kéo cột chứa hình ảnh của bạn vào mục Download Images Hosted Elsewhere. Giờ bạn sẽ thấy điều kỳ diệu xảy ra, plugin WP All Import sẽ download từng ảnh một và đính kém chúng vào một post, ảnh đầu tiên được import sẽ được đặt làm featured image.

Nhưng ảnh đầu tiên chưa chắc đã đẹp và phù hợp, vậy nên mình sẽ lấy một ảnh khác làm featured image bằng cách thêm một cột riêng cho ảnh featured image. Sau đó, mình thêm nó vào trước các hình ảnh và URL của website, field text cuối cùng sẽ trông như thế này:

https://mysite.com/p_uploads/{featuredimage[1]},{images[1]}

Nếu các thư mục của bạn có quá nhiều ảnh, hãy đến phần Advanced Settings và đổi giá trị trong phần In each interaction từ 20 thành 1.

Xong, các project của mình đã được tạo thành công và hiển thị trong post type Projects như sau:

Tạo và import thành công các dự án vào trong portfolio của website WordPress

Lời cuối

Cách làm của mình cực kì hiệu quả khi hợp khách hàng cung cấp một trang sheet chứa các dự án mà họ từng làm trong và bạn muốn tạo một page template để import chúng. Trong lúc thực hiện, hãy đảm bảo rằng tất cả các dự án đều phải có một ảnh featured image để tránh việc chúng bị bỏ sót nhé.

Chúc bạn thành công, và đừng quên theo dõi các bài viết tiếp theo của chúng mình để biết thêm nhiều mẹo và thủ thuật hay ho trong việc tạo một website WordPress nhé!

Để lại bình luận

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 *