Lập trình theme cho website bán hàng

Có rất nhiều cách để xây dựng được một website, một trong những cách được các công ty, các doanh nghiệp các tổ chức và đông đảo người dùng yêu thích đó là dùng phần mềm mã nguồn mở.. Tro

Trang 1

TRƯỜNG ĐẠI HỌC VINH

KHOA CÔNG NGHỆ THÔNG TIN

-

Nguyễn Thị Lý BÁO CÁO

ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC

Tên đồ án:

Lập trình theme cho website bán hàng

Nghệ An, tháng 01 năm 2016

Trang 2

Đồ án tốt nghiệp

Nguyễn Thị Lý – Lớp 52K2 – Khoa CNTT 1

TRƯỜNG ĐẠI HỌC VINH

KHOA CÔNG NGHỆ THÔNG TIN

-

BÁO CÁO

ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC

Tên đồ án:

Lập trình theme cho website bán hàng

Sinh viên thực hiện: Nguyễn Thị Lý - 1151073782

Lớp: 52K2 - CNTT

Giáo viên hướng dẫn: TS Hoàng Hữu Việt

Nghệ An, tháng 01 năm 2016

Trang 3

giáo viên hướng dẫn TS HOÀNG HỮU VIỆT đã chỉ dạy, giúp đỡ nhiệt tình, sẵn

sàng giải đáp các thắc mắc, giúp đỡ em trong suốt quá trình làm đồ án

Cũng qua đây cho em gửi lời cảm ơn đến Ban giám đốc và toàn thể cán bộ nhân viên Công ty phát triển công nghệ G5 đã giúp đỡ em trong suốt quá trình thực

tập tốt nghiệp, quá trình làm đồ án tốt nghiệp Sự chỉ dạy tận tình của Ban giám đốc và toàn thể cán bộ nhân viên của công ty đã tạo điều kiện thuận lợi cho em có cơ hội tiếp cận với thực tiễn, làm quen với cách làm việc ,cách tổ chức một dự án và cách làm việc nhóm, cũng như nắm bắt được nghiệp vụ chuyên môn, kịp thời bổ sung và hoàn chỉnh kiến thức, đó là những bước tiền đề để tránh được những bỡ ngỡ, bắt kịp nhanh với thực tế sau khi ra trường

Do thời gian chưa nhiều , kiến thức còn hạn hẹp nên trong quá trình làm đồ án tốt nghiệp và làm báo cáo sẽ không thể tránh khỏi những thiếu sót Rất mong nhận được

sự đóng góp ý kiến từ các thầy giáo, cô giáo và các bạn cũng như Ban giám đốc và toàn thể cán bộ nhân viên Công ty phát triển công nghệ G5 để em có thể hoàn thiện tốt

đồ án tốt nghiệp và các kỹ năng làm việc

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

Sinh viên thực hiện Nguyễn Thị Lý

Trang 4

MỤC LỤC LỜI CẢM ƠN 2

MỤC LỤC 3

CHƯƠNG I : ĐẶT VẤN ĐỀ 6

1.1 Mở đầu 6

1.1.1 Đặt vấn đề 6

1.1.2 Lí do chọn đề tài 6

1.1.3 Khái niệm Phần mềm mã nguồn mở, Theme 8

1.1.4 Các hướng giải quyết bài toán 8

1.2 Yêu cầu và chuẩn bị 9

1.2.1 Lựa chọn công cụ phát triển ứng dụng 9

1.2.2 Thực hiện 10

1.2.3 Mục tiêu và yêu cầu xây dựng hệ thống 10

CHƯƠNG 2: KỸ THUẬT THIẾT KẾ THEME 12

2.1 Tìm hiểu cấu trúc Theme wordpress 12

2.1.1 Cấu trúc Theme WordPress 12

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

2.1.3 Viết code cho tập tin Function 17

2.1.4 Thiết lập chiều rộng nội dung 18

2.1.5 Thiết lập theme có thể dịch được sang nhiều ngôn ngữ 18

2.1.6 Thêm chức năng title-tag 19

2.1.7 Thêm chức năng Post Format 19

2.1.8 Thêm chức năng custom background 20

2.1.9 Tạo menu location 20

2.1.10 Tạo Sidebar 21

2.2 Viết code cho tập tin Header.php 21

2.2.1 Ý nghĩa của header.php 21

2.2.2 Viết code cho tập tin Header 21

2.3 Viết code cho tập tin Footer.php 23

2.3.1 Ý nghĩa của tập tin Footer.php 23

2.3.2 Viết code cho footer.php 23

2.4 Viết code cho tập tin index.php 24

Trang 5

2.4.1 Ý nghĩa của tập tin Index.php 24

2.4.2 Viết code cho tập tin Index.php 25

2.5 Viết code hiển thị Sidebar 25

2.5.1 Bản chất của Sidebar 25

2.5.2 Hiển thị Sidebar ra website 26

2.6 Viết code cho tập tin Index.php để hiển thị Post/Page 27

2.6.1 Hiển thị ảnh đại diện cho Post 28

2.6.2 Hiển thị tiêu đề cho Post 30

2.6.3 Viết code hiển thị nội dung Post 32

2.7 Viết code cho trang lưu trữ và 404 34

2.7.1 Code cho trang archive.php 34

2.7.2 Code cho tập tin author.php 35

2.8 Tạo Custom Page Template 36

2.8.1 Template Full-Width 36

