Đang tải... (xem toàn văn)
Giáo trình Thiết kế Website với mã nguồn mở gồm các nội dung chính như: Cài đặt và cấu hình được trang web trên localhost, trên host WordPress; Nghiên cứu các đối tượng cần quản lý, cấu trúc tổ chức, Sử dụng được danh mục và thẻ, Tạo được trang, Quản lý được bình luận trên trang web WordPress; Nghiên cứu về Cài đặt chủ đề, Plugin, Widget;... Mời các bạn cùng tham khảo!
ỦY BAN NHÂN DÂN TỈNH AN GIANG TRƢỜNG CAO ĐẲNG NGHỀ AN GIANG GIÁO TRÌNH Thiết kế Website với mã nguồn mở NGHỀ: LẬP TRÌNH MÁY TÍNH VÀ TIN HỌC ỨNG DỤNG TRÌNH ĐỘ CAO ĐẲNG, TRUNG CẤP (Ban hành theo Quyết định số: /QĐ-CĐN ngày tháng năm 20 Hiệu trưởng trường Cao đẳng nghề An Giang) Tên tác giả : Phương Phương Thuý Năm ban hành: 2019 TUYÊN BỐ BẢN QUYỀN Tài liệu thuộc loại sách giáo trình nên nguồn thơng tin phép dùng nguyên trích dùng cho mục đích đào tạo tham khảo Mọi mục đích khác mang tính lệch lạc sử dụng với mục đích kinh doanh thiếu lành mạnh bị nghiêm cấm LỜI GIỚI THIỆU Yêu cầu có tài liệu tham khảo cho học sinh, sinh viên khoa Công nghệ Thông tin - Trường Cao đẳng Nghề An Giang ngày trở nên cấp thiết Việc biên soạn tài liệu nằm kế hoạch xây dựng hệ thống giáo trình mơn học Khoa Mục tiêu giáo trình nhằm cung cấp cho học sinh, sinh viên tài liệu tham khảo mơn học Thiết kế website với mã nguồn mở, giới thiệu khái niệm Thiết kế trang Web với mã nguồn mở WordPress, đồng thời trang bị kiến thức số kỹ chủ yếu cho việc bảo trì giải pháp tối ưu hóa hiệu suất cho trang web Đây coi kiến thức ban đầu tảng cho học siinh sinh viên Cao Đẳng Đai học Tài liệu gồm nội dung sau: Chương 1: Cài đặt cấu hình trang web localhost, host WordPress Chương 2: Nghiên cứu đối tượng cần quản lý, cấu trúc tổ chức, Sử dụng danh mục thẻ, Tạo trang, Quản lý bình luận trang web WordPress Chương 3: Nghiên cứu Cài đặt chủ đề, Plugin, Widget Chương 4: Tìm hiểu vấn đề cập nhật, lưu trang web Chương 5: Nghiên cứu giải pháp tối ưu hóa hiệu suất trang web WordPress, Sử dụng WordPress Caching Plugins Thực tối ưu hóa hình ảnh WordPress Thiết kế Website với mã nguồn mở mô đun đào tạo chuyên môn nghề Trong trình thực hiện, nhóm biên soạn tham khảo nhiều tài liệu liên quan đến vấn đề Thiết kế Website với WordPress, kết hợp với kinh nghiệm thực tế Giáo trình khơng đề cập vấn đề sở luận lý mà tổng hợp số kỹ năng, kinh nghiệm cần thiết để Thiết kế Website với mã nguồn mở WordPress Mặc dù có cố gắng để hồn thành giáo trình theo kế hoạch, hạn chế thời gian kinh nghiệm, nên tài liệu chắn khiếm khuyết Rất mong nhận đóng góp ý kiến thầy cô Khoa học sinh, sinh viên sử dụng tài liệu Các đóng góp ý xin gửi phuongphthuy@gmail.com Xin chân thành cảm ơn người tham khảo giáo trình này! An Giang, ngày 02 tháng 12 năm 2019 Tham gia biên soạn 1.Chủ biên: Phương Phương Thuý Phản biện: Lê Thị Ngọc Trâm ĐỀ MỤC Lời giới thiệu Mục lục Chƣơng 1: Cài đặt WordPress I Giới thiệu hệ thống quản trị nội dung CMS II Cài đặt cấu hình trang web WordPress localhost III Cài đặt cấu hình trang web WordPress host Chƣơng 2: Quản lý trang web WordPress I Truy cập bảng điều khiển WordPress II Điều hướng bảng điều khiển WordPress III Cài đặt cho trang web WordPress IV Đăng V Sử dụng danh mục thẻ (Categories And Tags) VI Tạo trang WordPress VII Quản lý bình luận trang WordPress Chƣơng 3: Tùy chinh trang web WordPress I Cài đặt chủ đề WordPress II Cài đặt Plugin WordPress III Thêm Widgets Chƣơng 4: Bảo trì trang web WordPress I Cập nhật trang web WordPress II Sao lưu trang web WordPress Chƣơng 5: Tối ƣu hóa hiệu suất trang web WordPress I Sử dụng WordPress Caching Plugins II Tối ưu hóa hình ảnh WordPress Các thuật ngữ chuyên môn Tài liệu tham khảo TRANG 5 13 20 20 22 23 28 29 31 31 34 34 38 39 43 43 44 49 49 53 60 61 GIÁO TRÌNH MƠN HỌC/MƠ ĐUN Tên mơn học/mơ đun: Thiết kế Web với mã nguồn mở Mã môn học/mô đun: MH34 Vị trí, tính chất, ý nghĩa vai trị mơn học/mơ đun: Vị trí: Thuộc nhóm mơn học chun mơn nghề Được bố trí sau mơ đun Thiết kế trang Web Tính chất: Là mơn học chun môn bắt buộc ngành Tin học ứng dụng hệ Trung cấp; Lập trình máy tính hệ cao đẳng Mục tiêu môn học/mô đun: Về Kiến thức: + Trình bày Hệ thống quản trị nội dung CMS, hiểu rõ ưu nhược điểm sử dụng hệ thống quản trị nội dung CMS để xây dựng website + Trình bày hệ thống quản trị nội dung WordPress + Trình bày quy trình cài đặt cấu hình WordPress + Trình bày đối tượng quản lý WordPress + Trình bày WordPress plugin + Trình bày thao tác bảo trì trang web + Trình bày giải pháp tối ưu hóa hiệu suất cho trang web WordPress Về kỹ năng: + Thực cài đặt cấu hình WordPress + Quản lý trang web WordPress + Tùy chỉnh trang web WordPress: cài đặt giao diện, cài đặt plugin, thêm widget + Bảo trì trang web WordPress + Thực tối ưu hóa hiệu suất cho trang web WordPress Về lực tự chủ trách nhiệm + Cẩn thận, tỉ mỉ, tự giác học tập nghiên cứu CHƢƠNG 1: CÀI ĐẶT WORDPRESS Giới thiệu: Với công nghệ thông tin phát triển nay, việc tạo dựng trang web trở nên dễ dàng nhiều, nhiều tảng đời giúp xây dựng trang web theo thể loại Nhưng nhiều lựa chọn làm khó khăn việc lựa chọn hệ thống quản trị nội dung CMS phù hợp với website Trong chương giới thiệu rõ CMS số hệ thống CMS phổ biến nay, giúp tối ưu việc quản lý website Ngồi phải hiểu cách cài đặt cấu hình trang web WordPress localhost host Mục tiêu: Trình bày Hệ thống quản trị nội dung CMS, hiểu rõ ưu nhược điểm sử dụng hệ thống quản trị nội dung CMS để xây dựng website Trình bày quy trình cài đặt WordPress Cài đặt cấu hình trang web WordPress localhost Cài đặt cấu hình trang web WordPress host Nội dung chính: I GIỚI THIỆU HỆ THỐNG QUẢN TRỊ NỘI DUNG CMS CMS (Content Management System) Hệ thống quản trị nội dung, cơng cụ giúp quản lý viết, nội dung, hình ảnh video đăng website Cách quản lý nội dung tối ưu giúp chủ trang web tiết kiệm nhiều thời gian, cơng sức dễ dàng bảo trì cần thiết Tuy nhiên, hệ thống quản trị nội dung cịn giúp nhiều nữa, từ lập mục nội dung, quản lý định dạng trang web,… Bên cạnh đó, tùy theo hệ thống sử dụng có hỗ trợ tích hợp thêm plugin hay extension, giúp bổ sung thêm nhiều tính khác cho CMS Thơng thường việc sử dụng CMS khơng cần phải có kiến thức lập trình web Nhưng có tốt giúp tùy chỉnh nhiều Một số CMS tốt có tính tạo dựng website chuyên nghiệp đại Hình CMS – Content management system Hệ thống quản lý nội dung bao gồm hai thành phần chính: Một ứng dụng quản lý nội dung (CMA: Content Management Application) Một CMA giao diện người dùng đồ họa GUI (Graphical User Interface) cho phép người dùng tạo, sửa đổi, xóa xuất nội dung mà khơng cần phải biết HTML ngơn ngữ lập trình khác Một ứng dụng phân phối nội dung (CDA: Content Delivery Application) CDA chịu trách nhiệm dịch vụ “back-end” để quản lý cung cấp nội dung sau xử lý CMA Các tính đặc biệt: URL thân thiện với SEO Hỗ trợ trực tuyến cộng đồng mạng Các chức cho người dùng nhóm người dùng Nhiều kiểu mẫu (Themes) tạo sẵn khác Trình cài đặt cập nhật, nâng cấp hệ thống liên tục Một số Hệ thống quản trị nội dung CMS tốt WordPress Hầu hết người có tìm hiểu thông tin xây dựng, quản lý website biết đến CMS WordPress tiếng Theo thống kê cho thấy khoảng 1/3 số trang web 10 triệu trang web tìm kiếm nhiều giới sử dụng hệ thống quản trị WordPress, WordPress trở thành CMS mạnh Được xây dựng ngôn ngữ PHP sử dụng sở liệu MySQL, ban đầu WordPress dùng để viết blog, qua thời gian phát triển, sử dụng để quản lý nội dung website Với hàng ngàn Themes miễn phí khả tùy chỉnh đa dạng, dễ dàng tự tạo plugin, WordPress giúp xây dựng website ý muốn quản lý chúng dễ dàng Một lợi nhờ thơng dụng WordPress khiến sử dụng nhiều, giúp dễ dàng tìm thơng tin cần thiết, trao đổi kinh nghiệm cập nhật vá lỗi nhanh chóng Hình WordPress Joomla Bên cạnh phổ biến thông dụng tảng WordPress Joomla lên nhờ tính riêng biệt Một điểm yếu mà điểm mạnh Joomla khơng thân thiện với người dùng bắt đầu đòi hỏi người dùng phải có kiến thức quản trị web Tuy nhiên, nhờ mà Joomla cung cấp không gian sáng tạo linh hoạt hẳn WordPress Joomla cung cấp cho người dùng khả tùy chỉnh cao cách quản lý viết Những viết mà không phụ thuộc nhiều vào văn Nền tảng cung cấp nhiều lựa chọn việc quản lý người dùng, tiện cho website có chức quản lý thành viên Việc sở hữu kho lưu trữ Themes Templates lợi cho người dùng Joomla tiện lợi việc tùy biến nội dung loại viết khác Hình Joomla Drupal Giống hai tảng quản trị nội dung WordPress Joomla, Drupal CMS mã nguồn mở PHP không phổ biến hai tảng Do đòi hỏi kinh nghiệm lập trình quản trị web nên cần tạo dựng blog thông thường hay website cơng ty đơn giản sử dụng WordPress Joomla tốt tính đơn giản, dễ dùng Drupal Tuy nhiên với tập đoàn doanh nghiệp lớn, với dự án website đòi hỏi bảo mật cao, cấu trúc dự liệu bí mật, hệ thống thành viên lớn khả tùy chỉnh cao nên sử dụng Drupal Từ thông tin từ website tiếng, diễn dàn có số lượng cộng đồng lớn, mức độ bảo mật Drupal đánh giá cao tin tưởng hàng triệu nhà lập trình web giới Có thể dự án website phổ thơng, Drupal khó tiếp cận sử dụng với website tầm cỡ điều hồn tồn chấp nhận so với Drupal cung cấp cho Hình Drupal CMS giúp cho việc SEO website? SEO chữ viết tắt cụm từ Search Engine Optimization dịch theo nghĩa tiếng Việt Tối ưu hóa máy tìm kiếm Việc quen thuộc sử dụng hệ thống quản trị nội dung website mà cần SEO ảnh hưởng lớn tới thứ hạng từ khóa Một website có CMS tối ưu cho việc SEO dễ dàng tìm kiếm từ khóa website chưa tối ưu CMS CMS giúp SEOer quản lý trang web SEO dễ dàng hơn, đồng thời tùy chỉnh nội dung phù hợp cách nhanh chóng dễ dàng II CÀI ĐẶT WORDPRESS TRÊN LOCALHOST Để khỏi thời gian chờ đợi load, trình thiết kế website nên làm việc Local Host (Cài đặt Offline để có tốc độ nhanh pingOk>Next> tới chọn đường dẫn cho nơi cài đặt Hình Chọn thư mục cài đặt * Lưu ý: nên cho thư mục cài đặt vào ổ đĩa khác ổ đĩa C Vì sao? Vì ổ C ổ đĩa cài Win, có vấn đề mà lỡ format Xampp Ở ta chọn ổ đĩa D + Tiếp tục Install>Install> Đợi cho q trình cài đặt xong xi khoảng phút + Finish>Yes để bắt đầu Xampp Bước 2: Chạy chương trình Xampp Hình Cài đặt Xampp vào máy + Vào nơi cài đặt Xampp, chạy file “xampp-control” Hình xampp-control Hình 66 Hoan tat nen file va chon download de tai ve may tinh + Bƣớc 8: Sao lưu Cơ sở liệu (Database) website WordPress Chúng ta quay trở lại trang quản lý Cpanel, kéo xuống thấy mục phpMyAdmin hình minh họa, mở để chuyển đến trang quản lý Database Hình 67 Mo phpMyAdmin tren Cpanel len + Bƣớc 9: Chọn vào database web cần lưu nhấn vào nút Export ngang hình bên 47 Hình 68 Chon database cua web can luu + Bƣớc 10: Chọn y hình bên (để nguyên mặc định), nhấn vào Go để tải file database website Như hoàn tất việc lưu Database Hình 69 Xuat file Databse cua website WordPress + Bƣớc 11: Copy file Data web file Database vừa xong vào thư mục, đặt tên thư mục cho dễ nhớ đem bỏ vào nơi mà muốn lưu trữ website máy tính Google Drive CÂU HỎI ƠN TẬP Hãy trình bày bước Cập nhật trang web WordPress? Hãy trình bày bước Sao lưu trang web WordPress? 48 CHƢƠNG 5: TỐI ƢU HÓA HIỆU SUẤT TRANG WEB WORDPRESS Giới thiệu: Các ứng dụng web kết hợp mã code Server-side Client-side Do hiệu suất trang web gặp phía, cần tối ưu hóa hai Về mặt Client-side hiệu suất thường liên quan đến vấn đề trình duyệt, việc load trang web lúc khởi tạo, tải tất resources lúc, việc chạy javascript khơng hiệu Về phía Server-side lại liên quan đến vấn đề tốn thời gian để xử lý Request, Tối ưu hóa hiệu suất Server-side thường liên quan đến làm việc với database, ứng dụng phụ thuộc Việc tối ưu hóa Client side xoay quanh vấn đề giảm tổng thể kích thước trang web, việc tối ưu hóa sử dụng hình ảnh quan trọng Ngồi ra, ứng dụng web có nhiều file javascript, css, file hình ảnh file tĩnh không thay đổi trình sử dụng Chúng ta tăng hiệu suất trang web cách caching file tĩnh server mà gần với người sử dụng Điều khơng giúp người dùng lấy file tĩnh server gần làm giảm lưu lượng truy cập trực tiếp vào server giúp cho trang web load nhanh Mục tiêu: Trình bày giải pháp tối ưu hóa hiệu suất trang web WordPress Sử dụng WordPress Caching Plugins Thực tối ưu hóa hình ảnh WordPress Nội dung chính: I Sử dụng WordPress Caching Plugins Thời gian tải nhiều gây hại cho trang web theo nhiều cách Có vài cách để cải thiện tốc độ trang web nhớ đệm (cache) có tác động lớn nhiều trường hợp Với ý nghĩ trên, đánh giá hiệu suất sáu giải pháp nhớ đệm hàng đầu cho WordPress Chúng ta xem xét tính mà plugin cung cấp để giúp xác định tính thực tốt (không nhanh nhất) plugin caching: WP Rocket , W3 Total Cache , WP Super Cache , Cache nhanh WP , Comet Cache Cache Enabler Caching gì? Tại giúp wordpress chạy nhanh + Bộ nhớ cache vùng nhớ máy tính lưu trữ thông tin sử dụng gần Khi trang web lưu trữ, có nghĩa trang, hình ảnh, tệp đối tượng Web trang lưu trữ ổ đĩa cứng cục người dùng Điều có nghĩa người dùng mở tệp truy cập thường xuyên, trình duyệt có nhiều (nếu khơng phải tất cả) tệp lưu nhớ cache + Khi trình duyệt khơng phải truy xuất thơng tin trang web truy cập, dẫn đến thời gian tải trang nhanh Caching plugins làm việc theo cách Lưu tệp HTML tạo động nhớ cache phục vụ chúng vào lần tới yêu cầu thực thay tải lại tất tập lệnh PHP từ WordPress 49 WP Rocket Hình 70 WP Rocket caching plugin wordpress WP Rocket giải pháp nhớ đệm tốt cho WordPress plugin cao cấp danh sách Nó thân thiện với người dùng phao cứu sinh cho quản trị viên web tìm thấy thuật ngữ kỹ thuật lập trình web để gây khó hiểu Plugin hoạt động xác sau kích hoạt; kết khơng bị rối cố gắng cấu hình Những người số có kiến thức cơng nghệ sâu vào tùy chọn nâng cao thiết lập cấu hình tùy chỉnh tùy theo thực tế Tính năng, đặc điểm WP Rocket WP Rocket plugin nhớ đệm giàu tính cung cấp khả tải trước nhớ cache, nhớ đệm trình duyệt, nén GZIP tùy chọn cho việc rút gọn ghép nối HTML, CSS JavaScript Tính tải hình ảnh lười biếng đặt ngồi giải pháp nhớ đệm phổ biến khác Những người chưa biết, tính làm cho để hình ảnh đặt trang tải người dùng cuộn xuống trang Cách tiếp cận không ưu tiên cải thiện đáng kể thời gian tải Dưới số tính khác tìm thấy plugin cache này: + Thiết lập đơn giản, nhanh chóng trực quan + Bộ nhớ đệm trang kích hoạt + Tối ưu hóa phơng chữ Google giảm thiểu yêu cầu HTTP + Các tệp JavaScript hoãn lại trang hiển thị + Tích hợp liền mạch với CloudFlare W3 Total Cache Hình 71 W3 Total Cache W3 Total Cache khung cơng tác tối ưu hóa hiệu suất WordPress thiết kế để nâng cao trải nghiệm người dùng cải thiện thời gian tải 50 trang Giải pháp nhớ đệm đề xuất số nhà cung cấp dịch vụ lưu trữ hàng đầu ngành bao gồm Pagely, Flywheel SiteGround Điều cần biết plugin khu vực cài đặt chia thành 16 trang Nhưng điều quan trọng cần nhớ khơng phải tự cấu hình cài đặt để làm cho plugin hoạt động – cài đặt mặc định hoạt động tốt W3 Total Cache có trang cài đặt chuyên dụng cho loại nhớ đệm: nhớ đệm trang, nhớ đệm đối tượng, nhớ đệm sở liệu, nhớ đệm trình duyệt, v.v Mức độ tùy biến nhận với W3 Total Cache khó tìm nơi khác Tính năng, đặc điểm W3C Total Cache + Nén GZIP để tối ưu hóa hiển thị trình duyệt web + Rút gọn ghép nối tệp HTML, CSS JavaScript + Hỗ trợ cho mạng phân phối nội dung (CDN) + Tương thích với CloudFlare WP Super Cache Hình 72 WP Super Cache WP Super Cache giải pháp nhớ đệm miễn phí có sẵn WordPress Cơ chế lưu nhớ đệm dễ hiểu Plugin tạo tệp HTML tĩnh từ website WordPress động lưu trữ thay tập lệnh PHP WordPress + Nó cung cấp ba tùy chọn để giảm thời gian tải: + Sử dụng mod_rewrite để phân phối trang tĩnh + Phục vụ trang tĩnh cách sử dụng PHP + Sử dụng chế độ lưu vào nhớ cache kế thừa lưu trữ trang cho người dùng đăng nhập Tính năng, đặc điểm WP Super Cache + Nén trang nhớ đệm động + Hỗ trợ cho mạng phân phối nội dung (CDN) + Lưu vào nhớ cache cho khách truy cập thiết bị di động + Trình lập lịch biểu để quản lý việc xóa tái lưu vào nhớ cache khoảng thời gian định 51 WP Fastes Cache Theo nhà phát triển, plugin WP Fastest Cache “hệ thống WP Cache đơn giản nhanh nhất” Tương tự WP Super Cache, WP Fastest Cache tạo tệp HTML tĩnh dựa website WordPress động lưu vào nhớ cache WP Fastest Cache tự hào cung cấp plugin dễ cài đặt – cung cấp Chúng ta chí khơng phải sửa đổi tập tin cấu hình htaccess Plugin sử dụng mod_rewrite để tạo tệp HTML tĩnh trang web Nó cung cấp tính rút gọn, nén GZIP, nhớ đệm trình duyệt tùy chọn kết hợp tệp JavaScript CSS với để giảm yêu cầu từ máy chủ Tính năng, đặc điểm WP Fastes Cache + Mod_Rewrite phương pháp nhanh sử dụng plugin + Tất tệp nhớ cache bị xóa đăng trang xuất + Hỗ trợ CDN SSL + Bật / Tắt tùy chọn nhớ cache cho thiết bị di động người dùng đăng nhập + Chặn nhớ cache cho trang đăng cụ thể shortcode Comet Cache Comet Cache , trước gọi ZenCache Quick Cache nhanh chóng trở nên phổ biến tên Nó lưu trữ trang web thành dạng cache thiết bị để cung cấp cho lượt truy cập sau Phương pháp đơn giản hiệu giúp tiết kiệm thời gian xử lý ban đầu khiến thời gian tải trang trang web tăng lên Plugin sử dụng kỹ thuật nâng cao để xác định thời điểm gửi phiên lưu nhớ cache khơng nên Theo mặc định, người dùng đăng nhập vào hệ thống khách truy cập nhận xét trang web gần không cung cấp trang lưu nhớ cache Chúng ta chỉnh sửa cài đặt cấu hình từ trang Cài đặt Tính năng, đặc điểm Comet Cache + Các tùy chọn để kiểm sốt hành vi xóa nhớ cache tự động cho Trang chủ Trang đăng, Trang tác giả, Danh mục, Thẻ Lưu trữ tùy chỉnh, Lưu trữ loại đăng, RSS / RDF / ATOM Feeds XML Sitemaps + Khả cache bỏ qua URL chứa chuỗi truy vấn (GET Requests) + Tác nhân người dùng mẫu loại trừ liên kết giới thiệu HTTP + Đặt thời gian hết hạn tự động cho tệp nhớ cache Cache Enabler Cache Enabler giải pháp lưu trữ nhớ đệm nhỏ nhẹ cho WordPress, có hai thứ để giảm thời gian tải trang trang web– tạo tệp HTML tĩnh cung cấp hỗ trợ WebP Các tệp HTML tĩnh lưu đĩa cứng máy chủ Plugin lần loại hình cho phép người dùng phục vụ hình ảnh WebP mà khơng cần JavaScript Những người chưa biết, WebP định dạng hình ảnh nhanh chóng trở nên phổ biến hình ảnh tối ưu hóa web cung cấp tính nén liệu liệu 52 Khi tệp truy cập yêu cầu, máy chủ web cung cấp tệp HTML tĩnh tránh tất quy trình phụ trợ tài nguyên chuyên sâu Chiến lược nhớ đệm làm tăng đáng kể tốc độ trang web, dẫn đến thời gian tải trang thấp cải thiện hiệu suất cài đặt WordPress Tính năng, đặc điểm Cache Enabler + Quản lý hệ thống cache hiệu tùy biến hợp lý + Hiển thị kích thước nhớ cache thực tế trang tổng quan + Giảm thiểu HTML JavaScript nội tuyến + Hỗ trợ WebP (khi kết hợp với Optimus) + HTTP / tập trung II Tối ƣu hóa hình ảnh WordPress Nếu khơng có hình ảnh, website giống tường đầy chữ Để thu hút người đọc, cần chèn vào hay nhiều ảnh làm bật vấn đề Những hình ảnh phân đoạn nội dung, giúp viết dễ đọc Chưa kể thơng tin chứa hình tăng traffic google có tính search theo hình ảnh Nhưng, để hình ảnh khơng làm ảnh hưởng đến kích thước site, cịn cần tối ưu hóa hình ảnh WordPress Hầu hết chủ site WordPress thường đơn giản upload ảnh lên website mà không nén ảnh tối ưu ảnh, việc gây nhiều thiệt hại khơng lường trước Chúng ta tìm hiểu bắt buộc phải tối ưu ảnh Tiếp theo, học cách để tối ưu hóa hình ảnh WordPress Vì cần phải tối ƣu hóa hình ảnh WordPress Nếu khơng tối ưu hóa hình ảnh WordPress, làm cho website chậm tăng băng thơng sử dụng Hình ảnh chiếm phần lớn không gian lưu trữ, thực không cần thiết phải Một số lý cần nén ảnh WordPress là: + Site tải nhanh Một site chậm ảnh hưởng tiêu cực đến trải nghiệm người dùng, khiến họ trang Tỉ lệ bounce rates tăng lên, thời gian on site giảm xuống, đánh nhiều người đọc tìm Năm 2019 khơng cịn dành thời gian cho việc chờ hình ảnh tải lên + Site chiếm dung lƣợng server Thông thường, không đạt giới hạn dung lượng gói hosting dùng Tuy nhiên, site chiếm dung lượng hơn, nhẹ hơn, khiến hoạt động mượt mà Hơn nữa, cịn giảm chi phí server toán dựa dung lượng sử dụng + Xếp hạng search engine đƣợc cải thiện Google search engine khác ghét site website chạy chậm Chúng ta thử search từ khóa phổ biến, site đứng đầu thường load nhanh phải khơng? Vì vậy: Chỉ việc tối ưu ảnh, thứ hạng tìm kiếm cải thiện Vì lý sau: Khách truy cập hài lòng lại trang 53 Google quét ảnh nhanh hơn, từ xếp hạng ảnh cao trình tìm kiếm ảnh Tối ưu hình ảnh WordPress khơng phải việc khó khăn hay thời gian, trở thành bước quy trình viết Nếu khơng nén ảnh, lâu dài ảnh hưởng mức độ thành cơng website Bên cách làm để tối ưu ảnh cho WordPress cách giữ lại chất lượng ảnh mà không đánh đổi hiệu website phƣơng pháp tối ƣu hóa hình ảnh cho WordPress Mục tiêu việc tối ưu hóa hình ảnh nén kích thước ảnh xuống cho dung lượng giảm xuống mức thấp mà không làm giảm chất lượng ảnh.Chúng ta cần tự điều chỉnh mức độ nén ảnh cho cảm thấy vừa mắt hài lịng Có nhiều biện pháp nén ảnh Chúng ta thực kết hợp cách bên để optimize ảnh xuống mức thấp có thể, tất cách đơn giản để thực Chọn định dạng Trước bắt đầu tối ưu ảnh, chọn định dạng file Định dạng file ảnh hưởng tới kích thước file việc nén file ảnh định dạng ảnh thơng dụng JPEG PNG JPEGs thường dùng cho file ảnh, chúng: + Có dung lượng file nhỏ + Chất lượng ảnh tốt + Có thể thu nhỏ, nén, mà không bị nhiều chất lượng ảnh PNG dùng cho file ảnh dạng vectors, logo, ảnh chụp hình, ảnh cỡ nhỏ Chúng có kích thước file lớn hơn, nên dùng dạng Ngồi PNG JPEG, thấy nhiều loại file ảnh khác Nhưng chúng không khuyên dùng cho việc tạo ảnh để chạy website Nhưng có ngoại lệ file GIF Có bùng nổ định dạng GIF năm gần Những ảnh động dùng để làm phong phú thêm cho nội dung Nếu có ý định chèn video, dùng định dạng GIF, thay MP4 để nhẹ Nén ảnh Khi nén ảnh, cần ý cân chất lượng kích thước Vì nén ít, chất lượng hình cao Nếu tăng cấp độ nén lên, kích thước ngày nhỏ chất lượng ảnh hưởng Nó cịn tùy vào loại website, ví dụ làm website nhiếp ảnh, cần chất lượng ảnh tốt Nhưng lựa chọn số thiết lập để nén ảnh phần cho nhỏ lại Bên ứng dụng desktop, ứng dụng web, plugin WordPress để giúp nén ảnh mà không ảnh hưởng đến chất lượng tổng thể Công cụ nén ảnh DIY (tự làm) Các cơng cụ Desktop-based có nhiều lựa chọn để tùy chỉnh thiết lập nén ảnh Nếu dùng qua phần mềm chỉnh ảnh Photoshop, thích nén ảnh cách Một số phần mềm nén ảnh phổ biến là: 54 + Adobe Photoshop: Photoshop có cơng cụ nén ảnh mặc định để giúp tối ưu ảnh cho web + Gimp: Một công cụ miễn phí thay cho photoshop để tự học chỉnh ảnh, có cơng cụ nén ảnh tích hợp + Affinity Photo: Đây giải pháp rẻ để thay cho Photoshop có cơng cụ tối ưu ảnh + Paint.NET: Công cụ chỉnh sửa ảnh cho người dùng Windows Là lựa chọn tốt để thay cho Photoshop bao gồm khả tối ưu ảnh + Các trình chỉnh sửa ảnh cần kiến thức chỉnh sửa ảnh, bù lại có nhiều lựa chọn cấu hình cho việc tối ưu hóa hình ảnh cho WordPress Ứng dụng tự động nén ảnh Nếu thích đơn giản, nên sử dụng cơng cụ online để tự động tối ưu hóa hình ảnh cho WordPress Những tool sau giúp đỡ thời gian để học cách sử dụng phần mềm Đầu tiên tools web phổ biến JPEGmimi TinyPNG Hình 73 giao diện Phần mềm JPEGmimi Chúng ta việc upload, phần mềm tự chạy tải ảnh tối ưu sau Tiếp theo phần mềm máy tính ImageOptim, OptiPNG, Trimage Plugin nén ảnh WordPress Như hầu hết ứng dụng khác WordPress, dễ dàng tìm thấy plugin để nén ảnh WordPress 55 Hình 74 Giao diện nén ảnh Các plugin sau giúp tối ưu ảnh WordPress upload, nén xuống để lưu lại thư viện ảnh: + Imagify Image Optimizer: Plugin cung cấp nhiều mức độ nén khác nhau, nhiều cách thay đổi kích thước khác nhau, khơi phục hình ảnh, + ShortPixel Image Optimizer: Plugin miễn phí cho phép nén tới 100 ảnh tháng xử lý nhiều định dạng ảnh khác Hơn nữa, có cơng cụ khơi phục tích hợp sẵn tối ưu nhiều ảnh lúc + WP Smush: Plugin tối ưu ảnh upload lên website, ngồi cịn tối ưu ảnh cũ thư viện ảnh Nó giảm dung lượng size ảnh xuống mà không làm ảnh hưởng chất lượng ảnh + Optimus Image Optimizer: Plugin nén ảnh mà không làm chất lượng ảnh Thay đổi kích thƣớc size ảnh để phù hợp mức độ hiển thị Trước bắt đầu tối ưu ảnh nên chỉnh kích thước ảnh trước Khơng có lý để upload ảnh cực lớn lên trang web cần ảnh nhỏ, để tự phải hạ kích thước hiển thị xuống để xem 56 Hình 75 Thay đổi kích thước ảnh Attachment Details Hãy xem kích thước ảnh có chưa trước upload Bằng cách cần xử lý size ảnh cỡ nhỏ từ đầu Ví dụ, cần ảnh với kích thước 300×300, lại upload ảnh đến 3000×3000 pixel, việc khiến cho WordPress theme phải thực thao tác đổi kích thước ảnh xuống 300×300 để hiển thị cho đẹp Hoạt động khơng tăng băng thơng, cịn khiến q trình tải ảnh lên chậm truy cập website Cách tốt upload y kích thước cần thiết Rồi chạy tool sau để Tối ưu hình ảnh WordPress Hãy crop ảnh (cắt ảnh) cho khớp WordPress có cơng cụ mặc định để giúp crop ảnh từ dashboard Hình 76 Crop ảnh Attachment Details 57 Mặc dù công cụ hữu dụng, nên crop ảnh trước tối ưu upload ảnh lên Nếu cần ảnh crop trước để khớp với stie, xóa ảnh site, crop tải ảnh lên lại Vì chỉnh sửa, thao tác nhiều dashboard, vơ tình tạo nhiều phiên file Vì vậy, tăng thời gian tải server tăng kích thước site Tăng SEO cho ảnh Tối ưu ảnh giúp tăng tốc độ tải trang, lý thuyết tăng khả thăng hạng Nhưng có biết khơng, ảnh SEO để tăng hạng tìm kiếm trình tìm kiếm ảnh Có vài bước cần làm để SEO ảnh sau: Tối ƣu tiêu đề file ảnh Tiêu đề ảnh hiển thị người dùng di chuột qua ảnh Nó khơng quan trọng SEO, quan trọng với trải nghiẹm người dùng Để đổi tiêu đề ảnh, chuyển tới trang viết nơi đặt ảnh Di chuột tới ảnh click vào biểu tượng bút chì, chọn tùy chọn „Edit‟ Hình 77 Tiêu đề ảnh Chọn „Advanced Options‟ thấy nơi chỉnh image title Hình 78 Advanced Options Tiêu đề ảnh Đặt ALT Tag Alt text ảnh giúp Google có định hướng trang web nói điều Nếu có nhiều ảnh trang, ảnh trang nên chứa từ khóa Mỗi hình nên sử dụng biến thể từ khóa, phải liên quan đến hình Để đổi image alt text, chuyển tới trang chỉnh sửa ảnh chọn ảnh vừa chèn Một lần nữa, click vào icon bút chì để vào lựa chọn „Edit‟ 58 Hình 78 Alt text ảnh Trên cửa sổ tìm có tên „Alternative Text‟, điền từ khóa từ khóa liên quan vào ô Sử dụng tên file Tên file giúp tăng hạng Google image search, vốn giúp tăng thêm phần traffic vào webiste Hình 79 Google image search Thay sử dụng tên file vơ nghĩa, đổi thành tên có ý nghĩa có kèm target keyword vào, đơn giản hình ảnh nói điều Trước upload ảnh lên WordPress, dành thời gian để tìm tên phù hợp cho ảnh Cuối cùng, có nhiều từ tên file, sử dụng dấu gạch ngang ngăn từ, Google coi dấu cách Nếu không, từ trở nên vô nghĩa không giúp tăng hạng Google Search Image CÂU HỎI ÔN TẬP Tối ưu trang web gì? Tại ta lại phải tối ưu trang web? Caching gì? Tại giúp wordpress chạy nhanh hơn? Hãy trình bày tính năng, đặc điểm WP Rocket? Hãy trình bày phương pháp tối ưu hóa hình ảnh cho WordPress 59 THUẬT NGỮ CHUN MƠN SEO – Search Engine Optimization: Tối ưu hóa máy tìm kiếm CMA – Content Management Application: Một ứng dụng quản lý nội dung CDA – Content Delivery Application): CDA chịu trách nhiệm dịch vụ “back-end” để quản lý cung cấp nội dung sau xử lý CMA CMS (Content Management System) hệ thống quản trị nội dung ALT: Alt text giúp Google có định hướng trang web nói nội dung 60 TÀI LIỆU THAM KHẢO https://tuhoclamweb.com/giao-trinh-wordpress/ Tài liệu hướng dẫn WordPress 3.4 Kent International College, Lecturer: ThS Nguyễn Hữu Phát http://www.webdesigndevelopments.com https://giuseart.com/nhung-tuy-chinh-dau-tien-cho-website-wordpress-cuaban/ https://kinhtecongnghe.com/bai-2-thiet-lap-co-ban-cho-website-wordpress/ https://thachpham.com/wordpress/su-dung-tag-va-category-trong-bai-vietthe-nao-cho-hop-ly.html https://qnet88.com/huong-dan-cai-dat-theme-wordpress-cho-nguoi-moi/#ftocheading-4 https://wpcanban.com/wordpress/thu-thuat-wordpress/huong-dan-cap-nhatwordpress-theo-phuong-phap-thu-cong.html https://hocban.vn/cach-sao-luu-backup-website-wordpress-thu-cong-trongcpanel https://www.hostinger.vn/huong-dan/huong-dan-toi-uu-hoa-hinh-anh-chowordpress/ https://kiencang.net/widget-wordpress/ https://vi.blogpascher.com/wordpress-tutorial/0n-to-edge-wordpress-2 https://wiki.matbao.net/kb/huong-dan-su-dung-wordpress-tu-a-toi-z/ https://blog.tadu.vn/tao-menu-trong-wordpress/ https://www.hostinger.vn/huong-dan/lam-the-nao-de-chinh-sua-footertrong-wordpress-xoa-powered-by-wordpress/ 61 ... trang web Trường Cao Đẳng Nghề An Giang thực lại trang web Trường Cao Đẳng Nghề An Giang phiên 2 Hãy dựa vào nội dung bố cục trang web Trường Đại học An Giang thực lại trang web Trường Đại học. .. giáo trình nhằm cung cấp cho học sinh, sinh viên tài liệu tham khảo mơn học Thiết kế website với mã nguồn mở, giới thiệu khái niệm Thiết kế trang Web với mã nguồn mở WordPress, đồng thời trang... trang web Trường Cao Đẳng Nghề An Giang phiên 2 Hãy cài đặt vài plugin tuỳ ý học vào trang web Trường Đại học An Giang phiên làm phong phú cho trang web Hãy thêm vài Widget tuỳ ý học vào trang