Giao Diện Web Bán Hàng Wordpress Free

Để thực hành tạo được một trang web bán hàng bằng wordpress, điều kiện tiên quyết bạn cần phải học qua loạt bài: Học WordPress căn bản với 7 bài hướng dẫn tạo trang web wordpress.

Cách 1: Cài đặt trực tiếp từ trang quản trị web wordpress

vào trang web của mình, điều trước tiên bạn cần làm là phải có một trang web wordpress đã được cài đặt thành công lên Hosting. Để làm được điều này, bạn xem lại chuỗi

. Chuỗi bài gồm 7 bài hướng dẫn này sẽ giúp bạn biết cách cài đặt một trang web wordpress từ lúc chưa có gì đến lúc có được một trang web chạy được trên môi trường internet (mặc dù chưa trang điểm cho trang web thật đẹp).

Trong ví dụ này, chúng ta sẽ sử dụng trang web www.shop.hoclamwebsite.vn để cài đặt giao diện Storefront.

Hình trên là giao diện trang web sau khi chúng ta cài đặt thành công phần mềm wordpress lên hosting của chúng ta. Chúng ta đã có được một trang web, nhưng giao diện của nó đang là trạng thái mặc định, chưa có giao diện đẹp hay các chức năng giành cho việc tạo hàng hóa và giao dịch mua bán. Bây giờ ta sẽ tiến hành cài đặt giao diện trang web mới bằng theme Storefront qua các bước sau:

Bạn điền từ khóa Storefront vào ô tìm kiếm và bấm Enter. Giao diện Storefront hiện ra.

Bạn rê chuột lên giao diện Storefront, giao diện hiển thị lên nút Cài đặt, bạn kích chọn chức năng này.

WordPress sẽ cài đặt giao diện này, sau đó tại vị trí nút bấm Cài đặt sẽ đổi thành

Sau khi kích hoạt thành công, giao diện trang quản trị sẽ cho bạn thấy giao diện Storefront đã được cài đặt và nằm trong danh sách các theme wordpress của trang web.

Bây giờ, bạn trở lại trang web và bấm

để refresh trang web. Giao diện trang web của bạn đã thay đổi về giao diện Storefront.

Cách 2: Cài đặt bằng cách upload theme Storefront lên bằng Filezilla

Thay vì cài đặt trực tiếp trên trang quản trị trang web, bạn có thể cài đặt giao diện này bằng cách thông qua công cụ Filezilla. Để thực hiện điều này, các bạn làm tuần tự theo các bước sau:

Bạn vào trang chủ www.wordpress.org, sau đó dùng từ khóa Storefront để tìm kiếm theme Storefront. Sau đó bấm vào nút download để down về máy tính.

Bạn mở ứng dụng Filezilla (xem lại bài viết upload mã nguồn lền hosting bằng filezilla) và dùng tài khoản quản trị Hosting để đăng nhập vào hosting với filezilla.

Sau khi đăng nhập Hosting bằng filezilla, bạn kích chọn vào thư mục public_html > tendomain (trong ví dụ này là shop) > wp-content > themes. Tại thư mục theme này, bạn chưa thấy giao diện nào khác lạ ngoài các giao diện mặc định mà khi cài wordpress đã cài đặt luôn sẵn các giao diện này.

Bây giờ bạn vào thư mục chứa theme Storefront đã tải về ở bước trên và giải nén ra thành thư mục.

Kết quả sau khi giải nén ta được thư mục chứa các file giao diện Storefront

Tiếp theo, bạn chỉ việc chọn thư mục storefront và kéo thả vào thư muc theme ở giao diện filezilla.

Phần mềm filezilla sẽ tự động copy tất cả các file của giao diện Storefront lên trên wordpress. Việc của bạn bây giờ chỉ là chờ phần mềm copy xong và thực hiện bước tiếp theo.

Bạn đăng nhập vào quản trị trang web của mình, vào khu vực Giao diện  và kích hoạt giao diện Storefront mới vừa cài đặt

Trở về trang chủ, bấm F5 để làm tươi trang web. Thế là bạn đã có giao diện của một trang web bán hàng theo Storefront.