2.8.2 Viết code cho Template Full-Width 36

2.9 Tạo ShortCode 37

2.9.1 Khái niệm Shortcode 37

2.9.2 Tạo Shortcode 37

2.10 Tạo Custom_Post_Type 39

2.10.1 Khái niệm Custom-Post-Type 39

2.10.2 Tạo Custom Post Type Slider 40

2.11 Tạo widget cho WordPress 42

2.11.1 Khái niệm Widgets 42

2.11.2 Quy trình tạo Widget 42

2.12 Tùy chỉnh CSS cho Theme, Website 43

CHƯƠNG 3: QUY TRÌNH THIẾT KẾ BÀI TOÁN BÁN HÀNG 45

VÀ CÀI ĐẶT ỨNG DỤNG 45

3.1 Mô tả bài toán 45

3.2 Khảo sát hệ thống và đánh giá hiện trạng 46

3 2.1 Hiện trạng của trang web bán hàng online hiện nay 46

3.2.2 Hiện trạng của các hình thức bán hàng phổ biến 47

3.3 Quy trình thiết kế bài toán 48

3.3.1 Kế thừa cơ sở dữ liệu của mã nguồn mở WordPress 48

Trang 6

3.3.2 Quy trình làm việc của Cơ sở dữ liệu 49

3.3.3 Khả năng can thiệp vào mã nguồn WordPress 52

3.4 Cài đặt ứng dụng 53

3.3.1 Yêu cầu về giao diện 53

3.3.2 Cài đặt, thiết kế website Bán chăn ga gối đệm 53

CHƯƠNG 4: KẾT LUẬN 61

4.1 Những thuận lợi và khó khăn 61

4.1.1 Thuận lợi 61

4.1.2 Khó khăn 61

4.1.3 Kết quả đạt được 61

4.2 Hướng phát triển của đồ án 62

4.3 Tài liệu tham khảo 63

4.3.1 Tài liệu Tiếng Việt 63

4.3.2 Tài liệu Tiếng Anh 63

Trang 7

CHƯƠNG I : ĐẶT VẤN ĐỀ 1.1 Mở đầu

1.1.1 Đặt vấn đề

Trong thời đại ngày nay, cùng với sự phát triển của kinh tế - xã hội thì CNTT đã nắm giữ một vai trò hết sức quan trọng Các hình thức thương mại điện tử dần dần phát triển thay thế hình thức buôn bán thủ công, truyền thống Hầu hết trên các lĩnh vực đều có sự trợ giúp của tin học, nó mang lại cho con người rất nhiều lợi ích, tiết kiệm công sức, thời gian, tiền bạc Chỉ cần ngồi 1 chỗ cũng có thể mua sắm, buôn bán, trao đổi thay vì phải đến tận nơi Để tạo được uy tín, khẳng định được thương hiệu và giới thiệu sản phẩm đến người tiêu dùng thì việc quảng bá chiếm giữ một phần không

hề nhỏ Chỉ cần ngồi ở nhà thôi nhưng chúng ta vẫn nắm bắt được tình hình thị trường

cổ phiếu, thị trường chứng khoán, thị trường bất động sản, tình hình chính trị, kinh tế,

xã hội Hay chỉ cần mấy cú nhấp chuột vài tiếng đồng hồ sau đã có sản phẩm mang đến tận nhà thay vì phải đến tận nơi để mua chúng

Để người dùng biết đến sản phẩm của nhà sản xuất Để một nhà sản xuất, một doanh nghiệp, một công ty có thể giới thiệu sản phẩm của mình đến người tiêu dùng

Để một người mua xem được nhiều sản phẩm, có cái nhìn và so sánh về các sản phẩm, chọn được sản phầm tốt, để một công ty, doanh nghiệp tạo được uy tín, thương hiệu,….Tất cả đều nhờ đến việc quảng bá, giới thiệu Ngày nay có nhiều hình thức để quảng bá, giới thiệu nhưng ắt hẳn việc xây dựng một website sẽ luôn được quan tâm đầu tiên đối với các công ty, doanh nghiệp

Bài toán đặt ra là nên xây dựng website quảng bá như thế nào để mang phong cách riêng, giao diện thân thiện, đẹp mắt và dễ sử dụng, có được nhiều chức năng đáp ứng cho khách hàng, để khách hàng ấn tượng và đồng thời trang web cũng phải tạo

được uy tín, thương hiệu cho doanh nghiệp, cho công ty

1.1.2 Lí do chọn đề tài

1.1.2.1 Nhu cầu của cá nhân, doanh nghiệp, công ty

Công nghệ thông tin không chỉ dừng lại ở mục đích phục vụ cho khoa học kỹ thuật mà đi sâu vào đời sống chính trị, kinh tế - xã hội, trở nên thân thiện, gần gũi, mang lại nhiều lợi ích cho con người Trong lĩnh vực kinh tế, công nghệ thông tin đã thực sự có nhiều đóng góp quan trọng trong công việc quản lý, trao đổi, mua bán và đặc biệt là quảng cáo sản phẩm, hàng hóa của các công ty, xí nghiệp, doanh nghiệp Những ứng dụng của công nghệ thông tin đã và đang mang lại nhiều lợi ích không

Trang 8

