# Xây dựng website nhà hàng với WordPress URL: https://canvaswp.com/vi/guides/build-a-restaurant-website-with-wordpress/ Updated: 2026-11-03 Hướng dẫn Một website nhà hàng có bốn nhiệm vụ: giới thiệu món ăn, chứng minh không gian đáng để khách băng qua cả thành phố, nhận đặt bàn và thông báo cho mọi người khi bạn mở cửa. Hướng dẫn này làm được cả bốn việc đó, bắt đầu từ một bản cài WordPress trống và kết thúc bằng một trang web bạn có thể bàn giao cho khách hàng. Đã xuất bản 5 tháng 9, 2026 Cập nhật 3 tháng 11, 2026 Viết bởi nhóm Canvas tại SemiColonWeb ## Bước 1: Chuẩn bị WordPress Một trang web nhà hàng phụ thuộc vào ba cài đặt WordPress hơn hầu hết các trang khác, vì vậy hãy thiết lập chúng trước khi chỉnh sửa giao diện. - **Tiêu đề trang web và slogan.** Vào Cài đặt, rồi chọn Chung. Tên nhà hàng nên đặt trong tiêu đề, còn món ăn và khu vực đặt trong slogan. Tab trình duyệt, kết quả tìm kiếm và thẻ mà khách gửi cho bạn bè đều được tạo từ hai dòng này. - **Permalinks.** Cài đặt, rồi Permalinks, rồi Post name. Trang menu nhận một địa chỉ đủ ngắn để in trên thẻ bàn hoặc tờ rơi. - **Múi giờ.** Quay lại màn hình Chung, chọn thành phố của nhà hàng. Các yêu cầu đặt bàn được gắn dấu thời gian theo múi giờ này, và nếu chọn sai, đặt bàn của tối nay sẽ bị ghi nhận sang ngày mai. Mọi thứ khác khi chuẩn bị WordPress đều giống nhau với mọi website Canvas: phiên bản WordPress và PHP, một bản sao lưu bạn đã thực sự kiểm tra, và đủ bộ nhớ PHP cho các ảnh mà quá trình nhập tải xuống. Hướng dẫn nhập sẽ đề cập điều này một lần cho mọi dự án. [Yêu cầu hệ thống và bản sao lưu trước khi nhập](https://canvaswp.com/vi/guides/import-a-wordpress-demo-website/#before) Yêu cầu đặt bàn chỉ có giá trị nếu bếp nhìn thấy trước giờ phục vụ. WordPress chuyển thư của nó cho máy chủ của bạn trừ khi bạn cấu hình khác, và nhiều nhà cung cấp hosting âm thầm loại bỏ thư đó. Hãy thiết lập dịch vụ gửi email hoặc plugin SMTP ngay bây giờ và gửi thử một email cho chính bạn. ## Bước 2: Cài đặt Canvas và chạy Trình hướng dẫn cài đặt Tải tệp zip giao diện từ bảng điều khiển của bạn tại mục Appearance, Themes, Add New, rồi kích hoạt. Trình hướng dẫn cài đặt sẽ tự mở, và với dự án này, việc đó khá nhanh. - **Trước hết, cần có giấy phép.** Dán khóa giấy phép từ bảng điều khiển của bạn. Khóa này cho phép trình hướng dẫn tải bộ cài đặt nhà hàng ở bước tiếp theo. - Tìm kiếm **Italian Restaurant** ở bước chọn bản demo. Thẻ của bản demo liệt kê các trang, bài viết và món ăn mà nó mang theo trước khi bạn quyết định cài đặt. - **Để bước plugin tự động bỏ qua.** Thiết kế nhà hàng không cần gì thêm ngoài Canvas và plugin đồng hành mà trình hướng dẫn sẽ cài cho bạn. Nếu đóng trình hướng dẫn giữa chừng, quá trình sẽ được lưu trong menu Canvas cho đến khi bạn quay lại. **Bước chọn bản demo.** Tìm theo tên, rồi đọc nội dung trên thẻ để biết bản demo mang lại gì. [Chức năng của từng bước trong 9 bước của trình hướng dẫn](https://canvaswp.com/vi/setup-wizard/) ## Bước 3: Nhập bản demo nhà hàng Mở [bản xem trước trực tiếp](https://demos.canvaswp.com/restaurant/) của bản demo Italian Restaurant trước khi nhập, và nhấp vào menu cũng như trang đặt bàn. Bản xem trước chạy trên cùng giao diện bạn đang cài đặt, nên những gì hoạt động ở đó sẽ hoạt động với bạn. ### Toàn website, trên website mới Trên một bản cài đặt trống, hãy nhập toàn trang web. Phông chữ, màu sắc, Tùy chọn giao diện và menu của nhà hàng sẽ trở thành của trang web của bạn, nên trang ăn riêng bạn thêm vào mùa đông tới vẫn trông như thuộc về nơi này. Nhập vào một trang web đang hoạt động là lựa chọn còn lại, và hướng dẫn nhập sẽ giải thích khi nào phù hợp. ### Những gì bạn nhận được - 6 trang, từ trang chủ đến menu, phần câu chuyện và trang liên hệ - 6 bài viết blog kèm danh mục, để phần tin tức không trống ngay từ ngày đầu - 50 món ăn, mỗi món là một bản ghi Menu Item riêng - Một slider, một biểu mẫu đặt bàn hoạt động và 2 menu điều hướng được gán vào đúng vị trí - Thiết kế header, footer và tiêu đề trang, mỗi thiết kế là một bản ghi có thể chỉnh sửa - Ảnh chụp món ăn, được sao chép vào thư viện phương tiện của riêng bạn **Trang chủ sau khi nhập.** Nội dung thực tế, sẵn sàng để thay bằng nội dung của bạn. Nếu phòng ăn trong ảnh không giống nơi của bạn, hãy hoàn tác việc nhập từ Canvas, rồi chọn Demo Import và thử một trong các bản demo nhà hàng khác. Cài đặt trước đó của bạn cũng sẽ được khôi phục. [Phạm vi, các giai đoạn nhập và cơ chế hoàn tác, được giải thích một lần](https://canvaswp.com/vi/guides/import-a-wordpress-demo-website/) ## Bước 4: Thay thế chữ và hình ảnh trong bản demo Mở trang chủ từ mục Trang. Trình chỉnh sửa vẽ header, slider, dải Tiêu đề trang và footer bao quanh nội dung của bạn đúng như thực khách sẽ thấy, để bạn viết dòng chào mừng cùng trang thực tế xung quanh. ### Nhấp, nhập, thay thế Mọi tiêu đề, đoạn văn và hình ảnh trên trang đều là một khối. Nhấp vào khối để nhập đè lên nội dung, hoặc chọn Thay thế trên hình ảnh để chọn một bức ảnh của riêng bạn. Khung bên phải chứa mọi thiết lập khác mà khối đó hỗ trợ, từ màu sắc đến liên kết. ### Nói rõ điều cụ thể Nội dung demo được viết có chủ đích chung chung, nên dễ nhận ra và dễ vượt qua. Hãy thay "Authentic Italian cuisine" bằng điều chỉ bạn mới có thể nói: vùng xuất xứ của các công thức, tên người đứng bếp chính, loại gỗ dùng trong lò, giờ bánh mì ra lò. Thực khách đang chọn giữa hai nhà hàng sẽ đọc để tìm chi tiết, không phải tính từ. Khi một phần không phù hợp với nhà hàng của bạn, hãy xóa nó và đặt một mẫu bố cục vào vị trí đó. Có 183 mẫu bố cục để lựa chọn, mỗi mẫu được thêm vào dưới dạng các khối thông thường, sẵn sàng để sắp xếp lại. **Chỉnh sửa trang chủ.** Những gì bạn thấy khi đang gõ chính là những gì khách truy cập sẽ thấy. ## Bước 5: Tạo thực đơn món ăn Thực đơn là trang mà khách đến xem, nên nó xứng đáng được trình bày tốt hơn một đoạn văn bản. Bản demo cung cấp loại nội dung Menu Items với một bản ghi cho mỗi món ăn, được liệt kê trong trang quản trị giống như bài viết. ### Chỉnh sửa món ăn, không phải trang Mở Menu Items và chỉnh sửa một bản ghi: tên món, mô tả, ảnh, giá và danh mục thực đơn của món đó. Giá trị dinh dưỡng có sẵn dưới dạng các trường riêng nếu bạn muốn hiển thị. Lưu lại và trang thực đơn sẽ tự cập nhật, vì trang này chứa một khối hiển thị danh sách bản ghi và đọc lại dữ liệu mới mỗi lần. Chính sự tách biệt này giúp thực đơn dễ bảo trì. Khi giá một món thay đổi vào thứ Ba, bạn chỉ cần sửa một bản ghi, và mọi trang hiển thị món đó sẽ tự cập nhật theo. ### Nhóm menu giống cách nhà bếp phân loại món ăn Sử dụng danh mục menu cho món khai vị, mì ý, món chính, món tráng miệng và đồ uống. Khối Menu Items có thể hiển thị các danh mục này dưới dạng ô chuyển tab, dạng thẻ đơn giản hoặc băng chuyền, để danh sách dài vẫn dễ đọc trên điện thoại. Đặt số lượng món hiển thị, danh mục nguồn và thứ tự. Duyệt qua các bản ghi một lần, xóa những món bạn không phục vụ, rồi thêm món của bạn. Việc này nhanh hơn bạn nghĩ, và đây là lần cuối bạn phải nghĩ về bố cục. Hãy đăng giá dưới dạng con số mà bếp của bạn có thể duy trì suốt một mùa. Một trang thực đơn lỗi thời ba tháng gây thiệt hại nhiều hơn một trang thực đơn đơn giản hơn bạn mong muốn. ## Bước 6: Nhận đặt bàn bằng biểu mẫu Bản demo đi kèm một biểu mẫu hoạt động. Trong Canvas, biểu mẫu là một bản ghi được tạo từ các khối: khối Form chứa các trường, khối Form Field định nghĩa từng trường, Form Submit Button gửi biểu mẫu, còn khối Form Embed đưa biểu mẫu đã hoàn thiện vào bất kỳ trang nào. ### Các trường cần có cho việc đặt bàn - Trường **Ngày** và **Giờ**, với giờ sớm nhất và giờ muộn nhất. Đặt giờ sớm nhất là giờ bạn mở cửa và giờ muộn nhất là lượt phục vụ cuối cùng, rồi đặt khoảng cách giữa các lượt là mười lăm hoặc ba mươi phút để không nhận đặt chỗ lúc 19:07. - Trường **Number** cho số lượng khách, với giá trị tối thiểu và tối đa khớp với bàn lớn nhất của bạn. - Các trường **Văn bản** và **Điện thoại** cho tên và số điện thoại, cùng một trường **Email** để gửi xác nhận. - Một **Textarea** để ghi chú dị ứng, ghế cao và ngày kỷ niệm mà bạn có thể quên. - Một trường **Consent** (checkbox) nếu bạn định gửi email cho khách sau này, và một trường **Honeypot**, một bẫy vô hình âm thầm chặn phần lớn spam mà không làm phiền người thật. ### Các yêu cầu được gửi đi đâu Form đặt bàn của bản demo đi kèm các trường họ tên, số điện thoại và địa chỉ email, một bộ chọn ngày làm mờ những ngày đã qua, một menu chọn giờ và một menu chọn số lượng khách. Mỗi yêu cầu được lưu vào một bảng trên chính website của bạn, hiển thị tại mục Submissions trong quản trị WordPress. Form hiện chưa gửi email cho ai: hãy mở form, bật Send Email Notification trong tab Actions, rồi đặt địa chỉ là một địa chỉ mà có người đọc thường xuyên trong giờ phục vụ. Sau đó, hãy tự đặt một bàn và kiểm tra xem tin nhắn có đến nơi không. Hãy xem mỗi mục là một yêu cầu cần bạn xác nhận. Biểu mẫu chỉ ghi nhận yêu cầu đặt bàn; biểu mẫu không đếm số suất ăn hay giữ bàn. Nếu bạn cần kiểm tra chỗ trống theo thời gian thực, một hệ thống đặt bàn chuyên dụng là công cụ phù hợp, và hành động webhook của biểu mẫu có thể chuyển từng yêu cầu sang hệ thống đó. Cũng hãy thiết lập thời gian lưu giữ cho biểu mẫu, để số điện thoại của khách được xóa theo lịch bạn chọn. 83 trong số 88 bản demo có ít nhất một biểu mẫu hoạt động, nên phần lớn thời gian bạn chỉ cần chỉnh sửa biểu mẫu và phần kết nối đã được thiết lập sẵn. ## Bước 7: Đặt header, giờ mở cửa và thông tin liên hệ Header là nơi khách đang đói tìm số điện thoại, còn footer là nơi họ tìm địa chỉ. Cả hai đều là các bản ghi được tạo từ khối trong Canvas, và được chỉnh sửa giống như một trang. ### Header Một bản ghi header chứa các vùng, và mỗi vùng là một ô trong hàng header. Đặt logo vào ô đầu tiên, điều hướng vào ô giữa, và ở ô cuối cùng đặt một Header Icon Link kèm số điện thoại của bạn, bên cạnh một Header Button có nội dung “Đặt bàn”. Khối Header Info chứa địa chỉ hoặc giờ mở cửa khi còn đủ chỗ cho chúng. Thêm thanh top bar phía trên header để hiển thị giờ mở cửa hôm nay hoặc thông báo nghỉ lễ. Top bar là một bản ghi riêng, nên nội dung thông báo có thể thay đổi mà không cần mở header. ### Giờ mở cửa trong footer Footer dùng khối Footer Contacts cho địa chỉ và số điện thoại, kèm một cột giờ mở cửa bên cạnh. Hãy viết giờ mở cửa dưới dạng văn bản dễ đọc, rồi luôn cập nhật chính xác, vì không có gì khiến khách truy cập khó chịu hơn việc đến nơi và gặp cửa đóng. Cả đầu trang và chân trang đều có thiết lập mặc định cho toàn site và ghi đè theo từng trang, nên trang đích phục vụ tiệc riêng có thể dùng đầu trang trong suốt đặt trên một bức ảnh, trong khi phần còn lại của site vẫn giữ thiết lập riêng. [Toàn bộ trình tạo header và footer](https://canvaswp.com/vi/header-builder/) [So sánh bốn bản demo nhà hàng](https://canvaswp.com/vi/wordpress-themes/restaurant/) ## Bước 8: Kiểm tra, rồi mở Hãy làm hết danh sách này trước khi bạn giới thiệu trang web cho bất kỳ ai. Danh sách ngắn, và mỗi mục trong đó đều từng khiến ai đó xấu hổ. - **Gửi một đặt chỗ thử thật** từ điện thoại của bạn, khi tắt wifi nhà hàng, và xác nhận thông báo đã đến. - **Hãy đọc mọi trang trên điện thoại.** Phần lớn người đang tìm chỗ ăn tối nay đều đang đứng. - **Kiểm tra địa chỉ, số điện thoại và giờ mở cửa** trên mọi trang lặp lại các thông tin này, kể cả footer. - **Viết alt text** cho ảnh. Điều này hỗ trợ người dùng trình đọc màn hình, và công cụ tìm kiếm đọc nội dung này cùng với trang để hiểu không gian phòng ăn của bạn. - **Hãy xem màn hình SEO.** Canvas tạo tiêu đề, mô tả, thẻ chia sẻ và dữ liệu có cấu trúc từ nội dung trực tiếp của bạn, nên việc cần làm ở đây là khiến nội dung cụ thể hơn, thay vì điền thêm một bộ ô khác. - **Bật các công tắc hiệu suất** mà bạn cần. Có 35 tối ưu hóa, mỗi cái đều có thể hoàn tác, và mỗi cái tải ít hơn những gì trang của bạn không bao giờ dùng đến. Sau đó xuất bản, đưa địa chỉ vào những nơi mọi người tìm kiếm, và quay lại quản lý nhà hàng. Trang web giờ là tập hợp các bản ghi mà bạn chỉnh sửa khi thực đơn thay đổi, chứ không phải một dự án. ## Nguồn Khi hướng dẫn này mô tả nội dung nằm ngoài chính Canvas, đây là các trang chính thức có tài liệu về nội dung đó. - [Màn hình Cài đặt chung](https://wordpress.org/documentation/article/settings-general-screen/) wordpress.org · Nơi WordPress lưu tiêu đề website và khẩu hiệu, cùng với múi giờ trên cùng một màn hình - [Màn hình Cài đặt Permalinks](https://wordpress.org/documentation/article/settings-permalinks-screen/) wordpress.org · Cấu trúc Tên bài viết, giúp mỗi trang có một địa chỉ ngắn gọn, dễ đọc - [wp_mail()](https://developer.wordpress.org/reference/functions/wp_mail/) developer.wordpress.org · WordPress mặc định chuyển thư cho hàm mail() của PHP, và việc gửi thành công không chứng minh thư đã được nhận. - [Hướng dẫn hình ảnh](https://www.w3.org/WAI/tutorials/images/) w3.org · Trình đọc màn hình đọc to văn bản thay thế của hình ảnh - [Nguyên tắc chung về dữ liệu có cấu trúc](https://developers.google.com/search/docs/appearance/structured-data/sd-policies) developers.google.com · Đánh dấu đúng cách giúp có kết quả nổi bật, còn Google quyết định có hiển thị hay không Việc nên làm tiếp theo ## Bước tiếp theo Hai hướng dẫn cho những công việc sau khi ra mắt, cùng bản demo đứng sau hướng dẫn này. [Hướng dẫn **Bắt đầu một cửa hàng WooCommerce** Điều gì thay đổi khi bản demo bạn đang nhập là một cửa hàng hoạt động.](https://canvaswp.com/vi/guides/start-a-woocommerce-store-with-wordpress/) [Hướng dẫn **Viết nội dung website bằng AI** Thiết lập mô tả doanh nghiệp một lần, sau đó tạo nội dung ngay trong trường bạn đang chỉnh sửa.](https://canvaswp.com/vi/guides/write-website-copy-with-ai-in-wordpress/) [Sản phẩm **Giao diện nhà hàng** Bản demo mà hướng dẫn này bắt đầu từ đó, xem trước theo từng trang.](https://canvaswp.com/vi/wordpress-themes/restaurant/) Câu hỏi ## Câu hỏi thường gặp [FAQ đầy đủ](https://canvaswp.com/vi/faq/) trả lời các thắc mắc còn lại, và [tài liệu](https://docs.canvaswp.com/) giải thích chi tiết mọi cài đặt. **Tôi có cần plugin để nhận đặt bàn không?** Không, đặt bàn trên website nhà hàng Canvas được thực hiện qua một biểu mẫu xây dựng từ các khối Canvas. Dữ liệu gửi được lưu trong một bảng trên website của bạn và được liệt kê trong quản trị WordPress. Bạn chỉ cần thêm plugin nếu muốn chuyển các đặt chỗ sang hệ thống đặt chỗ bên thứ ba để quản lý bàn và số lượng khách. **Bạn có thể dùng ảnh chụp của riêng mình không?** Có, và bạn nên thay thế mọi hình ảnh mà bản demo nhà hàng cung cấp bằng ảnh của riêng bạn. Mọi hình ảnh trong bản demo đều được thêm vào thư viện media dưới dạng tệp đính kèm thông thường, nên việc thay thế một hình ảnh cũng giống như thay thế bất kỳ hình ảnh nào khác trong WordPress. Hãy giữ kích thước gần với hình gốc để bố cục không bị xô lệch, và trong lúc đó, viết một mô tả ngắn vào trường văn bản thay thế (alt text). **Nếu bạn không thích bản demo nhà hàng thì sao?** Hoàn tác và nhập một bản demo Canvas khác trong 88 bản demo Canvas, vì mọi gói đều bao gồm tất cả và mỗi lần nhập được theo dõi riêng biệt. Một bản demo thứ hai cũng có thể được nhập chỉ cho các trang của nó, giữ nguyên thiết kế bạn đang có. **Giá trong menu có hiển thị trên Google không?** Canvas tạo dữ liệu có cấu trúc từ nội dung hiển thị trên trang tại thời điểm render, với 16 loại schema, bao gồm giờ mở cửa, ưu đãi và đánh giá. Việc công cụ tìm kiếm chọn hiển thị gì là quyết định của riêng họ, nhưng đánh dấu dữ liệu đã có sẵn mà không cần thêm plugin SEO thứ hai.