Lập trình theme wordpress cho website blog

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ài: LẬP TRÌNH THEME WORDPRESS CHO WEBSITE BLOG Sinh viên thực hiện: Dƣơng Minh Đức – 1151070416 Lớp: 52K1 Giáo viên hướng dẫn: ThS Phạm Thị Thu Hiền Nghệ An, tháng 05 năm 2016 TRƢỜNG ĐẠI HỌC VINH KHOA CÔNG NGHỆ THÔNG TIN DƢƠNG MINH ĐỨC BÁO CÁO ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC Đề tài: LẬP TRÌNH THEME WORDPRESS CHO WEBSITE BLOG Nghệ An, tháng 05 năm 2016 ĐỒ ÁN TỐT NGHIỆP LỜI CẢM ƠN Lời em xin gửi lời cảm ơn đến tồn thể Thầy, Cơ 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 Th.S Phạm Thị Thu Hiền 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 toà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 tổ chức dự án, làm việc nhóm, nhƣ nắm bắt đƣợc nghiệp vụ chun 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 tránh khỏi thiếu sót Rất mong nhận đƣợc đóng góp ý kiến từ Thầy giáo, Cơ 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 Dƣơng Minh Đức SVTN: Dƣơng Minh Đức –MSSV: 1151070416 – Lớp 52K1 CNTT Page ĐỒ ÁN TỐT NGHIỆP MỤC LỤC LỜI CẢM ƠN MỤC LỤC CHƢƠNG I TỔNG QUAN ĐỀ TÀI 1.1 Lý chọn đề tài : 1.2 Lợi ích mã nguồn mở: 1.3 Khái niệm mã nguồn mở - Theme: 1.4 Lựa chọn mã nguồn mở: 1.5 Yêu cầu đặt để tài: 1.6 Lựa chọn công cụ bƣớc thực hiện: CHƢƠNG II 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: 2.1.2 Xây dựng cấu trúc Theme: 10 2.2 Các plugin hỗ trợ cần thiết khác việc xây dựng theme: 16 2.2.1 Plugin Redux Framework (Hỗ trợ xây dựng Theme Option): 16 2.2.2 Plugin Visual Composer (Hỗ trợ việc dựng Website): 19 2.2.3 Meta Box: 25 CHƢƠNG III CODE TEMPLATE CHO THEME 26 3.1 Template khu vực header: 26 3.2 Template khu vực Footer: 28 3.3 Template khu vực Page Title: 30 3.4 Template cho việc hiển thị nội dung website: 32 3.5 Tạo Widget: 37 3.6 Quy trình làm việc Cơ sở liệu : 38 3.7 Khả can thiệp vào mã nguồn WordPress 40 KẾT LUẬN 41 TÀI LIỆU THAM KHẢO 43 SVTN: Dƣơng Minh Đức –MSSV: 1151070416 – Lớp 52K1 CNTT Page ĐỒ ÁN TỐT NGHIỆP CHƢƠNG I TỔNG QUAN ĐỀ TÀI 1.1 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ó nguồn cung lớn mà khơng phải 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 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 SVTN: Dƣơng Minh Đức –MSSV: 1151070416 – Lớp 52K1 CNTT Page ĐỒ ÁN TỐT NGHIỆP - 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 Hình 1: Sự phổ biến theme chợ online Theme Forest (http://themeforest.net/) SVTN: Dƣơng Minh Đức –MSSV: 1151070416 – Lớp 52K1 CNTT Page ĐỒ ÁN TỐT NGHIỆP 1.3 Khái niệm mã nguồn mở - Theme: 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 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 tùy chọn dƣới dạng website hỗ trợ giúp cho khách hàng hay ngƣời dùng thay đổi giao diện, tính 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 toàn cách bố trí, trang trí, cách hiển thị chức website 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ợ theme, plugin online 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 dựng Theme cho Website 1.4 Lựa chọn 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 SVTN: Dƣơng Minh Đức –MSSV: 1151070416 – Lớp 52K1 CNTT Page ĐỒ ÁN TỐT NGHIỆP 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 nó: - Trên giới có khoảng 25 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 giới Trong 100% website sử dụng mã nguồn CMS, Wordpress chiếm 60% Wordpress đƣợc dịch sang 52 ngôn ngữ khác nhau, nhƣng đáng tiếc chƣa có phiên TiếngViệt 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.5 Yêu cầu đặt để tài: 1.5.1 Đối với Theme: Theme sau 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 sử dụng Plugin Lập trình rõ ràng, dễ hiểu Theme tạo phải có đầy đủ phần cần thiết nhƣ Header, Page Title, Footer, SiderBar SVTN: Dƣơng Minh Đức –MSSV: 1151070416 – Lớp 52K1 CNTT Page ĐỒ ÁN TỐT NGHIỆP Tạo khu vực trực quan (bằng việc tạo Widget, Theme Option, Shortcode, Meta Box…) để ngƣời dùng linh hoạt thay đổi giao diện theme 1.5.2 Đối với Website: Trang web đƣợc xây dựng nhằm quảng bá, giới thiệu viết tƣơng đƣơng với blog cá nhân tới khách hàng tham quan trang web với yêu cầu: - Bố cục giao diện thân thiện, dễ sử dụng - Xây dựng đƣợc nhiều style cho Blog không gây nhàm chán xem tin, viết - Hỗ trợ responsive thiết bị giúp hiển thị website tốt thiết bị di động, Ipad, nhƣ hình máy tính khác - Giúp hiển thị thông tin cần thiết cho viết quản lý tốt phong phú loại định dạng biết đáp ứng việc chia sẻ video, image, audio, link - Cho phép tìm kiếm viết cách nhanh chóng - Giao diện đẹp dễ sử dụng - Có nhiều Shortcode hỗ trợ việc dựng trang trực quan sinh động 1.6 Lựa chọn công cụ bƣớc thực hiện: 1.6.1 Lựa chọn cơng cụ lập trình kiến thức: 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 4.4.1) - Phần mềm Photoshop Abode Framwork CS6 - Phần mềm để soạn thảo, lập trình Sublime Text Php Stom - 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 - Quan trọng biết cấu trúc, cách tổ chức tập tin Theme cho hợp lí với theme - Kiến thức HTML5 CSS3 SVTN: Dƣơng Minh Đức –MSSV: 1151070416 – Lớp 52K1 CNTT Page ĐỒ ÁN TỐT NGHIỆP - Đặc biệt cần phải cókhả lập trình làm việc với ngơn ngữ lập trình PHP - Kiến thức JavaScript, Jquery, Ajax Trƣớc bắt đầu lập trình xây dựng cấu trúc theme xác định tính theme 1.6.2 Các bƣớc thực hiện: Để bắt đầu xây dựng cấu trúc lập trình Theme, cần phải thực cài đặt phần mềm, công cụ hỗ trợ, cài đặt tất phần mềm cần thiết nhƣ chuẩn bị bao gồm: - Cài đặt Localhost (Phần mềm XamPP) - Các bƣớc cài đặt WordPress localhost - Dựng khung cấu trúc theme WordPress - Viết code cho tất tập tin - Xây dựng thành theme hoàn chỉnh - Xây dựng website để minh họa SVTN: Dƣơng Minh Đức –MSSV: 1151070416 – Lớp 52K1 CNTT Page ĐỒ ÁN TỐT NGHIỆP Hình 39: Code cho nội dung foote-column-01.php Footer 2: Hiển thị cố định gallery ảnh đƣợc lấy cách add gallery mặc định theme option: Hình 40: Code lấy hiển thị sƣu tập theo thiết lập ngƣời dùng Về Footer Footer theme option có khả tùy biến cao hơn, nhờ vào việc lấy nội dung sidebar làm nội dung mà với sidebar nội dung phụ thuộc vào widget footer column cho phép ngƣời dùng tùy biến nội dung cao Hình 41: Theme option cho phép chọn sidebar cho footer-3 footer-4 Để có sidebar cho theme option lấy liệu ta khai báo sidebar dành cho việc đƣa widget vào để hiển thị cho footer sidebar có tên Footer Footer 2: SVTN: Dƣơng Minh Đức –MSSV: 1151070416 – Lớp 52K1 CNTT Page 29 ĐỒ ÁN TỐT NGHIỆP Hàm khai báo sidebar functions.php: Hình 42: Code đăng ký sidebar cho footer Sidebar khu vực chứa Widget widget yếu tố định nội dung content Ngƣời dùng sử dụng widget có sẵn cửa Wordpress sử dụng widget đƣợc tạo để hiển thị tốt với theme, có nhiều lựa chọn xây dựng trang website 3.3 Template khu vực Page Title: Yêu cầu cho Page Title bao gồm thông tin nhƣ Title (tên page post, tag , category ), Sub Title (Nội dung tên phụ), Breadcrumbs (phân cấp đƣờng dẫn đến trang tại), Background Image (Ảnh cho page title): Phần tùy chọn cho page title: Hình 44: Phần tùy chọn cho page title theme option SVTN: Dƣơng Minh Đức –MSSV: 1151070416 – Lớp 52K1 CNTT Page 30 ĐỒ ÁN TỐT NGHIỆP Page Title Option có tùy chọn nhƣ : - Hiển thị hay không hiển thị page title - Lựa chọn Style cho Page Title Do Title đƣợc lấy mặc định nên cho phép nhập Subtitle Các tùy chọn màu sắc cho text Title, Sub title, Breadcrumbs - Các thiết lập Background Image Background Overlay (Overlay màu dƣới dạng suốt đƣợc thiết lập nhằm mục đích hiển thị tốt nội - dung text tốt ảnh tƣơng phản màu sắc.) Các thiết lập Breadcrumbs nhƣ việc có hay khơng hiển thị breadcrumbs, kiểu hiển thị , vị trí breadcrumbs tƣơng ứng với kiểu hiển thị - Ngồi cịn có tùy chọn để thay đổi độ cao page title dựa vào padding top padding bottom, cịn có margin bottom để thiết lập khoảng cách phân biệt page title nội dung phía dƣới SVTN: Dƣơng Minh Đức –MSSV: 1151070416 – Lớp 52K1 CNTT Page 31 ĐỒ ÁN TỐT NGHIỆP 3.4 Template cho việc hiển thị nội dung website: Khu vực hiển thị website theme Blog bao gồm thành phần là: - 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: Hình 47: Các hàm cần thiết ngồi content nhƣ headet, footer, page title Hàm get_header() lấy header theo template tƣơng tự hàm get_footer() lấy footer, hàm get_template_part(„template/page-heading‟) để lấy nội dung page title Với hàm tƣơng ứng lấy template riêng khu vực hiển thị nội dung lên Ở đây, để thuận tiện cho việc xử lý code ta chia nhỏ file cho trƣờng hợp khác thành templates riêng cần thiết dùng đến template gọi đến template Đối với file page.php : green_get_template('page'); Đối với file archive.php: green_get_template( 'archive'); Đối với file single.php: SVTN: Dƣơng Minh Đức –MSSV: 1151070416 – Lớp 52K1 CNTT Page 32 ĐỒ ÁN TỐT NGHIỆP Hình 48: Code cho file Single.php Với riêng file single.php post có định dạng (post format) khác nên truy vấn có post ta xử lý gọi template theo định dạng post format có khơng gọi đến hàm content dùng chung lấy nội dung post thành phần thiếu comment comment form nhằm cho phép hiển thị cho phép ngƣời dùng bình luận viết nên có comment cho viết gọi đến hàm comment_template(); Template archive: tƣơng tự với file single.php file archive.php folder template gọi đến template folder archive để xử lý việc hiển thị post format khác nhau: Các Post Format khác cần xử lý: - Post Format Image Standard - Post Format Link - Post Fornat Audio - Post Format Video - Post Format Quote Hầu hết việc hiển thị nội dung post giống bao gồm: - Tên viết - Ngày đăng tải viết SVTN: Dƣơng Minh Đức –MSSV: 1151070416 – Lớp 52K1 CNTT Page 33 ĐỒ ÁN TỐT NGHIỆP - Các thông tin nhƣ tác giả đăng, số comment, tag, category - Nội dung giới thiệu, hay đoạn mô tả ngắn vài viết - Ảnh, video, audio, quote, link tƣơng ứng với post format, điểm khác gần nhƣ post format khác Hiển thị nội dung không liên quan đến Thumbnail: - Nhƣ lấy tên viết hàm khai báo file functions.php - Hàm expert lấy đoạn mô tả viết - Entry meta lấy thông tin cần thiết viết Hình 49: Code cho content chung archive.php Hiển thị Thumbnail template content archive: - Hiển thị nội dung thumbnail hay ảnh định dạng chuẩn(Post Format Standard) hay dạng viết hình ảnh(Post Format Image): - Đầu tiên để thống kích thƣớc ảnh lấy ra, cần phải sử dụng hàm resize kích thƣớc ảnh kích thƣớc thống tùy theo style khác nhƣ: SVTN: Dƣơng Minh Đức –MSSV: 1151070416 – Lớp 52K1 CNTT Page 34 ĐỒ ÁN TỐT NGHIỆP Hình 50: Code resize ảnh feature image viết Ở đây, có style blog ta sử dụng kích thƣớc ảnh khác đƣợc xử lý thông qua url ảnh hàm resize style full = 1170x700 (px) style two column = 570x 400 (px) Về style lại style grid list medium = 370 x245 (px) Hiển thị ảnh với Post Format: Image Standard Để thị ảnh ta cần thẻ image “src” đƣợc lấy url ảnh qua xử lý hàm resize: Hình 51: Code hiển thị ảnh cho post format image standard có ảnh Hiển thị video với Post Format Video: Hình 53: Code cho việc hiển thị video post format video Dữ liệu video đƣợc lấy từ meta box, hàm get_post_meta thông qua meta key Sau cần phải dùng hàm hiển thị content wordpress để xử lý việc hiển thị thông qua link youtube.com Hiển thị audio post format audio hoàn toàn tƣơng tự với video: SVTN: Dƣơng Minh Đức –MSSV: 1151070416 – Lớp 52K1 CNTT Page 35 ĐỒ ÁN TỐT NGHIỆP Việc hiển thị link blockquote với nhƣng định dạng giống giống Cấu trúc việc lấy ảnh làm background có lớp overlay nhằm mục đích bật liệu Thứ hai icon để phân biệt hay để làm rõ post format icon Cuối nội dung lấy từ meta-box, đƣợc hiển thị background image dƣới icon thể post type Biến $style nhằm mục đích viết style inline để đƣa feature image làm ảnh cho nội dung Hình 57-58: Code lấy liệu ngƣời dùng nhập từ meta-box SVTN: Dƣơng Minh Đức –MSSV: 1151070416 – Lớp 52K1 CNTT Page 36 ĐỒ ÁN TỐT NGHIỆP Hình 59-60: Code hiển thị nội dung link quote Tƣơng tự việc hiển thị archive nhƣng single đơn giản single hiển thị post format page nên việc hiển thị single tƣơng tự với archive 3.5 Tạo Widget: Widget WordPress block nội dung đƣợc đặt khu vực đƣợc định, khu vực ta thƣờng gọi Widget Area Sidebar Bây tìm hiểu làm để hiểu quy trình tạo widget Nhƣng dĩ nhiên trƣớc tiên cần có sẵn kiến thức PHP ví dụ nhƣ phải hiểu Class đối tƣợng PHP Trong WordPress có sẵn class tên WP_Widget, class có method (phƣơng thức), nghĩa phải viết phƣơng thức theo chuẩn nó, khơng đƣợc thiếu mà khơng có thừa phải viết tên phƣơng thức Trong class WP_Widget có tổng cộng phƣơng thức bắt buộc, bao gồm: - construct: Phƣơng thức khởi tạo có nhiệm vụ khai báo tên widget, mô tả widget form: Phƣơng thức hỗ trợ tạo form nhập liệu bên widget update: Phƣơng thức hỗ trợ lƣu liệu mà ngƣời dùng nhập vào form mà tạo phƣơng thức form widget: Phƣơng thức giúp gọi liệu hiển thị website gắn widget lên Đăng ký widget tạo: SVTN: Dƣơng Minh Đức –MSSV: 1151070416 – Lớp 52K1 CNTT Page 37 ĐỒ ÁN TỐT NGHIỆP Hình 63: Đăng ký widget vào action widget_init 3.6 Quy trình làm việc Cơ sở liệu : Trong mã nguồn WordPress, đƣợc lập trình nhiều tính giúp thân tƣơng tác với sở liệu (database) nhƣ MySQL để giúp ngƣời sử dụng lƣu trữ liệu mềm website Tất liệu mềm đƣợc lƣu trữ vào database bao gồm nội dung văn đƣợc nhập vào website, thiết lập (vì thiết lập lƣu dƣới dạng kiểu liệu) số liệu khác Xem database thông qua phpMyAdmin ứng dụng tƣơng tự thấy WordPress có nhiều bảng để chứa liệu đƣợc lƣu vào bảng Các tính mã nguồn tƣơng tác với bảng liệu đƣa ngồi trình duyệt hiển thị dƣới dạng HTML thông qua tập tin đƣợc thiết lập khuôn mẫu theme (ta gọi template) Khi ngƣời truy cập vào website WordPress tự động xử lý theo quy trình sau: Bƣớc – Khởi động mã nguồn: Tập tin index.php mã nguồn (không phải theme hay plugin) đƣợc tải ra, sau truy xuất tập tin cốt lõi khác nhƣ wp-config.php vốn để kết nối đến sở liệu, wp-settings.php… Có thể mở tập tin index.php lên xem lần mò theo tập tin đƣợc nhúng vào biết đƣợc quy trình tải theo thứ tự tập tin Ở bƣớc này, WordPress kết nối đến sở liệu đƣợc thiết lập wpconfig.php, sau tiến hành tải tính mã nguồn nhƣ /wpinclude/functions.php, /wp-include/options.php,…nhằm nạp sẵn chức cần thiết để tiếp nhận liệu Và bƣớc này, toàn liệu đƣợc lƣu vào bảng wp_options có giá trị cột autoload true đƣợc lấy hết, dù thiết lập có đƣợc sử dụng hay khơng Mục đích bƣớc mang sẵn tuỳ chọn website plugin để hỗ trợ cho bƣớc sau, đặc biệt bƣớc tải plugin để làm việc xác Bƣớc – Kích hoạt plugin Các plugin mà kích hoạt website đƣợc tải sau mã nguồn WordPress khởi động xong Bởi tính WordPress Core đƣợc sử dụng plugin thƣờng đƣợc gắn vào hook init (có thể hiểu điểm SVTN: Dƣơng Minh Đức –MSSV: 1151070416 – Lớp 52K1 CNTT Page 38 ĐỒ ÁN TỐT NGHIỆP neo để kích hoạt kịch đó) nên tải sau WordPress khởi động Bƣớc – Thực thi tập tin functions.php theme Lúc này, WordPress tiến hành dị tìm đến tập tin functions.php theme đƣợc kích hoạt để tải tính mà ngƣời tạo theme khai báo Để WordPress hiểu đƣợc website dùng theme bƣớc 1, kết nối vào database dựa theo khoá current_theme cột option_name bảng wp_options Bƣớc – Phân tích truy vấn khởi tạo truy vấn Đây bƣớc quan trọng để website hiển thị nội dung bên ngồi, nội dung đƣợc trả sau truy vấn gửi vào database Truy vấn nghĩa mệnh lệnh đƣợc gửi vào database nhằm lấy thơng tin mà truy vấn cần xem Truy vấn truy vấn SQL gửi vào MySQL Server Trƣớc tiên, WordPress chạy hàm wp() đƣợc thiết lập /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 lớp WP /wp-include/class-wp.php function wp( $query_vars = '' ) { global $wp, $wp_query, $wp_the_query; $wp->main( $query_vars ); if ( !isset($wp_the_query) ) $wp_the_query = $wp_query; } Lúc này, phƣơng thức $wp->parse_request() đƣợc khởi động cho mục đích phân tích truy vấn dựa theo đƣờng dẫn website Vì WordPress tự động sinh truy vấn dựa theo đƣờng dẫn, chẳng hạn vào http://domain.com/?p=123 WordPress gửi truy vấn vào database để lấy liệu post mang số ID 123 Sau truy vấn đƣợc phân tích, WordPress làm việc thiết lập hàm điều kiện thông qua phƣơng thức $wp_query → parse_query() Sau chuyển truy vấn đƣợc tạo thành truy vấn lệnh SQL nhằm gửi đến MySQL để lấy liệu viết phƣơng thức $wp_query>get_posts() SVTN: Dƣơng Minh Đức –MSSV: 1151070416 – Lớp 52K1 CNTT Page 39 ĐỒ ÁN TỐT NGHIỆP Nếu database có liệu, viết đƣợc lấy sau gửi truy vấn đƣợc lƣu vào đối tƣợng $wp_query để sử dụng vòng lặp cho việc hiển thị viết Trong q trình gửi truy vấn này, khơng tìm thấy liệu phân tích hiển thị báo lỗi 404 Cuối có liệu, thiết lập biến $post để sử dụng vòng lặp Biến $post đối tƣợng chứa liệu viết thơng qua thuộc tính Bƣớc – Thực thi tập tin khuôn mẫu (template) theme Sau có liệu viết liệu liên quan mà làm bƣớc 4, tiến hành xử lý tập tin template theme thông qua cấu trúc template Kết sau bƣớc làm việc với sở liệu nội dung trang chủ website đƣợc hiển thị dựa theo template tags dƣới dạng HTML Ngƣời sử dụng nhìn thấy hình ảnh, văn bản… hiển thị website 3.7 Khả can thiệp vào mã nguồn WordPress Một câu hỏi đƣợc đặt làm để can thiệp vào mã nguồn WordPress nhằm điều khiển hoạt động theo ý mình, hiểu theo cách khác tạo thêm tính thay đổi giao diện hiển thị Trƣớc tiên, can thiệp vào tính WordPress tái tạo lại vốn đƣợc WordPress xử lý bƣớc nhƣ Sở dĩ làm đƣợc mã nguồn WordPress đƣợc viết theo kiểu can thiệp gián tiếp vào tái tạo lại (thơng qua lớp – Class) Và tính tự tạo từ việc can thiệp vào mã nguồn đƣợc khai báo với dạng plugin đƣợc sử dụng sau WordPress khởi động chức cần thiết Thứ hai, can thiệp vào lớp WP_Query để tự tạo truy vấn riêng để lấy liệu database (nhiều truy vấn sử dụng hàm đó, nhƣ get_post_meta() chẳng hạn) Chúng ta ứng dụng WP_Query nhiều vào việc lấy liệu viết (bao gồm post, page, attachment…) Thứ ba, tạo theme, sau tự định tuỳ chỉnh lại tập tin template để nội dung WordPress hiển thị theo mong muốn Vì sau WordPress gửi truy vấn lấy liệu, việc hiển thị template định, template mã PHP kết hợp với HTML/CSS để hiển thị website SVTN: Dƣơng Minh Đức –MSSV: 1151070416 – Lớp 52K1 CNTT Page 40 ĐỒ ÁN TỐT NGHIỆP KẾT LUẬN Những thuận lợi khó khăn: Thuận lợi: Trong suốt trình làm đồ án tốt nghiệp em có thuận lợi nhƣ: - Đƣợc hƣớng dẫn, giúp đỡ tận tình Thầy anh chị - Đƣợc thầy giáo, cô giáo khoa CNTT anh chị Công ty phát triển công nghệ G5 tạo điều kiện tốt suốt trình thực tập làm đồ án - Vừa làm đồ án đồng thời đƣợc tham gia vào làm dự án công ty, có thêm kinh nghiệm làm việc học hỏi thêm đƣợc kiến thức Khó khăn: Bên cạnh điều kiện thuận lợi trình làm đồ án tốt nghiệp em gặp khơng khó khăn nhƣ: - Chƣa có nhiều kiến thức chun mơn thuộc đề tài nghiên cứu nên cịn nhiều thiếu sót việc thực tập nhƣ báo cáo - Vì chọn đề tài độc lập nên không tận dụng đƣợc khả làm việc nhóm - Kỹ chun mơn kỹ mềm hạn chế Kết đạt đƣợc: Ƣu điểm: Đồ án tốt nghiệp kết từ kiến thức em đƣợc học trƣờng, trình thực tập làm đồ án tốt nghiệp, bƣớc đầu báo cáo đạt đƣợc ƣu điểm nhƣ: - Hoàn toàn xây dựng đƣợc Theme cho mã nguồn mở WordPress - Lập trình cho tập tin cần thiết theme - Thêm đƣợc số chức cho WorPress nhƣ Theme Option, Shortcodes, Meta box, Widget, Sidebar - Dùng Theme tạo tùy chỉnh thành style cho website cách phong phú - Webbsite demo với nhiều hiệu ứng đẹp sử dụng HTML5 CSS3 - Website demo với giao diện thân thiện, dễ sử dụng SVTN: Dƣơng Minh Đức –MSSV: 1151070416 – Lớp 52K1 CNTT Page 41 ĐỒ ÁN TỐT NGHIỆP Hạn chế: Bên cạnh ƣu điểm đạt đƣợc, kiến thức hạn chế, kinh nghiệm chƣa nhiều nên tồn nhiều vấn đề chƣa đƣợc giải nhƣ: - Theme cịn chức năng, chƣa thể đáp ứng đƣợc cho khách hàng có yêu cầu cao, chƣa có tính đa dạng nhƣ shop, hay trang tin tức cho cộng đồng mà giới hạn trang website blog cá nhân - Các phần setting dành cho khách hàng cịn chƣa đƣợc tối ƣu hóa chƣa tận dụng đƣợc hỗ trợ Wordpress để đƣa đến cách làm việc thân thiện với ngƣời dùng Chƣa tối ƣu hóa đƣợc Theme - Thiết kế chƣa đẹp nhiều phần chƣa ăn khớp với style toàn website hạn chế việc thay đổi màu sắc chủ đạo theme - Tùy biến chƣa triệt để chƣa thể đáp ứng đƣợc nhiều mong muốn nhiều ngƣời dùng khác hạn chế tùy chọn meta box ngồi cịn có theme option Hƣớng phát triển đồ án: Từ ƣu nhƣợc điểm định hƣớng để phát triển đồ án tạo Theme hoàn chỉnh với yêu cầu: - Lập trình Theme đáp ứng đa lĩnh vực, đa chức Theme Tăng chức cho theme để đáp ứng yêu cầu cho ngƣời dùng Nhƣ sử dụng plugin hỗ trợ shop nhƣ Woocommerce, plugin hỗ trợ cho meta box nhƣ Meta Box IO - Có nhiều Style theme thêm phong phú, đa dạng - Tạo thêm Widget để ngƣời dùng thay đổi dễ dàng - Tăng tính thẩm mỹ cho website để thu hút ngƣời dùng - Hồn thiện Theme, hƣớng phát triển cao hơn, lâu dài đƣa theme tạo đƣợc đăng ký http://themeforest.net/ để bán Theme cho khách hàng tiềm - Mở rộng website với nhiều nội dung demo đáp ứng mặt thiết kế cho nhiều loại lĩnh vực khác SVTN: Dƣơng Minh Đức –MSSV: 1151070416 – Lớp 52K1 CNTT Page 42 ĐỒ ÁN TỐT NGHIỆP TÀI LIỆU THAM KHẢO Tài liệu Tiếng Việt: [1] Tác giả: Phạm Hữu Khang - Lập trình web PHP sở liệu MySQL – NXB Hà Nội – Năm xuất bản: 2000 [2] Nhóm tác giả Elicom - Cẩm nang thiết kế website - NXB Hà Nội – Năm xuất 2006 [3] Tác giả Nguyễn Hữu Duy - Bài học lập trình PHP ứng dụng NXB Đà Nẵng – Năm xuất 2008 [4] Tác giả Khổng Xuân Trung - Tìm hiểu WordPress- WordPress presentation - NXB Trẻ – Năm xuất 2007 [5] Tác giả Phạm Hữu Khanh - Giáo trình tự học lập trình PHP - NXB Đà Nẵng – Năm xuất 2010 [6] http://thachpham.com/ [7] http://themes.g5plus.net/ Tài liệu Tiếng Anh: [1] https://wordpress.org/ [2] http://www.w3schools.com/ [3] http://getbootstrap.com [4] https://codex.wordpress.org/ [5] https://themes.bizweb.vn/ [6] https://jqueryui.com/ [7] http://themeforest.net/ SVTN: Dƣơng Minh Đức –MSSV: 1151070416 – Lớp 52K1 CNTT Page 43 ... 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.5... xây dựng đƣợc Theme cho mã nguồn mở WordPress - Lập trình cho tập tin cần thiết theme - Thêm đƣợc số chức cho WorPress nhƣ Theme Option, Shortcodes, Meta box, Widget, Sidebar - Dùng Theme tạo tùy... tài: 1.5.1 Đối với Theme: Theme sau 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 sử dụng Plugin Lập trình rõ ràng, dễ hiểu Theme tạo phải có đầy