Hướng dẫn tạo trang OTA giống booking.com với plugin Meta Box – P1 – Tạo trang giới thiệu phòng khách sạn

Việc sở hữu một trang web OTA đã không còn xa lạ gì với các doanh nghiệp, đặc biệt với những doanh nghiệp cung cấp dịch vụ đặt phòng khách sạn. Những trang web uy tín trong lĩnh vực này có thể kể đến như agoda.com hay booking.com với hệ thống book phòng chuyên nghiệp, tiện lợi. Nếu bạn muốn tạo một trang OTA tương tự như hai website trên, hãy theo dõi series bài viết Hướng dẫn tạo trang OTA giống booking.com và agoda.com của chúng mình nhé.

Ở bài viết đầu tiên của series này, chúng ta sẽ tạo trang single cho từng khách sạn và tạo các custom field để nhập dữ liệu về mỗi khách sạn đó, sau đó hiển thị chúng ra ngoài trang web.

Để làm được việc này, bạn cần cài đặt những plugin sau:

  • Plugin Meta Box: cung cấp framework tạo custom field. Bạn có thể tải plugin miễn phí này trên wordpress.org.
  • Meta Box Builder: đây là một extension premium của plugin Meta Box giúp bạn tạo custom field bằng giao diện người dùng trực quan (UI) trong backend.
  • MB Custom Post Type: extension miễn phí này của plugin Meta Box giúp tạo custom post type. Hoặc bạn có thể dùng công cụ miễn phí Post Type Generator nếu không muốn cài thêm plugin.
  • Meta Box Group: là một extension premium của plugin Meta Box giúp tạo các field group để nhóm các custom field lại với nhau, giúp trình bày các field đẹp hơn và tiện cho việc điền dữ liệu hơn.

Sau khi cài đặt và kích hoạt các plugin cần thiết xong, cùng bắt tay vào tạo trang nhé.

Bước 1: Tạo post type mới cho loại bài viết về từng Khách sạn

MB Custom Post Type sẽ giúp bạn làm việc này dễ dàng. Đầu tiên, trong Dashboard, vào Meta Box > Custom Post Type, click New Post Type.

Tạo post type mới cho loại bài viết về từng Khách sạn với plugin Meta Box

Sau đó, bạn điền thông tin cần thiết cho post type (mình đặt tên post type là Hotel) và nhấn Publish để lưu lại nhé. Bạn có thể tham khảo thêm cách tạo custom post type chi tiết hơn ở bài viết này.

Điền thông tin cần thiết cho post type và nhấn Publish

Bước 2: Tạo các custom field cho post type Hotel

Ta sử dụng extension Meta Box Builder để tạo các field cho post type Hotel mới tạo. Tất nhiên, bạn có thể tự code nếu như không muốn mua extension này. Nhưng nếu không muốn mất thời gian vào việc code thủ công, hoặc bạn không phải là coder, bạn vẫn có thể dùng UI để tạo custom field bằng công cụ Online Generator miễn phí của Meta Box, sau đó khởi tạo code và chèn vào file function.php.

Còn trong bài viết này, mình sử dụng Meta Box Builder bằng cách vào Meta Box > Custom Fields > Add New.

sử dụng Meta Box Builder để tạo các custom field cho post type Hotel

Sau đó, bạn chỉ cần kéo các loại field cần chọn ở cột bên trái vào phần Fields bên phải. Đây là các custom field và sub-field mà mình tạo cho trang booking:

các custom field và sub-field mà mình tạo cho trang OTA giống booking.com với plugin Meta Box

Cụ thể, với từng trường thông tin, mình chọn loại field tương ứng như sau:

Label của fieldLoại field
Hotel ImageImage Advanced
AddressText Area
MapOpen Street Map
Type of accommodationCheck Box List
FacilityCheck Box List
Distance from city centerText
RoomGroup
Room nameText
Room imageImage Advanced
Room areaText
Number of adultsNumber
Number of childrenNumber
Room priceNumber
Room facilityCheck Box List
Check in dateDate
Check out dateDate
Our last roomNumber

Bạn nhớ điền label và ID cho từng field cũng như ghi nhớ các ID này để thêm vào code ở các phần sau này nhé.

điền label và ID cho từng field của post type Hotel với plugin Meta Box

Với một số field đặc biệt, bạn cần chú ý:

Field Check Box List: ở ô Choices, bạn cần điền mỗi lựa chọn là một dòng với cú pháp như sau: ID-cua-lua-chon: Tên lựa chọn

Điền các câu trả lời để người dùng WordPress lựa chọn với plugin Meta Box

Field Address: field để điền địa chỉ của khách sạn trong backend.

điền địa chỉ của khách sạn trong backend của website OTA

