Xây dựng ứng dụng thương mại điện tử bằng wordpress và woocommerce

Sơ đồ cấu trúc của Theme Wordpress Cấu trúc lặp loop Đây không phải là template tag nhưng nó là phần quan trọng được sử dụng thường xuyên trong các template để có thể hiển thị thông tin

Phùng Canh Thành – 52K1 - CNTT 1

TRƯỜNG ĐẠI HỌC VINH

KHOA CÔNG NGHỆ THÔNG TIN

Phùng Canh Thành – 52K1 - CNTT 2

TRƯỜNG ĐẠI HỌC VINH

KHOA CÔNG NGHỆ THÔNG TIN

Phùng Canh Thành – 52K1 - CNTT 3

MỤC LỤC

CHƯƠNG 1 GIỚI THIỆU CHUNG 1

1.1 Đặt vấn đề bài toán 1

1.2 Giới thiệu về Wordpress 2

1.2.1 Ưu điểm của Wordpress 2

1.2.2 Khai thác mã nguồn Wordpress 3

1.3 Cách cài đặt Wordpress 4

1.4 Tìm hiểu về Woocomerce 8

1.4.1 Giới thiệu chung 8

1.4.2 Các tính năng có trong Woocommerce 9

1.5 Cấu trúc CSDL của Wordpress 9

1.5.1 Ý nghĩa của các bảng trong mysql như sau 10

CHƯƠNG 2.THIẾT KẾ THEME TRÊN WORDPRESS 11

2.1 Xây dựng cấu trúc Theme 11

2.1.1 Cấu trúc của Theme Wordpress 11

2.2 Viết Code cho File Functions.php 16

2.2.1 Thiết lập các hằng dữ liệu quan trọng 16

2.2.2 Hàm thiết lập các chức năng của Theme 16

2.3 Viết Code cho Header và Footer 19

2.3.1 Viết code cho file header.php 19

2.3.2 Viết code cho file footer.php 22

2.4 Viết Code cho File index.php 24

2.5 Viết Code cho File Content 27

2.5.1 Code cho class entry-thumbnail 27

2.5.2 Code cho entry-header 28

2.6 Viết Code cho Post Format 31

2.6.1 Viết code cho Format content-image.php 32

2.6.2 Viết code cho Format video 33

2.6.3 Viết code cho Format “link” 34

2.7 Viết Code cho File Single.php và Page.php 36

2.8 Viết Code cho trang lưu trữ, trang tìm kiếm và 404 38

CHƯƠNG 3 THIẾT KẾ MODULE BÁN HÀNG BẰNG WOOCOMMERCE 41

3.1 Các bước cài đặt Woocommerce 41

3.2 Các tùy chọn trong Woocommerce 45

3.2.1 Sản phẩm, chuyên mục sản phẩm và trang 45

3.2.2 Tùy Chỉnh Woocommerce 49

3.2.3 Đơn Hàng 50

3.2.4 Các ưu đãi 51

3.2.5 Báo cáo 51

3.2.6 Tình trạng hệ thống 52

3.2.7 Tiện ích 53

3.3 Viết Code cho Plugin Woocommerce 53

3.3.1 Code cho trang sản phẩm 54

3.3.2 Code cho trang single-product 57

3.3.3 Code trang mua hàng 60

3.3.4 Code trang thanh toán 64

3.3.5 Trang chủ 65

CHƯƠNG 4 ĐÁNH GIÁ VÀ KẾT LUẬN 66

4.1 Kết quả thu được 66

4.2 Hướng phát triển đề tài 66

KẾT LUẬN 67

TÀI LIỆU THAM KHẢO 68

LỜI CẢM ƠN

Để hoàn thành đồ án này, em xin gửi lời cảm ơn sâu sắc tới các thầy, cô giáo

trong Khoa Công Nghệ Thông Tin - Trường Đại học Vinh đã trực tiếp giảng dạy

và cung cấp cho em những kiến thức quý báu để em có thể tiếp cận và tìm hiểu những công nghệ và lĩnh vực mới

Đặc biệt em xin chân thành cảm ơn thầy giáo Trần Văn Cảnh – Giảng viên Khoa Công Nghệ Thông Tin đã tận tình hướng dẫn em cũng như tạo mọi điều kiện

về tài liệu và kiến thức để em có thể hoàn thành được đồ án này

Em rất mong đón nhận sự đánh giá, bổ sung và những lời chỉ bảo của các thầy cô giúp em có thể tiếp tục nghiên cứu kĩ hơn về lĩnh vực này

Em xin chân thành cảm ơn!

Vinh, tháng ngày 22/12/2015

Sinh viên

Phùng Canh Thành

CHƯƠNG 1 GIỚI THIỆU CHUNG

1.1 Đặt vấn đề bài toán

Xu hướng kinh doanh qua mạng đã và đang được áp dụng phổ biến trên phạm

vi toàn cầu vì nó có những ưu điểm vượt trội so với phương thức kinh doanh truyền thống Ví dụ, việc tổ chức bán hàng qua mạng sẽ tiết kiệm được chi phí thuê mặt bằng và không hạn chế về khoảng cách địa lý, dù khách hàng ở đâu cũng có thể mua sắm được Khách hàng có thể chủ động về thời gian mua sắm vì kinh doanh qua mạng không giới hạn về thời gian Có thể liệt kê một số ưu điểm khi khách hàng mua sắm trực tuyến như sau:

- Linh hoạt khi mua sắm: Vì là cửa hàng trực tuyến nên không có ngày nghỉ, đóng cửa hay bất kỳ vấn đề khác Khách hàng có thể chủ động về thời điểm mua sắm Không phụ thuộc vào giờ mở cửa như các trung tâm mua sắm

- Tiết kiệm thời gian: Khách hàng không cần phải đến tận nơi mới có thể mua được hàng, khi mua hàng online, khách hàng chỉ cần ngồi ở nhà và vào mạng để mua hàng, khi mua xong thì nhân viên sẽ nhanh chóng giao hàng cho khách hàng tận nơi

- Dễ dàng so sánh giả cả và chất lượng các sản phẩm: Khi đến tận nơi mua hàng, khách hàng phải đến từng nơi để xem, so sánh mới biết được giá cả Với mua hàng trực tuyến, để biết chính xác đồ cần mua, khách hàng tìm một số website và diễn đàn, khách hàng có thể dễ dàng nắm mức giá tốt nhất cho mỗi món đồ cần mua rất tiện lợi

- Tránh được những phiền phức: Khi mua hàng trực tiếp khách hàng phải đến tận nơi gặp phải cảnh kẹt xe, khói bụi, nắng nóng, cảnh chen lấn và xếp hàng dài vào giờ cao điểm để thanh toán hay mua sắm Với mua hàng trực tiếp, khách hàng

sẽ thoát khỏi cảnh phiền phức trên

Ở trong nước, đã có rất nhiều đơn vị kinh doanh và doanh nghiệp thành công trong việc tổ chức kinh doanh, bán hàng qua mạng Một trong những yếu tố ảnh hưởng đến việc thành công khi kinh doanh trên mạng là hệ thống phần mềm hỗ trợ, trong đó có module bán hàng hay còn gọi là module hỗ trợ online shopping Đây là module cho phép người bán hàng tổ chức giới thiệu sản phẩm kèm theo thông tin

tiết về sản phẩm, và mua hàng mà không phải đến tận cửa hàng Thay vì khách hàng

phải đi đến tận nơi để mua hàng thì khi mua hàng online khách hàng chỉ cần ngồi ở

nhà lên mạng tìm món hàng cần để mua sau dịch vu giao hàng sẽ giao hàng tận nơi

cho khách hàng

Có nhiều giải pháp để xây dựng module bán hàng, ví dụ tự phát triển, hoặc sử

dụng giải pháp từ các gói mã nguồn mở Vì tính chất quan trọng của module này,

trong phạm vi đồ án này chúng tôi lựa chọn bài toán tìm hiểu và phát triển module

bán hàng trên mạng bằng giải pháp sử dụng kết hợp của hai sản phẩm là WordPress

và Woocomerce

1.2 Giới thiệu về Wordpress

WordPress là một phần mềm mã nguồn mở để hỗ trợ tạo các blog cá nhân

WordPress được viết trên nền ngôn ngữ lập trình PHP và sử dụng hệ quản trị cở sở

WordPress được nhiều người ủng hộ và biết đến vì dễ sử dụng và có nhiều

tính năng hữu ích Qua thời gian, số lượng người sử dụng và số lương lập trình viên

phát triển WordPress tăng lên Từ đó Wordpress có thêm nhiều tính năng mới Đến

nay, WordPress là hệ quản trị nội dung (CMS – Content Management System) vượt

trội để hỗ trợ người dùng tạo ra nhiều loại website như blog, website tin tức, giới

thiệu doanh nghiệp, thương mại điện tử WordPress cũng có thể tạo ra những

website như đặt phòng khách sạn, đăng dự án bấn động sản, Hầu như các website

vừa và nhỏ đều có thể triển khai trên nền tảng WordPress

1.2.1 Ƣu điểm của Wordpress

Dễ sử dụng: Wordpress được phát triển nhằm phục vụ những đối tượng người

dùng phổ thông, không có nhiều kiến thức lập trình Các thao tác đơn giản, giao

diện trực quan có thể nắm rõ cấu trúc quản lý của một website wordpress trong thời

gian ngắn Về cách cài đặt, có thể tự cài đặt một web WordPress trên máy chủ riêng

và vận hành nó qua trong thời gian ngắn

Cộng đồng hỗ trợ đông đảo: Là một phần mềm mã nguồn mở CMS phổ biến nhất trên thế giới, nếu có những khó khăn thì sẽ được cộng đồng người sử dụng wordpress

hỗ trợ các khó khăn gặp phải trong quá trình sử dụng Nếu có khả năng Tiếng Anh tốt, thì có thể dễ dàng tìm câu trả lời cho vấn để đang gặp phải trên Google

Nhiều gói giao diện có sẵn (được gọi là Theme): Hiện tại wordpress có rất nhiều Theme miễn phí khác nhau để có thể thay đổi giao diện website mà không cần quan tâm việc làm sao để thiết kế Theme Còn nếu muốn website đẹp và chuyên nghiệp hơn thì có thể mua các Theme trả phí

