2 cách tạo menu nhà hàng đơn giản trên website [NEW]

Tạo thực đơn nhà hàng trực tuyến trên trang web của bạn sẽ giúp nhà hàng của bạn tạo ấn tượng tốt với thực khách và tăng cơ hội đặt hàng trực tuyến. Trong bài viết hôm nay, Hawk sẽ hướng dẫn bạn cách tạo menu nhà hàng đẹp mắt trên website WordPress với sự hỗ trợ của 2 plugin là Food Menu và WooCommerce Food – Menu nhà hàng & Đặt món ăn. Chúng ta cùng nhau tìm hiểu nhé!

(**) Trước khi bắt đầu tạo menu nhà hàng trực tuyến, bạn cần thiết lập một trang web WordPress cho nhà hàng / quán ăn của mình. Nếu vẫn chưa biết bắt đầu từ đâu, bạn có thể đọc những chia sẻ dưới đây của chúng tôi để có thêm kinh nghiệm xây dựng website nhà hàng hiệu quả:

  • Trang web cung cấp tên miền miễn phí + Hosting miễn phí
  • Hướng dẫn cài đặt WordPress
  • Các chủ đề tốt nhất cho nhà hàng
  • Các plugin miễn phí tốt nhất cho nhà hàng

Phương pháp 1: Thiết kế thực đơn nhà hàng trên trang web WordPress của bạn với Thực đơn thực phẩm

Thực đơn Thực phẩm – Thực đơn Nhà hàng & Đặt hàng Trực tuyến là một plugin miễn phí cho phép bạn nhanh chóng tạo thực đơn nhà hàng trên trang web WordPress của mình. Ngoài ra, plugin này tích hợp rất tốt với WooCommerce nên có thể hỗ trợ đặt hàng trực tuyến dễ dàng.

Các bước chi tiết như sau:

Bước 1: Cài đặt và kích hoạt plugin Food Menu.

Nếu bạn không chắc chắn về cách thực hiện việc này, bạn có thể xem hướng dẫn cài đặt plugin cho người mới bắt đầu.

Bước 2: Sau khi kích hoạt thành công, tại trang quản trị website, chọn Thực đơn -> Thêm thức ăn.

Hệ thống sẽ hiển thị trang soạn thảo, cho phép bạn nhập tên, thêm mô tả, hình ảnh, giá cả,… cho món ăn.

Sau khi thực hiện các thay đổi, hãy nhấp vào nút “Công bố”Để lưu món ăn trong thực đơn của bạn.

Nếu muốn thêm nhiều món hơn vào menu nhà hàng, bạn chỉ cần thực hiện lại các bước ở bước 2.

Bạn có thể tùy chỉnh hình ảnh, thông tin, giá cả món ăn trong
Bạn có thể tùy chỉnh hình ảnh, thông tin, giá cả món ăn trong “Thêm thức ăn” tiết diện

Bước 3: Sau khi bạn thêm các món ăn xong, hãy chọn món Thực đơn -> Bộ tạo mã ngắnvà sau đó nhấp vào nút “Thêm mới”Để tạo thực đơn nhà hàng mới trên trang WordPress.

    Để thêm Thực đơn vào trang web, hãy đi tới Thực đơn Thực phẩm -> Trình tạo Mã ngắn, sau đó nhấp vào nút “Thêm mới”” chiều rộng =”1131″ chiều cao =”614″ srcset =”https://dieuhau.com/wp-content/uploads/2021/10/Tao-menu-tren-website-WordPress_02.jpg 1131w, https://dieuhau.com/wp-content/uploads/2021/10/Tao -menu-tren-website-WordPress_02-300×163.jpg 300w, https://dieuhau.com/wp-content/uploads/2021/10/Tao-menu-tren-website-WordPress_02-1024×556.jpg 1024w, https: / /dieuhau.com/wp-content/uploads/2021/10/Tao-menu-tren-website-WordPress_02-768×417.jpg 768w” data-lazy-Size =”(chiều rộng tối đa: 1131px) 100vw, 1131px” src =”https://dieuhau.com/wp-content/uploads/2021/10/Tao-menu-tren-website-WordPress_02.jpg”><noscript><img class= Trình tạo Mã ngắn, sau đó nhấp vào nút “Thêm mới”” chiều rộng =”1131″ chiều cao =”614″ srcset =”https://dieuhau.com/wp-content/uploads/2021/10/Tao-menu-tren-website-WordPress_02.jpg 1131w, https://dieuhau.com/wp-content/uploads/2021/10/Tao -menu-tren-website-WordPress_02-300×163.jpg 300w, https://dieuhau.com/wp-content/uploads/2021/10/Tao-menu-tren-website-WordPress_02-1024×556.jpg 1024w, https: / /dieuhau.com/wp-content/uploads/2021/10/Tao-menu-tren-website-WordPress_02-768×417.jpg 768w” kích thước =”(chiều rộng tối đa: 1131px) 100vw, 1131px”>
