Skip to main content
Lâm Thái Bảo Nguyên
💬
0 discussions

Hướng dẫn sử dụng Website Admin WordPress (OTA Platform)

1. Điều kiện tiên quyết​

  • Bạn là nhân sự thuộc bộ phận Customer Success Engineer (CSE) tại Gcalls.
  • Đã được cấp tài khoản GitLab và quyền truy cập repository.
  • Đã cài Docker & Docker Compose trên máy.
  • Gitlab đã có privateKey ssh của local

2. Giới thiệu​

Website admin (nền tảng WordPress) được xây dựng dành riêng cho các admin nội bộ. Nền tảng cho phép tạo và quản lý nhiều website khác nhau thông qua mô hình đa tenant (multi-tenants). Mỗi admin sẽ được cấp tên miền và tài khoản để sử dụng hệ thống.

Ưu điểm:​

  • Tái sử dụng mã nguồn giúp tiết kiệm thời gian, chi phí triển khai.
  • Tích hợp linh hoạt với các nền tảng bên thứ ba như VNPT Epay, Larkbase, và hệ thống OTA khác.
  • Hỗ trợ tạo site tĩnh tối ưu cho SEO và hiệu suất.

3. Hướng dẫn triển khai​

3.1. Kiến trúc và công nghệ​

  • CMS: WordPress
  • Ngôn ngữ: PHP, JavaScript, HTML, CSS
  • Hosting site tĩnh: Cloudflare Pages (build từ WordPress qua Simply Static)
  • Triển khai & quản lý: Docker + Docker Compose

Tách riêng frontend tĩnh giúp giảm tải server, tăng tốc độ và bảo mật hơn cho hệ thống.

3.2. Cấu trúc thư mục WordPress​

/wordpress-root
│
├── wp-admin/           # Mã nguồn phần quản trị (dashboard)
├── wp-content/                # Nội dung tùy biến (themes, plugins, uploads)
│   ├── plugins/
│   │   ├── forminator
│   │   ├── simply-static
│   │   ├── tbthemes-demo-import
│   │   ├── wp-headers-and-footers
│   │   └── wp-travel-engine
│   └── themes/
│       └── travel-tour
├── wp-includes/        # Core files (chức năng, APIs)
│
├── .htaccess           # Cấu hình rewrite (Apache)
├── index.php           # Điểm khởi đầu của website
├── license.txt         # Giấy phép GNU GPL
├── readme.html         # Trang giới thiệu WordPress
├── wp-activate.php     # Kích hoạt tài khoản (Multisite)
├── wp-blog-header.php  # Load nội dung blog
├── wp-comments-post.php# Xử lý gửi comment
├── wp-config.php       # Cấu hình kết nối DB, khóa bảo mật
├── wp-cron.php         # Cron job nội bộ
├── wp-links-opml.php   # Xuất liên kết theo OPML
├── wp-load.php         # Load các file hệ thống
├── wp-login.php        # Trang đăng nhập
├── wp-mail.php         # Nhận email post
├── wp-settings.php     # Khởi tạo cài đặt
├── wp-signup.php       # Đăng ký tài khoản (Multisite)
├── wp-trackback.php    # Trackback API
└── xmlrpc.php          # API XML-RPC

3.2.1. Hướng dẫn cài đặt​

# Tiến hành clone dự án wordpress về
git clone git@gitlab.com:gcalls/saas/personal-branding/personal-branding.git

# Bước 2: chạy file clone.sh để clone các repo liên quan
# Giải thích: Mỗi dự án sẽ có các plugins, themes riêng. Ta sẽ tiến hành lưu nhiều sh file để clone các dự án riêng biệt. Không clone dồn về gây nặng khó deploy
sh clone.sh

# Bước 3: Chạy lệnh docker compose
docker compose up -d

3.3. Tính năng nổi bật​

Quản lý đa site bằng WordPress​

  • Sử dụng WordPress Multisite.
  • Cho phép tạo và quản lý nhiều website độc lập trên cùng một hệ thống source code và cơ sở dữ liệu.
  • Giúp tiết kiệm tài nguyên, không cần cài đặt riêng cho từng khách hàng.

Giao diện (Theme)​

  • Cung cấp nhiều theme phù hợp với từng lĩnh vực khác nhau như: du lịch, đại lý vé máy bay, đặt phòng,...
  • Có thể dễ dàng clone và chỉnh sửa theme cho từng khách hàng.

Plugin nghiệp vụ​

  • Đáp ứng nhu cầu như: quản lý booking, thanh toán, API kết nối.
    • Thanh toán: hỗ trợ qua VNPT EPAY.
    • Lưu trữ dữ liệu: lịch sử giao dịch lưu tại Larkbase.
    • Hoa hồng: mua bán vé, cộng tác viên nhận hoa hồng từ Vin-OTA.
    • Lưu ý với Larkbase: cần duy trì access_token thường xuyên để tránh mất kết nối.

Build site tĩnh bằng Simply Static​

  • Sử dụng plugin Simply Static để chuyển WordPress site thành static site.
  • Plugin đã được custom để phù hợp hơn với nghiệp vụ của hệ thống.
  • Static site không phụ thuộc vào backend WordPress giúp tối ưu tốc độ và độ tin cậy.
  • Dùng để chuyển đổi WordPress sang website tĩnh (tối ưu hiệu năng & SEO).
  • Phù hợp để host trên Cloudflare Pages hoặc các nền tảng tương tự.

