Cách tạo menu trong website

Tạo menu nhà hàng online trên website sẽ giúp nhà hàng của bạn gây được ấn tượng tốt với thực khách, đồng thời tăng cơ hội đặt hàng trực tuyến. Trong bài viết hôm nay, Diều Hâu sẽ hướng dẫn bạn cách tạo thực đơn 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 – Restaurant Menu & Food ordering. Hãy cùng tìm hiểu nhé!

[**] Trước khi bắt đầu tạo menu nhà hàng trực tuyến, bạn sẽ 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 nên bắt đầu từ đâu thì bạn có thể đọc các chia sẻ của chúng tôi dưới đây để có thêm kinh nghiệm xây dựng website nhà hàng hiệu quả:

Food Menu – Restaurant Menu & Online Ordering là một plugin miễn phí, cho phép bạn tạo menu nhà hàng trên website WordPress một cách nhanh chóng. 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 thực hiện chi tiết như sau:

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

Nếu chưa rõ cách thực hiện, bạn có thể xem thêm các 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 Food Menu -> Add Food.

Hệ thống sẽ hiển thị trang editor, 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 xong các thay đổi, hãy nhấp vào nút “Publish” để lưu món ăn lại 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 thao tác ở bước 2 là được.

Bạn có thể tùy chỉnh hình ảnh, thông tin, giá cả của món ăn ở mục “Add Food”

Bước 3: Sau khi đã hoàn thành việc thêm các món ăn, hãy chọn mục Food Menu ->  ShortCode Generator, rồi nhấp vào nút “Add New” để tạo menu nhà hàng mới trên trang web WordPress.

Để thêm Menu vào trang web, hãy vào mục Food Menu ->  ShortCode Generator, rồi nhấp nút “Add New”

Bước 4: Hệ thống sẽ chuyển sang trang “Add New Post”. 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 hiển thị trên menu,…

Trang tạo shortcode cho menu nhà hàng

Ở đây, chúng tôi sẽ giữ các thiết lập mặc định. Tuy nhiên, bạn cũng có thể điều chỉnh cách hiển thị của thực đơn thông qua các tab:

• Tab Layout: Cho phép bạn điều chỉnh bố cục menu, số lượng cột hiển thị [trên máy tính, tablet hoặc thiết bị di động], kích thước hình ảnh.
• Tab Filtering: Cho phép bạn lọc các món ăn theo categories, giới hạn số món ăn hiển thị, sắp xếp món ăn theo thứ tự mức giá tăng dần/giảm dần,…
• Tab Field Selection: 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á bán, đoạn mô tả.
• Tab Style: 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, font size,….

