nền tảng flatsome wordpress ứng dụng trong thương mại điện tử

để hỗ trợ xây dựng các website đa ngôn ngữ.Đa dụng: Không chỉ đơn thuần là một giao diện thiết kế sẵn, Flatsome còncung cấp cho bạn một trình thiết kế riêng là UX Builder với các Element

NỀN TẢNG FLATSOME WORDPRESS, ỨNG DỤNG TRONG

THƯƠNG MẠI ĐIỆN TỬ

Đặng Sỹ Đức Mạnh, Trần Minh Hoàng, Đại Dương, Tín

MỤC LỤC

MỞ ĐẦU

1.GIỚI THIỆU

2 FLATSOME VÀ CÁC KHÁI NIỆM

2.1 Giới thiệu

2.2 Ưu điểm của Flatsome Wordpress

3 PHÂN TÍCH THIẾT KẾ HỆ THỐNG

3.1 Giới thiệu về các tính năng của Website

3.2 Sơ đồ tính năng của Website

4 CÀI ĐẶT VÀ DEMO

4.1 Cài đặt Flatsome

4.2 Demo Website

KẾT LUẬN

TÀI LIỆU THAM KHẢO

MỞ ĐẦU

Thương mại điện tử (TMĐT) là một phần quan trọng trong nền kinh tế sốngày nay, là xu hướng của thời đại toàn cầu hóa TMĐT là lĩnh vực tiềm năng giúpcác doanh nghiệp, người bán, người mua trao đổi mua bán TMĐT còn là nơi thúcđẩy khởi nghiệp kinh doanh theo các mô hình mới Vì vậy việc phát triển các nềntảng TMĐT là lĩnh vực tiềm năng, sôi động Giao diện Flatsome chính là một trongnhững giao diện hỗ trợ mạnh mẽ nhất cho các nền tảng TMĐT Vì vậy trong bàiviết này, chúng tôi giới thiệu về giao diện Flatsome, ứng dụng để xây dựng nềntảng TMĐT nhanh, gọn, hiệu quả

Từ khóa: Thương mại điện tử, Wordpress, Flatsome

1 GIỚI THIỆU

Wordpress là một hệ quản trị nội dung (CMS) miễn phí giúp xây dựng cácwebsite phổ biến, trong đó có các nền tảng thương mai điện tử Thiết kế và quản lýcác website bằng WordPress thì việc chỉnh sửa, quản lý giao diện là rất quan trọnggiúp mang lại sự hiệu quả, tiết kiệm chi phí, thời gian và trải nghiệm người dùng.Hiện nay có nhiều loại giao diện khác nhau được sử dụng trong Wordpress như:WoodMart, Avada, Flatsome, … Trong đó giao diện Flatsome là một nền tảng bổsung nhiều ưu việt so với các giao diện khác hiện nay

Một số yếu tố ưu việt của Flatsome gồm:

Hiệu suất: hiệu xuất hoạt động là yếu tố được quan tâm hàng đầu đối với bất

kỳ giao diện WordPress nào Hầu hết các giao diện WordPress hiện tại được thiết

kế và xây dựng theo hướng đa dụng, đa chức năng, đa lĩnh vực Nếu giao diệnkhông được tối ưu tốt hoặc có quá nhiều plugin bên thứ 3 đi kèm sẽ dễ dẫn tớixung đột hoặc giảm hiệu xuất thực thi Trong Flatsome được tích hợp hầu như mọithứ cần thiết để có thể xây dựng các dạng website phổ biến Số lượng plugin

đi kèm để bổ trợ rất ít, điều này thực sự tốt cho việc tối ưu website về sau

Độ tương thích: giao diện Flatsome được thiết kế với mục đích chính là hỗtrợ các website TMĐT Do vậy, không lạ vì nó tương thích cực kỳ tốt với cácplugin hỗ trợ bán hàng như WooCommerce Khi kết hợp giao diện Flatsome với