Nhiều plugin hỗ trợ: Plugin nghĩa là một trình cắm thêm vào website để bổ sung các chức năng cần thiết cho website Ví dụ mặc định sau khi cài website lên, không có chức năng hiện thị bài viết liên quan ở dưới mỗi bài viết, nhưng với nhiều plugin miễn phí hỗ trợ thì có thể dễ dàng cài thêm một plugin miễn phí để website

có chức năng đó Tương tự với Theme Cũng có nhiều plugin trả phí mang những tính năng độc đáo và có ích vào website

Dễ phát triển cho lập trình viên: Nếu có am hiểu về việc làm website như HTML, CSS, PHP thì có thể dễ dàng mở rộng website với rất nhiều tính năng vô cùng có ích Cách phải triển cụng rất đơn giản vì WordPress là một phần mềm mã nguồn mở mà có thể dễ dàng hiểu được cách hoạt động của nó và phải triển thêm các tính năng

Có thể làm nhiều loại website: Dùng Wordpress không có nghĩa là chỉ có thể làm các blog cá nhân, mà có thể biến website thành các trang bán hàng, một website giới thiệu công ty, một tờ tạp chí online bằng việc sử dụng kết hợp Theme và plugin với nhau

Wordpress dành cả cho người không biết lập trình và cả người lập trình chuyên nghiệp: Nếu một người không biết lập trình thì sẽ dùng WordPress bằng cách sử dụng tính năng có sẵn, thư viện giao diện phong phú và các plugin hỗ trợ cũng đã đủ để làm một website

1.2.2 Khai thác mã nguồn Wordpress

Có thể download phiên bản mới nhất của Wordpress tại địa chỉ https://wordpress.org/download/ như trong hình 1.1

Hình 1.1 Trang để tải Wordpress Chú ý rằng tệp download về ở dạng nén ZIP, vì vậy cần phải giải nén để có thể làm việc với mã nguồn Theo chế độ mặc định, Wordpress được giải nén trong thư mục có tên là wordpress

Có thể thư mục Wordpress sẽ được đặt trong một thư mục khác tên là wordpress-x (x ở đây là số phiên bản), nhưng sẽ có một thư mục có tên “wordpress” như trong Hình 1.2

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

1.3 Cách cài đặt Wordpress

Một số phần mềm làm Webserver có thể sử dụng để làm host chứa Wordpress

là Wamp server, Xampp, Apache,… Trong đồ án này, chúng tôi chọn Xampp làm Webserver Ưu điểm của Xampp là không phải thuê host, tạo một Sever local để làm website, cập nhật phiên bản mới nhanh và đặc biệt Xampp có tích hợp hệ quản trị CSDL MySQL được dùng trong Wordpress Sau khi cài đặt thành công Xampp, cần tạo CSDL trong MySQL cho Wordpress Các bước cài đặt chi tiết như sau:

Xem thƣ mục mã nguồn

Trong thư mục mã nguồn wordpress (hình 1.3) có một số thư mục và tệp cần quan tâm như: wp-admin, wp-includes, wp-content, index.php, wp-config-sanple.php, Tất cả tập tin và thư mục này gọi nó là mã nguồn Wordpress như hình 1.3

Hình 1.3 Thư mục mã nguồn

Đƣa mã nguồn Wordpress vào localhost

Copy toàn bộ file và thư mục wordpress vào trong localhost của webserver (Ví

dụ C:\Xampp\htdocs\wordpress) Chỉ copy các file và thư mục mã nguồn, không copy cả thư mục wordpress Và như vậy, URL trên localhost của webside là: http://localhost/wordpress

Tạo mới database

Wordpress sử dụng MySQL làm hệ quản trị cơ sở dữ liệu Trước khi cài đặt wordpress cần tạo CSDL cho nó

Để tạo CSDL cần truy cập vào đường dẫn http://localhost/phpmyadmin/ tạo mới một database như hình 1.4

Hình 1.4 Tạo mới database cho Wordpress

Chạy website để cài đặt

Truy cập vào đường dẫn http://localhost/wordpress để cài đặt website

Nhấn vào thực hiện ngay như hình 1.5

Hình 1.5 Thực hiện cài đặt Wordpress Nhập tên database đã nhập ở trong MySQL Mặc định của Wordpress thì tài khoản của cơ sở dữ liệu là root và mật khẩu để trống, địa chỉ sever luôn là

localhost

Trong hình 1.6, tiền tố bảng dữ liệu nghĩa là tiền tố của database chứa dữ liệu

Wordpress, mặc định nó sẽ là wp, có thể đổi tên khác Khi nhập xong thông tin cơ

sở dữ liệu, hãy nhấn nút gửi để làm bước kế tiếp như hình 1.7

Hình 1.6 Nhập tên cở sở dữ liệu và tên đăng nhập localhost

Cuối cùng hãy nhấn thực thi cài đặt như hình bên dưới

Hình 1.7 Thực thi cài đặt

Thiết lập thông tin của website

Ở bước cài đặt này, thiết lập các thông tin cho website như tên của website,