Để thêm Thực đơn vào trang web, hãy đi tới Thực đơn Thực phẩm -> Trình tạo Mã ngắn, sau đó nhấp vào nút “Thêm mới”

Bước 4: Hệ thống sẽ chuyển sang trang “Thêm bài mới”. Tại đây, bạn có thể đặt tiêu đề cho shortcode của mình và thực hiện các tùy chỉnh về bố cục, số lượng món ăn được hiển thị trên thực đơn và hơn thế nữa.

Trang tạo mã ngắn cho menu nhà hàng
Trang tạo mã ngắn cho menu nhà hàng

Ở đây, chúng tôi sẽ giữ các cài đặt mặc định. Tuy nhiên, bạn cũng có thể điều chỉnh giao diện của menu thông qua các tab:

  • Tab bố cục: Cho phép bạn điều chỉnh bố cục menu, số cột hiển thị (trên máy tính để bàn, máy tính bảng hoặc thiết bị di động), kích thước hình ảnh.
  • Tab lọc: Cho phép bạn lọc món ăn theo danh mục, giới hạn số lượng món ăn được hiển thị, sắp xếp món ăn theo thứ tự giá tăng / giảm dần, v.v.
  • Tab Lựa chọn Trường: Cho phép bạn tùy chọn hiển thị các trường như: tên món ăn, hình ảnh, giá cả, mô tả.
  • Tab Kiểu: Cho phép bạn chỉnh sửa các yếu tố liên quan đến giao diện menu như: màu sắc của các trường nội dung, cỡ chữ,….

Khi bạn hoàn tất các thao tác chỉnh sửa, bạn có thể xem lại menu một cách trực quan trong “Xem trước bố cục” ở cuối trang. Sau đó nhấp vào nút “Công bố”(Nằm ở góc trên bên phải màn hình) để hoàn thành việc tạo menu nhà hàng.

Lưu ý, mã ngắn “Xuất bản” không làm cho menu xuất hiện trên trang web của bạn. Thao tác này sẽ chỉ lưu mã ngắn để sử dụng trong bước tiếp theo.

Các thay đổi về menu sẽ được hiển thị trực quan trong phần “Xem trước bố cục”.
Các thay đổi về menu sẽ được hiển thị trực quan trong phần “Xem trước bố cục”.

Bước 5: Tạo một trang mới nơi menu của bạn sẽ hiển thị. Để thực hiện việc này, trên trang quản trị, hãy chọn mục Các trang -> Thêm mới.

Tạo một trang mới bằng cách chọn “Trang” -> “Thêm mới”” chiều rộng =”761″ chiều cao =”410″ srcset =”https://dieuhau.com/wp-content/uploads/2021/10/Tao-menu-tren-website-WordPress_05.png 761w, https://dieuhau.com/wp-content/uploads/2021/10/Tao -menu-tren-website-WordPress_05-300×162.png 300w” data-lazy-Size =”(chiều rộng tối đa: 761px) 100vw, 761px” src =”https://dieuhau.com/wp-content/uploads/2021/10/Tao-menu-tren-website-WordPress_05.png”><noscript><img class= “Thêm mới”” chiều rộng =”761″ chiều cao =”410″ srcset =”https://dieuhau.com/wp-content/uploads/2021/10/Tao-menu-tren-website-WordPress_05.png 761w, https://dieuhau.com/wp-content/uploads/2021/10/Tao -menu-tren-website-WordPress_05-300×162.png 300w” kích thước =”(chiều rộng tối đa: 761px) 100vw, 761px”>
Tạo một trang mới bằng cách chọn “Trang” -> “Thêm mới”