các plugin tối ưu website như WP Rocket, Swift Perfomance, … thì rất ít xung độtxảy ra Giao diện Flatsome cũng tương thích tốt với các plugin như WPML,Pollylang, để hỗ trợ xây dựng các website đa ngôn ngữ.

Đa dụng: Không chỉ đơn thuần là một giao diện thiết kế sẵn, Flatsome còncung cấp cho bạn một trình thiết kế riêng là UX Builder với các Element được xâydựng sẵn, để bạn có thể thỏa sức sáng tạo ra các mẫu website với nhiều lĩnh vực vàtính năng khác nhau Flatsome tương thích trên các kích thước màn hình từ diđộng, máy tính bảng hoặc máy tính để bàn

Cài đặt: giao diện Flatsome cung cấp cho bạn một trình cài đặt tự động, giúpchúng ta cài đặt các plugin và dữ liệu mẫu đi kèm một cách nhanh chóng Chúng ta

có thể tìm thấy tính năng này ở hầu hết các giao diện WordPress hiện đại ngày nay,

kể cả giao diện miễn phí và trả phí

Thiết kế website chuẩn SEO: đây cũng là một yếu tố làm nên thương hiệucủa Flatsome, nó tương thích với rất nhiều plugin SEO như Yoast SEO, RankMath SEO,… và hỗ trợ SEO tốt trên các thành phần như Trang, Bài viết, Sảnphẩm, Danh mục sản phẩm, …

Hỗ trợ, tài liệu hướng dẫn, và cập nhật: chúng ta luôn được hỗ trợ khi đăng

ký sử dụng giao diện Flatsome bản quyền từ chính nhà cung cấp Với mức độ phổcập, sử dụng trên toàn thế giới, vìì vây không khó để có thể tìm các tài liệu, video

về hướng dẫn thiết kế, tùy biến, sử dụng,… bằng tiếng Việt trên Google hoặcYoutube Hơn nữa, giao diện luôn được tối ưu và cải tiến thêm nhiều tính năngmới

Vì vậy, trong bài giảng này, chúng tôi sẽ cung cấp và giới thiệu đến ngườiđọc về giao diện Flatsome, cũng như cách sử dụng, chỉnh sửa giao diện

2 FLATSOME VÀ CÁC KHÁI NIỆM

2.1 Giới thiệu

Giao diện Flatsome được phát triển và phát hành lần đầu tiên bởi Themes Ngày phát hành chính thức của Flatsome không được công bố một cáchchính xác, nhưng nó đã trở thành một trong những chủ đề phổ biến trong lĩnh vựcTMĐT trên WordPress

UX-Flatsome, xuất hiện lần đầu tiên vào năm 2013, là một trong những giao diệnbản quyền phổ biến nhất Flatsome WordPress được đánh giá là theme số một vềlĩnh vực website thương mại điện tử (Woocommerce) Với khả năng tùy chỉnh dễdàng, theme này phù hợp với những người dùng muốn xây dựng các trang webkinh doanh, nhanh, tiết kiệm chi phí

Flatsome được thiết kế với sự chú trọng lớn vào trải nghiệm người dùng,giúp trang web hiển thị tốt trên mọi thiết bị, từ máy tính đến điện thoại di động.Flatsome được cập nhật thường xuyên để đáp ứng với các xu hướng mới và cungcấp sự ổn định và an toàn cho người dùng Các phiên bản mới thường đi kèm vớicải tiến về hiệu suất, tính năng mới và sửa lỗi

Flatsome có một cộng đồng người dùng lớn và một hệ thống hỗ trợ chấtlượng Điều này giúp người dùng dễ dàng tìm kiếm giải đáp cho vấn đề của họ vàchia sẻ kinh nghiệm sử dụng Phản hồi từ cộng đồng và người dùng đóng vai tròquan trọng trong việc cải tiến Flatsome Những cập nhật và phiên bản mới thườngphản ánh nhu cầu và mong muốn của cộng đồng người dùng.

