Lập trình theme trong wordpress

TRƢỜNG ĐẠI HỌC VINH KHOA CÔNG NGHỆ THÔNG TIN NGUYỄN ĐÌNH HỊA BÁO CÁO ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC Tên đồ án: LẬP TRÌNH THEME TRONG WORPRESS Nghệ An, tháng 01 năm 2017 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 TRONG WORPRESS Nguyễn Đình Hịa Mã sinh viên: 1251075359 Lớp: 53K2 - CNTT Giảng viên hướng dẫn: TS Vũ Chí Cƣờng Sinh viên thực hiện: Nghệ An, tháng 01 năm 2017 Đồ án tốt nghiệp Đại học LỜI CẢM ƠN Lời em xin gửi lời cảm ơn đến tồn thể thầy, giáo cán Khoa CNTT- Trƣờng Đại học Vinh dạy bảo, truyền thụ kiến thức, kinh nghiệm nhƣ tác phong làm việc để em có tảng vững cho chúng em trình làm việc tƣơng lai Đặc biệt em xin trân trọng gửi lời cảm ơn đến giáo viên hƣớng dẫn TS Vũ Chí Cƣờng dạy, góp ý, giúp đỡ nhiệt tình, sẵn sàng giải đáp thắc mắc, giúp đỡ em suốt trình làm đồ án Qua em xin cảm ơn Ban giám đốc tồn thể cán nhân viên Cơng ty phát triển công nghệ G5 giúp đỡ em suốt trình thực tập tốt nghiệp, trình làm đồ án tốt nghiệp Sự dạy tận tình Ban giám đốc tồn thể cán nhân viên cơng ty tạo điều kiện thuận lợi cho em có hội tiếp cận với thực tế làm việc, làm quen với cách làm việc, cách tổ chức dự án cách làm việc nhóm, nhƣ nắm bắt đƣợc nghiệp vụ chuyên môn, kịp thời bổ sung hồn chỉnh kiến thức, bƣớc tiền đề để tránh đƣợc bỡ ngỡ, bắt kịp nhanh với thực tế sau trƣờng Do thời gian chƣa nhiều, kiến thức cịn hạn hẹp nên q trình làm đồ án tốt nghiệp làm báo cáo khơng thể tránh khỏi thiếu sót Rất mong nhận đƣợc đóng góp ý kiến từ thầy giáo, giáo bạn để em hồn thiện tốt đồ án tốt nghiệp kỹ làm việc Em xin chân thành cảm ơn! Sinh viên thực Nguyễn Đình Hịa SVTH: Nguyễn Đình Hịa - Lớp: 53K2_CNTT i Đồ án tốt nghiệp Đại học MỤC LỤC Trang LỜI CẢM ƠN i MỤC LỤC ii CHƢƠNG ĐẶT VẤN ĐỀ 1.1 Mở đầu 1.1.1 Đặt vấn đề lý chọn đề tài 1.1.2 Lợi ích mã nguồn mở 1.1.3 Khái niệm Phần mềm mã nguồn mở, Theme wordpress 1.1.4 Chọn lựa mã nguồn mở .4 1.2 Yêu cầu chuẩn bị 1.2.1 Lựa chọn công cụ phát triển ứng dụng 1.2.2 Thực 1.2.3 Mục tiêu yêu cầu xây dựng hệ thống CHƢƠNG KỸ THUẬT THIẾT KẾ THEME .8 2.1 Tìm hiểu cấu trúc Theme Wordpress 2.1.1 Cấu trúc Theme WordPress .8 2.1.2 Xây dựng cấu trúc Theme 2.1.3 Cấu trúc khu vực website 12 2.2 Định hƣớng .14 2.3 Các Plugin cần thiết 16 2.3.1 Plugin Redux Framework (Hỗ trợ theme option) 16 2.3.2 Plugin Visual Composer (Hỗ trợ việc dựng Website) 19 2.3.3 Woocommerce 24 CHƢƠNG CODE CÁC TEMPLATE TRONG THEME 27 3.1 Code cho khu vực header 27 3.2 Code cho phần Footer .29 3.3 Code cho Page Title 32 3.4 Viết code cho khu vực nội dung website 32 3.5 Tạo Widget 35 3.6 Quy trình làm việc Cơ sở liệu .37 3.7 Khả can thiệp vào mã nguồn WordPress 39 CHƢƠNG ỨNG DỤNG LẬP TRÌNH THEME NHÀ HÀNG 40 4.1 Mơ tả tốn 40 SVTH: Nguyễn Đình Hịa - Lớp: 53K2_CNTT ii Đồ án tốt nghiệp Đại học 4.1.1 Chức dành cho quản trị viên 40 4.1.2 Chức khách hàng 40 4.2 Khảo sát website nhà hàng 40 4.3 Chức theme (Theme Option) 42 4.4 Các shortcode có theme 43 4.5 Cài đặt hình thành giao diện 44 KẾT LUẬN 45 Những thuận lợi khó khăn 45 Hƣớng phát triển đồ án 46 TÀI LIỆU THAM KHẢO .47 SVTH: Nguyễn Đình Hịa - Lớp: 53K2_CNTT iii Đồ án tốt nghiệp Đại học CHƢƠNG ĐẶT VẤN ĐỀ 1.1 Mở đầu 1.1.1 Đặt vấn đề lý chọn đề tài Trong thời đại ngày nay, với phát triển kinh tế - xã hội CNTT nắm giữ vai trị quan trọng Các hình thức thƣơng mại điện tử, báo điện tử, trang web quảng bá du lịch sản phẩm v.v phát triển thay hình thức quảng cáo, truyền tin, thông truyền thống Hầu hết lĩnh vực có trợ giúp CNTT, mang lại cho ngƣời 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 chỗ tìm hiểu thơng tin, bn bán, trao đổi thay phải đến tận nơi Hoặc nhu cầu cá nhân quảng bá viết hay blog cá nhân nhƣ nhu cầu tìm hiểu thông tin trƣớc làm việc, mua bán hay du lịch, website nhờ phát triển cơng cụ hữu ích để giúp đạt đƣợc mục đích Thực tế website bán hàng trực tuyến hầu hết đƣợc xây dựng dựa 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 đƣa gian hàng lên thị trƣờng Internet, mua bán trao đổi hàng hóa đặc biệt chức quan trọng bậc quảng bá sản phẩm Khơng có doanh nghiệp Nhà nƣớc, tƣ nhân, tổ chức nhà nƣớc, tổ chức trị, cơng ty hay trƣờng học có nhu cầu thiết kế cho website, mà bên cạnh cửa hàng nhỏ hay chí cá nhân muốn có trang web để lƣu trữ, chia sẻ thông tin blog cá nhân mang phong cách riêng Tuy nhiên để xây dựng đƣợc đánh giá trang web tốt phụ thuộc nhiều yếu tố Có nhiều cách để xây dựng đƣợc website, cách đƣợc công ty, doanh nghiệp tổ chức đông đảo ngƣời dùng u thích dùng phần mềm mã nguồn mở Nhu cầu cao, có cung mà muốn xây dựng Website có kiến thức để làm đƣợc Website Nên việc xây dựng theme hỗ trợ ngƣời dùng xây dựng website đáp ứng tiêu chuẩn, có thiết kế đẹp mắt điều tất yếu, mảnh đất tiềm để phát triển SVTH: Nguyễn Đình Hịa - Lớp: 53K2_CNTT Đồ án tốt nghiệp Đại học 1.1.2 Lợi ích mã nguồn mở Sử dụng phần mềm nguồn mở đem lại nhiều lợi ích cho cơng ty, doanh nghiệp Các lợi ích gồm: - Tiết kiệm chi phí cho việc mua 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ở mã nguồn mà ngƣời sử dụng cần thay đổi mã nguồn để đạt đƣợc tính nhƣ ý muốn Đây tính so với phần mềm có quyền - Chất lƣợng: phần mềm mã nguồn mở gần gũi với mà ngƣời sử dụng mong muốn ngƣời sử dụng tự tạo điều Khơng phải nhà cung cấp đem đến cho ngƣời sử dụng giá trị mà họ nghĩ ngƣời sử dụng trơng đợi, mà nhà thiết kế ngƣời sử dụng tạo giá trị kỳ vọng mình, họ làm tốt điều - Tính linh hoạt: Khi sử dụng phần mềm độc quyền nhƣ Microsoft Windows Office, ngƣời sử dụng đơn điệu tuân theo quy trình cập nhật phần cứng phần mềm đƣợc dựng sẵn Ngƣợc lại, với phần mềm mã nguồn mở, ngƣời sử dụng chạy chúng phần cứng lỗi thời Không phải nhà cung cấp, mà ngƣời sử dụng ngƣời định cần cập nhật phần mềm Ít nghiên cứu gần cho thấy, thực tế, doanh nghiệp lựa chọn sử dụng phần mềm mã nguồn mở lý trƣớc tiên ƣu việt mặt kỹ thuật mà phần mềm có đƣợc - Một điểm mạnh mã nguồn mở có cộng đồng phát triển lớn mạnh điều giúp cho việc phát triển mã nguồn mở ngày mạnh mẽ xu hƣớng phát triển giới 1.1.3 Khái niệm Phần mềm mã nguồn mở, Theme wordpress Phần mềm mã nguồn mở (hay gọi tắt mã nguồn mở) phần mềm với mã nguồn đƣợc công bố sử dụng giấy phép nguồn mở Giấy phép cho phép nghiên cứu, thay đổi cải tiến phần mềm, phân phối phần mềm dạng chƣa thay đổi thay đổi Định nghĩa Nguồn mở Tổ chức Sáng kiến Nguồn mở (Open Source Initiative OSI) thể triết lí nguồn mở xác định SVTH: Nguyễn Đình Hịa - Lớp: 53K2_CNTT Đồ án tốt nghiệp Đại học ranh giới việc sử dụng, thay đổi 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 quyền vốn bị cấm quyền, gồm quyền sử dụng, thay đổi 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 định nghĩa nguồn mở Ví dụ bật Giấy phép Công cộng GNU (GPL) Trong nguồn mở cho phép công chúng truy cập vào nguồn 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 Tuy nhiên quan trọng có lẽ Website để xây dựng nên Website điều cần Theme hay cịn gọi chủ đề Theme gì? Chúng ta hiểu cách đơn giản theme nhƣ giao diện (backend) dƣới dạng website hỗ trợ cho khách hàng hay ngƣời dùng thay đổi giao diện, tính (frontend, feature) hiển thị bên ngồi Website để tƣơng tác với ngƣời xem, ngƣời dùng hay khách hàng mua sản phẩm thƣơng mại điện tử Một cách tổng quát Theme tồn cách bố trí, trang trí, cách hiển thị chức website Theme WordPress gì? Định nghĩa cách đơn giản dễ hiểu “Theme giao diện WordPress” Đối với website làm WordPress theme thƣ mục chứa tồn file thiết kế giao diện Đó nơi WordPress cho phép bạn thay đổi, chỉnh sửa giao diện Mỗi trang web có theme riêng biệt Khi nhà phát triển đƣợc theme tốt, họ bán thị trƣờng Hiện có hàng triệu theme từ miễn phí đến trả phí đƣợc rao bán internet Các mã nguồn mở thật đem lại cho ngƣời dùng nhiều tiện ích 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 việc xây dựng website tảng mã nguồn mở tăng theo Không lƣợng khách hàng nƣớc mà lƣợng khách hàng nƣớc nhiều, ta đăng ký trang web chuyên mua bán Theme (vd: chợ Website Themeforest - http://themeforest.net/), qua khẳng định lại lần tiềm phát triển lớn mạnh mã nguồn mở nhƣ việc phát triển xây dung Theme cho Website SVTH: Nguyễn Đình Hịa - Lớp: 53K2_CNTT Đồ án tốt nghiệp Đại học Hình 1.1 Sự phổ biến theme chợ Theme Forest (http://themeforest.net/) 1.1.4 Chọn lựa mã nguồn mở Có nhiều cách để xây dựng website nhƣ: Dùng ngơn ngữ lập trình Java, ASP.NET, PHP,… Dùng phần mềm mã nguồn mở nhƣ Drupal, Nuke Viet, Moodle, Joomla, WordPress,… Hiện đƣợc đơng đảo ngƣời dùng u thích sử dụng dùng mã nguồn mở để xây dựng website Có nhiều phần mềm mã nguồn mở, mã nguồn mở phổ biến đƣợc ƣa chuộng Wordpress Dƣới số thống kê mã nguồn mở Wordpress cho thấy phổ biến khả phát triển (tính đến năm 2014): - Trên Thế Giới có khoảng 24 viết đƣợc đăng lên website sử dụng Wordpress giây - Số lƣợng website đƣợc xây dựng tảng Wordpress chiếm khoảng 23% số lƣợng website toàn Thế Giới - Trong 100% website sử dụng mã nguồn CMS, Wordpress chiếm 60% - Các từ khóa liên quan đến Wordpress chiếm khoảng 37 triệu lƣợt tìm kiếm google - Wordpress 4.0 đƣợc 16 triệu lƣợt download - Wordpress đƣợc dịch sang 53 ngôn ngữ khác nhau, có phiên TiếngViệt - 22% domain đăng kí đƣợc sử dụng Wordpress - Mã nguồn Wordpress có 785 cộng tác viên phát triển SVTH: Nguyễn Đình Hịa - Lớp: 53K2_CNTT Đồ án tốt nghiệp Đại học - Đã có - Đã có 34.000 plugins thƣ viện Wordpress.org - Đã có 2.700 themes thƣ viện Wordpress.org Tuy nhiên, để có đƣợc trang web đáp ứng đƣợc phong cách khác nhau, tính mà khách hàng mong muốn Nếu dùng tất mà phần mềm mã nguồn mỡ cung cấp chƣa đủ, để đạt đƣợc theo mong muốn ngƣời dùng phải mua nhiều Plugin cài đặt thêm vào, nhƣ chi phí tăng Chƣa kể đến việc Plugin mua khơng tƣơng thích với Theme mặt giao diện, thẩm mỹ Mặt khác cài đặt nhiều Plugin dẫn tới việc phình to sở liệu, nên việc đọc liệu lâu, trang web chạy chậm Hơn lĩnh vực nhƣng ngƣời có sở thích riêng, muốn tạo website riêng mang phong cách họ Chẳng hạn, làm kinh doanh nhƣng khác lĩnh vực, ngƣời làm kinh doanh nội thất chắn website họ khác với ngƣời làm kinh doanh quần áo kinh doanh sản phẩm quần áo nhƣng ngƣời hay doanh nghiệp lại muốn tạo website mang phong cách riêng, ấn tƣợng riêng cho cơng ty, doanh nghiệp Tuy nhiên phạm vi Đồ án tốt nghiệp chuyên ngành Kỹ sƣ Cơng nghệ thơng tin em trình bày cách xây dựng demo liệu Website dùng phần mềm mã nguồn mỡ WordPress Trƣớc lập trình Theme cho mã nguồn mở, cụ thể Lập trình Theme Blog cho Phần mềm mã nguồn mở Wordpress 1.2 Yêu cầu chuẩn bị 1.2.1 Lựa chọn công cụ phát triển ứng dụng Hiện có nhiều cơng cụ phát triển ứng dụng web nói chung 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 bỏ qua phần mềm này) - WordPress: nên dùng phiên (Hiện phiên bản4.1.7) - Phần mềm Photoshop Abode Framwork CS6 - Phần mềm để lập trình Sublime Text Php Storm - Các trình duyệt Fifox, Chome, IE, Brower, Safari, Ngồi cơng cụ để làm tốt tốn đặt trƣớc tiên yêu cầu mặt kiến thức cần phải chuẩn bị: - Nắm vững kiến thức mã nguồn mở WordPress từ đến nâng cao SVTH: Nguyễn Đình Hịa - Lớp: 53K2_CNTT Đồ án tốt nghiệp Đại học - Archive: Trang hiển thị viết Post (file archive.php) - Page: Trang tĩnh có nội dung thay đổi loại post.(file page.php) - Post: Các viết đƣợc đăng có thơng tin hình ảnh định dạng khác (file single.php) - Index.php file bên theme Ở file để lấy nội dung điều lấy nội dung mà cần hiển thị phần chung theme nhƣ: - Header - Page Title - Footer Bằng hàm sau: