Xây dựng website với hệ quản trị nội dung CMS

WordPress là một hệ thống quản trị nội dung (CMS – Content Management System) giúp ta thực hiện các website động một cách nhanh chóng và dễ dàng. Là hệ thống quản trị nội dung mã nguồn mở số 1 thế giới hiện nay. Linh hoạt, đơn giản, thanh nhã, tính tuỳ biến rất cao và cực kỳ mạnh mẽ, đó là những gì có thể nói về WordPress Được sử dụng ở trên toàn thế giới từ những trang web đơn giản cho đến những ứng dụng phức tạp. Việc cài đặt WordPress rất dễ dàng, đơn giản trong việc quản lý và đáng tin cậy. Ngoài các vấn đề là mã nguồn mở miễn phí, khả năng bảo mật cao, dễ dàng sử dụng, còn điều gì tuyệt vời hơn đằng sau khiến cho WordPress phát triển mạnh và được nhiều người yêu thích như vậy ? với WordPress việc xây dựng (lập trình) thêm các thành phần, module, các chức năng cho nó là một việc rất dễ dàng đối với các lập trình viên, do đó WordPress có rất rất nhiều các chức năng mở rộng được viết bởi các nhà lập trình trên khắp thế giới, và hầu hết tất cả các ứng dụng, thành phần này đều được chia sẻ miễn phí, đó chính là điều tuyệt vời nhất.

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 của 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

1 Giới thiệu về wordpress

WordPress là một hệ thống quản trị nội dung (CMS – Content Management System)

giúp ta thực hiện các website động một cách nhanh chóng và dễ dàng Là hệ thống quản trịnội dung mã nguồn mở số 1 thế giới hiện nay Linh hoạt, đơn giản, thanh nhã, tính tuỳ biếnrất cao và cực kỳ mạnh mẽ, đó là những gì có thể nói về WordPress Được sử dụng ở trêntoàn thế giới từ những trang web đơn giản cho đến những ứng dụng phức tạp Việc cài đặtWordPress rất dễ dàng, đơn giản trong việc quản lý và đáng tin cậy

Ngoài các vấn đề là mã nguồn mở miễn phí, khả năng bảo mật cao, dễ dàng sử dụng, cònđiều gì tuyệt vời hơn đằng sau khiến cho WordPress phát triển mạnh và được nhiều ngườiyêu thích như vậy ? với WordPress việc xây dựng (lập trình) thêm các thành phần,module, các chức năng cho nó là một việc rất dễ dàng đối với các lập trình viên, do đóWordPress có rất rất nhiều các chức năng mở rộng được viết bởi các nhà lập trình trên khắpthế giới, và hầu hết tất cả các ứng dụng, thành phần này đều được chia sẻ miễn phí, đóchính là điều tuyệt vời nhất

Cài đặt server

 Cài Đặt Xampp

 Bước 1: Tải Xampp về máy và 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 trên 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 một loạt các thành phần mà người dùng có thể cài đặt như

MySQL, phpMyAdmin, PHP, Apache, Vì vậy tốt nhất trên cửa sổ Setup, giữ nguyêncác cài đặt mặc định rồi click chọn Next

Bước 6: Bỏ tích hộp nằm kế bên Learn more about Bitnami for XAMPP rồi click

chọn Next

Bước 7: Tiếp theo có thể lựa chọn thư mục để cài đặt phần mềm hoặc giữ nguyên vị trí cài

đặt mặc định rồi click chọn Next để bắt đầu quá trình cài đặt

Bước 8: Trong quá trình cài đặt Windows sẽ yêu cầu người dùng cho phép một 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 để hoàn tất quá trình cài đặt và có thể bắt đầu sử dụng Xampp

Control Panel

Bước 10: Chọn ngôn ngữ sử dụng (tiếng Anh hoặc tiếng Pháp) rồi click chọn Save để hoàn

tất quá trình và mở Xampp Control Panel

2 Cài đặt WordPress