Chính vì vậy, Flatsome đã trở thành một trong những chủ đề thương mạiđiện tử phổ biến trên WordPress, hỗ trợ nhiều doanh nghiệp và cá nhân xây dựng

và quản lý cửa hàng trực tuyến của họ một cách dễ dàng và hiệu quả

2.2 Ưu điểm của Flatsome Wordpress

Thiết kế website chuyên nghiệp: Flatsome WordPress đạt được sự vượt

trội hơn các theme khác bởi nó cung cấp cho người dùng bản demo chất lượng cao.Người dùng có thể dễ dàng xây dựng trang web chỉ với vài cú nhấp chuột Bêncạnh đó, theme Flatsome mang đến hiệu ứng parallax, cho phép hình nền dichuyển với tốc độ khác nhau khi cuộn chuột Theme này còn tích hợp bộ cung cụWireframe giúp thiết kế và hoàn thiện cấu trúc trang web một cách đơn giản

Tối ưu hóa tốc độ: Flatsome là lựa chọn tuyệt vời để giải quyết vấn đề tốc

độ truy cập trang bằng các thiết bị cầm tay (di động) Theme này được thiết kếresponsive, tức là có khả năng tự điều chỉnh và thích ứng với mọi kích thước mànhình Bao gồm desktop, tablet, điện thoại di động và nhiều thiết bị khác

Tích hợp UX Builder: Flatsome được tích hợp với plugin UX Builder, cho

phép người dùng chỉnh sửa các element riêng lẻ một cách dễ dàng Và có thể xemngay những thay đổi mà không cần phải làm việc trong chế độ xem trước Plugin

UX Builder đi kèm với 36 elements nội dung khác nhau, bao gồm những element

cơ bản như videos, sliders và sections Tất cả những elements/blocks nội dungquan trọng đều có sẵn trong Flatsome và tích hợp với plugin UX Builder

Xây dựng website nhanh chóng với Flatsome Studio: Flatsome Studio là

một thư viện kỹ thuật số mở rộng hoàn toàn miễn phí Nó bao gồm hình ảnh, bốcục và các phần đã được thiết kết sẵn mà bạn có thể sử dụng chỉ với vài cú nhấpchuột Tất cả các phần này được sắp xếp thành các danh mục rõ ràng, giúp bạn dễdàng tìm thấy các thành phần trang web khác nhau

Các tính năng khác của theme Flatsome: Ngoài những tính năng kể trên,

Flatsome WordPress còn cung cấp cho người dùng thêm nhiều tính năng cần thiếtkhác để tạo dựng website bao gồm cập nhật miễn phí trọn đời; thiết kế chuẩn SEO;các tùy chọn bộ lọc khác nhau; có sẵn Child Theme; khả năng tương thích tuyệtvời với WooCommerce…

Tính Năng Tùy Chỉnh :

Tuỳ biến trang: Cho phép bạn tạo trang web của mình theo ý

muốn với các tùy chọn tùy chỉnh linh hoạt

Tích hợp hình ảnh và video: Hỗ trợ tích hợp hình ảnh và

video một cách dễ dàng vào trang web của bạn

Hỗ trợ nhiều ngôn ngữ: Cung cấp hỗ trợ đa ngôn ngữ để bạn

có thể tạo trang web đa ngôn ngữ

Tối Ưu Hóa và Bảo Mật :

Tối ưu hóa SEO: Hỗ trợ các công cụ tối ưu hóa công cụ tìmkiếm (SEO) để giúp trang web của bạn xếp hạng cao hơn trên các trang kết quả tìm kiếm

Bảo mật dữ liệu: Đảm bảo bảo mật thông tin cá nhân và giaodịch của người dùng thông qua các biện pháp bảo mật hiện đại.Giao diện và Thiết kế :