nhỏ, đem lại hiệu quả kinh tế cao cho những công ty, doanh nghiệp Muốn bán và đưa các sản phẩm cho mọi người biết đến một cách rộng rãi và nhanh chóng thì cần phải quảng cáo Vì vậy, xây dựng một website quảng cáo và bán các sản phẩm là điều tối thiểu cần thiết đối với mọi công ty, doanh nghiệp để tồn tại và phát triển trong nền kinh tế thị trường cạnh tranh khốc liệt ngày nay

Thực tế các website bán hàng trực tuyến hầu hết đều được xây dựng dựa trên các

mã nguồn xây dựng sẵn - mã nguồn mở Nó có nhiều ưu điểm giúp cho doanh nghiệp

có thể đưa gian hàng của mình lên thị trường Internet, mua bán trao đổi hàng hóa và đặc biệt một chức năng quan trọng bậc nhất đó là quảng bá sản phẩm Không những chỉ có doanh nghiệp nhà nước, tư nhân, các tổ chức nhà nước, tổ chức chính trị, các công ty hay các trường học đều có nhu cầu thiết kế cho mình một website, mà bên cạnh đó các cửa hàng nhỏ hay thậm chí là cá nhân mỗi chúng ta cũng muốn có 1 trang web để lưu trữ, chia sẻ thông tin hay là một blog cá nhân mang phong cách riêng Tuy nhiên để xây dựng và được đánh giá là một trang web tốt còn phụ thuộc rất nhiều yếu tố Có rất nhiều cách để xây dựng được một website, một trong những cách được các công ty, các doanh nghiệp các tổ chức và đông đảo người dùng yêu thích đó

là dùng phần mềm mã nguồn mở

1.1.2.2 Lợi ích của mã nguồn mở

Sử dụng phần mềm nguồn mở đem lại nhiều lợi ích cho các công ty, doanh nghiệp Các lợi ích chính gồm:

- Tiết kiệm chi phí cho việc mua bản quyền

- Chỉnh sửa phần mềm phù hợp nhu cầu nhằm giảm công sức xây dựng phần mềm từ đầu

- Nhờ vào tính mở của các mã nguồn mà người sử dụng chỉ cần thay đổi mã nguồn để đạt được tính năng như ý muốn Đây là một tính năng mới so với các phần mềm có bản quyền

- Chất lượng: các phần mềm mã nguồn mở gần gũi với những gì mà người sử dụng mong muốn vì người sử dụng có thể tự mình tạo ra những điều đó Không phải các nhà cung cấp đem đến cho người sử dụng những giá trị mà họ nghĩ là người sử dụng sẽ trông đợi, mà chính các nhà thiết kế và những người sử dụng tạo ra những giá trị kỳ vọng của mình, và họ sẽ làm rất tốt điều đó

- Tính linh hoạt: Khi sử dụng phần mềm độc quyền như Microsoft Windows và Office, người sử dụng sẽ chỉ đơn điệu tuân theo các quy trình cập nhật cả phần cứng

và phần mềm đã được dựng sẵn Ngược lại, với các phần mềm mã nguồn mở, người sử

Trang 9

dụng có thể chạy chúng trên các phần cứng lỗi thời hơn Không phải các nhà cung cấp,

mà chính người sử dụng mới là người quyết định khi nào cần cập nhật các phần mềm

Ít nhất thì một nghiên cứu gần đây cũng cho thấy, trên thực tế, các doanh nghiệp khi lựa chọn sử dụng phần mềm mã nguồn mở đều vì lý do trước tiên chính là những

ưu việt về mặt kỹ thuật mà phần mềm này có được

1.1.3 Khái niệm Phần mềm mã nguồn mở, Theme

Phần mềm mã nguồn mở (hay gọi tắt là mã nguồn mở) là phần mềm với mã nguồn được công bố và sử dụng một giấy phép nguồn mở Giấy phép này cho phép

bất cứ ai cũng có thể nghiên cứu, thay đổi và cải tiến phần mềm, và phân phối phần mềm ở dạng chưa thay đổi hoặc đã thay đổi Định nghĩa Nguồn mở của Tổ chức Sáng kiến Nguồn mở (Open Source Initiative OSI) thể hiện một triết lí nguồn mở và xác định ranh giới về việc sử dụng, thay đổi và tái phân phối phần mềm nguồn mở Giấy phép phần mềm cung cấp cho người dùng các quyền vốn bị cấm bởi bản quyền, gồm các quyền về sử dụng, thay đổi và tái phân phối Một vài giấy phép phần mềm nguồn

mở đã được thẩm định thuộc giới hạn của định nghĩa nguồn mở Ví dụ nổi bật nhất

là Giấy phép Công cộng GNU (GPL) Trong khi nguồn mở cho phép công chúng truy cập vào nguồn của một sản phẩm, giấy phép nguồn mở cho phép tác giả điều chỉnh cách truy cập đó

Mã nguồn mở đã hỗ trợ cho người dùng nhiều tính năng.Tuy nhiên cái quan trọng nhất và có lẽ là linh hồn của Website đó là Theme hay còn gọi chủ đề Một cách tổng quát Theme là toàn bộ cách bố trí, trang trí, cách hiển thị và các chức năng của một website