tên tài khoản admin cùng mật khẩu, nhập xong hãy nhấn nút cài đặt wordpress

như hình 1.8

Hình 1.8 Nhập thông tin website

Đăng nhập

Nhập mật khẩu và tài khoản đã nhập ở thiết lập thông tin của website (hình

1.8) vào hình 1.9 để vào trang quản lý của website

Hình 1.9 Đăng nhập vào trang quản trị

1.4 Tìm hiểu về Woocomerce

1.4.1 Giới thiệu chung

Woocomerce là một trong những plugin hỗ trợ bán hàng qua mạng phổ biến nhất hiện nay Woocomerce hỗ trợ tổ chức Wordpress thành một trang web bày bán những món hàng

 Là một plugin phổ biến và miễn phí để tạo ra trang bán hàng trong Wordpress

 Có nhiều thành phần mở rộng giúp tăng cao hiệu suất sử dụng

 Đầy đủ các chức năng cần thiết cho một trang web bán hàng

 Tương thích với nhiều loại mẫu giao diện (Theme) khác nhau

 Dễ dàng cài đặt và sử dụng

1.4.2 Các tính năng có trong Woocommerce

Cung cấp nhiều lựa chọn trong thanh toán sản phẩm: Từ chuyển khoản, thanh toán truyền thống, đến việc trả tiền thông qua các hệ thống liên kết như PayPal và Amazon

Có thể thiết đặt tùy chỉnh chọn vận chuyển hàng hóa cho từng món hàng, một nhóm hàng hoặc sản phẩm bán trên hệ thống: Từ miễn phí đến trả phí và tính phần trăm trên giá sản phầm và nhiều tùy chỉnh khác

Dễ dàng quản lý các sản phẩm thông qua hệ thông quản lý riêng của Woocommerce

Hệ thống quản lý chặt chẽ theo từng ngày giúp người quản trị nắm rõ kho hàng của mình một cách dễ dàng và chính xác Plugin sẽ liên tục tạo cái nhìn tổng quát về lượng hàng bán ra và nhận xét từng sản phẩm, cũng như lượng hàng còn lại

và doanh số của cửa hàng, tất cả điều cơ bản cần biết về cửa hàng

Cung cấp các tùy chọn khác như giảm giá sản phẩm, các chương trình khuyến mãi (coupon), miễn phí vận chuyển cho đến giới hạn mua hàng, giúp góp phần quảng bá, kiểm soát sản phẩm và phương thức đẩy doanh thu

Dễ dàng tùy chỉnh và kiểm soát thuế sản phẩm, vấn đề luôn làm mọi người đau đầu khi tạo dựng một cửa hàng

1.5 Cấu trúc CSDL của Wordpress

Hình 1.10 Bảng MySQL của Wordpress khi mới cài đặt

Mặc định Wordpress có 11 bảng dữ liệu (table)

Để kết nối từ Wordpress đến database ta cần khai báo trong tệp config.php

wp-1.5.1 Ý nghĩa của các bảng trong mysql nhƣ sau

wp_comments: Chứa dữ liệu cần thiết về các bình luận như tên người bình

luận, nội dung, ngày tháng, địa chỉ website,

wp_link: Chứa các dữ liệu từ blogroll, nhưng wordpress đã tắt chức năng này wp_options: Bảng này khá quan trọng vì nó lưu trữ hầu hết các dữ liệu liên

quan đến thiết lập trong website Chẳng hạn như tên, địa chỉ website, giao diện đang dùng, dữ lệu khi kích hoạt giao diện và trình cắm (plugin), Do đó nếu muốn sửa trình cắm(plugin) và giao diện đang dùng thì vào bảng này để chỉnh sửa

wp_postmetas: Các dữ liệu trong bảng này là dữ liệu vĩ mô liên quan đến

thiết lập của các kiểu đăng bài viết (post type) đang dùng Chẳng hạn như các giá trị trường tùy biến (custom field)

wp_post: Những nội dung post type như tiêu đề, tác giả, nội dụng, sẽ chứa

trong bảng này (áp dụng cho toàn bộ post type)

wp_term_relationships: Bảng này chứa dữ liệu để một term có thể phân loại

qua ID

wp_usermeta: Mỗi thông tin thành viên sẽ có thêm tùy chỉnh thông tin thêm

như họ tên, nickname và các user custom field Các dữ liệu vĩ mô sẽ được lưu ở đây

wp_users: Là nơi chứa đựng các thông tin quan trong của một thành viên như

username, mật khẩu, email,

Sau khi cài các plugin vào trang web các plugin này sẽ tạo ra các bảng để chứa

dữ liệu liên quan đến nó

CHƯƠNG 2 THIẾT KẾ THEME TRÊN WORDPRESS

2.1 Xây dựng cấu trúc Theme

2.1.1 Cấu trúc của Theme Wordpress