Thiết kế linh hoạt: Cung cấp các tùy chọn để tùy chỉnh giao diện một cách dễ dàng, bao gồm màu sắc, phông chữ, và bố cục.Giao diện đáp ứng: Đảm bảo trải nghiệm người dùng tốt trêncác thiết bị di động và máy tính bảng

Tích hợp với UX Builder: Cho phép bạn tạo trang và bài đăng một cách linh hoạt bằng cách kéo và thả các thành phần

Tính Năng Thương Mại Điện Tử

Hỗ trợ nhiều phương thức thanh toán: Tích hợp các cổng thanh toán phổ biến như PayPal, Stripe, và các phương thức thanhtoán khác

Quản lý đơn hàng dễ dàng: Cung cấp giao diện quản lý đơn hàng dễ sử dụng để xem, xử lý và theo dõi đơn hàng

Tích hợp vận chuyển: Cho phép tích hợp các dịch vụ vận chuyển và tính phí vận chuyển tự động

Tìm kiếm và lọc sản phẩm

Chức năng tìm kiếm và lọc sản phẩm cần linh hoạt và dễ sửdụng Tìm kiếm nhanh chóng và hiệu quả giúp người dùng tìmthấy sản phẩm mong muốn Tính năng lọc sản phẩm dựa trên

nhiều tiêu chí như giá, thương hiệu, và tính năng khác để cung

cấp trải nghiệm mua sắm cá nhân hóa

1Hỗ trợ trực tuyến1

Hỗ trợ trực tuyến chính là phần giúp khách hàng có thể trao đổi với nhânviên để giải đáp các thắc mắc Từ những yêu cầu về tư vấn sản phẩm đến thảo luậngiá, báo lỗi hàng hóa,… đều có thể liên hệ qua chat trực tuyến mà không cần gặpmặt Khách hàng sẽ được hỗ trợ 24/7, giải đáp ngay những thắc mắc về sản phẩm

Giỏ hàng

Giỏ hàng phải đơn giản và tiện ích Cho phép người dùng thêm, xóa sản phẩm một cách thuận tiện, và hiển thị tổng giá trị đơn hàng giúp họ theo dõi mức chi tiêu của mình

Thanh toán online

Chức năng thanh toán online cần được tích hợp một cách an toàn và thuận tiện Hỗ trợ nhiều phương thức thanh toán như thẻ tín dụng, ví điện tử giúp mở rộng lựa chọn cho người mua sắm

Hình 4.1.1: Giao diện XAMPP

Hình 4.1.2: Giao diện phpMyadmin

Hình 4.1.3: Giao diện Database trong phpMyadmin

Các bước cài đặt WordPress trên localhost

- Bước 1: Tải mã nguồn từ website WordPress.org

Trước tiên, chúng ta tải phiên bản mới nhất của mã nguồn WordPress tại địachỉ https://wordpress.org/latest.zip Sau đó chúng ta giải nén tệp tin này ra sẽ đượcmột thư mục mang tên “wordpress“

Hình 4.1.4 Thư mục sau khi giải nén mã nguồn

Trong thư mục của wordpress, chúng ta sẽ thấy có một số thư mục tên làwp-admin, wp-includes, wp-content và một số tệp tin tên là index.php, wp-config-sample.php,…Tất cả tệp tin và thư mục này là mã nguồn WordPress

Hình 4.1.5: Các tệp tin và thư mục mã nguồn của WordPress.

- Bước 2: Copy mã nguồn WordPress vào Localhost

Copy toàn bộ tệp tin và thư mục trong thư mục “wordpress” này vào thưmục website trong localhost (ví dụ: C:\xampp\htdocs\wordpress_demo)

Hình 4.1.6: Mã nguồn wordpress trong thư mục website

- Bước 3: Tạo mới một database

Để chạy được WordPress thì localhost phải có một database dùng MySQL

để lưu các dữ liệu mềm vào đó như: bài viết, các thiết lập,…trên website Để tạomột database, chúng ta hãy truy cập vào localhost với đường dẫn:

http://localhost/phpmyadmin Sau đó, nhấn vào menu Database

Hình 4.1.7: Giao diện Database trong phpMyadmin

Sau đó vào User accounts, chọn Add user account

Hình 4.1.8: Tạo user account

Tại đây chúng ta cần điền những thông tin sau :

-User name : Tên User của database

-Password : Mật khẩu của user

-Hostname : Thường là localhost

Sau đó đánh dấu tích vào ô “Create database with same name and grant allprivileges” để tạo cơ sở dữ liệu với cùng tên và cấp tất cả các đặc quyền cho ngườidùng vừa tạo

Hình 4.1.9: Tạo database cùng với user

- Bước 4: Chạy website để cài đặt

Sau khi copy xong mã nguồn, mở bảng điều khiển của XAMPP lên và khởiđộng Apache và MySQL Sau đó truy cập vào của chúng ta website theo đườngdẫn: http://localhost/tên-webiste (Ví dụ: http://localhost/wordpress_demo) Lúcnày, giao diện trình duyệt của website sẽ hiện ra bảng chọn ngôn ngữ cần cài đặtcho WordPress, chúng ta chọn Tiếng Việt và ấn Tiếp tục

Hình 4.1.10: Chọn ngôn ngữ khi cài đặt WordPress

Tiếp theo, hệ thống sẽ nhắc nhở cho chúng ta chưa tiến hành đổi tệp tin config-sample.php thành wp-config.php và khai báo thông tin database vào đó.Hãy ấn Thực hiện ngay để tiếp tục quá trình cài đặt

wp-Hình 4.1.11: Wordpress yêu cầu nhập thông tin database

Tiếp theo, chúng ta tiến hành nhập thông tin cho database Trong đó, tên cơ

sở dữ liệu và tên đăng nhập là cơ sở dữ liệu chúng ta đã tạo ở bước 3

Hình 4.1.12: Nhập thông tin database

Tiếp theo, chúng ta cần phải thiết lập các thông tin quan trọng cho websitenhư: tên của website, tên tài khoản admin cùng mật khẩu,…Sau khi nhập xong hãy

ấn nút Cài đặt WordPress

Hình 4.1.13: Thiết lập các thông tin quan trọng của website

Cuối cùng, WordPress sẽ thông báo cho chúng ta là đã cài đặt thành công.Nhấn vào nút Đăng nhập để đăng nhập vào bảng quản trị WordPress

Hình 4.1.14: Cài đặt website thành công

Và đây là giao diện trang quản trị của WordPress

Hình 4.1.15: Trang quản trị của WordPress sau khi cài đặt

Sau khi cài đặt xong WordPress chúng ta tải phiên bản mới nhất củaFlatsome

rồi đưa tệp đó vào thư mục mình dễ tìm

Hình 4.1.16: Tải phiên bản Flatsome

Tiếp theo ta vào trang chủ của WordPress rồi đi đến phần giao diện để tảigiao diện Flatsome

Hình 4.1.17: Phần thêm giao diện của WordPress

Tiếp đến ta bấm vào phần thêm giao diện mới

Hình 4.1.18: Tải giao diện mới

Sau đó ta tải giao diện lên và chọn tệp Flatsome ta đã tải về lúc trước rồi càiđặt

Hình 4.1.19: Cài đặt Flatsome

Hình 4.1.20: Kích hoạt giao diện Flatsome

Sau khi bạn upload và kích hoạt giao diện Flatsome, trình cài đặt nhanh sẽhiển thị

Tại đây, bạn sẽ thực hiện 7 bước thiết lập nhanh để cài đặt các plugin đikèm, các trang mẫu, và một số thiết lập chung vào website

Sau khi quá trình cài đặt hoàn tất, bạn có thể tùy chỉnh lại các thành phầntrong giao diện mẫu để áp dụng cho website của mình

Đây là phần Theme Option

Hình 4.1.21: Theme Option (Tùy chỉnh giao diện)