Sau khi công tác chuẩn bị hoàn tất bây giờ là lúc chúng ta đi đến công đoạn cài đặt

hiểu rõ hơn quá trình cài đặt và cách vận hành của WordPress chúng ta sẽ tìm hiểu kỹ thêmcách cài đặt diễn ra như thế nào Thể hiện các Bước như sau:

Bước 1 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 2 Giải nén Tệp WordPress vừa tải về

Bạn sẽ được một thư mục có tên WordPress:

Bước 3 Sao chép dữ liệu vào Xampp

Bạn cần tiến hành hai thao tác sau:

Tạo một thư mục trong htdocs: Đặt tên là: honggiang

Sao chép dữ liệu bên trong thư mục wordpress (Bước 2 phía trên), rồi dán vào trong thư mục vừa tạo trên đây

Bước 4 Tạo Database

Nếu các bạn chưa bật XAMPP như Bước 5 – Phần 1, thì hãy bật Xampp lên và chọn Start tại Apache và MySQL nhé

Mở trình duyệt như Chrome, Firefox, Safari, Opera, Internet Explorer,… và gõ vào thanh địa chỉ chữ:localhost/phpmyadmin Tiếp theo bấm New Database

Tại ô Database Name, bạn gõ vào chữ gì đấy, viết liền nhau, không dấu, ví dụ: hongiang1 Tại ô bên cạnh, tìm và chọn utf8_unicode_ci rồi bấm Create

Bước 5 Tiến hành cài đặt WordPress

Gõ vào thanh địa chỉ trình duyệt: Localhost/honggiang

với: hongiang là tên của thư mục đã tạo trong htdocs ở Bước 3.1 – Phần 2

Bạn sẽ được dẫn đến bảng hướng dẫn cài đặt WordPress như nhau Phần đầu tiên là lựa chọn ngôn ngữ (Do mình sử dụng bảng cài đặt WordPress Tiếng Anh nên mới có bước này Nếu bạn sử dụng Tiếng Việt thì không có.)

Sau khi chọn Ngôn Ngữ, bạn sẽ được dẫn tới bảng sau Bấm vào Thực hiện ngay

Điền vào các thông số cần thiết rồi bấm GỬI, trong đó:

• Tên Database: Chính là tên bạn đã gõ vào Database Name ở Bước 4 – Phần 2 Chính

là cụm conmeo hoặc themevi đó

• Tên người dùng: Điền vào root, đây là tên người dùng mặc định

• Mật khẩu: Để trống, đây cũng là mặc định

• Database Host: Để mặc định là localhost

• Tiền tố bảng dữ liệu: Nên để mặc định

Bấm tiếp vào Bắt đầu cài đặt

Tiếp tục điền vào thông tin của website WordPress rồi bấm Cài đặt WordPress, với:

• Tên Website: Chính là tên của website của bạn đó, viết kiểu gì cũng được

• Tên người dùng: Tên tài khoản để đăng nhập vào website

• Mật khẩu: Mật khẩu của tài khoản đấy, bạn đặt gì cũng được

• Email của bạn

• Tương tác với công cụ tìm kiếm: Vì cài ở Localhost, nên đánh dấu hay không chả khác gì nhau hết Mục này nhằm ngăn chặn Google Bot đọc website, và Google sẽ không thể index website

Cài đặt thành công, bấm Đăng nhập để truy cập vào website

Điền tên tài khoản (tên người dùng) và Mật khẩu đã tạo ở bước trên

Và đây là giao diện trang quản lý website WordPress của bạn Bấm vào chữ Website của tôi

Và bây giờ, bạn chỉ cần gõ:

Để truy cập website: http://localhost/honggiang/

Để truy cập trang quản lý website: http://localhost/honggiang/wp-admin

3 Cấu trúc và chức năng của hệ thống WordPress

 Giới thiệu các chức năng chính của WordPress gồm: Trang chủ (front-end),Admin (back-end)

• Front-end và back-end là các thuật ngữ chỉ các giai đoạn bắt đầu và kết thúc của