Các mã nguồn mở thật sự đem lại cho người dùng nhiều tiện ích Tuy nhiên nếu chỉ dùng mọi thứ miễn phí thì sẽ chẳng bao giờ ta có được một website đẹp hay chuyên nghiệp Để có được một Theme đẹp và chức năng đầy đủ đó là một vấn đề Lượng người dùng mã nguồn mở để xây dựng trang web tăng kéo theo nhu cầu mua Theme cho mã nguồn mỡ cũng tăng Không chỉ lượng khách hàng trong nước mà lượng khách hàng nước ngoài cũng rất nhiều, và khi ta đăng ký trên các trang web chuyên về mua bán Theme (ví dụ trang Themeforest.vn) khi đó ta sẽ thấy được thị trường quốc tế còn có tiềm năng hơn cả thị trường trong nước

1.1.4 Các hướng giải quyết bài toán

Có rất nhiều cách để xây dựng một website như: Dùng các ngôn ngữ lập trình Java, ASP.NET, PHP,… Dùng các phần mềm mã nguồn mở như Drupal, Nuke Viet,

Trang 10

Như đã trình bày ở trên, có rất nhiều hướng giải quyết vấn đề đã đặt ra Tuy nhiên trong phạm vi Đồ án tốt nghiệp chuyên ngành Kỹ sư Công nghệ thông tin này

em sẽ trình bày về cách giải quyết vấn đề trên bằng việc dùng phần mềm mã nguồn

mỡ WordPress để xây dựng website Trước đó sẽ lập trình Theme cho mã nguồn mở,

cụ thể ở đây là Lập trình Theme cho Phần mềm mã nguồn mở Wordpress Sau đó sẽ dùng Theme đã lập trình demo một website bán hàng, cụ thể là bán Chăn-ga-gối-đệm

1.2 Yêu cầu và chuẩn bị

1.2.1 Lựa chọn công cụ phát triển ứng dụng

Hiện nay có nhiều công cụ phát triển ứng dụng web nói chung và mã nguồn mở WordPress nói riêng Các công cụ phổ biến bao gồm:

- Phần mềm XamPP (Nếu đã có sever /hosting thì bỏ qua phần mềm này)

- WordPress, nên dùng phiên bản mới nhất (Hiện tại phiên bản 4.4)

- Phần mềm Photoshop hoặc Abode Framwork CS6

- Phần mềm để soạn thảo, lập trình có thể là Sublime Text hoặc Php Stom

- Các trình duyệt Fifox, Chome, IE, Brower, Safari,

Trang 11

Ngoài các công cụ ở trên để làm tốt bài toán đã đặt ra thì trước tiên yêu cầu về mặt kiến thức cần phải chuẩn bị:

- Nắm vững các kiến thức về mã nguồn mở WordPress từ cơ bản đến nâng cao

- Quan trọng nhất là biết cấu trúc, cách tổ chức các tập tin của một Theme sao cho hợp lí nhất với mỗi theme

- Kiến thức về HTML5 và CSS3

- Đặc biệt phải có khả năng lập trình và làm việc với ngôn ngữ lập trình PHP

- Kiến thức về JavaScript, Jquery, Ajax

Trước khi bắt đầu lập trình thì xây dựng cấu trúc của theme và xác định tính năng chính của theme Ví dụ: theo chuyên mục nhóm theme là Shop thì khách hàng mua về

để chỉnh sửa làm website về buôn bán Nếu chuyên mục là multy perpose thì khách hàng có nhiều mục đích sử dụng hơn, vì nó là dạng theme cung cấp cho nhiều thể loại, shop, các trang blog, trang giới thiệu,… Theme nghiêng về chuyên mục giáo dục thiên

về trẻ mầm non, khách hàng mua về để giới thiệu về trường mầm non hoặc bán đồ trẻ

em, hoặc theme nghiêng về xây dựng thì mua về xây dựng trang web quảng cáo xây dựng, Nói chung là tùy mục đích sử dụng để làm theme cho phù hợp với nhu cầu

1.2.2 Thực hiện

Để bắt đầu xây dựng cấu trúc và lập trình Theme, cần phải thực hiện cài đặt các phần mềm, các công cụ hỗ trợ, cài đặt tất cả các phần mềm cần thiết như đã chuẩn bị ở trê bao gồm:

- Cài đặt Localhost (Phần mềm XamPP)

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

- Dựng khung cấu trúc theme WordPress

- Viết code cho tất cả các tập tin

- Xây dựng thành 1 theme hoàn chỉnh

- Xây dựng một website để minh họa

1.2.2 Mục tiêu và yêu cầu xây dựng hệ thống

1.2.3.1 Đối với Theme

Theme sau khi lập trình phải thích ứng với Phần mềm mã nguồn mở WordPress Tối ưu hóa Theme, hạn chế mức thấp nhất sử dụng các Plugin Lập trình rõ ràng, dễ hiểu Theme tạo ra phải có đầy đủ các phần cần thiết như Header, Footer, SiderBar Tạo ra những khu vực trực quan (bằng việc tạo Widget, Custom Page Template,…) để người dùng có thể linh hoạt thay đổi

Trang 12

1.2.3.2 Đối với Website

Trang web được xây dựng nhằm trưng bày giới thiệu các sản phẩm về chăn-ga gối-đệm tới khách hàng khi tham quan trang web với các yêu cầu:

- Bố cục và giao diện thân thiện, dễ sử dụng

- Xây dựng và phân chia các sản phầm chăn-ga-gối-đệm thành menu giúp khách hàng nhận biết được các sản phẩm ở danh mục nào

