- Trang Chủ
- Kỹ thuật lập trình
- Giáo trình Thiết kế Website với mã nguồn mở (Nghề: Lập trình máy tính, Tin học ứng dụng - Trình độ CĐ/TC) - Trường Cao đẳng Nghề An Giang
Xem mẫu
- Ủ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
của 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
1
- TUYÊN BỐ BẢN QUYỀN
Tài liệu này thuộc loại sách giáo trình nên các nguồn thông tin có thể được
phép dùng nguyên bản hoặc trích dùng cho các mục đích về đào tạo và tham khảo.
Mọi mục đích khác mang tính lệch lạc hoặc sử dụng với mục đích kinh doanh
thiếu lành mạnh sẽ bị nghiêm cấm.
1
- LỜI GIỚI THIỆU
Yêu cầu có các tài liệu tham khảo cho học sinh, sinh viên của khoa Công
nghệ Thông tin - Trường Cao đẳng Nghề An Giang ngày càng trở nên cấp thiết.
Việc biên soạn tài liệu này nằm trong kế hoạch xây dựng hệ thống giáo trình các
môn học của Khoa. Mục tiêu của giáo trình nhằm cung cấp cho học sinh, sinh viên
một tài liệu tham khảo chính về môn học Thiết kế website với mã nguồn mở, trong
đó giới thiệu những khái niệm căn bản nhất về Thiết kế trang Web với mã nguồn
mở bằng WordPress, đồng thời trang bị những kiến thức và một số kỹ năng chủ
yếu cho việc bảo trì và các giải pháp tối ưu hóa hiệu suất cho trang web. Đây có
thể coi là những kiến thức ban đầu và nền tảng cho các học siinh sinh viên của Cao
Đẳng và Đai học.
Tài liệu gồm các nội dung chính sau:
Chương 1: Cài đặt và cấu hình được trang web trên localhost, trên host
WordPress
Chương 2: 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
Chương 3: Nghiên cứu về Cài đặt chủ đề, Plugin, Widget
Chương 4: Tìm hiểu về vấn đề cập nhật, sao lưu trang web
Chương 5: Nghiên cứu về các giải pháp tối ưu hóa hiệu suất trang web
WordPress, Sử dụng được WordPress Caching Plugins. Thực hiện được tối ưu hóa
hình ảnh WordPress
Thiết kế Website với mã nguồn mở là mô đun đào tạo chuyên môn nghề.
Trong quá 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 trong thực
tế. Giáo trình này không chỉ đề cập những vấn đề cơ sở luận lý mà còn tổng hợp
một số kỹ năng, kinh nghiệm cần thiết để Thiết kế Website với mã nguồn mở bằng
WordPress.
Mặc dù đã có những cố gắng để hoàn thành giáo trình theo kế hoạch, nhưng
do hạn chế về thời gian và kinh nghiệm, nên tài liệu chắc chắn còn những khiếm
khuyết. Rất mong nhận được sự đóng góp ý kiến của các thầy cô trong Khoa cũng
như các học sinh, sinh viên và những ai sử dụng tài liệu này. Các đóng góp ý xin
gửi về phuongphthuy@gmail.com. Xin chân thành cảm ơn mọi 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ý
2. Phản biện: Lê Thị Ngọc Trâm
2
- ĐỀ MỤC TRANG
Lời giới thiệu 2
Mục lục 3
Chƣơng 1: Cài đặt WordPress 5
I. Giới thiệu hệ thống quản trị nội dung CMS. 5
II. Cài đặt và cấu hình trang web WordPress trên localhost. 8
III. Cài đặt và cấu hình trang web WordPress trên host. 13
Chƣơng 2: Quản lý trang web WordPress 20
I. Truy cập bảng điều khiển WordPress. 20
II. Điều hướng trong bảng điều khiển WordPress. 22
III. Cài đặt cơ bản cho trang web WordPress. 23
IV. Đăng bài đầu tiên. 28
V. Sử dụng danh mục và thẻ (Categories And Tags) 29
VI. Tạo trang trên WordPress. 31
VII. Quản lý bình luận trên trang WordPress 31
Chƣơng 3: Tùy chinh trang web WordPress 34
I. Cài đặt chủ đề WordPress. 34
II. Cài đặt Plugin WordPress. 38
III. Thêm Widgets. 39
Chƣơng 4: Bảo trì trang web WordPress 43
I. Cập nhật trang web WordPress. 43
II. Sao lưu trang web WordPress. 44
Chƣơng 5: Tối ƣu hóa hiệu suất trang web WordPress 49
I. Sử dụng WordPress Caching Plugins. 49
II. Tối ưu hóa hình ảnh WordPress. 53
Các thuật ngữ chuyên môn 60
Tài liệu tham khảo 61
3
- 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 và vai trò của môn học/mô đun:
Vị trí: Thuộc nhóm môn học chuyên môn nghề. Được bố trí sau mô đun
Thiết kế trang Web.
Tính chất: Là môn học chuyên môn bắt buộc trong 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 của môn học/mô đun:
Về Kiến thức:
+ Trình bày được thế nào là Hệ thống quản trị nội dung CMS, hiểu rõ ưu
nhược điểm khi sử dụng hệ thống quản trị nội dung CMS để xây dựng website.
+ Trình bày được hệ thống quản trị nội dung WordPress.
+ Trình bày được quy trình cài đặt và cấu hình WordPress.
+ Trình bày được các đối tượng quản lý trong WordPress.
+ Trình bày được WordPress plugin cơ bản.
+ Trình bày được các thao tác bảo trì trang web.
+ Trình bày được các giải pháp tối ưu hóa hiệu suất cho trang web WordPress
Về kỹ năng:
+ Thực hiện cài đặt và cấu hình được WordPress.
+ Quản lý được trang web WordPress.
+ Tùy chỉnh được trang web WordPress: cài đặt giao diện, cài đặt plugin, thêm
widget.
+ Bảo trì được trang web WordPress.
+ Thực hiện tối ưu hóa hiệu suất cho trang web WordPress
Về năng lực tự chủ và trách nhiệm.
+ Cẩn thận, tỉ mỉ, tự giác học tập và nghiên cứu.
4
- CHƢƠNG 1: CÀI ĐẶT WORDPRESS
Giới thiệu:
Với công nghệ thông tin phát triển như hiện nay, việc tạo dựng một trang
web đã trở nên dễ dàng hơn rất nhiều, nhiều nền tảng ra đời giúp chúng ta có thể
xây dựng trang web theo bất kỳ thể loại nào. Nhưng nhiều lựa chọn cũng sẽ làm
khó khăn trong việc lựa chọn một hệ thống quản trị nội dung CMS phù hợp nhất
với website.
Trong chương này sẽ giới thiệu rõ hơn về CMS cũng như một số hệ thống
CMS phổ biến nhất hiện nay, giúp tối ưu trong việc quản lý website của mình.
Ngoài ra chúng ta còn phải hiểu các cách cài đặt và cấu hình trang web
WordPress trên localhost và trên host
Mục tiêu:
Trình bày được Hệ thống quản trị nội dung CMS, hiểu rõ ưu nhược
điểm khi sử dụng hệ thống quản trị nội dung CMS để xây dựng website.
Trình bày được quy trình cài đặt WordPress.
Cài đặt và cấu hình được trang web WordPress trên localhost.
Cài đặt và cấu hình được trang web WordPress trên 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) là Hệ thống quản trị nội dung, nó là
một công cụ giúp có thể quản lý những bài viết, nội dung, hình ảnh và video
được đăng trên website. Cách quản lý nội dung được tối ưu giúp các chủ trang
web tiết kiệm nhiều thời gian, công sức và dễ dàng bảo trì khi cần thiết.
Tuy nhiên, hiện nay hệ thống quản trị nội dung còn có thể giúp nhiều hơn
nữa, từ lập chỉ 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, sẽ giúp bổ
sung thêm nhiều tính năng khác cho CMS hơn nữa.
Thông thường việc sử dụng CMS không cần phải có kiến thức về lập trình
web. Nhưng nếu có thì càng tốt vì sẽ giúp có thể tùy chỉnh nhiều hơn. Một số
CMS tốt nhất hiện nay cũng có những tính năng tạo dựng website chuyên nghiệp
và hiện đại.
Hình 1 CMS – Content management system
5
- 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 có thể là một 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 và xuất bản nội dung mà không
cần phải biết gì về HTML hoặc các 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 về các dịch vụ “back-end” để quản lý và cung cấp nội dung
sau khi nó được xử lý bởi CMA
Các tính năng đặc biệt:
URL thân thiện với SEO
Hỗ trợ trực tuyến và cộng đồng mạng
Các chức năng cho người dùng hoặc một nhóm người dùng
Nhiều kiểu mẫu (Themes) tạo sẵn khác nhau
Trình cài đặt cũng như 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 nhất hiện nay
WordPress
Hầu hết những người có tìm hiểu thông tin về xây dựng, quản lý website
đều biết đến CMS WordPress nổi tiếng này. Theo một thống kê cho thấy khoảng
1/3 số trang web trong 10 triệu trang web được tìm kiếm nhiều nhất trên thế giới
đang sử dụng hệ thống quản trị WordPress, WordPress đã trở thành một trong
những CMS mạnh nhất hiện nay. Được xây dựng bằng ngôn ngữ PHP và sử
dụng cơ sở dữ liệu MySQL, ban đầu WordPress được dùng để viết blog, nhưng
qua thời gian phát triển, nó đã có thể được sử dụng để quản lý nội dung website.
Với hàng ngàn Themes miễn phí và khả năng tùy chỉnh đa dạng, dễ dàng tự tạo
plugin, WordPress có thể giúp xây dựng website như ý muốn và quản lý chúng
dễ dàng hơn.
Một lợi thế nhờ sự thông dụng của WordPress khiến nó được sử dụng rất
nhiều, giúp dễ dàng tìm được thông tin cần thiết, trao đổi kinh nghiệm và cập
nhật những bản vá lỗi nhanh chóng hơn.
Hình 2 WordPress
Joomla
Bên cạnh sự phổ biến thông dụng của nền tảng WordPress thì Joomla cũng
nổi lên nhờ những tính năng riêng biệt. Một điểm yếu mà cũng là điểm mạnh của
Joomla là nó không thân thiện lắm với người dùng mới bắt đầu do đòi hỏi người
dùng phải có kiến thức về quản trị web. Tuy nhiên, nhờ vậy mà Joomla cung cấp
một không gian sáng tạo linh hoạt hơn hẳn WordPress.
Joomla cung cấp cho người dùng khả năng tùy chỉnh cao trong cách quản lý
bài viết. Những bài viết mà không phụ thuộc quá nhiều vào văn bản. Nền tảng
6
- này cũng cung cấp nhiều lựa chọn hơn trong việc quản lý người dùng, khá tiện
cho những website có chức năng quản lý thành viên.
Việc sở hữu một kho lưu trữ Themes và Templates cũng là một lợi thế cho
người dùng Joomla tiện lợi trong việc tùy biến nội dung trong từng loại bài viết
khác nhau.
Hình 3 Joomla
Drupal
Giống như hai nền tảng quản trị nội dung là WordPress và Joomla, Drupal
cũng là một CMS mã nguồn mở PHP nhưng không được phổ biến như hai nền
tảng trên. Do đòi hỏi kha khá kinh nghiệm về lập trình và quản trị web nên nếu
chỉ cần tạo dựng một blog thông thường hay một website công ty đơn giản thì
hãy sử dụng WordPress hoặc Joomla sẽ tốt hơn bởi tính năng đơn giản, dễ dùng
hơn Drupal. Tuy nhiên với các tập đoàn hoặc doanh nghiệp lớn, với những dự án
các website đòi hỏi bảo mật cao, những cấu trúc dự liệu bí mật, hệ thống thành
viên lớn và khả năng tùy chỉnh cao thì hãy nên sử dụng Drupal.
Từ những thông tin từ các website nổi tiếng, những diễn dàn có số lượng
cộng đồng lớn, mức độ bảo mật của Drupal luôn được đánh giá cao và tin tưởng
bởi hàng triệu nhà lập trình web trên thế giới. Có thể đối với những dự án
website phổ thông, Drupal khó tiếp cận và sử dụng nhưng với các website tầm
cỡ điều đó hoàn toàn chấp nhận được so với những gì Drupal cung cấp cho
chúng ta.
7
- Hình 4 Drupal
CMS giúp gì cho việc SEO một website?
SEO là chữ viết tắt của cụm từ Search Engine Optimization dịch theo nghĩa
tiếng Việt là 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 của website mà mình
cần SEO ảnh hưởng rất lớn tới thứ hạng từ khóa. Một website có CMS được tối
ưu cho việc SEO sẽ dễ dàng tìm kiếm từ khóa hơn một website chưa được tối ưu
CMS. CMS giúp SEOer quản lý trang web mình đang SEO dễ dàng hơn, đồng
thời có thể tùy chỉnh nội dung phù hợp một cách nhanh chóng và dễ dàng.
II. CÀI ĐẶT WORDPRESS TRÊN LOCALHOST
Để khỏi mất thời gian chờ đợi load, trong quá trình thiết kế website nên làm
việc trên Local Host (Cài đặt Offline để có tốc độ nhanh nhất vì pingOk>Next> tới đây chúng ta chọn đường dẫn
cho nơi cài đặt nó.
8
- Hình 5 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 là ổ
đĩa cài Win, có vấn đề gì mà lỡ format sẽ mất Xampp. Ở đây ta chọn ổ đĩa D.
+ Tiếp tục Install>Install> Đợi cho quá trình cài đặt xong xuôi mất khoảng 1
phút.
+ Finish>Yes để bắt đầu Xampp luôn.
Bước 2: Chạy chương trình Xampp.
Hình 6 Cài đặt Xampp vào máy.
+ Vào nơi mới cài đặt Xampp, chạy file “xampp-control”
Hình 7 xampp-control
9
- Hình 8 Allow acces.
+ Đánh dấu vào 2 cái ô Apache và MySql rồi nhấn Ok\ Start
+ Nếu hiện ra bảng thông báo như thế này thì chọn “Allow access”.
+ Cài đặt xong sẽ thấy XAMPP xuất hiện ở góc bên phải dưới màn hình.
(Nếu không xuất hiện thì bật nó lên)
+ Bây giờ nhập địa chỉ localhost/ lên trình duyệt web xem thử Xampp đã
chạy thành công chưa, nếu hiện ra như hình là Ok rồi đó.
Hình chạy thành công
+ Để tạo database nhấn chuột trái vào XAMPP, chọn PHP Myadmin. Hoặc
nhập địa chỉ sau lên trình duyệt Web: localhost/phpmyadmin. Một khung làm việc
hiện ra, ta chỉ quan tâm tới 3 phần chính thôi.
Hình 9 Hộp thoại phpmyadmin
Chú thích:
(1) Làm việc với Database
(2) Các Database chúng ta đã tạo sẽ hiển thị ở đây
(3) Tạo Database
+ Tạo 1 database có tên là wpvn, như vậy ta có các thông số sau:
10
- + Ở vùng 3 : Ta đặt tên CSDL và chọn utf8mb4_general_ci (như hình)
+ Rồi nhấn nút Create
Bƣớc 3: Cài đặt và cấu hình WordPress
+ Step 1: Copy toàn bộ thư mục wordpress vừa mới giải nén vào trong thư
mục D:/xampp/htdocs
+ Step 2: Trong folder WordPress sẽ có một file tên wp-config-sample.php
hãy đổi tên lại thành wp-config.php
+ Step 3: Mở file wp-config.php này lên bằng một chương trình soạn thảo lập
trình. Ở đây chúng ta dùng chương trình notepad++ cho nhanh. Chú ý vào cái
khung màu đỏ và 3 cái chỗ gạch dưới, đó là chỗ ta cần thay đổi một chút.
Nhìn vào hình này và làm tương tự, tên database vừa tạo là testwordpress
Hình 10 Mở file wp-config.php
11
- Hình 11 Mở file wp-config.phpđã chỉnh sửa
+ Đến đây là cấu hình xong file congfig rồi, tiến hành save lại.
+ Step 4: Gõ vào trình duyệt đường dẫn đến trang web, ở đây là
http://localhost
Hình 12 Đăng nhập vào WordPress
+ Chúng ta biết điền vào tên website và email, thực ra không quan trọng lắm
12
- + Xong rồi nó sẽ tạo: username:admin và Password nó tự tạo, chúng ta phải
đặt password mới ngay vì đây là password ngẫu nhiên, rất khó nhớ.
Hình 13 Sau khi tạo trang web caodangnghe
III. Cài đặt và cấu hình trang web WordPress trên host.
Cách cấu hình và cài đặt WordPress trên host server
Nếu đã có host riêng và muốn up trang web WordPress lên host server để
chạy thử thì việc cài đặt và cấu hình để trang WordPress chạy thành công giống
như khi cài trên localhost là mục đích tối thiểu để vận hành trang web của mình
trên mạng.
Nếu chưa có host riêng thì có thể mua nó ở những nhà cung cấp host ở Việt
Nam hoặc chỉ muốn chạy thử WordPress thì có thể đăng ký một host miễn phí.
Chúng ta sẽ thử cài đặt và cấu hình WordPress trên cả host miễn phí và host
tính phí. Có thể có nhiều bước đã hướng dẫn ở đây, nên tham khảo để hiểu rõ.
1. Cài đặt và cấu hình WordPress trên một host miễn phí
Thử trên một host miễn phí mà tôi đề cử cho những ai muốn sử dụng đó
là 000webhost.com (byethost tương tự)
Nếu đã có account chúng ta cần đăng nhập vào phần quản lý của 000webhost.
Đầu tiên để cài đặt WordPress lên host, phải up folder WordPress từ máy tính
lên phần quản lý file của host. Làm các bước như sau:
Bước 1: Vào phần File Manager như trong hình
13
- Hình File Manager
Bước 2: Giao diện của File Manager sẽ hiện ra, tuy nhiên vào trong thư
mục public_html để upload file chứ không được upload file ở đây.
Hình 14 Khi Click vào File Manager
Bước 3: Giao diện trong thư mục public_html, có thể xóa 2 file mặc định
và bắt đầu upload file lên host
Hình 15 Upload File
Bước 4: nhấn vào Upload và chọn đường dẫn đến thư mục WordPress cần
up lên. Tên thư mục của tôi đã được nén là wordpress.zip.
Hình 16 Chọn thư mục cẩn Upload
14
- Lưu ý:
+ Cần nén folder WordPress ở dạng zip hoặc tương tự trước khi up lên để up
được tất cả file trong folder này. Nếu không phải up từng file riêng lẻ trong folder
lên.
+ Host free này chỉ hỗ trợ kích thước tối đa của một file được phép upload
lên mỗi lần là 5Mb, nhưng thực chất chỉ khoảng >4Mb mà thôi.
+ Nếu muốn up file có kích thước lớn hơn lên host mà đỡ tốn công phải nén
và up mỗi lần chỉ được 4Mb như trên, có thể sử dụng các chương trình hỗ trợ FTP
upload file lên host như File Zilla hoặc CuteFTP Professional.
Sau khi đã chọn xong file thì nhấn vào nút như trong hình để đợi host up file
lên. Ta có thể quan sát % quá trình ở dưới góc bên trái.
Hình 17 Nhấn nút Upload
Nếu quá trình upload thành công, bấm nút quay về để trở lại thư mục
public_html
Hình 18 Quá trình upload thành công
15
- File zip vừa tải lên đã nằm trong thư mục public_html
Hình 19 File zip vừa tải lên
Lưu ý: Ở đây, cần phải giải nén để ra thư mục Wordpress giống trên máy
tính, tuy nhiên 000webhost.com không hỗ trợ Unzip, để thực hiện việc giải nén
đọc bài này hoặc sử dụng chương trình FTP Client như File Zilla. Các host khác
vẫn hỗ trợ Unzip bình thường.
Sau khi Unzip ra được folder wordpress chúng ta vẫn chưa thể làm cho nó
chạy, cần tiến hành cấu hình file wp-config.php để trang wordpress có thể chạy
được.
Cấu hình file wp-config.php trên 000webhost (byethost tương tự)
Đầu tiên, phải tạo một databse trên host, các bước như sau:
Vào MySQL
Hình 20 Chọn MySQL
Tạo một database
Hình 21 Tạo Database
Sau khi hoàn thành sẽ được thông báo sau, nhớ copy lại để ra file notepad.
16
- Hình 22 Sau khi hoàn thành Database
Tiếp theo trở về File Manager\public_html\wordpress\ và chọn edit file wp-
config.ph
Hình 23 File Manager
Giao diện nó đây, cấu hình này là để chạy trên máy tính, muốn chạy nó
phải thay đổi lại
Hình 24 Giao diện cấu hình
17
- Cấu hình config cho 000webhost như sau, của byethost thì như chỉ dẫn,
xong rồi thì bấm vào hình cái đĩa để lưu lại, sau đó bấm quay về.
Hình 25 Cấu hình config
Nếu làm sai, khi chạy trang web sẽ được thông báo như thế này: “Error
establishing a database connection”
Nếu làm đúng các bước sẽ hiện ra, điền đầy đủ thông tin và login
Hình 26 Welcome
18
- Tiến hành login và vào quản lý trang WordPress giống như trên máy tính.
Hình 27 Login
Đến đây là hoàn thành rồi, có thể so sánh trang WordPress cài trên máy và
cài trên host có gì khác không
2. Cấu hình trên một host tính phí
Phần này thì đơn giản hơn so với host miễn phí. Tất cả các bước đều giống
nhau, trừ phần cấu hình file wp-config.php phải thay đổi một chút, chú ý phần
MySQL hostname là localhost
Hình 28 Cấu hình trên một host tính phí
Đến đây là hoàn thành 100% việc cấu hình và cài đặt WordPress trên host.
CÂU HỎI ÔN TẬP
1. Hệ thống quản lý nội dung bao gồm bao nhiêu thành phần chính?
2. Hãy trình bày các bước cài đặt và cấu hình WordPress trên một localhost?
3. Hãy trình bày các bước cài đặt và cấu hình WordPress trên một host miễn
phí?
4. Hãy trình bày các bước cài đặt và cấu hình WordPress trên một host tính
phí?
19
nguon tai.lieu . vn