3.4. Hướng dẫn cài đặt​

Cài đặt thư viện cho JS và JQuery​

Bước 1: Truy cập trang admin Bước 2: Chọn subtab Head and Footer Bước 3: Gán vào <HEAD> page section injection

<link rel="stylesheet" href="https://sandbox.megapay.vn/pg_was/css/payment/layer/paymentClient.css">
<script src="https://sandbox.megapay.vn/pg_was/js/payment/layer/paymentClient.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Cài đặt giao diện (Theme)​

Bước 1: Chọn giao diện

  • Truy cập vào Appearance trên menu chính.

  • Chọn mục Themes.

  • Chọn theme Travel Tour (hoặc theme bạn muốn sử dụng).

  • Click vào Import Demo Content.

Bước 2: Cài đặt dữ liệu mẫu và plugins

  • Khi bấm Import Demo Content, hệ thống sẽ chuyển sang tab Setting Page.

  • Tại đây, chọn nút Install Now để cài các plugin cần thiết.

Bước 3: Import dữ liệu demo

  • Sau khi cài xong plugin, chọn lại mục Travel Tour để bắt đầu import dữ liệu demo.

  • Sau bước này, website của bạn sẽ hiển thị các dữ liệu mẫu – đây chưa phải nội dung chính thức.

Tiếp tục chọn vào Travel Tour tương ứng để tiến hành cài đặt toàn bộ theme, tiến hành import data vào trang.

Tùy chỉnh giao diện​

  • Truy cập Customize.

  • Chọn Travel Tour Options.

  • Tại đây, bạn có thể chỉnh sửa giao diện theo mong muốn cá nhân hoặc yêu cầu nghiệp vụ.

Thêm bài viết Tour du lịch​

Vào menu bên trái, chọn New Trip (hoặc phần tương ứng nếu bạn đổi tên).

Tạo bài viết mới, điền các thông tin về tour: tên, mô tả, lịch trình, hình ảnh,...

Nhấn Public để hiển thị bài viết lên trang.

Tích hợp thanh toán với Forminator + VNPT Epay​

Đây là plugin dùng để tích hợp nhiều third party, giúp cho admin có nhiều công cụ hỗ trợ.

Điền thông tin của kênh thanh toán vào VNPT Epay

Mục tiêu: Kết nối form đặt tour với cổng thanh toán để khách hàng có thể thanh toán online.

Cài plugin Forminator (nếu chưa có).

Truy cập plugin -> Forms -> nhấn Create -> chọn Blank Form.

Thiết lập form thanh toán:

  • Đặt tên form, ví dụ: One-Pay.

  • Tạo các trường (field) phù hợp: tên, email, số tiền,...

  • Chọn Public cho form để có thể sử dụng trên website.

  • Truy cập Pages -> chọn Add New Page.

  • Gán shortcode hoặc form ID vào trang này.

  • Nhấn Publish để xuất bản.

Tích hợp thanh toán VNPT Epay với VinOTA​

Hướng dẫn Tích hợp Vin OTA vào website

Vào mục Vin-OTA -> Nhập thông tin tài khoản và mật khẩu được giao cho admin từ team Vin-wonders -> Chọn lưu

Bước hai: Vào đường dẫn /wp-admin/themes.php?page=travel-tour&tab=setting_page. Tiến hành thêm các thông tin như hình ảnh, bài viết

Admin truy cập vào đường dẫn /vin-ota/ để chọn thông tin mua vé. Website sau đó sẽ gửi thông tin vé. Khách hàng sau khi nhập thông tin cơ bản và chọn ngày mua. Website sẽ đưa khách hàng vào một trang payment của VNPT Epay. Hỗ trợ đa thanh toán

Sử dụng Simply Static để build dự án​

Bước một: Vào mục General ở Menu Setting -> Chọn Absolute URL và điền đường dẫn front end được cấu hình của admin -> Đồng thời chọn Force URL replacements để ghi đè lên các url hiện có ở source Bước hai: Đưa đường dẫn của wordpress chứa thư mục hình ảnh upload của trang admin. Bước ba: Thêm setting cho Gitlab(thông tin repo của front-end lưu trữ code) ở plugin Forminator Bước bốn: Nhấn nút Generate Static Files để thực thi việc deploy lên cloudflare

Lưu ý: Phải cấu hình cloudflare bắt sự kiện với việc merge ở gitlab để tiến hành build source. Và chỉ cho phép deploy dự án khi environtment là Production. Tránh việc bị tạo ra nhiều hàng chờ build mỗi lần merge request. Api Gitlab không cho phép upload quá 15 tệp mỗi lần gọi.

4. Kết luận​

Hệ thống website WordPress dành cho admin được xây dựng để:

Tối ưu chi phí triển khai cho doanh nghiệp nhỏ.

Dễ dàng mở rộng thành hệ sinh thái đa dạng.

Tích hợp nhanh, đồng bộ và có thể tùy biến sâu.

Nếu bạn có góp ý hoặc phát hiện lỗi, vui lòng điền vào form phản hồi bên dưới. Xin cảm ơn!