- Luôn cập nhật các sản phẩm mới một cách nhanh chóng, giúp khách hàng nắm bắt thông tin nhanh nhất và rõ ràng nhất có thể

- Cho phép tìm kiếm sản phẩm một cách nhanh chóng Thông tin sản phẩm phải luôn luôn được cập nhật chính xác

- Trình bày bố cục bắt mắt, thu hút khách hàng.

Trang 13

CHƯƠNG 2: KỸ THUẬT THIẾT KẾ THEME

2.1 Tìm hiểu cấu trúc Theme wordpress

2.1.1 Cấu trúc Theme WordPress

Hình 2.1: Sơ đồ cấu trúc Theme trong WordPres

Cấu trúc của một theme được mô tả như giao diện hình 2.1 Dựa vào cấu trúc trên ta có:

- Từ trái qua phải, trước tiên là tập tin Author Archive (trang lưu trữ cho tác giả) Trang lưu trữ cho tác giả ta có tập tin author-ten-tac-gia.php Chẳng hạn có tác giả tên

là A trên website và muốn cấu hình lại trang hiển thị những bài post của tác giả A đó chúng ta sẽ tạo ra một tập tin là Author-A.php (hoặc có thể viết Author-ID của tác giả A.php) Nếu trong theme không có hai tập tin này thì nó sẽ sử dụng tập tin Author.php

Trang 14

và tập tin Author.php này sẽ sử dụng chung cho toàn bộ tác giả trong website Trường

hợp tập tin Author.php cũng không có thì nó sẽ sử dụng tập tin Archive.php Nếu tập

tin Archive.php này không có thì nó sẽ sử dụng tập tin Index.php Tập tin Index.php

này sẽ có mức sử dụng rộng hơn các tập tin khác

- Đọc từ trái qua, phía bên tay trái là ý nghĩa của các trang Chẳng hạn Archive

Page là trang lưu trữ Trong Archive đó có các trang như Author Archive, Categories

Archive, Custom Archive,

- Những phần màu đen viết ra mục đích để cho chúng ta hiểu là nó thuộc

Template nào Chẳng hạn với Sigula Page, nó là một trang riêng, một trang để hiển thị

một cái gì đó riêng Trong Sigula Page gồm có 2 phần Single Post page (hiển thị nội

dung của một Post) và single Page (Hiển thị nội dung của một Page),…Các tập tin

khác cũng có quy trình tương tự

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

Để xây dựng một theme, chọn thư mục wp-content/themes và tạo một thư mục

muốn chứa theme, chẳng hạn ở đây sẽ đặt tên thư mục là graphsign Trong thư mục

này, tạo ra một tập tin style.css với nội dung như sau:

Hình 2.2 Mở đầu của file Style.css

Mục đích các dòng comment được thêm vào trong tập tin style.css là như sau:

- Tags: Khi upload theme này lên thư viện WordPress.Org thì cái tag này nghĩa là

các từ khóa mà người dùng có thể tìm ra theme một cách dễ dàng nhất

- Text-domain: Thực ra đây là một dòng comment thêm, để cho người dùng có thể

biết textdomain trong theme là gì và để dễ dàng dịch theme ra một ngôn ngữ

khác

- Ngoài ra cần thêm một tấm ảnh và đặt tên là screenshot.png rồi đặt vào thư mục

theme để làm ảnh hiển thị

Trang 15

Hình 2.3 Ảnh đại diện hiển thị cho Theme

Để xây dựng 1 theme, về cơ bản cần tạo ra thêm một số tập tin cần thiết khác, cấu trúc của một theme sẽ bao gồm các tập tin như hình bên dưới:

Trang 16

Hình 2.4 Cấu trúc các tập tin cho Theme

Điểm danh sơ qua về ý nghĩa của của các tập tin vừa được tạo ra ta có:

1 404.php: Hiển thị lỗi 404 khi trang yêu cầu hiển thị không tồn tại

2 Archive.php : Tập tin lưu trữ

3 Author-bio: Tập tin lưu trữ thông tin tác giả

4 Category.php: Tập tin chứa các danh mục

5 Comments.php: Tập tin quản lí các bình luận

Trang 17

6 Content-image.php: Tập tin định dạng nội dung là hình ảnh

7 Content-link.php: Tập tin định dạng nội dung là các liên kết

8 Content-none.php: Hiển thị một nội dung gì đó khi Page không tồn tại nội dung

9 Content-quote.php: Tập tin định dạng nội dung là quote

10 Content-video.php: Tập tin định dạng nội dung là video

11 Footer.php: Tượng trưng cho phần chân của Website

12 Function: Chứa những đoạn mã chức năng trong Theme Nó sẽ được gọi

ra mỗi lần tải lại trang Cho nên chúng ta cần thực thi cái gì mỗi khi tải lại trang thì mình sẽ đưa vào đây

13 Header.php: Tượng trưng cho phần đầu của trang web Nó sẽ được gọi ra

ở mỗi trang

14 Index.php: Tượng trưng cho trang chủ Nếu một theme chỉ có 3 tập tin Function.php , Style.css và Index.php thì nó sẽ được sử dụng cho mọi trang trong website

15 Page.php: Hiển thị nội dung của một Page

16.Search.php: Hiển thị kết quả tìm kiếm

17.Sidebar.php: Gọi sidebar cho những trang cần thiết

18 Single.php: Hiển thị nội dung của một Post hoặc một Post-title nào đó