Sau khi thực hiện các bước trên, bạn sẽ được đưa đến trình chỉnh sửa để tùy chỉnh và đặt tiêu đề cho trang của mình. Nhấp vào biểu tượng “+” để thêm khối nội dung mới. Tiếp theo, gõ vào thanh tìm kiếm cụm từ “Thực đơn thức ăn”, sau đó chọn khối “Thực đơn thức ăn”.

Đính kèm khối “Thực đơn thức ăn” vào trang
Đính kèm khối “Thực đơn thức ăn” vào trang

Trong khu vực tùy chỉnh Chặn ở phía bên phải của trang, hãy chọn tên menu bạn vừa tạo trong menu thả xuống mã ngắn.

Chọn menu bạn muốn trong khu vực tùy chỉnh khối
Chọn menu bạn muốn trong khu vực tùy chỉnh khối

Sau khi thêm menu vào trang, hãy nhấp vào nút “Công bố”Để tạo trang menu cho trang web.

Ngoài ra, nếu muốn, bạn cũng có thể chỉnh sửa và thêm các nút chia sẻ xã hội, biểu mẫu liên hệ,… trên trang trước khi xuất bản.

Giờ đây, khi khách hàng truy cập trang web của bạn, họ có thể thấy thực đơn trực tuyến của bạn với tất cả các món ăn và giá cả. Thậm chí nếu nó tích hợp với WooCommerce, thực khách thậm chí có thể đặt hàng trực tuyến.

Đây là kết quả menu được hiển thị sau khi bạn đã hoàn tất các thao tác thiết lập:

Hình ảnh hiển thị của menu nhà hàng trực tuyến
Hình ảnh hiển thị của menu nhà hàng trực tuyến

Phương pháp 2: Thiết kế menu nhà hàng trên trang web WordPress của bạn với WooCommerce Food – Thực đơn nhà hàng & Đặt món ăn

WooCommerce Food – Thực đơn nhà hàng & Đặt món ăn là một plugin hỗ trợ WooCommerce cực kỳ mạnh mẽ, được phát triển bởi Ex-Themes. Hiện tại, bạn có thể mua plugin này trên Codecanyon với giá 46 đô la cho Giấy phép Thông thường.

Mục đích thiết kế của WooCommerce Food là tạo ra các thực đơn nhà hàng sôi động và xây dựng quy trình đặt món ăn trực tuyến dễ dàng, liền mạch. Tuy nhiên, trong khuôn khổ bài viết này, chúng tôi sẽ chỉ dừng lại ở việc hướng dẫn cách tạo menu nhà hàng với WooCommerce Food. Còn những vấn đề liên quan đến đặt món ăn trực tuyến, tích hợp cổng thanh toán,… thì Hawk hẹn gặp bạn trong một bài viết khác.

Bây giờ, chúng ta cùng bắt đầu tạo menu nhà hàng theo hướng dẫn chi tiết sau đây nhé!

Bước 1: Vì WooCommerce Food là một plugin bổ sung cho Woocommerce nên để sử dụng plugin tạo menu nhà hàng này, trước tiên bạn cần cài đặt và kích hoạt plugin Woocommerce. Cài đặt tương tự như các plugin khác.

Bước 2: Cài đặt và kích hoạt plugin WooCommerce Food.

Bước 3: Trên trang quản trị trang web, hãy chọn Các sản phẩm -> Tất cả sản phẩm để tạo danh sách các món ăn cho nhà hàng.