Field Map: điền ID của field Address bên trên vào ô Address field để hiển thị vị trí của khách sạn trên bản đồ ra frontend (địa chỉ của khách sạn được nhập ở field Address).

điền ID của field Address bên trên vào ô Address field của website OTA

Group field Room là group chứa tất cả các thông tin về phòng khách sạn như là: Room name, Room image, Room area, Number of adults, Number of children, Room price, Room facility, Check in date, … Bạn kéo thả các field này vào field Room để biến chúng thành các sub-field của field Room nhé.

Room là group chứa tất cả các thông tin về phòng khách sạn trong trang giới thiệu của website OTA giống booking.com

Sau khi hoàn thành xong việc tạo các field, chuyển sang tab Settings và chọn Post typesHotel.

Chọn post type cho trang giới thiệu phòng khách sạn

Bước 3: Nhập dữ liệu cho từng khách sạn

Sau khi tạo post type ở bước 1, bạn sẽ thấy một menu mới tên là Hotel xuất hiện. Bạn vào menu này để thêm các khách sạn vào, hoặc điền thông tin cho khách sạn bạn muốn nhé.

Nhập dữ liệu cho từng khách sạn trong trang giới thiệu của website OTA với plugin Meta Box

Các custom field đã tạo ở bước 2 đều hiển thị ở trong từng khách sạn. Việc của bạn bây giờ là điền thông tin vào các field thôi.

điền thông tin vào các field với plugin Meta Box

Lưu ý:

Đây là bước nhập thông tin từ tài khoản admin trong backend thôi. Thường thì các trang OTA sẽ có thêm trang cho phép các chủ khách sạn tự thêm hay chỉnh sửa thông tin cho khách sạn của họ từ frontend. Để làm như vậy thì ở bước sau, bạn có thể làm thêm một số thao tác như ở bài hướng dẫn này nhé. Sau đó, chủ khách sạn sẽ được phép tạo tài khoản, đăng nhập, và submit thông tin khách sạn theo form bạn cho sẵn ngay từ frontend.

Bước 4: Hiển thị thông tin khách sạn ra ngoài frontend

Ở bước này, mình đang dùng theme Justread và sẽ tạo child theme để có thể chỉnh sửa theo ý muốn mà không phải sửa theme chính (bạn cũng có thể tải theme Justread miễn phí tại đây để thử nhé).

Đầu tiên, mình sẽ tạo thêm một file single-hotel.php để ghi đè lên nội dung của file single.php với nội dung như sau:

<?php
/**
 * The template for displaying all single hotel
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
 *
 * @package Justread
 */

get_header(); ?>
<aside id="secondary" class="widget-area">
 <?php dynamic_sidebar( 'sidebar-single-hotel' ); ?>
</aside><!-- #secondary -->

<div id="primary" class="content-area">

 <main id="main" class="site-main">
 <?php
 while ( have_posts() ) : the_post();
 get_template_part( 'template-parts/content', 'single-hotel' );

 // If comments are open or we have at least one comment, load up the comment template.

 if ( comments_open() || get_comments_number() ) :
  comments_template();
 endif;
 endwhile; // End of the loop.
 ?>
 </main><!-- #main -->
</div><!-- #primary -->
<?php
get_footer();

Trong đó:

  • <?php dynamic_sidebar( 'sidebar-single-hotel' ); ?> dùng để tạo thêm một sidebar riêng cho trang single hotel rồi đổi vị trí sidebar này sang bên trái.
  • get_template_part( 'template-parts/content', 'single-hotel' ): đoạn code này sẽ lấy file content-single-hotel.php thay vì lấy file content.php để thay đổi nội dung cho trang single hotel.

Còn nội dung file content-single-hotel.php bạn hãy xem ở đây nhé.

Tiếp theo, bạn có thể style lại các trường thông tin hiển thị ra bằng CSS một chút để chúng hiển thị được đẹp mắt nhé. Nội dung file style.css của mình để style lại trang single hotel ở đây.

Đây là các thông tin về khách sạn được hiển thị ra ngoài trang web của mình trong trang single hotel:

các thông tin về khách sạn được hiển thị ra ngoài website OTA giống booking.com

Vậy là bạn đã hoàn thiện viện hiển thị thông tin các phòng khách sạn ra trang giới thiệu từng khách sạn rồi đó.

Lời cuối

Ở các bài viết tiếp theo, mình sẽ hướng dẫn bạn tạo thêm các bộ lọc để tìm phòng booking ở cả trang archive lẫn trang single của khách sạn. Bạn nhớ theo dõi nhé! Ngoài ra, nếu bạn có thắc mắc hay có ý tưởng nào, hãy để lại comment cho chúng mì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 *