một quá trình xử lí Khái niệm này thường sử dụng trong lĩnh vực phát triển phầnmềm

• Trong thiết kế phần mềm, front-end là một phần của hệ thống phần mềm, tương táctrực tiếp với người sử dụng Cụ thể, đó là hệ thống các giao diện người dùng (GUI)

• Back-end gồm có các thành phần để xử lí các thông tin từ Front-end Thông thường

ám chỉ tới việc tương tác với DBMS (hệ quản trị dữ liệu)

3.1 Giao diện tổng quan

o Sidebar : Nghĩa là một thanh nội dung nằm bên cạnh nội dung chính,

nó có thể là bên trái , bên phải hoặc có cả hai bên tùy theo theme Trong một sidebar, bạn cóthể thấy các thành phần như Recent Posts, Recent Comments, các thành phần này đượcgọi là Widget Cái này chúng ta sẽ tìm hiểu sâu hơn trong bài tiếp theo

o Post: là tính năng viết bài, khi đăng chúng lên website thì sẽ có một bàiviết xuất hiện trên trang chủ hoặc trang chuyên mục.

o Footer : Nghĩa là phần cuối cùng của một website, ở đó sẽ hiển thị cácthông tin như copyright, Lưu ý: Tùy vào themes (giao diện khác nhau) mà phần footer sẽkhác nhau

 Admin (Back-end)

Với ngôn ngữ này có các chức năng chính bạn cần quan tâm gồm:

a. Dashboard: Có một số mục chính gồm Screen Options, Wellcom, At aGlance, Quick Draft đây là những tính năng cơ bản, cho trang Admin Bạn sử dụng nó đểviết bài hoặc thay đổi tùy chỉnh… nói chung chức năng này bạn sẽ ít dùng tới nó

b. Themes: Là tính năng tùy chỉnh giao diện website

c. Customize: Là tính năng tùy chỉnh website gồm: Site Title & Tagline, Colors,Header Image, Background Image, Widgets, Static Font Page

d. Widgets: Là tính năng tùy chỉnh bố cục Webiste dựa vào các Tính năng có sẵn

để đưa vào giao diện trang chủ và các trang con:

e. Menus: Là tính năng quản lý các menu Top, Header, Footer, Main Menu…tùy theo mỗi giao diện mà có ít hay nhiều vị trí menu khác nhau

f. Background: Là tính năng chọn hình nền cho Website

g. Header: Là tính năng tùy chỉnh Header mặc định là Add new image (Thêmảnh mới)

CHƯƠNG 2: THIẾT KẾ VÀ BỐ CỤC TRONG WORDPRESS 1.Thiết kế và bố cục trang web sử dụng page builder trong wordpress

 Sử dụng Elementor page builder

Elementor là một công cụ đang rất “hot” hiện này khi nói về thiết kế website

mà không động tay vào code Nó là một trình tạo trang sử dụng khi dàn trang, tạo trang bằng cách kéo thả các thành phần hay tùy biến website WordPress của bạn, giúp bạn có thể dễ dàng chia nội dung của mình ra nhiều cột khác nhau, ở mỗi cột bạn có thể thêm bất cứ tiện ích “widget” nào để nó hiển thị nội dung mà bạn muốn.

Elementor có một tính năng rất hữu ích đó là ở phần Thư viện mẫu (template library)

- cho phép bạn thiết kế Mẫu (template) cho riêng mình, lưu lại và sử dụng cho nhữnglần sau ở các trang web khác

 Pre-Made Templates Sử dụng template đã được thiết kế sẵn của elementor hoặc là cóthể custome lại hoặc tạo mới template theo nhu cầu sử dụng của bạn

 Save Your Design Sau khi đã thiết kế xong bạn có thể save lại và để sử dụng cho lầnsau cho những trang khác

 Export & Import Bạn có thể export bất kì template nào và import chúng ở websitekhác Điều này giúp bạn có thể chia sẻ template với những người khác

 Sử dụng Elementor

