Giáo trình Xây dựng Website với hệ quản trị nội dung CMS

BỘ NÔNG NGHIỆP VÀ PHÁT TRIỂN NÔNG THÔN TRƯỜNG CAO ĐẲNG CƠ ĐIỆN HÀ NỘI GIÁO TRÌNH MƠN HỌC/MƠ ĐUN: Xây dựng Website với hệ quản trị nội dung CMS NGÀNH/NGHỀ: THIẾT KẾ TRANG WEB TRÌNH ĐỘ: CAO ĐẲNG (Ban hành kèm theo Quyết định số: /QĐ-CĐCĐ-ĐT ngày…….tháng….năm Trường Cao đẳng Cơ điện Hà Nội) (Fonst chữ Times New Roman cỡ chữ 14 chữ thường in nghiêng) Hà Nội, năm… CHƯƠNG 1: GIỚI THIỆU VÀ CÀI ĐẶT WORDPRESS Giới thiệu wordpress WordPress hệ thống quản trị nội dung (CMS – Content Management System) giúp ta thực website động cách nhanh chóng dễ dàng Là hệ thống quản trị nội dung mã nguồn mở số giới Linh hoạt, đơn giản, nhã, tính tuỳ biến cao mạnh mẽ, nói WordPress Được sử dụng toàn giới từ trang web đơn giản ứng dụng phức tạp Việc cài đặt WordPress dễ dàng, đơn giản việc quản lý đáng tin cậy Ngoài vấn đề mã nguồn mở miễn phí, khả bảo mật cao, dễ dàng sử dụng, cịn điều tuyệt vời đằng sau khiến cho WordPress phát triển mạnh nhiều người yêu thích ? với WordPress việc xây dựng (lập trình) thêm thành phần, module, chức cho việc dễ dàng lập trình viên, WordPress có rất nhiều chức mở rộng viết nhà lập trình khắp giới, hầu hết tất ứng dụng, thành phần chia sẻ miễn phí, điều tuyệt vời Cài đặt server ❖ Cài Đặt Xampp ❖ Bước 1: Tải Xampp máy cài đặt Bước 2: Kích đúp chuột vào file để mở trình cài đặt Bước 3: Click chọn OK cửa sổ cảnh báo để tiếp tục Bước 4: Click chọn Next Bước 5: Xampp cung cấp loạt thành phần mà người dùng cài đặt MySQL, phpMyAdmin, PHP, Apache, Vì tốt cửa sổ Setup, giữ nguyên cài đặt mặc định click chọn Next Bước 6: Bỏ tích hộp nằm kế bên Learn more about Bitnami for XAMPP click chọn Next Bước 7: Tiếp theo lựa chọn thư mục để cài đặt phần mềm giữ nguyên vị trí cài đặt mặc định click chọn Next để bắt đầu trình cài đặt Bước 8: Trong trình cài đặt Windows yêu cầu người dùng cho phép số dịch vụ cụ thể giao tiếp thông qua tường lửa (firewall) Click chọn Allow access để tiếp tục Bước 9: Click chọn Finish để hồn tất q trình cài đặt bắt đầu sử dụng Xampp Control Panel Bước 10: Chọn ngôn ngữ sử dụng (tiếng Anh tiếng Pháp) click chọn Save để hồn tất q trình mở Xampp Control Panel Cài đặt WordPress Sau cơng tác chuẩn bị hồn tất lúc đến công đoạn cài đặt WordPress, thật công đoạn cài đặt wordpress diễn nhanh dễ dàng, nhiên để hiểu rõ trình cài đặt cách vận hành WordPress tìm hiểu kỹ thêm cách cài đặt diễn Thể Bước sau: Bước Tải WordPress • Tải WordPress Tiếng Việt tại: https://vi.wordpress.org/download/ • Tải WordPress Tiếng Anh tại: https://wordpress.org/download/ Bước Giải nén Tệp WordPress vừa tải Bạn thư mục có tên WordPress: Bước Sao chép liệu vào Xampp Bạn cần tiến hành hai thao tác sau: - Tạo thư mục htdocs: Đặt tên là: honggiang - Sao chép liệu bên thư mục wordpress (Bước phía trên), dán vào thư mục vừa tạo Bước Tạo Database Nếu bạn chưa bật XAMPP Bước – Phần 1, bật Xampp lên chọn Start Apache MySQL Mở trình duyệt Chrome, Firefox, Safari, Opera, Internet Explorer,… gõ vào địa chữ:localhost/phpmyadmin Tiếp theo bấm New Database Tại Database Name, bạn gõ vào chữ đấy, viết liền nhau, khơng dấu, ví dụ: hongiang1 Tại bên cạnh, tìm chọn utf8_unicode_ci bấm Create Bước Tiến hành cài đặt WordPress Gõ vào địa trình duyệt: Localhost/honggiang với: hongiang tên thư mục tạo htdocs Bước 3.1 – Phần Bạn dẫn đến bảng hướng dẫn cài đặt WordPress Phần lựa chọn ngơn ngữ (Do sử dụng bảng cài đặt WordPress Tiếng Anh nên có bước Nếu bạn sử dụng Tiếng Việt khơng có.) Sau chọn Ngôn Ngữ, bạn dẫn tới bảng sau Bấm vào Thực Điền vào thông số cần thiết bấm GỬI, đó: • Tên Database: Chính tên bạn gõ vào Database Name Bước – Phần Chính cụm conmeo themevi • Tên người dùng: Điền vào root, tên người dùng mặc định • Mật khẩu: Để trống, mặc định • Database Host: Để mặc định localhost • Tiền tố bảng liệu: Nên để mặc định 10 - Xem trước thay đổi: nơi chứa thiết kế bạn Giao diện xác người dùng cuối nhìn thấy Nhấn vào nút Thư mục (folder) phía bên phải trang chọn Thư viện Mẫu (Template Library) - Việc sử dụng Elementor để dàn trang cho website cách kéo thả thành phần (element) từ phần Sidebar bên trái - Bạn thêm phần (section) cách nhấn Thêm Mục Mới bên phải giao diện, sau lựu chọn số cột hàng - Tiếp theo, bạn lựu chọn thành phần bên trái để kéo sang phần (section) vừa tạo xong 18 - Lúc này, bạn tùy chỉnh lại thành phần, phía bên trái Sidebar hiển thị tab cho bạn tùy chỉnh - Nội dung (content): bạn thay đổi nội dung thành phần - Kiểu (style): nơi bạn thay đổi màu sắc kiểu chữ - Nâng cao (advanced): nơi bạn thực thiện thay đổi nâng cao khoảng cách thành phần, màu sắc hiển thị nền, viển, chỉnh sửa giao diện thiết bị khác - Còn nhiều thành phần khác, thành phần hỗ trợ kiểu định dạng khác như: hình ảnh (image), video, văn (text), nút (button), biểu tượng (icon), google map Cách sử dụng giống nhau, bạn việc kéo thả vào nơi muốn phía bên phải tùy chỉnh 19 - Ngồi ta cịn nhiều điều thú vị Elementor giúp việc tạo Sử dụng theme WordPress Bước 1: Cài đặt theme WordPress Trong thư viện wordpress.org ( thư viện có khoảng 2000 theme khác nhau) Chúng ta chọn cho theme phù hợp với sở thích Sau Add New Thêm giao diện sau: 20 Bước 2: Bạn ấn vào Cài đặt Lưu ý: Tính xem trước có nghĩa tượng chưng, đơi lúc khơng hiển thị xác đầy đủ tinh có theme Bước 3: Kích hoạt giao diện 21 Bước 4: Thêm vài widget vào sidebar giúp theme hiển thị tốt Cài đặt phiên tiếng Anh: Khi kích hoạt xong, bạn vào Appearance > Menus Widgets để thêm Cài đặt phiên tiếng Việt: Bạn vào Giao diện > Trình đơn Widget để thêm CHƯƠNG 3: GỬI BÀI TRONG WORDPRESS Tạo Chuyên mục (Categories) Thẻ (Tags) Wordpress 1.1 Tạo Chuyên mục (Categories) Để quản lý chuyên mục cần làm sau: Để tạo Chủ đề Tags trước hết bạn phải cài đặt WordPress sẵn máy tính Đăng nhập vào phần quản trị Wordpress.Sau đăng nhập thành công vào menu viết (Posts) > Chuyên mục để quản lý chuyên mục, hình sau: 22 Để thêm chuyên mục điền vào chỗ Tên tên chuyên mục sau nhấn Thêm chuyên mục - Để thêm chuyên mục chọn chỗ Cha chọn chuyên mục cha cho chuyên mục tạo Còn chỗ chuỗi đường dẫn cố định chuỗi hiển thị địa trình duyệt người dùng truy cập chuyên mục - Chú ý: Ở tự tạo đường dẫn cố định theo nên để wordpress tự tạo tốt - Đối với ví dụ trên, sau nhập đầy đủ thơng tin có danh sách chun mục sau: 23 1.2 Tạo Thẻ (Tags) cho viết wordpress - Cũng tương tự chuyên mục chọn menu Bài viết > Thẻ Giao diện tạo thẻ sau - Chú ý: Thẻ thường dùng để gắn kết viết Có nghĩa hướng người dùng đến viết có thẻ - Để tạo thẻ điền đầy đủ thơng tin hình sau nhấn nút Tạo thẻ Tạo viết Cách đăng viết Bước : Truy cập vào Admin với link 24 + Trên website: http://domain.com/wp-admin/ + Trên Localhost: http://localhost/wp-admin/ Đăng nhập quản trị admin trongBảng tin ta chọn Bài viết / Viết để tạo viết Tạo viết Bước 2: Soạn thảo vết Bạn gõ tiêu đề viết nội dung viết theo ý bạn mở khung soạn thảo bạn muốn thao thác với nhiều tính Soạn thảo viết Bước 3: Đưa viết vào Chuyên mục phù hợp Cài đặt phiên tiếng Anh: Bên cột phải mục Categories > Add New Ctegories để tạo chuyên mục chọn chuyên mục tạo Phần Thẻ phía chức để 25 phân loại viết mục đích để lọc viết tốt cho SEO điều hướng người dùng Bạn nên cân nhắc kỹ để tạo Tag ngắn gọn tham khảo thẻ Tag website Thêm chuyên mục thẻ Tag Bước 4: Chọn ảnh tiêu biểu Đây ảnh đại diện cho viết này, hiển thị trang chủ, trang chuyên mục trang trả kết với ảnh đại diện tiêu đề kèm Với cài đặt click vào Chọn ảnh tiêu biểu > Tải tệp tin lên > Chọn ảnh tiêu biểu để tải lên Chọn ảnh tiêu biểu phiên tiếng Việt 26 Chọn ảnh tiêu biểu phiên tiếng Việt Bước 5: Lưu viết xuất Khi viết bạn không lên xuất viết để tránh xuất viết chưa hồn thiện có hình ảnh khơng đẹp lên trang chủ website WordPress cung cấp tính cho phép lưu thành nháp khác hoàn toàn tự động bạn biên soạn viết Vì bạn không cần phải lưu lại Tuy nhiên bạn thực lưu lại thành nháp bạn chưa thực yên tâm Lưu nháp Đăng viết WordPress Lưu nháp đăng viết Sau đăng lên website xong, bạn truy cập trang chủ website thấy viết vừa đăng click vào Xem viết CHƯƠNG 4: QUẢN LÝ FILE VÀ PLUGIN 27 Plugin WordPress - Plugin dùng để bổ sung thêm tính vào Website WordPress tính WordPress khơng đáp ứng đủ nhu cầu bạn Bạn cài thêm Plugin để Website trở nên hồn hảo Website WordPress chun nghiệp khơng cần Theme đẹp mà cần có cách sử dụng Plugin hợp lý Hiện số lượng Plugin có thư viện WordPress.org nhiều hồn tồn miễn phí nên bạn n tâm Plugin miễn phí phục vụ nhiều cho nhu cầu bạn 1.1 Cách tìm cài đặt Plugin ❖ Cách tìm Plugin Để tìm Plugin bạn làm theo hướng dẫn sau: - Với Plugin phiên tiếng Anh (hình 1): bạn truy cập vào Dashboard –> Plugins –> Add New - Với Plugin phiên tiếng Việt (hình 2): bạn truy cập vào Bảng tin –> Gói mở rộng –> Cài Plugin Plugin phiên tiếng Anh 28 Plugin phiên tiếng Việt Dưới hình hiển thị thư viện Plugin miễn phí, qua bạn tìm Plugin cách: - Cách 1: Thông qua tên cách điền tên khung Tìm Plugins bên tay phải Enter - Cách 2: Bạn xem danh sách Plugin thông qua lọc Nổi bật (Featured), Được quan tâm (Popular), Khuyên dùng (Recommended), Yêu thích (Favorites) Nếu bạn người bạn nên chọn qua phần Popular cài Plugin - Thư viện Plugin miễn phí 29 ❖ Cách cài đặt Plugin Khi bạn tìm thấy Plugin ưng ý đừng vội click vào nút Cập nhật (Install Now), mà click vào tên Plugin để xem thơng tin chi tiết phần mơ tả để biết Plugin có chức gì, cách cài đặt (Installation) ảnh chụp (Reviews) nào? Để biết Plugin tốt hay khơng, bạn nhìn vào số Tải đánh giá trung bình thấy có điểm số cao, tải nhiều cài đặt nhiều người tin tưởng sử dụng, Plugin cài vào làm việc Sau chắn Plugin bạn muốn cài, ấn nút Cập nhật để bắt đầu cài đặt kích hoạt Các Plugin cần thiết nên cài đặt WordPress Để tránh việc bạn cài plugin nhiều plugin Dưới danh sách hướng dẫn plugin mà cho cần thiết bạn nên cài đặt vào website WordPress bạn • JetPack – Bộ tập hợp cơng cụ hữu ích cho WordPress (khơng cài localhost) • Akismet – Chống spam bình luận cực mạnh • Advanced TinyMCE – Bổ sung nút soạn thảo vào WordPress 30 • SEO by Yoast – Hỗ trợ SEO cho WordPress tốt • WP Super Cache – Tạo nhớ đệm để tăng tốc website • iThemes Security – Plugin bảo mật thơng dụng cho WordPress • Contact Form – Tạo form liên hệ tốt • Responsive Lightbox by – Tạo hiệu ứng lightbox click vào ảnh để xem dFactory ảnh lớn ReplyMe – Gửi thơng báo có người trả lời bình luận (bạn • lưu ý ReplyMe không cập nhật vịng năm tới nên sợ khơng tương thích với phiên tại) • Disqus - – Nếu bạn muốn dùng hệ thống bình luận Trên plugin nên cài đặt vào loại website Ngồi cài thêm plugin khác bạn thấy thực cần thiết 1.2 Quản lý Plugin - Quản lý plugin việc bạn kích hoạt – ngưng kích hoạt, xóa chúng Ngồi bạn theo dõi số lượng plugin cài bao nhiêu, số lượng khơng kích hoạt (Inactivate), plugin kích hoạt gần (Recently Active) - Xóa plugin khơng cần thiết ❖ Xóa plugin khơng sử dụng ❖ Kích hoạt ngưng kích hoạt plugin 31 - Trong trình sử dụng, bạn thấy plugin hoạt động không “tốt” muốn sử dụng plugin khác tốt chọn vào ngừng kích hoạt (Deactive) xóa hẳn nhấn vào delete, lưu ý trước xóa plugin bạn phải ngừng kích hoạt ❖ Ngưng kích hoạt plugin - Trong trình sử dụng, bạn thấy plugin hoạt động không “tốt” muốn sử dụng plugin khác tốt chọn vào ngừng kích hoạt (Deactive) 32 ... Giới thiệu wordpress WordPress hệ thống quản trị nội dung (CMS – Content Management System) giúp ta thực website động cách nhanh chóng dễ dàng Là hệ thống quản trị nội dung mã nguồn mở số giới Linh... Site Name nghĩa tên website bạn mà bạn khai báo bước cài đặt Description mô tả cho website bạn phần giới thiệu ngắn nội dung viết o Sidebar : Nghĩa nội dung nằm bên cạnh nội dung chính, bên trái... tục điền vào thông tin website WordPress bấm Cài đặt WordPress, với: • Tên Website: Chính tên website bạn đó, viết kiểu • Tên người dùng: Tên tài khoản để đăng nhập vào website • Mật khẩu: Mật