Một Theme được hình thành bởi các template Các template sẽ bao gồm các tập tin như header.php, index.php, footer.php, sidebar.php, single.php, Nhưng sẽ có một tập tin bắt buộc nhưng không phải là template đó là tệp function.php Có thể tham khảo hướng dẫn cấu trúc Theme của Wordpress tại website http://wphierarchy.com Template là một khuôn mẫu được định nghĩa sẵn của Wordpress nhằm mục đích hiển thị nội dung trên website Ví dụ như muốn tùy biến lại cách hiển thị nội dung của các bài viết thì cần sửa template single.php Hình 2.1 mô tả cấu trúc template của Wordpress Cột màu đen là ý nghĩa của các trang, cột thứ 2 và thứ 3 là các trang con thuộc cột thứ nhất Ví dụ trang archive.php là trang lưu trữ Trong trang này có các trang con như author archive, category archive, Các cột màu xanh nhạt là các tập tin cần khai báo Nếu các trang màu xanh nhạt không có thì Wordpress sẽ lấy các trang màu xanh đậm để thay thế Còn các cột màu cam là sử dụng cho các template của các thành phần nhỏ hơn

Trong một template thì sẽ có một số các đoạn mã php đó là các hàm như get_template_part, get_sidebar, Các hàm này được gọi là các template tags

Các template tag là các hàm php nên chúng sẽ phải được nằm trong các cặp thẻ <?php ?> của ngôn ngữ php

Toàn bộ các template tag trong Wordpress đều được khai báo ở các tập tin sau:

Hình 2.1 Sơ đồ cấu trúc của Theme Wordpress

Cấu trúc lặp (loop)

Đây không phải là template tag nhưng nó là phần quan trọng được sử dụng thường xuyên trong các template để có thể hiển thị thông tin Vòng lặp là mệnh đề while() trong php được sử dụng để tạo ra các vòng lặp hiển thị toàn bộ nội dung trong một trang nhất định

Vòng lặp trong Wordpress thường được sử dụng kèm với mệnh đề if() để tránh việc thực thi vòng lặp khi truy vấn ở trang hiển thị không có dữ liệu Vòng lặp thường có cấu trúc như sau:

<?php

If(have_post()):

While(have_post() ) : The_post();

//template tag hiện thị nội dung của trang

Endwhile;

Endif;

?>

a Hàm nối get_template_part()

Một trong các template được sử dụng nhiều nhất là get_template_part() Đây

là hàm trong Wordpress được sử dụng để nối nội dung của một tập tin php nào đó vào vị trí hiện tại mà hàm này đang được khai báo

VD: get_template_part(‘content’,’pager’)

Có nghĩa là nó nối hai tập tin content.php và tập tin page.php thành tập tin content-page.php có trong cùng một thư mục

Như vậy, thay vì phải viết toàn bộ code của một tập tin content-page.php vào

vị trí đó thì sẽ tác nó ra một tập tin riêng nhằm có thể tái sử dụng lại trong các template khác hoặc cho dễ dàng quản lý code trong giao diện

Ngoài ra, cũng có thể sử dụng để nối các tập tin trong các thư mục khác nhau

VD: get_template_part(‘part/content’, ‘single’);

b Template Tags cho tổng hợp

+ Các template tags dưới không đại diện cho một chức năng cụ thể nào đó

get_header() – Nối tập tin header.php trong Theme

get_sidebar() – Nối tập tin sidebar.php trong Theme

get_footer() – Nối tập tin footer.php trong Theme

bloginfo()& get_bloginfo() – Hiển thị thông tin của website

wp_header() – Hook mặc định của Wordpress để hiển thị các thành phần

trong thẻ <header>

wp_footer() – Hook mặc định của Wordpress để sử dụng ở footer

wp-nave_menu() – Hiển thị một Menu location

dynamic_sidebar()- Hiển thị một sidebar

+ Template Tags cho Post

The_permalink() – Hiển thị mertalink của bài viết hiện tại trong truy vấn The_title() – Hiển thị tiêu đề bài viết tại trong truy vấn

The_content() – Hiển thị toàn bộ nội dung của bài viết hiện tại trong truy vấn The_excerpt() – Hiển thị excerpt hoặc một phần đầu nội dung của bài viết

hiện tại trong truy vấn

c Template tags cho tag và category

Các template này sẽ sử dụng cho template archive.php trở xuống

category_depscription() – Hiển thị mô tả của chuyên mục

tag_depscription() – Hiển thị mô tả của tag

wp_dropdown_categories() – Hiển thị danh sách chuyên mục theo kiểu

đổ xuống

single_cat_title() – Hiển thị tên category trong truy vấn

single_tag_title() – Hiển thị tag trong truy vấn

wp_tag_clound() – Hiển thị mây thẻ

d Tạo thƣ mục chứa Theme

Để tạo được một Theme mới, hãy vào thư mục của Themes trong website như:

C:\xampp\htdocs\moi\wp-content\Themes và tạo thư mục chứa Theme, ví dụ:

thanhbop Trong thư mục này hãy tạo ra một file style.css với nội dung như sau:

/*

Theme Name: thanhbop Theme URI: localhost/thanhbop Description: Theme được xây dựng bởi Phùng Canh Thành Version: 1.0

Author: thanh bop Author URI: thanhbop Textdomain: thanhbop

*/

Trong đó:

Theme Name: Là tên muốn đặt làm tên giao diện

Theme URL: Là đường dẫn đến Website

Description: Mô tả ngắn cho giao diện

Version: Là bản phát hành của Theme

