<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

<b>NỀN TẢNG FLATSOME WORDPRESS, ỨNG DỤNG TRONGTHƯƠNG MẠI ĐIỆN TỬ</b>

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

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

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

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

<b> MỞ ĐẦU </b>

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 tồ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.

<b>1. GIỚI THIỆU</b>

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.

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

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ấtkỳ giao diện WordPress nào. Hầu hết các giao diện WordPress hiện tại được thiếtkế 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ó q 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

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

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 tacó 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 đăngký 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 tồn thế giới, vìì vây khơng khó để có thể tìm các tài liệu, videovề 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.

<b>2. FLATSOME VÀ CÁC KHÁI NIỆM</b>

<i><b>2.1. Giới thiệu</b></i>

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.

</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">

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ựngvà 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ả.

<i><b>2.2. Ưu điểm của Flatsome Wordpress</b></i>

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

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.

<b>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</b>

độ 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.

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

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. PluginUX Builder đi kèm với 36 elements nội dung khác nhau, bao gồm những elementcơ 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.

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

một thư viện kỹ thuật số mở rộng hồn tồ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.

<b>Các tính năng khác của theme Flatsome: Ngồi những tính năng kể trên,</b>

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.

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

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 tố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

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

nhiều tiêu chí như giá, thương hiệu, và tính năng khác để cungcấ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.

<b>Giỏ hàng</b>

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.

<b>Thanh tốn online </b>

Chức năng thanh tố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 tố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.

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

Hình 4.1.1: Giao diện XAMPP

Hình 4.1.2: Giao diện phpMyadmin

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

Hình 4.1.3: Giao diện Database trong phpMyadminCá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ỉ 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.

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

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.

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

Hình 4.1.7: Giao diện Database trong phpMyadminSau đó 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.

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

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.

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

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

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

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.

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

Hình 4.1.14: Cài đặt website thành côngVà đâ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 .

</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">

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 WordPressTiếp đến ta bấm vào phần thêm giao diện mới.

</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">

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

</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17">

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 q trình cài đặt hồ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).

</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">

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.

</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19">

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:

</div><span class="text_page_counter">Trang 20</span><div class="page_container" data-page="20">

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ếtSite 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.

</div><span class="text_page_counter">Trang 21</span><div class="page_container" data-page="21">

Để 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.

</div>