Flatsome kết hợp các tính năng của mình với mục Tùy biến mặcđịnh của WordPress, cho phép bạn có thể tùy chỉnh giao diện một cách linh hoạt vàtối ưu.

Để truy cập Theme Option, bạn có thể truy cập lầnlượt Flatsome > Theme Option hoặc Appearance > Customize Sau đó Bạn sẽthấy rất nhiều tùy chọn để tùy chỉnh thiết kế website WordPress của mình Dưới đây là các thành phần chính tùy chỉnh mà Flatsome hỗ trợ:

Header (phần đầu trang): Top bar, Main Menu, Bottom Menu, Stickymenu, logo, banner, giỏ hàng, số điện thoại, menu, …

Footer (phần cuối trang): Các cột cuối trang, thông tin bản quyền, cáckhối nội dung (block)…

Shop: Chỉnh sửa các thông tin bên trong trang sản phẩm, bố cục trangdanh mục sản phẩm,…

Blog: Chỉnh sửa layout, ngày giờ, và nhiều chỉnh sửa liên quan…Style: Chỉnh sửa màu sắc, font chữ, tùy biến css…

…

Header Builder (tùy chỉnh đầu trang)

Header Builder là trình thiết kế Header kéo thả được Flatsome tích hợptrong Theme Option

Bạn có thể chọn các kiểu bố cục Header được xây dựng sẵn tạimục Header > Presets

Hình 4.1.22: Header được xây dựng sẵn

Hoặc bạn cũng có thể tự tùy biến Header thông qua các Element đượcthiết kế sẵn.

Hình 4.1.23: Các Element được thiết kế sẵn

Tiếp đến là Advanced

Hình 4.1.24: Cài đặt bổ sung nâng cao

Advanced là mục thiết lập nâng cao của Flatsome, cho phép bạn cải thiện

độ đa dụng và nâng cao hiệu xuất của website

Dưới đây là các tác thiết lập chính mà Flatsome cung cấp:

Global Settings: Cho phép bạn chèn các mã nhúng hoặc các đoạn code vàođầu, giữa và cuối website như googe analytic,…

Custom CSS: Cho phép bạn thêm các hàm css tùy chỉnh trên website.Performance: Cho phép bạn cấu hình một số thiết lập về hiệu xuất củawebsite như:

Tải trước tài nguyên,

Lazyload hình ảnh,

Tắt các thành phần mặc định không cần thiết

Site Loader: cho phép thêm hiệu ứng loading

Site Search: cấu hình tính năng tìm kiếm

Instagram & Google APIs: cho phép Kết nối website vớiInstagram, Googlethông qua API

Maintenance Mode: thiết lập chế độ bảo trì

404 Page: Thiết lập trang 404

WooCommerce: Các tùy chỉnh tối ưu với WooCommerce

Backup and Import: Sao lưu và nhập lại các thiết lập cũ

Tiếp đến là UX Builder

Hình 4.1.25: Trình thiết kế website kéo thả

UX Builder là trình giao diện kéo thả bằng các Element được lập trình sẵntrong giao diện Đây là tính năng cực kỳ hữu ích, cho phép bạn có thể thiết kế đượcgiao diện Website một cách dễ dàng mà không cần phải là một lập trình viên

Để mở trình tạo trang UX Builder, bạn truy cập lần lượt mục Trang > Tất cảcác trang, sau đó di chuyển chuột vào trang muốn chỉnh sửa và nhấn Edit with UXBuilder.

Hình 4.1.26: Edit with UX Builder

Phía bên trái là các Element được thiết kế sẵn, phía bên phải là phần hiểnthị trực quan khi chỉnh sửa

Flatsome cung cấp rất nhiều Element để bạn có thể dễ dàng tùy chỉnh, từviệc xây bố cục, hiển thị các sản phẩm, bài viết, các khối văn bản,…

Hình 4.1.27: Giao diện mẫu Flatsome Studio