Author: Là tên tác giả tạo ra Theme

Textdomain: là tên nhận diện các chuỗi mà chúng ta sẽ cho phép dịch trong Theme Tiếp theo, Theme phải có một ảnh đặt tên là screenshot.png để làm ảnh hiển thị cho Theme trong trang quản trị:

Tiếp tục tạo các file sau:

Cuối cùng vào trang quản trị để kích hoạt Theme mới tạo như hình 2.2

Hình 2.2 Kích hoạt Theme thanhbop

2.2 Viết Code cho File Functions.php

Một trong những file quan trọng nhất của một Theme Wordpress là file functions.php Đây là một file bắt buộc trong Theme và nó sẽ chứa các đoạn mã nguồn được load mỗi khi tải website Những code php cần thiết trong một Theme (ngoại trừ các code hiển thị nội dung) thì sẽ được viết vào file này

2.2.1 Thiết lập các hằng dữ liệu quan trọng

Khi viết code trong file functions.php, sẽ phải dùng nhiều lần một số đoạn

code như get_stylesheet_directory_uri, hoặc khai báo các đường dẫn Do vậy, nên

thiết lập trước một số hằng số dữ liệu chứa cố định các giá trị đó Ví dụ như dưới đây:

define( 'THEME_URL', get_stylesheet_directory() );

define( 'CORE', THEME_URL '/core' );

THEME_URL = get_stylesheet_directory() - đường dẫn tới thư mục Theme CORE = thư mục /core của Theme, chứa các file nguồn quan trọng

Tiếp theo, tạo thêm một thư mục trong Theme tên là core và tạo một file tên là init.php File này sẽ chứa các code php quan trọng trong Theme mà không muốn thay đổi nhiều khi tạo Theme con

Viết vào tệp functions.php như dưới để load tệp init.php

require_once(CORE '/init.php');

2.2.2 Hàm thiết lập các chức năng của Theme

Tạo một hàm như dưới đây có chức năng móc vào các hook của Wordpress để khởi tạo các chức năng sẽ được Theme hỗ trợ, như post format, customizer,

//Thiết lập các chức năng sẽ được Theme hỗ trợ

if ( ! function_exists( thanhbop_Theme_setup' ) ) {

// Nếu chưa có hàm thanhbop_Theme_setup() thì sẽ tạo mới hàm đó function thanhbop_Theme_setup() {

}

add_action ( 'init', 'thachpham_Theme_setup' );

Điều này có nghĩa là hàm thanhbop_Theme_setup() sẽ được tạo mới nếu máy chủ kiểm tra chưa có hàm này tồn tại Sau đó hàm này sẽ được móc vào action hook init của Wordpress để nó sẽ được thực thi sau khi Wordpress đã tải xong trang

a) Thiết lập Theme có thể dịch đƣợc nhiều sang nhiều ngôn ngữ

Có nghĩa là sẽ khai báo thư mục chưa ngôn ngữ trong Theme và khai báo textdomain để load các chuỗi ngôn ngữ có trong Theme nhằm mục đích cho Theme

có thể đọc được các tệp ngôn ngữ và người dùng có thể dịch ra nhiều ngôn ngữ khác nhau bằng việc sửa hoặc tạo tệp po

Khai báo thư mục chứa tệp ngôn ngữ và tên textdomain như sau:

$languages_forder = THEME_URL '/languages';

load_Theme_textdomain('thanhbop', $languages_forder);

Textdomain là một cái tên nhận diện chuỗi để cho phép dịch trong Theme

b) Tự chèn liên kết liên kết RSS Feed trong mã nguồn

Đây là một chức năng nhỏ trong Wordpress, nó sẽ tự thêm một liên kết RSS Feed chèn trong cặp thẻ <head> để các trình đọc RSS Feed có thể hiểu được trực tiếp địa chỉ RSS Feed trong website mà không cần khai báo chính các đỉa chỉ RSS Feed, tạo sự thuận tiện cho người đọc

add_Theme_support( 'automatic-feed-links' );

c) Thêm chức năng thumbnail cho post

Chức năng thumbnail ở đây nghĩa là chức năng Featured Image khi soạn thảo bài viết Để hiện thị ra thì phải khai báo chức năng này trong Theme

add_Theme_support( 'post-thumbnails' );

d) Thêm chức năng title-tag

Chức năng title-tag sẽ giúp Theme tự thêm thẻ <title> trên tại liệu HTML được xuất ra và sẽ có cấu trúc khá thông minh như:

- Hiển thị kiểu tên website | Mô ta website ở trang chủ

- Hiển thị kiểu tên post/page | Tên website ở trang nội dung post type

Điều này có nghĩa là khi code cho tệp header.php thì sẽ không cần thêm hàm wp_title() nữa Và sẽ khai báo như dưới đây:

add_Theme_support( 'title-tag' );

e) Thêm chức năng post format

Chức năng Post Format nghĩa là có thể tùy biến hiển thị bài viết theo các định dạng như Video, Image, Gallery, Quote, Chức năng này sẽ được khai báo như dưới đây:

f) Thêm chức năng custom background