Ở giao diện soạn thảo trang mới, đầu tiên bạn cần chọn template

 Có 3 lựa chọn để bạn bắt đầu:

Elementor Full Width: bạn sẽ xây dựng trang full-width, nhưng vẫn giữ lại phần

header và footer của website

Elementor canvas: bạn xây dựng trang web từ ban đầu ,tạo từ một trang trắng đúng

Nhấn vào nút Thư mục (folder) ở phía bên phải trang và chọn Thư viện Mẫu (TemplateLibrary).

Việc sử dụng Elementor để dàn trang cho website bằng cách kéo thả các thành phần(element) từ phần Sidebar bên trái

Bạn thêm phần (section) bằng 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 trong mộ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.

Lúc này, bạn có thể tùy chỉnh lại thành phần, phía bên trái Sidebar hiển thị 3 tab chobạn tùy chỉnh

Nội dung (content): ở đây bạn sẽ thay đổi nội dung của thành phần

Kiểu (style): nơi bạn thay đổi màu sắc và kiểu chữ

Nâng cao (advanced): nơi bạn thực thiện thay đổi nâng cao như khoảng cách giữacác thành phần, màu sắc hiển thị của nền, viển, chỉnh sửa giao diện ở các thiết bịkhác nhau

Còn rất nhiều các thành phần khác, mỗi thành phần hỗ trợ một kiểu định dạng khácnhau như: hình ảnh (image), video, văn bản (text), nút (button), biểu tượng (icon),google map Cách sử dụng đều giống nhau, bạn chỉ việc kéo và thả vào nơi mìnhmuốn phía bên phải và tùy chỉnh

Ngoài ta còn rất nhiều điều thú vị của Elementor giúp chúng ta trong việc tạo

2 Sử dụng được các theme trên WordPress

Bước 1: Cài đặt theme trong WordPress

Trong thư viện wordpress.org ( thư viện này có khoảng hơn 2000 theme khác nhau) Chúng

ta có thể chọn cho mình theme phù hợp với sở thích Sau khi Add New hoặc Thêm mới thì

nó sẽ hiện ra giao diện như sau:

Bước 2: Bạn ấn vào Cài đặt

Lưu ý: Tính năng xem trước này chỉ có nghĩa tượng chưng, đôi lúc nó sẽ không hiển thị chính xác và đầy đủ tinh năng có trong theme đó

Bước 3: Kích hoạt giao diện

Bước 4: Thêm một vài widget vào sidebar giúp theme hiển thị tốt nhất.

Cài đặt trên phiên bản tiếng Anh: Khi kích hoạt xong, bạn

vào Appearance > Menus và Widgets để thêm

Cài đặt trên phiên bản tiếng Việt: Bạn vào Giao diện > Trình đơn và Widget để thêm nhé

CHƯƠNG 3: GỬI BÀI TRONG WORDPRESS

1 Tạo Chuyên mục (Categories) và Thẻ (Tags) trong Wordpress

1.1 Tạo Chuyên mục (Categories)

Để quản lý các chuyên mục như trên chúng ta cần làm như sau:

Để có thể tạo Chủ đề và Tags trước hết bạn phải cài đặt WordPress sẵn trên máy tính

Đăng nhập vào phần quản trị Wordpress.Sau khi đăng nhập thành công chúng ta vàomenu bài viết (Posts) > Chuyên mục để quản lý chuyên mục, như hình sau:

Để thêm chuyên mục mới chúng ta điền vào chỗ Tên là tên của chuyên mục sau đónhấn Thêm chuyên mục.

Để thêm chuyên mục con chúng ta chọn chỗ Cha là chọn chuyên mục cha chochuyên mục đang tạo Còn chỗ chuỗi đường dẫn cố định là chuỗi sẽ hiển thị trênthanh địa chỉ của trình duyệt khi người dùng truy cập chuyên mục của chúng ta.Chú ý: Ở đây chúng ta có thể tự tạo đường dẫn cố định nhưng theo tôi chúng ta nên

