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.
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.
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.
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ụ 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 field | Loại field |
| Hotel Image | Image Advanced |
| Address | Text Area |
| Map | Open Street Map |
| Type of accommodation | Check Box List |
| Facility | Check Box List |
| Distance from city center | Text |
| Room | Group |
| Room name | Text |
| Room image | Image Advanced |
| Room area | Text |
| Number of adults | Number |
| Number of children | Number |
| Room price | Number |
| Room facility | Check Box List |
| Check in date | Date |
| Check out date | Date |
| Our last room | Number |
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é.
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
Field Address: field để điền địa chỉ của khách sạn trong backend.
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).
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é.
Sau khi hoàn thành xong việc tạo các field, chuyển sang tab Settings và chọn Post types là Hotel.
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é.
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.
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 filecontent-single-hotel.phpthay vì lấy filecontent.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:
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.