Và cho đến thời điểm 2015, WordPress đã được xem như là một hệ quản trị nội dung CMS – Content Management System vượt trội để hỗ trợ ngườidùng tạo ra nhiều thể loại website khác nhau như
Trang 1Đà Nẵng, ngày tháng năm 2016
Trang 2MỤC LỤC
MỤC LỤC 2
DANH MỤC TỪ VIẾT TẮT: 4
DANH MỤC HÌNH ẢNH 5
LỜI NÓI ĐẦU 8
Chương I: TỔNG QUAN VỀ WORDPRESS VÀ PLUGIN WOOCOMMERCE 9
1.1Giới thiệu chung về Wordpress 9
1.2Giới thiệu Woocommerce: 13
1.2.1 Cài đặt và thiết lập cơ bản: 14
1.2.2 Tìm hiểu các trang trong Woocommerce: 20
1.3Thêm một sản phẩm đơn giản: 23
1.3.1.Nhập thông tin sản phẩm: 23
1.3.2.Thiết lập danh mục sản phẩm 26
1.3.3 Thiết lập từ khóa sản phẩm 26
1.3.4 Ảnh sản phẩm 27
1.3.5 Thư viện hình ảnh của sản phẩm 27
1.3.6 Thử nghiệm chức năng giỏ hàng và thanh toán 31
1.4Cách sử dụng theme Store Front cho Woocommerce: 34
1.5Các thiết lập cài đặt các thành phần trong Woocommerce: 41
1.5.1 Thiết lập thay đổi kích thước sản phẩm: 44
1.5.2 Thiết lập thuế: 48
1.5.3 Thêm tỉnh thành Việt Nam và tối ưu thông tin khách hàng 52
1.5.4.Tổng quan chức năng tính phí-giao nhận(vận chuyển) 53
1.5.5 Thiết lập giao nhận-tỉ lệ sàn: 55
1.5.6.Thêm nhiều phương thức giao nhận-tỉ lệ sàn: 57
1.5.7.Sử dụng loại hình giao nhận (Shpping Class) 62
1.5.8.Thiết lập thanh toán 66
1.5.8.1.Thanh toán qua PayPal: 66
Trang 31.5.8.2.Tích hợp Ngân Lượng và Bảo Kim: 66
1.5.9 Thiết lập Email thông báo: 67
1.6 Sử dụng các Widget trong Woocommerce: 68
1.7Thiết lập Yoat SEO cho WooCommerce 69
CHƯƠNG II: DEMO CÁC CHỨC NĂNG WEBSITE 71
KẾT LUẬN 72
TÀI LIỆU THAM KHẢO: 73
Trang 4DANH MỤC TỪ VIẾT TẮT:
1 CMS – Content Management System Hệ quản trị nội dung
Trang 5DANH MỤC HÌNH ẢNH
Hình 1:Tìm plugin “Woocommerce” trên thư viện 14
Hình 2:Cài đặt bản dịch và thiết lập cho Woocommerce 15
Hình 3:Cài đặt trang cần thiết cho Woocommerce 16
Hình 4: Thiết lập vị trí và định dạng tiền tệ phù hợp với Việt Nam 17
Hình 5: Đã thiết lập hoàn thành 18
Hình 6: Cấu hình định dạng tiền mặt 19
Hình 7:Bỏ số đơn vị thập phân ở tiền tệ 20
Hình 8:Các trang mặc định của Woocommerce 21
Hình 9: Thiết lập trang cửa hàng 22
Hình 10: Thiết lập lại các trang bị mất 22
Hình: 11 Menu thêm sản phẩm 23
Hình 12:Nhập tiêu đề và mô tả chi tiết của sản phẩm 23
Hình 13: Khung nhập dữ liệu sản phẩm 24
Hình 14: Nhập dữ liệu sản phẩm 25
Hình 15: Khung mô tả ngắn sản phẩm 26
Hình 16: Tạo danh mục sản phẩm 26
Hình 17:Thiết lập từ khóa sản phẩm 27
Hình 18: Ảnh đại diện sản phẩm 27
Hình 19: Thư viện ảnh của một sản phẩm 28
Hình 20: Xem trang cửa hàng 28
Hình 21: Sản phẩm hiển thị ở trang Cửa hàng 29
Hình 22: Hình mô tả chi tiết sản phẩm 30
Hình 23: Thêm sản phẩm vào giỏ 31
Hình 24: Trang giỏ hàng 32
Hình 25: Trang thanh toán chưa hiệu chỉnh 33
Hình 26: Trang thanh toán đã được hiệu chỉnh 34
Hình 27: Import dữ liệu dummy content 35
Trang 6Hình 29: Thiết lập Import 36
Hình 30: Sản phẩm mẫu sau khi đã import 37
Hình 31: Cài đặt theme Store Front 37
Hình 32: Thiết lập trang chủ 38
Hình 33: Thiết lập trang chủ làm trang chính 38
Hình 34: Trang chủ Store Front 39
Hình 35: Tùy chỉnh giao diện 40
Hình 36: Tổng quan trang thiết lập 41
Hình 37: Cài đặt chung 41
Hình 38:Thiết lập cài đặt sản phẩm 42
Hình 39: Thiết lập hình sản phẩm 45
Hình 40:Ảnh catalog 45
Hình 41: Ảnh sản phẩm đơn lẻ 46
Hình 42:Hình thu nhỏ sản phẩm 47
Hình 43: Thay đổi thông số kích thước sản phẩm 47
Hình 44: Hình tái tạo sản phẩm 48
Hình 46: Kích hoạt tính năng thuế 48
Hình 47:Các tùy chọn thiết lập thuế 49
Hình 48: Khung khai báo tỉ lệ thuế 50
Hình 49: Ví dụ thiết lập thuế VAT tại Việt Nam với tỉ lệ 10% 51
Hình 50: Kết quả thiết lập thuế 51
Hình 51: Thiết lập địa chỉ mặc định 52
Hình 52: Thông tin thanh toán đã hiệu chỉnh 53
Hình 53: Trang cài đặt tính phí giao nhận trong Woocommerce 54
Hình 54: Thiết lập giao nhận-tỉ lệ sàn 55
Hình 55: Tỉ lệ sàn đã được thiết lập 56
Hình 56: Thanh toán đã được thiết lập tỉ lệ sàn 57
Hình 57: Các phương thức giao nhận 59
Hình 58: Thiết lập miễn phí giao hàng 59
Trang 7Hình 59: Thiết lập miễn phí giao hàng 61
Hình 60: Thiết lập loại hình giao nhận 62
Hình 61:Thêm một loại hình giao nhận mới 63
Hình 62:Danh sách các loại hình giao nhận 63
HÌnh 63: Tùy chọn loại hình giao nhận 64
Hình 64:Thiết lập phí vận chuyển cho loại hình giao nhận 65
Hình 65: Thiết lập PayPal 66
Hình 66: Thiết lập Ngân Lượng 66
Hình 67: Thiết lập Bảo Kim 67
Hình 68:Các tùy chọn thiết lập email trong Woocommerce 67
Hình 69:Giao diện Wiget 68
Hình 70: Xóa bỏ chữ “Archive” trên tiêu đề 69
Hình 71: Tùy chỉnh các chuyên mục 70
Hình 72: Tùy chỉnh sitemap 70
Trang 8LỜI NÓI ĐẦU
Xã hội phát triển về nhiều mặt, kèm theo đó là sự bùng nổ mạnh mẽ của côngnghệ thông tin Nhu cầu của con người ngày càng được nâng cao Để đáp ứng cho nhucầu con người trong việc mua hàng hóa thông minh thông qua các website bán hàng.Chúng ta chỉ cần ở bất kỳ đâu chỉ cần có kết nối Internet thì có thể mua hàng ở bất kỳnơi nào với các chế độ vận chuyển chuyên nghiệp trên toàn quốc Để đáp ứng đượcđiều đó thì công nghệ website hiện nay có rất nhiều cách để tạo nên một website bánhàng thông minh Trong đó chúng ta không thể không nói đến Wordpress Đây là mộtcông cụ rất phổ biến trên thế giới nói chung và Việt Nam nói riêng.Trong Wordpress
có một Plugin rất nổi tiếng được viết từ các lập trình viên thực thụ từ Wootheme đóchính là Woocommerce Nó được phản hồi rất tịch cực trong ngành công nghệ websiteđặc biệt là website bán hàng tính đến thời điểm hiện tại Với sự hỗ trợ đặc biệt củaPlugin Woocommerce trong việc tạo một website bán hàng Em đã chọn đề tài “Xâydựng website bán hàng bằng Wordpress”
Mặc dù đã rất cố gắng nỗ lực để hoàn thành đề tài,bên cạnh đó không thể tránhkhỏi những thiếu sót Mong rằng nhận được sự phản hồi tích cực từ phía thầy cô vàcác bạn
Xin chân thành cảm ơn!
Trang 9Chương I: TỔNG QUAN VỀ WORDPRESS VÀ PLUGIN
WOOCOMMERCE1.1 Giới thiệu chung về Wordpress.
WordPress là một phần mềm nguồn mở (Open Source Software) được viết bằngngôn ngữ lập trình website PHP (Hypertext Preprocessor) và sử dụng hệ quản trị cơ sở
dữ liệu MySQL WordPress được ra mắt lần đầu tiên vào ngày 27/5/2003 bởi tác giảMatt Mullenweg và Mike Little Hiện nay WordPress được sở hữu và phát triển bởicông ty Automattic có trụ sở tại San Francisco, California thuộc hợp chủng quốc HoaKỳ
WordPress là một mã nguồn mở bằng ngôn ngữ PHP để hỗ trợ tạo blog cá nhân,
và nó được rất nhiều người sử dụng ủng hộ về tính dễ sử dụng, nhiều tính năng hữuích Qua thời gian, số lượng người sử dụng tăng lên, các cộng tác viên là những lậptrình viên cũng tham gia đông đảo để phát triển mã nguồn WordPress có thêm nhữngtính năng tuyệt vời Và cho đến thời điểm 2015, WordPress đã được xem như là một
hệ quản trị nội dung (CMS – Content Management System) vượt trội để hỗ trợ ngườidùng tạo ra nhiều thể loại website khác nhau như blog, website tin tức/tạp chí, giớithiệu doanh nghiệp, bán hàng – thương mại điện tử, thậm chí với các loại website có
độ phức tạp cao như đặt phòng khách sạn, thuê xe, đăng dự án bất động sản,v v Hầunhư mọi hình thức website với quy mô nhỏ và vừa đều có thể triển khai trên nền tảngWordPress
Nhưng như thế không có nghĩa là WordPress chỉ thích hợp với các dự án nhỏ, màhiện nay có tới khoảng 25% website trong danh sách 100 website lớn nhất thế giới sử
dụng mã nguồn WordPress Ví dụ như trang tạp chí TechCrunch, Mashable, CNN,
BBC America, Variety, Sony Music, MTV News, Bata, Quartz,…rất nhiều không
thể kể hết được
Những Thành tựu của Wordpress
Khi tìm hiểu về WordPress, bạn sẽ thật tự hào khi biết rằng mã nguồn mà cácbạn đang tìm hiểu ngay sau đây có những thành tựu rất vượt bậc và là một mã nguồnCMS mở phổ biến nhất hành tinh Để kiểm chứng điều đó, các bạn cần biết là:
• Trên thế giới, có khoảng 25 bài viết được đăng lên các website sử dụng
WordPress mỗi giây
• Số lượng website làm bằng WordPress chiếm 23% tổng số lượng website trênthế giới
Trang 10• Trong số 100% các website sử dụng mã nguồn CMS, WordPress chiếm 60%.
• Phiên bản WordPress 4.0 đạt hơn 16 triệu lượt tải chỉ sau khoảng hai tháng
• WordPress đã được dịch sang 52 ngôn ngữ khác nhau Tuy nhiên lại chưa cóphiên bản tiếng Việt chính thức, nhưng bạn có thể Việt hóa dễ dàng bằng cách tìm bàitrên blog với từ khóa “Việt hóa WordPress“
• Có hơn 80 chương trình họp mặt về WordPress được tổ chức vào năm 2014
• Mã nguồn WordPress hiện đang có khoảng 785 lập trình viên cùng hợp tácphát triển
• Chỉ tính các giao diện (hay còn gọi là theme) miễn phí trên thư viện
WordPress.org thì đã có hơn 2.700 themes khác nhau
*Hoạt động của mã nguồn Wordpress:
Các dữ liệu làm việc thế nào?
Trong mã nguồn WordPress, nó đã được lập trình nhiều tính năng giúp bản thân
nó có thể tương tác với cơ sở dữ liệu (database) như MySQL để giúp người sử dụng cóthể lưu trữ dữ liệu mềm trên website Tất cả các dữ liệu mềm được lưu trữ vào database
sẽ bao gồm các nội dung văn bản được nhập vào website, các thiết lập (vì các thiết lập
sẽ lưu dưới dạng một kiểu dữ liệu) và một số dữ liệu khác
Nếu vào xem database thông qua phpMyAdmin hoặc các ứng dụng tương tự, sẽthấy WordPress có nhiều bảng dữ liệu để chứa các dữ liệu được lưu vào
WordPress làm gì mỗi khi có người truy cập vào website?
Khi một người truy cập vào website, WordPress sẽ tự động xử lý theo quy trìnhsau:
Trang 11Bước 1 – Khởi động mã nguồn
Tập tin index.php trong mã nguồn (không phải của theme hay plugin) được tải ra,sau đó nó sẽ truy xuất các tập tin cốt lõi khác như wp-config.php vốn để kết nối đến cơ
sở dữ liệu, wp-settings.php,… Bạn có thể mở tập tin index.php lên xem và lần mò theocác tập tin được nhúng vào sẽ biết được quy trình nó load theo thứ tự các tập tin
Ở bước này, WordPress sẽ kết nối đến cơ sở dữ liệu được thiết lập trong
wp-config.php, sau đó sẽ tiến hành tải những tính năng trong mã nguồn như
/wp-include/functions.php, /wp-include/options.php,…nhằm nạp sẵn các chức năng cần
thiết để có thể tiếp nhận những dữ liệu
Và cũng trong bước này, toàn bộ các dữ liệu được lưu vào bảng wp_options cógiá trị ở cột autoload là true sẽ được lôi ra hết, dù thiết lập đó có được sử dụng haykhông Mục đích của bước này là mang sẵn các tuỳ chọn của website cùng các plugin
để hỗ trợ cho các bước sau, đặc biệt là bước tải plugin để nó làm việc chính xác Đó là
lý do tại sao ở bài tối ưu bảng wp_options, mình có khuyên bạn nên xoá bớt các hàng
dữ liệu không dùng đến ở bảng này để giảm thời gian tải
Bước 2 – Kích hoạt plugin
Các plugin mà bạn đang kích hoạt trong website sẽ được tải ra ngay sau khi mãnguồn WordPress khởi động xong Bởi vì các tính năng trong WordPress Core được sửdụng trong plugin thường sẽ được gắn vào hookinit (bạn tạm thời hiểu nó là một điểmneo để kích hoạt kịch bản nào đó) nên nó sẽ load ngay sau khi WordPress khởi động làvậy
Bước 3 – Thực thi tập tin functions.php trong theme
Lúc này, WordPress sẽ tiến hành dò tìm đến tập tin functions.php trong themeđang được kích hoạt để tải các tính năng mà người tạo ra theme đã khai báo ở đó Vậylàm sao WordPress có thể hiểu được website đang dùng theme nào? Đó là ở bước 1, nó
đã kết nối vào database và dựa theo khoá current_theme trong cột option_name tạibảng wp_options
Trang 12WordPress xác định thêm hiện tại thông qua database
Bước 4 – Phân tích truy vấn và khởi tạo truy vấn
Đây là bước quan trọng để website của bạn có thể hiển thị nội dung ra bên ngoài,
vì các nội dung sẽ được trả về sau khi các truy vấn gửi vào database Nếu bạn muốnbiết nó phân tích như thế nào thì xem tại đây
Truy vấn nghĩa là một mệnh lệnh được gửi vào database nhằm lấy các thông tin
mà truy vấn đó cần xem Truy vấn ở đây là truy vấn SQL gửi vào MySQL Server
Trước tiên, WordPress sẽ chạy hàm wp() được thiết lập trong
/wp-include/functions.php vốn để gọi phương thức $wp->main() cho mục đích thiết lập
truy vấn Đối tượng $wp được tạo ra bởi lớp WP trong /wp-include/class-wp.php
p=123 thì WordPress sẽ gửi một truy vấn vào database để lấy dữ liệu của post mang số
ID là 123
Sau khi truy vấn được phân tích, WordPress sẽ làm việc tiếp theo là thiết lập cáchàm điều kiện thông qua phương thức $wp_query->parse_query() Sau đó nó sẽ chuyển
Trang 13các truy vấn đã được tạo ra thành truy vấn bằng các lệnh SQL nhằm gửi đến MySQL đểlấy dữ liệu bài viết bằng phương thức $wp_query->get_posts() Nếu database có dữliệu, các bài viết sẽ được lấy về sau khi gửi truy vấn và nó sẽ được lưu vào đốitượng$wp_query để nó sử dụng trong các vòng lặp cho việc hiển thị bài viết.
Trong quá trình gửi truy vấn này, nếu nó không tìm thấy dữ liệu thì sẽ phân tích
và hiển thị báo lỗi 404
Và cuối cùng là nó có dữ liệu, thì nó sẽ thiết lập biến $post để sử dụng trongvòng lặp Biến $post là đối tượng chứa các dữ liệu của bài viết thông qua các thuộctính Phần này chúng ta sẽ đào sâu hơn ở phần tìm hiểu sâu về query và vòng lặp
Bước 5 – Thực thi các tập tin khuôn mẫu (template) trong theme
Sau khi nó đã có dữ liệu bài viết và các dữ liệu liên quan mà nó đã làm ở bước 4,thì nó sẽ tiến hành xử lý các tập tin template của theme thông qua cấu trúc template.Sau đó các nội dung và trang chủ của website sẽ được hiển thị dựa theo các templatetags dưới dạng HTML
1.2 Giới thiệu Woocommerce:
Woocommerce là một plugin miễn phí được sử dụng để tạo một trang thương
mại điện tử cỡ nhỏ tốt nhất hiện nay trong WordPress Nó cũng như bao plugin khác là
bổ sung chức năng vào website nhưng nó sẽ bổ sung gần như toàn diện các chức năng
mà một trang bán hàng đơn giản cần có
Woocommerce sẽ có các chức năng chính như:
• Tạo sản phẩm với định dạng thông thường, sản phẩm có thuộc tính, sản phẩmaffiliate và sản phẩm kỹ thuật số (có thể tải về)
• Hỗ trợ một số hình thức thanh toán online như PayPal, Credit Card, CoD,Cash và sẽ càng nhiều hơn khi cài thêm plugin hỗ trợ cho riêng nó
• Hỗ trợ tự tính thuế sản phẩm hoặc thuế theo đơn hàng
• Hỗ trợ tự tính giá chuyển phát, có rất nhiều loại tính giá chuyển phát và sẽ đadạng hơn khi cài thêm plugin như có thể tính giá chuyển phát dựa theo cânnặng, kích thước, tỉnh thành,…
• Trang quản lý đơn hàng chuyên nghiệp, lọc đơn hàng thông qua từng trạngthái
• Hỗ trợ template hiển thị riêng để có thể tự cấu hình lại template hiển thị phầnshop và sản phẩm, cái này rất có lợi cho lập trình viên
Trang 14• Có sẵn nhiều theme và extension (plugin mở rộng) để biến thành trang shopchuyên nghiệp.
• Và hàng tá các chức năng hay ho khác nữa
Như vậy với các tính năng kể trên, Woocommerce có thể lựa chọn cho những ai cầnlàm một trang shop đơn giản ngay trên website WordPress của mình để giới thiệu sảnphẩm và cho phép khách đặt hàng trực tuyến để bán hàng tiện lợi hơn
1.2.1 Cài đặt và thiết lập cơ bản:
-Trước tiên bạn tìm plugin tên Woocommerce trong Dashboard và cài plugin tên
WooCommerce – excelling eCommerce rồi cài nó.
Hình 1:Tìm plugin “Woocommerce” trên thư viện
Trang 15Sau khi cài đặt thì kích hoạt như bình thường Sau khi kích hoạt nó sẽ chuyển
thẳng bạn đến trang thiết lập ban đầu cho Woocommerce Hãy ấn vào nút Cài đặt bản
dịch để nó cài bộ ngôn ngữ phù hợp cho website, ví dụ bạn đang dùng WordPress
tiếng Việt thì nó sẽ cài bản dịch tiếng Việt cho Woocommerce Sau đó ấn nút Bắt đầu.
Hình 2:Cài đặt bản dịch và thiết lập cho Woocommerce
Trang 16Kế đến là bước cài đặt trang cần thiết cho Woocommerce, ở đây nó sẽ cài một số
trang bắt buộc như Cửa hàng, Giỏ hàng, Thanh toán,…vì nếu không có các trang này thì sẽ không hoàn thiện được Do vậy ta sẽ ấn nútTiếp tục.
Hình 3:Cài đặt trang cần thiết cho Woocommerce
Trang 17Kế tiếp là cài đặt vị trí cửa hàng, ở đây bạn sẽ cài đặt quốc gia của cửa hàng bạn,loại tiền tệ, định dạng tiền tệ Nếu bạn thiết lập cho cửa hàng tại Việt Nam thì nên thiếtlập như ảnh dưới.
Hình 4: Thiết lập vị trí và định dạng tiền tệ phù hợp với Việt Nam.
Trang 18Ở bước cài đặt vận chuyển và thuế bạn cứ ấn Tiếp tục mà không cần chọn gì nhé,
cái này chúng ta sẽ thiết lập kỹ hơn ở mục riêng của nó Sau khi thiết lập xong thì quaylại trang quản trị
Hình 5: Đã thiết lập hoàn thành