Sau đó, bạn sẽ được đưa đến trang Sản phẩm. Tại đây, bạn sẽ có 2 lựa chọn:

  1. Nhấn nút “Tạo sản phẩm”Nếu bạn muốn nhập thủ công lần lượt từng món ăn.
  2. Nhấn nút “Bắt đầu nhập”Nếu bạn muốn tải lên tệp CSV có danh sách nhiều món ăn cùng một lúc. Trong trường hợp bạn chưa có danh sách các món ăn của nhà hàng, bạn có thể tải tệp dữ liệu mẫu tại đây và nhập tệp vào trang web WordPress.
Bạn có thể thêm từng món một hoặc Nhập hàng loạt
Bạn có thể thêm từng món một hoặc Nhập hàng loạt

Sau khi nhập tệp dữ liệu, bạn sẽ nhận được danh sách các món ăn với thông tin chi tiết như hình dưới đây:

Danh sách các món ăn của nhà hàng
Danh sách các món ăn của nhà hàng

Bước 4: Trên trang quản trị WordPress, hãy chọn Các sản phẩm -> Thể loại để tạo thực đơn nhà hàng mới. Sau đó, bạn có thể đặt tên, thêm mô tả, chỉnh sửa hình ảnh thu nhỏ,… cho menu theo ý muốn.

Bạn có thể thêm menu mới bằng cách Thêm danh mục mới
Bạn có thể thêm menu mới bằng cách Thêm danh mục mới

Bước 5: Để thêm món mới vào menu, trong trang quản trị WordPress, hãy chọn Các sản phẩm -> Thêm mới.

Sau khi thực hiện việc này, hệ thống sẽ tự động chuyển sang trang “Thêm sản phẩm mới”. Bạn có thể thêm các món ăn mới vào menu bằng cách nhấp vào Danh mục phù hợp.

(**) Ngoài ra, tại đây, bạn cũng có thể tùy chỉnh rất nhiều yếu tố liên quan đến món ăn như: giá cả, thành phần dinh dưỡng của món ăn (chất đạm, chất béo, cholesterol, chất xơ, …), hình ảnh món ăn, hơn thế nữa giá ưu đãi,….

Bạn có thể thêm các món ăn vào menu bằng cách tùy chỉnh danh mục sản phẩm
Bạn có thể thêm các món ăn vào menu bằng cách tùy chỉnh danh mục sản phẩm

Bước 6: Vào trang demo của Woocommerce Food, chọn loại menu nhà hàng bạn muốn sử dụng. Sau đó sao chép mã ngắn trên trang.

Ví dụ: nếu bạn muốn sử dụng bố cục Menu Filter Style 2, bạn cần sao chép shortcode: [ex_wf_grid column=”4″ count=”99″ posts_per_page=”8″ page_navi=”loadmore” menu_filter=”show” enable_search=”yes”]

Xem hình minh họa bên dưới:

Sao chép mã ngắn của kiểu menu bạn muốn chọn
Sao chép mã ngắn của kiểu menu bạn muốn chọn

Bước 7: Trong trang quản trị WordPress, hãy chọn Các trang -> Thêm mới. Sau đó, dán mã ngắn và nhấp vào nút “Công bố”Để tạo trang menu mới cho nhà hàng.

Dán mã ngắn vào trang menu và nhấp vào “Xuất bản” để tải lên trang web
Dán mã ngắn vào trang menu và nhấp vào “Xuất bản” để tải lên trang web

Sau khi hoàn thành, bạn sẽ nhận được một trang menu nhà hàng với giao diện như sau:

Giao diện menu nhà hàng sau khi hoàn thành
Giao diện menu nhà hàng sau khi hoàn thành

Đến phần cuối của hướng dẫn chi tiết ở trên, hy vọng bạn đã biết cách tạo menu nhà hàng nhanh chóng trên trang web WordPress của mình. Chúc may mắn!

Tiếp theo, bạn muốn chúng tôi viết về điều gì? Vấn đề WordPress nào vẫn đang làm bạn gặp khó khăn? Đừng ngần ngại “nói ra suy nghĩ của bạn” trong phần bình luận bên dưới!