19 Screenshor.png: Hình ảnh đại diện cho Theme

Ngoài ra, tạo một thư mục tên là templates trong theme và tạo các tập tin sau vào thư

mục đó, các tập tin này sẽ là custom page template

20 full-width.php: Viết code tùy chỉnh cho nội dung có độ rộng toàn trang

21 contact.php: Viết code cho trang liên hệ

Bây giờ vào Dashboard → Appearance →Themes thì sẽ thấy theme vừa tạo đã được

hiển thị ra Sau khi kích hoạt thì website vẫn sẽ là trang trắng, để hiển thị nội dung, phải tiến hành viết code cho các tập tin

Trang 18

Hình 2.5 Theme vừa tạo đã xuất hiện trong Apperance

2.1.3 Viết code cho tập tin Function

2.1.3.1 Chức năng của tập tin function

Một trong những tập tin quan trọng nhất của một theme WordPress đó là tập tin functions.php Đây là một tập tin bắt buộc trong theme và sẽ là nơi chứa các đoạn code nguồn mà chúng ta muốn Nó luôn được tải mỗi khi tải website, tóm lại là toàn bộ code PHP cần thiết trong một theme (ngoại trừ các code hiển thị nội dung) thì sẽ đều được viết vào tập tin này

Một số dữ liệu (constrant) và hằng dữ liệu quan trọng sẽ cần sử dụng lại nhiều lần Vì vậy cần thiết lập chúng ở tập tin này và khai báo các đoạn code cần thiết trong tập tin functions.php

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

Trong khi viết code trong tập tin functions.php, sẽ dùng đi dùng lại một số đoạn

code như get_stylesheet_directory_url (hàm lấy đường dẫn), 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 dữ liệu chứa cố định các giá trị đó

để có viết thì chỉ cần viết tên hằng ra thôi Code ban đầu như sau:

Trang 19

Tạo thêm một thư mục trong theme tên là core và tạo một tập tin tên

là init.php trong thư mục đó Thư mục /core sẽ chứa các tập tin code PHP quan trọng

trong theme mà chúng ta không muốn thay đổi nhiều nếu có nhu cầu tạo child theme

(theme con) Tập tin init.php dùng để tải các tập tin PHP đặc thù trong theme, ví dụ

như tải các tập tin tạo widget của theme Để tải tập tin init.php thêm đoạn code sau

vào tập tin functions.php

2.1.4 Thiết lập chiều rộng nội dung

Đây là Theme cơ bản và mới bắt đầu nên phải thiết lập nội dung chiều rộng cho

theme Sau này khi phát triển lên sẽ sử dụng kỹ thuật boostrap để thay thế cho sự thiết

lập này Đặt đoạn code này vào tập tin functions.php:

Biến $content_width nghĩa là chúng ta sẽ thiết lập chiều rộng tối đa cho

phần hiển thị nội dung (không tính sidebar) mà theme được phép sử dụng, đây là một

tính năng của theme WordPress Khi thiết lập biến này, điều đó không có nghĩa là

theme của mình đã có chiều rộng vì ta phải viết CSS nữa Nhưng việc khai báo như

vậy sẽ giúp cho các thành phần hiển thị trong nội dung như các mã nhúng hình

ảnh,….sẽ không bị tràn ra ngoài khung nội dung vì nó sẽ dựa theo giá trị

$content_width mà hiển thị tối đa Điều này có nghĩa là:

Hàm graphsign_theme_setup()sẽ được tạo mới nếu máy chủ kiểm tra

chưa có hàm đó 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 Để thiết lập

một số tính năng, tiến hành viết code vào trong graphsign_theme_setup

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

Trang 20

Chức năng này có nghĩa là chúng ta sẽ khai báo thư mục chứa ngôn ngữ trong theme, và khai báo textdomain để tải 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 tin 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/tạo file po

/* Thiết lập theme có thể dịch được */

$language_folder=THEME_URL.'/languages';

load_theme_textdomain('g5plus-framework',$language_folder);

Cái textdomain ‘g5plus-framework' nghĩa là một cái tên nhận diện các chuỗi sẽ cho phép dịch trong theme

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

Đây là một chức năng mới, có trong WordPress 4.1 trở lên Chức năng title-tag nghĩa là sẽ giúp cho theme tự thêm thẻ <title> trên tài liệu HTML được xuất ra Điều này có nghĩa là sau này code tập tin header.php thì sẽ không cần thêm hàm wp_title() nữa và nó sẽ có cấu trúc khá thông minh như:

 Hiển thị kiểu Tên website | Mô tả website ở trang chủ

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

/*Thêm chức năng title-tag để tự thêm <title>*/

add_theme_support('title-tag');

2.1.7 Thêm chức năng Post Format

Chức năng Post Format nghĩa là có thể tùy biến việc hiển thị post theo các định dạng như Video, Image, Gallery, Quote,… Ở đây sẽ chỉ sử dụng vài post format mà thôi

/*Post Format: Thêm chức năng post-format*/