Truy cập kho giao diện mẫu website bán hàng

Để lựa chọn giao diện web bán hàng, bạn truy cập vào trang chủ www.wordpress.org. Sau đó kích chọn vào menu Themes để vào khu vực giao diện.

Sau đó, bạn chọn vào Feature Filter để hiển thị danh sách chọn giao diện theo chủ đề. Tại bảng chọn giao diện, tại cột Subject, bạn kích chọn vào E-Commerce để chọn hiển thị các giao diện mẫu theo chủ đề thương mại điện tử. Sau đó bấm Apply Filters để hiển thị kết quả.

Kết quả của việc chọn lựa các giao diện thương mại điện tử để thể hiện được hiển thị ra bảng bên dưới.

Bạn chỉ viện lăn chuột xem các mẫu giao diện và kích chọn vào các giao diện ưng ý để xem trước và sau đó có thể download về để cài đặt.

Để cài đặt các thông số chung cho trang web như:

Để cài đặt giao diện trang web, bạn vào trang quản trị, chọn phần giao diện > Tùy chỉnh

Một giao diện tùy chỉnh trang web xuất hiện. Tùy thuộc vào loại giao diện mà các bạn cài đặt, các menu trong này có thể sẽ khác nhau.

Bạn kích vào nhận dạng Site trên bảng danh sách các cài đặt trên. Một giao diện trong nhận dạng site xuất hiện. Ở đây bạn có thể thiết lập logo cho trang web, đặt biểu tượng cho trang web (icon).

Bấm vào chọn Logo để bắt đầu upload logo lên web.

Bấm chọn vào Chọn tập tin để chọn file Logo từ máy tính.

Chọn file hình ảnh logo và bấm open để upload file ảnh lên.

Bấm chọn để chọ logo vừa up lên

Bấm cắt ảnh để thay đổi kích cỡ logo

Logo trang web đã xuất hiện, bạn bấm vào Lưu và đăng để đăng logo trang web lên hệ thống.

Biểu tượng (icon) trang web là hình ảnh trên thanh địa chỉ trang web. Nếu bạn chưa cài đặt biểu tượng trang web, nó sẽ mặc định là một file trắng:

Để cài đặt biểu tượng này về biểu tượng của cửa hàng của bạn, bạn thực hiện tuần tự như sau: Bấm vào chọn ảnh để bắt đầu đưa ảnh biểu tượng icon lên.

Bấm vào nút Chọn tập tin để vào máy tính upload lên.

Chọn biểu tượng site trên máy tính và open để load lên.

Chọn biểu tượng đã upload lên thư viện trang web.

Chọn bỏ cắt (nếu không muốn thay đổi kích cỡ biểu tượng của trang đã load lên) hoặc chọn cắt nếu muốn thay đổi kích cỡ ảnh.

Lưu thay đổi để cập nhật biểu tượng site lên hệ thống

Và kết quả là biểu tượng trang của bạn đã được hiển thị:

Ngoài các cài đặt về logo và icon cho trang, bạn có thể cài đặt tiêu đề và Slogan cho trang web của mình tại mục Cài đặt nhận dạng site.

Tại đầu trang (header) bạn có thể đặt hình ảnh hoặc chọn màu nền cho phần này, hoặc cài đặt màu sắc của font chữ (các menu tại header) và màu của các liên kết....

Tại đây, bạn có thể lựa chọn các màu sắc muốn hiển thị cho nền của header.

Thay vì header bạn chọn màu, bạn có thể chọn thể hiện nền header bằng hình ảnh. Bạn bấm Thêm ảnh mới tại Tiêu đề hiện tại.

Bạn bấm Chọn tập tin để chọn hình ảnh từ máy tính.

Bạn chọn hình nền đã được chuẩn bị sẵn từ máy tính (lưu ý, giao diện gợi ý lựa chọn kích thước hình nền cho header là 1950x500 px tương ứng với chiều cao ảnh là 500px và chiều rộng ảnh là 1950 px; Bạn có thể download từ trên internet hoặc tự thiết kế riêng cho mình các hình ảnh với các kích thước mong muốn bằng các phần mềm như Photoshop).