Chức năng này sẽ giúp cho người dùng có thể đổi lại màu nền hoặc thêm ảnh nền cho website dễ dàng thông qua customize

$default_background = array(

'default-color' => '#e8e8e8',

);

add_Theme_support( 'custom-background', $default_background );

g) Tạo menu location

Trong Theme sẽ có một menu hiển thị ra bên ngoài Do đó sẽ tiến hành viết code để Wordpress tạo một Menu Location để người dùng có thể tạo một menu vào

đó, và sẽ được khai báo như dưới đây:

register_nav_menu ( 'primary-menu', ('Primary Menu', thanhbop) );

Ở đoạn trên, tạo một menu có slug tên là primary-menu, và sẽ đặt tên là Primary Menu Đoạn ('Primary Menu', thanhbop) ) là một đoạn text mà người

sử dụng Theme sau này có thể dịch được sang ngôn ngữ khác bằng phần mềm dịch, thanhbop là textdomain để nhận diện Tất cả đoạn text muốn có thể dịch được sẽ đều phải viết có cấu trúc là ('Text, textdomain) ) thay vì chỉ viết thông thường

2.3 Viết Code cho Header và Footer

2.3.1 Viết code cho file header.php

Tại file này, sẽ khai báo các thẻ HTML cần thiết mà trong một tài liệu HTML chuẩn đều có như <html>, <head>, <body>,….và nhất là phần thẻ <head> là phần quan trọng nhất Ngoài ra, sẽ viết thêm code hiển thị logo website, tìm kiếm và menu

để vào file header.php này vì các thành phần đó đều hiển thị trong tất cả mọi trang Trước tiên, cần khai báo các thành phần chính của phần header như sau:

Trong phần này sẽ gọi thêm thiết lập khác như:

Gọi tiêu đề của website:

<title><?php wp_title( '|', true, 'right' );

bloginfo(name);?>

</title>

Gọi ra link css của website:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url') ?>"/>

Gọi hook wp_head(), đây là cái hook để giúp Wordpress hiểu được đây là khu vực thẻ <head> của giao diện để nó có thể tự thêm các thành phần cần thiết lên, cũng như các plugin khác có muốn can thiệp vào khu vực này thì cũng sẽ dò qua hook wp_head()

'top' => 'top menu',

'footer' => 'footer menu'

'theme_location' => 'top', // tên location cần hiển thị

'container' => 'ul', // thẻ container của menu

'container_class' =>'main-nav-1', //class của container

Hình 2.3 Thêm trình đơn vào menu

Để thêm được logo vào header thì cần cài thêm plugin Redux Framework để

người dùng có thể thêm ảnh logo vào

Sau đó thêm thiết lập trong header.php như dưới đây để gọi logo

Hình 2.4 Thêm logo vào website Thêm khung tìm kiếm cho website dùng code dưới đây

<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/"> <div><input class="input-search" placeholder="Tìm kiếm" type="text" size="18" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" />

<button type="submit" id="searchsubmit" value="Search" class="btn"> Tìm kiếm</button>

</div>

</form>

2.3.2 Viết code cho file footer.php

Cũng giống như header.php, footer.php là file sẽ hiển thị ở tất cả các trang File footer dùng để hiển thị thông tin của cửa hàng nên sẽ dùng widget để hiển thị thông tin này ra ngoài website

Hãy nên nhớ rằng, ở file header.php chứa thẻ mở mà chưa đóng thì nó sẽ được đóng ở file footer.php

Chẳng hạn như trong file header.php, có mở thẻ <body>, <html> đều chưa được đóng, vậy thì bây giờ sẽ viết thẻ đóng cho nó ở file footer.php kèm thêm hook wp_footer() như sau:

<?php wp_footer(); ?>

</body> <! end body >

</html> <! end html >

Cũng giống như wp_head(), hook wp_footer() là giúp cho Wordpress nhận ra đâu là phần footer của trang web để một số plugin có thể hook vào và làm được những việc nó muốn

Sau đó, thêm class footer để thêm widget cho footer

'description' => 'Khu vực sidebar hiển thị duoi footer',

'before_widget' => '<div class="col-xs-12 col-sm-6 col-md-3">

Hình 2.5 Tạo widget nơi footer

2.4 Viết Code cho File index.php

Đây là file sẽ làm trang chủ mặc định cho Wordpress và thường là ở phần này

sẽ viết code hiển thị danh sách các bài viết mới nhất trên website

Gọi header và footer của website bằng hai đoạn code dưới đây

<?php get_header(); ?>

<?php get_footer(); ?>

Wordpress sẽ load file header.php ở trên đầu và load file footer.php ở phần dưới Và sau đó viết code giữa hai đoạn này để hiển thị nội dung ra giữa website Thêm đoạn HTML để chia cột phần hiển thị nội dung ra có phần bài viết mới nhất nằm bên trái và sidebar nằm bên phải

content là khung hiển thị nội dung và #sidebar là khung hiển thị sidebar của website

Ở #main-content viết một đoạn vòng lặp như sau:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php get_template_part( 'content', get_post_format() ); ?>

Get_template_part( 'content', get_post_format()) nghĩa là sẽ load file

content-$format.php trong thư mục Theme $format là tên định danh của từng loại Post Format như video, audio, image, nếu mà bài viết đó chưa chọn post forrmat thì nó

sẽ load file content.php

Get_template_part( 'content', 'none' ) nghĩa là nó sẽ load file content-none.php trong thư mục Theme, và tệp này sẽ chứa nội dung hiển thị thông báo chưa có dữ liệu, ví dụ như nó sẽ báo website này chưa có bài viết

Ở bên dưới phần <?php endwhile; ?> viết thêm code hiển thị hàm phân trang như sau:

<?php thanhbop_pagination(); ?>

Sau đó, tạo hàm thanhbop_pagination(); vào file function để làm phân trang như sau:

if (!function_exists( 'thanhbop_pagination' ) ) {

function thanhbop_pagination() {

if ( $GLOBALS['wp_query']->max_num_pages < 2 ) { return ''; }?> <nav class="pagination" role="navigation">

Hoặc có thể phân trang bằng plugin hỗ trợ như plugin wp pagenavi Sau khi

cài plugin vào Wordpress thì chèn thêm đoạn code dưới vào để hiển thị phân trang:

<?php wp_pagenavi(); ?>

Sau đó vào website sẽ hiển thị như hình dưới đây

Hình 2.6 Phân trang theo plugin wp pagenavi

2.5 Viết Code cho File Content

File này mục đích là để hiển thị nội dung của trang web ở trang chủ, trang single và page

Bắt đầu viết code cho file content.php, viết cấu trúc thẻ HTML như sau:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

Trong phần trên, mỗi bài viết hiển thị ra đều nằm trong cặp thẻ <article> với

id là post-$id cùng với các class tương ứng của nó

Bên trong cặp thẻ <article> có các class hiển thị ra ảnh đại diện, hiển thị tên, thông tin của bài viết và hiển thị nội dung của bài viết như:

Class entry-content dùng để hiển thị nội dung bài viết

2.5.1 Code cho class entry-thumbnail

Class này để hiển thị ra ảnh đại diện cho bài viết

Tạo hàm hiển thị ảnh đại diện trong function.php như sau:

if ( ! function_exists( 'thanhbop_thumbnail' ) ) {

function thanhbop_thumbnail( $size ) {

// Chỉ hiển thumbnail với post không có mật khẩu

if(!is_single()&&has_post_thumbnail()&&!post_password_required() || has_post_format( 'image' ) ) : ?>

<figure class="post-thumbnail"><?php the_post_thumbnail( $size );

?></figure><?php

endif; }

}

Hàm hiển thị ảnh thumbnail của bài viết Ảnh thumbnail sẽ không được hiển

thị trong trang single, nhưng sẽ hiển thị trong single nếu bài viết đó có format là

2.5.2 Code cho entry-header

Phần này sẽ cho hiển thị tiêu đề của bài viết và trong mỗi tiêu đề sẽ chèn một link để dẫn vào trang chi tiết cho bài đó

Thêm một hàm hiển thị cái tiêu đề của bài viết Viết đoạn code dưới đây vào functions.php:

Hàm hiển thị tiêu đề của bài viết entry-header

Tiêu đề của bài viết sẽ nằm trong cặp thẻ <h1> trong trang single

Còn trong trang chủ và trang lưu trữ sẽ nằm trong cặp thẻ <h2>

Sau đó sẽ chèn hàm vừa tạo vào trong class="entry-header"

Hàm hiển thị người đăng bài:

printf( ('<span class="author">Đăng bởi %1$s</span>', 'thanhbop'),

get_the_author() );

Hàm hiển thị ngày tháng đăng bài:

printf( ('<span class="date-published">|| %1$s</span>', 'thanhbop'),

get_the_date());

Hàm hiển thị đăng trong chuyên mục nào:

printf( ('<span class="category"> || %1$s</span>', 'thanhbop'),

Hình 2.7 Hiển thị thông tin bài viết Viết hàm nội dung trong class entry-content và sẽ được viết trong tệp functions.php

'nextpagelink' => ( 'Next page', 'thanhbop' ),

'previouspagelink' => ( 'Previous page', 'thanhbop' ) );

wp_link_pages( $link_pages );

endif; }}

Nếu trang chủ và trang lưu trữ thì sẽ hiển thị the_excerpt() (hàm này hiển

thị nội dung bài viết rút gọn) Còn nếu là trang single và trang page thì sẽ hiển thị toàn bộ nội dung của bài viết

Viết hàm hiển thị các tag trong file functions.php

if ( ! function_exists( 'thanhbop_entry_tag' ) ) {

function thanhbop_entry_tag() {

if ( has_tag() ) :

echo '<div class="entry-tag">';

printf( ('Tagged in %1$s', 'thanhbop'), get_the_tag_list( '', ', ' ) ); echo '</div>';

endif; }

}

2.6 Viết Code cho Post Format

Phần trên đã viết code cho file content.php để hiển thị các thông tin về các post type như tiêu đề, nội dung, thông tin, Như ở phần viết code cho functions.php

có khai báo sử dụng tính năng Post Format nhằm mục đích cho các post type hiển thị khác nhau trên từng Post Format Do vậy, sẽ viết code cho các Post Format mà