add_theme_support('post-formats',array(

Bây giờ vào phần DashBoard → Post → New post để tạo post mới sẽ thấy có

khung chọn Post Format đã xuất hiện

Trang 21

Hình 2.6 Khung chọn Post Format

2.1.8 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

/* thêm Custom-background: Cho phép người dùng thay đổi màu background*/

2.1.9 Tạo menu location

Trong theme sẽ có một menu chính hiển thị ra bên ngoài Mục đích của Menu là xây dựng phân chia các trang hoặc các mục giúp khách hàng nhận biết được các sản phẩm thuộc danh mục nào hay thuộc trang nào Do vậy đoạn code dưới đây để WordPress tạo một Menu Location

/*Thêm menu*/

register_nav_menu('primary-menu', ('Primary Menu','

menu ra,tham số thứ 1 là tên menu, tham số thứ 2 là tên domain*/

Menu vừa tạo có slug tên là primary-menu, và tên menu này là Primary Menu

Ý nghĩa của ('Primary Menu', ‘g5plus-framework'): Đó chính là một đoạn text

được tạo ra để những người sử dụng theme sau này có thể tự dịch được sang ngôn ngữ

Trang 22

khác bằng các phần mềm dịch, và 'g5plus-framework' chính là textdomain để nhận diện Tất cả các đoạn text muốn người dùng 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.1.10 Tạo sidebar

Trong một giao diện web, các phần cơ bản để cấu thành một trang web bao gồm: Header, Footer, Sidebar và phần Content Tuy nhiên tùy thuộc vào yêu cầu, mong muốn mà linh hoạt tùy chỉnh hoặc lược bỏ bớt Để tạo sidebar cho Theme ta có đoạn code như sau:

Bây quay trở lạ bảng điều khiển của WordPress, ở phần DashBoad sẽ thấy

sidebar đã xuất hiện trong Appearance → Widgets rồi Đến đây chúng ta đã có một tập tin fuctions.php khá đầy đủ với các tính năng cần thiết trong theme

2.2 Viết code cho tập tin Header.php

2.2.1 Ý nghĩa của header.php

Tại tập tin 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>,… 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ị tên website và menu để vào tập tin header.php Vì các thành phần đó đều hiển thị trong tất cả các trang

2.2.2 Viết code cho tập tin Header

Hook wp_head(): là cái hook để giúp WordPress hiểu được đây là khu vực thẻ

<head> của theme để 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()

Trang 23

Phía dưới là thẻ mở <body> và có thêm template tag body_class() Đây là hàm

mà nó sẽ trả về các class tượng trưng cho từng trang lên thẻ body để nếu có tùy biến

CSS cho từng trang thì cứ dựa vào các class tượng trưng này mà làm Để nó có thể tải

tập tin header.php ta thêm hàm <?php get_header(); ?> vào tập tin index.php

Để hiển thị khu vực tên website trên Header, nên tạo một hàm riêng trong tập tin

Function.php cho gọn

Trang 24

Bây giờ để hiển thị khu vực tên website trên Header chúng ta trở lại Header.php

và thêm hàm graphsign_header() vào phần Header để hiển thị khu vực tên website

trên Header:

<header id="header">

<?php graphsign_header(); ?>

</header>

2.3 Viết code cho tập tin Footer.php

2 3.1 Ý nghĩa của tập tin Footer.php

Sở dĩ nhảy từ header.php đến footer.php như vậy là vì hai tập tin này có liên quan mật thiết với nhau trong các thẻ HTML Chẳng hạn, ở trong tập tin header.php,

đã khai báo thẻ mở <body> nhưng chưa có thẻ đóng </body>, và cái thẻ đóng </body> đó sẽ viết ở tập tin footer.php này Cũng giống như Header, Footer là tập tin mà sau này sẽ làm cho nó hiển thị ở mọi trang

2 3 2 Viết code cho footer.php

Để gọi footer ra mỗi khi tải trang thì trong tập tin index.php, viết thêm hàm get_footer() như sau:

<?php get_footer(); ?>

Ở tập tin header.php các thẻ chỉ mới có thẻ mở chưa có thẻ đóng thì nó sẽ được đóng hết ở tập tin footer.php 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

Các thẻ mở <body>, <html> và thẻ <div class=”container”> ở tập tin

Header.php đều chưa được đóng, viết thẻ đóng cho nó ở tập tin footer.php kèm theo hook wp_footer() như sau:

<footer id="footer">

<div class="copyright">

?> <?php _e('This website is proundly to use WordPress',

Trang 25

</body> <! end body >

</html> <! end html >

Thành quả sau bước viết code cho tập tin header và footer này thì giờ trang chủ

website đã có 2 thành phần chính là Header và Footer đơn giản như sau:

Hình 2.7 Header và Footer ban đầu của trang web

2.4 Viết code cho tập tin index.php

2.4.1 Ý nghĩa của tập tin Index.php

Tập tin Index.php là một trong 3 tập tin quan trọng của một theme WordPress

Nó phải có để hiển thị các thông tin nếu các tập tin khác không tồn tại Trong tập tin index.php hiện giờ đã có hai đoạn code đã được chèn vào ở các phần trước như dưới đây:

<?php get_header(); ?>

<?php get_footer(); ?>

Điều này có nghĩa là nó sẽ tải tập tin header.php ở trên đầu và tải nội dung tập tin footer.php ở dưới Muốn viết code hiển thị nội dung ra giữa website thì tất nhiên sẽ viết giữa hai đoạn này

Trang 26

2.4.2 Viết code cho tập tin Index.php

Đoạn HTML dưới đây sẽ chia cột phần hiển thị nội dung để hiển thị post mới nhất nằm bên trái và sidebar nằm bên phải trang web

tạo tại đây, nó sẽ được hiển thị trong Appearance → Widgets Về bản chất, SideBar

là các Widgets tạo thành, để chỉnh sửa thêm bớt thông tin sẽ chỉnh sửa ở các Widget

có trong Sidebar Tạo ra nhiều sidebar thì nó sẽ hiển thị ra nhiều cái trong đó

Trang 27

Hình 2.8 Sidebar

2.5.2 Hiển thị SideBar ra Website

Nhiều người nhầm tưởng rằng cứ tạo ra sidebar với đoạn code ở trên thì website

đã hiển thị sidebar Thực tế là phải thông qua một bước nữa, đó là sử dụng hàm dynamic_sidebar() để hiển thị nó ra ngoài giao diện Trong các tập tin như index.php, single.php, archive.php,… đều có một hàm để hiển thị sidebar là get_sidebar() Hàm này sẽ tải tập tin sidebar.php có trong theme, hoặc nếu ghi là get_sidebar('index') thì

nó sẽ tiến hành tải tập tin sidebar-index.php có trong theme

Để sidebar hiển thị ra bên ngoài, trong tập tin sidebar.php đã tạo chèn đoạn code dưới đây vào:

<?php if ( is_active_sidebar('main-sidebar') ) {

dynamic_sidebar( 'main-sidebar' ); }

else {

_e(Đây là khu vực Sidebar Đi đến Giao diện ->

Widgets và thêm các widgets.', 'graphsign_framwork'); }

?>

Đoạn trên nghĩa là sẽ sử dụng hàm is_activate_sidebar() để kiểm tra xem cái main-sidebar đã có widget nào chưa, nếu nó đã được thêm widget vào thì nó sẽ hiển thị sidebar lên bằng hàm dynamic_sidebar() Trường hợp nếu sidebar chưa có widget nào thì sẽ hiển thị một đoạn nội dung thông báo hãy thêm widget vào Sau đoạn code trên nó đã hiển thị phần sidebar trên website rồi và đây là kết quả:

Trang 28

Hình 2.9 Hiển thị Sidebar ban đầu của Theme

2.6 Viết code cho tập tin Index.php để hiển thị Post/Page

Hiện tại Theme đã có Header, Footer, Sidebar Bây giờ tiến hành viết code để hiển thị nội dung Post hoặc Page ra website

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

post_class(); ?>>

<div class= "entry-thumbnail">

/*VIẾT CODE ĐỂ HIỂN THỊ HÌNH ẢNH ĐẠI DIỆN CỦA POST*/

</div>

<header class= "entry-header">

/* VIẾT CODE HIỂN THỊ TÊN POST VÀ THÔNG TIN CỦA

Trang 29

POST*/

</header>

<div class= "entry-content">

/* VIẾT CODE ĐỂ HIỂN THỊ NỘI DUNG CỦA POST */

</div>

</article>

Ở đoạn code trên nghĩa là cho mỗi post hiển thị ra đều nằm trong thẻ <article> với ID là post-$id-của-post cùng với các class tượng trưng cho nó Tiếp đó, khu vực entry-thumbnail sẽ dùng để hiển thị ảnh đại diện của post Phần entry-header sẽ hiển thị tên post và thông tin của post, phần entry-content là hiển thị nội dung của post

2.6.1 Hiển thị ảnh đại diện cho Post (entry-thumbnail)

Đoạn code để hiển thị hình ảnh đại diện cho post dưới đây nên được viết trong

tập tin functions.php để hạn chế việc viết code trực tiếp

/**@ Hàm hiển thị ảnh thumbnail của post

@ Ảnh thumbnail sẽ không được hiển thị trong trang single

@ Nhưng sẽ hiển thị trong single nếu post đó có format là Image

// 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' ) ) : ?>

Trang 30

Thumbnail là tên của size ảnh được thiết lập trong Settings → Media Ra trang

chủ xem thì kết quả sẽ như thế này rồi:

Hình 2.10 Hiển thị ảnh đại diện cho Post

Trang 31

2.6.2 Hiển thị tiêu đề cho Post

Để hiển thị tiêu đề của post đồng thời trong mỗi tiêu đề sẽ chèn một cái link để dẫn vào trang chi tiết của bài đó.Tiếp tục viết đoạn code dưới đây vào tập tin functions.php và thêm hàm graphsign_entry_header() vào entry-header

/**

@ Hàm hiển thị tiêu đề của post trong entry-header

@ Tiêu đề của post sẽ là nằm trong thẻ <h1> ở trang single

@ Còn ở trang chủ và trang lưu trữ, nó sẽ là thẻ

<h2>

@ grapsign_entry_header() **/

if ( ! function_exists( grapsign _entry_header' ) ) { function grapsign _entry_header() {

if ( is_single() ) : ?>

<h1 class="entry-title">

<a href="<?php the_permalink(); ?>"

rel="bookmark" title="<?php the_title_attribute();

<a href="<?php the_permalink(); ?>"

rel="bookmark" title="<?php the_title_attribute();

?>">

<?php the_title(); ?>

</a>

</h2><?php

endif;

} }

Nếu muốn hiển thị thông tin của một bài post như bài đăng bởi ai, đăng lúc

nào,… Chúng ta viết tiếp vào tập tin function:

Trang 32

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

// Hiển thị tên tác giả, tên category và ngày tháng đăng bài

printf( ('<span class="author">Posted by

Định dạng
Số trang	64
Dung lượng	3,17 MB