Khi đã thực hiện xong các thao tác chỉnh sửa, bạn có thể xem lại menu một cách trực quan ở mục “Layout Preview” phía cuối trang. Sau đó, hãy nhấp vào nút “Publish” [nằm ở phía 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 ý, việc “Publish” shortcode không làm cho menu xuất hiện trên trang web của bạn. Thao tác này chỉ có tác dụng lưu lại shortcode để sử dụng cho bước tiếp theo.

Các thay đổi của menu sẽ được hiển thị trực quan ở mục “Layout Preview”

Bước 5: Tạo trang mới, nơi mà 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 Pages -> Add New.

Tạo trang mới bằng cách chọn “Pages” -> “Add New”

Sau khi thực hiện thao tác trên, bạn sẽ được đưa đến trình editor để tùy chỉnh và đặt tiêu đề cho trang của mình. Hãy nhấp vào biểu tượng “+” để thêm một block nội dung mới. Tiếp đến, gõ vào thanh tìm kiếm cụm từ “Food Menu”, rồi chọn block “Food Menu”.

Gắn block “Food Menu” vào trang

Tại khu vực tùy chỉnh Block nằm bên phải trang, chọn tên menu mà bạn vừa tạo trong danh mục shortcode thả xuống.

Chọn thực đơn mà bạn muốn ở khu vực tùy chỉnh block

Sau khi đã thêm menu vào trang, nhấp nút “Publish” để tạo trang thực đơn cho website.

Ngoài ra, nếu muốn, bạn cũng có thể chỉnh sửa và thêm vào các nút chia sẻ mạng xã hội, contact form,… trên trang trước khi publish.

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

Dưới đây là kết quả hiển thị của menu sau khi bạn đã hoàn thành các thao tác thiết lập:

Hình ảnh hiển thị của thực đơn nhà hàng online

WooCommerce Food – Restaurant Menu & Food ordering 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 mức phí 46 USD cho giấy phép Regular License.

Mục đích thiết kế của WooCommerce Food là để tạo ra menu nhà hàng sống động và xây dựng một quy trình đặt thức ăn online 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 các vấn đề liên quan đến đặt món ăn trực tuyến, tích hợp cổng thanh toán,… Diều Hâu sẽ hẹn bạn trong một bài viết khác.

Bây giờ, hãy bắt đầu tạo menu nhà hàng với các hướng dẫn chi tiết sau đây nhé!

Bước 1: Do WooCommerce Food là một plugin bổ trợ cho Woocommerce, nên để dùng được plugin tạo menu nhà hàng này, trước tiên, bạn cần phải cài đặt và kích hoạt plugin Woocommerce. Cách cài đặt cũng 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ị website, chọn Products -> All Products để tạo danh sách các món ăn cho nhà hàng.

Sau thao tác này, bạn sẽ được đưa đến trang Products [sản phẩm]. Tại đây, bạn sẽ có 2 lựa chọn:

1. Nhấn vào nút “Create Product” nếu muốn nhập thủ công lần lượt từng món ăn.
2. Nhấn vào nút “Start Import” nếu muốn upload file CSV với danh sách nhiều món ăn cùng lúc. Trong trường hợp chưa có danh sách các món ăn của nhà hàng, bạn có thể tải file sample data tại đây và Import file lên website WordPress.

Bạn có thể thêm lần lượt từng món ăn hoặc Import hàng loạt

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

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

Bước 4: Trên trang quản trị WordPress, hãy chọn mục Products -> Categories để tạo menu nhà hàng mới. Khi đó, bạn có thể đặt tên, thêm mô tả, chỉnh sửa ảnh thumbnail,… cho menu theo ý mình.

Bạn có thể thêm menu mới bằng cách Add new Category

Bước 5: Để thêm món ăn mới vào thực đơn, tại trang quản trị WordPress, bạn chọn Products -> Add New.

Sau khi thực hiện thao tác này, hệ thống sẽ tự động chuyển sang trang “Add New Product”. Bạn có thể thêm món ăn mới vào thực đơn bằng cách click chọn Category phù hợp.

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

Có thể thêm món ăn vào menu bằng cách tùy chỉnh category cho product

Bước 6: Đến trang demo của Woocommerce Food, chọn kiểu thực đơn nhà hàng mà bạn muốn sử dụng. Sau đó, sao chép shortcode trên trang.

Ví dụ, nếu bạn muốn sử dụng bố cục Menu Filter Style 2,  thì cần sao chép mã 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:

Copy mã shortcode của kiểu menu bạn muốn chọn

Bước 7: Tại trang quản trị WordPress, chọn mục Pages -> Add New. Sau đó, dán mã shortcode vào và nhấn vào nút “Publish” để tạo trang thực đơn mới cho nhà hàng.

Dán mã shortcode vào trang thực đơn và nhấn “Publish” để đăng tải lên website

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

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

Kết thúc bài hướng dẫn chi tiết trên đây, hy vọng bạn đã biết cách để tạo menu nhà hàng trên website WordPress một cách nhanh chóng. Chúc bạn thành công!

Tiếp theo, bạn muốn chúng tôi viết về chủ đề gì? Những vấn đề WordPress nào vẫn còn đang khiến bạn trăn trở? Hãy đừng ngần ngại “nói ra tâm tư của mình” trong phần bình luận bên dưới nhé!