để wordpress tự tạo sẽ tốt hơn

Đối với ví dụ trên, sau khi nhập đầy đủ các thông tin chúng ta có danh sách cácchuyên mục như sau:

1.2 Tạo Thẻ (Tags) cho bài viết trong wordpress

Cũng tương tự như chuyên mục chúng ta chọn menu Bài viết > Thẻ Giao diện tạothẻ như sau

Chú ý: Thẻ thường dùng để gắn kết các bài viết Có nghĩa là hướng người dùng đếnnhững bài viết có cùng thẻ

Để tạo thẻ chúng ta cũng điền đầy đủ các thông tin trong hình sau và nhấn nút Tạothẻ

2 Tạo bài viết

Cách đăng một bài viết mới

Bước 1 : Truy cập vào Admin với link

+ 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 bài mới để tạo bài viết mới

Tạo bài viết mới

Bước 2: Soạn thảo bài vết

Bạn có thể gõ tiêu đề bài viết và nội dung bài viết theo ý bạn và mở khung soạn thảo nếu bạn muốn thao thác với nhiều tính năng hơn

Soạn thảo bài viết

Bước 3: Đưa bài viết vào Chuyên mục phù hợp.

Cài đặt trên phiên bản tiếng Anh: Bên cột phải mục Categories > Add New Ctegories để tạomột chuyên mục mới và chọn chuyên mục đã tạo Phần Thẻ phía dưới là một chức năng để

phân loại bài viết mục đích để lọc bài viết nó sẽ rất tốt cho SEO và điều hướng người dùng.Bạn nên cân nhắc kỹ để tạo Tag ngắn gọn nhất tham khảo các thẻ Tag của website

Thêm chuyên mục và thẻ Tag.

Bước 4: Chọn ảnh tiêu biểu

Đây là ảnh đại diện cho bài viết này, nó sẽ hiển thị ở trang chủ, trang chuyên mục và các trang được trả ra kết quả với ảnh đại diện và tiêu đề đi kèm

Với cài đặt trên 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 trên phiên bản tiếng Việt.

Chọn ảnh tiêu biểu trên phiên bản tiếng Việt.

Bước 5: Lưu bài viết hoặc xuất bản

Khi viết bài bạn không lên xuất bản bài viết ngay để tránh xuất hiện những bài viết chưa hoàn thiện hoặc có những hình ảnh không đẹp lên trang chủ website WordPress cung cấp tính năng cho phép lưu thành các bản nháp khác nhau hoàn toàn tự động khi bạn biên soạn bài viết Vì vậy bạn không cần phải lưu lại Tuy nhiên bạn cứ thực hiện lưu lại thành bản nháp nếu bạn chưa thực sự yên tâm

Lưu bản nháp hoặc Đăng bài viết trên WordPress

Lưu bản nháp hoặc đăng bài viết

Sau khi đăng lên website xong, bạn truy cập ra trang chủ website sẽ thấy bài viết vừa đăng hoặc click vào Xem bài viết

CHƯƠNG 4: QUẢN LÝ FILE VÀ PLUGIN

Plugin trong WordPress

Plugin là dùng để bổ sung thêm một tính năng nào đó vào Website WordPress khi cáctính năng trên WordPress không đáp ứng đủ nhu cầu của bạn Bạn có thể cài thêm cácPlugin để Website của mình trở nên hoàn hảo hơn vì một Website WordPress chuyênnghiệp không chỉ cần một Theme đẹp mà cần có cách sử dụng các Plugin hợp lý nữa.Hiện tại số lượng Plugin có trong thư viện WordPress.org rất nhiều và nó hoàn toàn miễnphí nên bạn có thể yên tâm vì các Plugin miễn phí này có thể phục vụ rất nhiều cho nhucầu của bạn

1.1 Cách tìm và 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 bản tiếng Anh (hình 1): bạn truy cập vào Dashboard –> Plugins –>

Add New

Với Plugin phiên bả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 mới