Bạn chọn hình nền đã load lên thư viện và bấm Chọn và cắt để tiếp tục.

Tại bước này bạn có thể chọn Cắt nếu muốn thay đổi kích thước hoặc Bỏ cắt nếu giữ nguyên kích thước ảnh (ví dụ này đã chọn bức ảnh đúng kích thước gợi ý của trang web là 1950x500px nên sẽ chọn Bỏ cắt).

Sau đó, hình nền trang web đã xuất hiện, bạn chỉ cần bấm Lưu và đăng để cập nhật hình nền trên hệ thống.

Widget là các ứng dụng mở rộng có thể thêm vào các vị trí trên trang web (do giao diện trang web quy định vị trí xuất hiện). Với giao diện này (Storefront), các Widget có thể thêm vào Sildebar (thanh bên). Với hình bên dưới, bạn có thể thấy rằng hiện tại mặc định giao diện ban đầu cung cấp các Widget như Tìm kiếm, Phản hồi gần đây, Lưu trữ, Chuyên mục,...Trong ví dụ này, ta sẽ thêm một Widget là các văn bản bất kỳ.

Khi bấm vào Slidebar, thanh bên trái hiển thị các Widget mặc định đã có của wordress trang bị cho trang web.

Bạn chọn vào +Thêm một widget, menu các Widget mở rộng bên phải xuất hiện. Ở đây bạn có thể chọn bất kỳ Widget nào để thêm vào Slidebar của mình. Tuy nhiên để có thêm nhiều Widget với nhiều tính năng hơn nữa bạn cần cài đặt các Plugin mở rộng cho trang web của mình (tùy theo yêu cầu tính năng mà bạn lựa chọn các Plugin).

Sau khi nhập các nội dung vào Widget văn bản, thanh slidebar bên phải đã xuất hiện khu vực mới. Bạn có thể bấm chọn Lưu và đăng để giữ Widget này hiển thị hoặc bỏ qua việc này bằng cách bấm thoát hộp nhập thông tin cho Widget văn bản.

Với theme giao diện Storefront, bạn sẽ có 4 vị trí dưới chân trang để thêm các mục thông tin. Thông thường dưới chân trang các trang web mua bán là nội dung liên hệ, các sản phẩm hoặc các điều khoản mua bán, sử dụng dịch vụ,...Tùy thuộc và nhu cầu thực tế mà bạn sẽ chọn các widget phù hợp hoặc cài thêm các Plugin để có được các Widget mong muốn.

Bạn chọn vào Footer 1 để xuất hiện danh sách các Plugin có thể cài đặt cho vị trí thứ nhất dưới chân trang. Tương tự widget cho slidebar thực hiện bên trên, bạn có thể chọn Widget Văn bản.

Bạn nhập các thông tin muốn xuất hiện cho Widget chân trang tại vị trí đầu tiên

Tương tự các thao tác trên, bạn có thể thêm nội dung cho các vị trí số 2, 3 và 4 cho chân trang web của mình.

Nếu bạn biết lập trình một cách thành thạo và có thể thiết kế website bán hàng chuyên nghiệp như các đơn vị thiết kế web site khác thì những phần này không phải là vấn đề đối với bạn. Tuy nhiên, điều mà chúng ta đang bàn đến ở đây là vận dụng các công cụ tiện ích với những người không nhiều kỹ năng về lập trình và công nghệ. Và việc ứng dụng các công cụ như Wordpress vào thiết kế web bán hàng là điều đáng được quan tâm.

Đến hiện tại, ta đã cơ bản xây dựng được giao diện một trang web. Tuy nhiên tính năng bán hàng chưa xuất hiện trên trang web này. Để làm được điều này, ta phải cài đặt các Plugin quan trọng hỗ trợ tính năng bán hàng và quản lý sản phẩm, đó là Plugin Woocommerce. Trong bài sau, ta sẽ cài đặt Plugin quan trọng này và hiệu chỉnh lại một số thuộc tính giao diện tương thích với website bán hàng sau khi đã cài Woocommerce.