Làm trang web với wordpress

TỪNG BƯỚC THIẾT KẾ WEB VỚI WORDPRESS
TRONG 30 PHÚT.
Revision 1.0

Copyright ® 2017 by FIT – Khoa CNTT Trường ĐH Phan Thiết

1


CHƯƠNG 1. CÁC THUẬT NGỮ THÔNG DỤNG
STT Thuật ngữ
1
Wordpress
(WP)

2

3

4

5

6
7

8

9

10

Giải thích
WordPress là một phần mềm nguồn mở (Open Source Software) được viết
bằng ngôn ngữ lập trình website PHP (Hypertext Preprocessor) và sử dụng
hệ quản trị cơ sở dữ liệu MySQL. WordPress được ra mắt lần đầu tiên vào
ngày 27/5/2003 bởi tác giả Matt Mullenweg và Mike Little. Hiện nay
WordPress được sở hữu và phát triển bởi công ty Automattic có trụ sở tại
San Francisco, California thuộc hợp chủng quốc Hoa Kỳ.
CMS
viết tắt của Content Management System, hay còn gọi là hệ thống quản trị
nội dung nhằm mục đích giúp dễ dàng quản lý, chỉnh sửa nội dung. Nội
dung ở đây có thể là tin tức điện tử, báo chí hay các media hình ảnh, video,
... Hệ thống CMS giúp tiết kiệm thời gian quản lý, chi phí vận hành và bảo trì
nên hiện nay có rất nhiều công ty sử dụng. Không chỉ là công ty mà hiện nay
các blog cá nhân cũng ra đời với số lượng không hề nhỏ, và họ chọn giải
pháp sử dụng CMS nhằm dễ dàng xây dựng website và quản lý nội dung,
bên cạnh đó còn tiết kiệm được chi phí xây dựng website.
XAMPP
Xampp là chương trình tạo máy chủ Web (Web Server) được tích hợp sẵn
Apache, PHP, MySQL, FTP Server, Mail Server và các công cụ như
phpMyAdmin. Không như Appserv, Xampp có chương trình quản lý khá tiện
lợi, cho phép chủ động bật tắt hoặc khởi động lại các dịch vụ máy chủ bất kỳ
lúc nào.
Plugin
Plugin là một thành phần mở rộng nhỏ được lập trình riêng dựa trên các API
và những hàm mở có sẵn của WordPress để tạo thành một tính năng nào
đó mà mặc định WordPress không có. Nói dễ hiểu hơn, plugin chính là một
module bổ sung một chức năng nào đó mà bạn có thể cài vào WordPress.
Widget
Widget có thể gọi là một tính năng mà bất kỳ một website WordPress nào

cũng phải cần dùng, nó là một tập hợp các chức năng; mỗi widget tương
ứng với một chức năng để bạn chèn vào sidebar (thanh bên) của theme.
Page
là một trang trong wordpress
Post
Post dịch theo tiếng Việt có nghĩa là “bài đăng”. Cái nghĩa của nó đã nói lên
tất cả. Post là bài viết hay bài đăng có trên website của bạn. Khi bạn viết nội
dung hay bài viết về một chủ đề nào đó, nó chính là post.
CSS
là chữ viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được sử
dụng để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ
đánh dấu (ví dụ như HTML).
Localhost
Localhost là từ ghép của hai chữ “local” và “host“. Local dịch theo nghĩa IT
là máy tính của bạn, Host theo nghĩa IT là máy chủ. Vậy localhost nghĩa là
một máy chủ được vận hành trên máy tính của bạn.
Host/Hosting Host được hiểu theo nghĩa của nghành công nghệ website nghĩa là một máy
tính có thể được truy cập hai chiều (nhận kết nối và gửi kết nối ra ngoài), cái
máy tính mà mình nói tới đó nghĩa là một máy chủ web (còn gọi là Web
Server) có thể chứa các dữ liệu liên quan đến website bao gồm mã nguồn,
dữ liệu tải lên (hình ảnh, media,…) và cơ sở dữ liệu (database – các dữ liệu
được sinh ra trong quá trình bạn sử dụng WordPress như nội dung post,
page, tag,…).
2


11

Domain (tên tên miền nghĩa là một địa chỉ định danh dẫn tới website của bạn đã được
miền)

chứa trên host vì vốn dĩ host bạn chỉ có thể truy cập qua dãy IP của máy
chủ đó.

3


CHƯƠNG 2. CÀI ĐẶT WORDPRESS TRÊN LOCALHOST.
2.1. Cài đặt môi trường.
-

-

Trước khi bắt tay vào cài đặt wordpress, chúng ta cần chuẩn bị cho nó 1 môi trường
hoạt động (một host trên máy tính – localhost) để trang web của chúng ta có thể chạy
được trên máy tính cá nhân. Trong tài liệu này, chúng ta sử dụng XAMPP.
Sử dụng trình tìm kiếm từ khóa “XAMPP”, và tải về bản cài đặt mới nhất. Phiên bản
dùng trong tài liệu này là 7.1.4.

-

Cài đặt xampp.
Sau khi cài đặt thành công, màn hình XAMPP Control Panel sẽ xuất hiện, đồng thời ta
kiểm tra biểu tượng xampp tại khay đồng hồ hệ thống.

-

Màn hình Xampp Control panel.

4

-

Trong trường hợp start services bị lỗi port, chúng ta thay đổi port 443 và 80 mặc định
thành 8080 và 4443 trong 2 file httpd.conf và httpd-ssl.conf tương ứng.

-

Chúng ta mở trình duyệt, nhập localhost để kiểm tra xem đã start được các dịch vụ
chưa. Lưu ý: nhập thêm 8080 sau localhost nếu bạn đã thay đổi port 80 mặc định.
Nếu được như hình dưới đây là thành công.

5


6


2.2. Tải Wordpress.
-

Vào và tải về source wordpress.

-

Giải nén toàn bộ tập tin trong folder wordpress vào folder htdocs của xampp.

7

2.3. Tạo CSDL mySQL trong phpMyAdmin:
-

Trong trình duyệt, gõ localhost/phpmyadmin (thêm port 8080 sau localhost nếu đã đổi
port mặc định).
Trong phpMyAdmin, chúng ta tạo mới một CSDL, đặt tên và bấm tạo. Lưu ý: ghi nhớ
tên CSDL này để khai báo trong phần cài đặt Wordpress.

2.4. Cài đặt Wordpress.

-

Trong trình duyệt, gõ localhost/wp-admin (thêm port 8080 sau localhost nếu đã đổi
port mặc định).
Cài đặt wordpress theo các bước dưới đây:
Chọn ngôn ngữ.

-

Bấm Let’s go.

-

8


-

Nhập tên CSDL đã tạo ở mục 2.3

-

Bấm Run the install để bắt đầu cài đặt.

-

Tại trang Welcome, chúng ta nhập những thông tin còn lại để bắt đầu cài đặt.

9


-

Cài đặt thành công. Bấm login để đăng nhập vào wordpress.

10


CHƯƠNG 3. CÁC BƯỚC THIẾT KẾ WEBSITE WORDPRESS
3.1. Cài đặt themes.
3.1.1. Cách 1: Chọn theme có sẵn

3.1.2. Cách 2: Upload lên 1 theme mới hoàn toàn
-

Duyệt đến file sahifa.zip và cài đặt.

11

3.2. Cài đặt plugin
Các plugin thông dụng:
STT Plugin
1

Công dụng
Cho phép chúng ta tạo những icon
mạng xã hội để khách hàng có thể bấm
like dễ dàng.

2

Tạo 1 widget facebook like box.

3

Tạo 1 widget giúp chúng ta thêm hình
ảnh vào dễ dàng

4

Cho phép chúng ta tạo 1 slide trình
chiếu ảnh với nhiều tùy chọn hấp dẫn.

5

Giúp ta tạo 1 form thông tin cho khách
hàng.

6

Tường lửa cho wordpress, giúp bảo vệ
an toàn trang web của chúng ta.

12


7

Trình biên tập nội dung text nâng cao.

8

Chương trình hỗ trợ tạo hộp chat trợ
giúp trên wordpress với nhiều tính năng
tiện lợi và hấp dẫn.

3.3. Thiết kế nội dung
3.3.1. Tạo các Category (chuyên mục).

13


3.3.2. Tạo bài Post
Post dùng để đăng những bài viết, những loại bài viết hay dùng kiểu post đó là các
chuyên mục, thời sự, tin tức hàng ngày…. Ta có thể chọn chuyên mục cho bài post. Post
được tạo thông qua các bước đơn giản dưới đây.
Bước 1: Post -> Add New
Bước 2: Nhập tên cho bài post va nhập nội dung.
Bước 4: Chọn chuyên mục (Categories) cho bài Post ở cột bên phải.

Bước 5: Bấm Puslish để đăng bài post.

3.3.3. Tạo Page.
Page được sử dụng để đăng những nội dung có tính chất cố định, ít thay đổi, ví dụ
như: trang giới thiệu, thông tin liên hệ. Ta không thể chọn chuyên mục cho page và page
không hiển thị ngay khi chúng ta bấm publish mà chúng ta phải chọn nơi hiển thị cho nó. Ví
dụ chúng ta tạo Page Liên hệ, ta phải thêm page Liên hệ này vào menu Liên hệ thì nó mới
hiển thị ra trang chủ được. …Trang page được viết thông qua các bước đơn giản sau đây:
Bước 1: Page -> Add New
Bước 2: Nhập tên cho page và nội dung của page.
Bước 3: Bấm Pulish.

14


3.3.4. Sự khác nhau giữa Post và Page
a) Sự khác nhau
-

Post có hỗ trợ category và tag để phân loại, Page thì không.
Page có hỗ trợ phân cấp page mẹ – page con, Post thì không.
Page có hỗ trợ Page Template, Post thì không.
Khi đăng lên, Post sẽ hiển thị tự động ở website, Page thì không.
Post có hiển thị ở RSS Feed, Page thì không.

b) Mục đích sử dụng
-

-

Post là để chúng ta đăng các loại bản tin/bài viết mà chúng ta muốn nó được phân
loại bởi một chuyên mục nào đó và tự động hiển thị ra ngoài website; ví dụ như nhật
ký, tin tức, bài viết,…v..v..
Do Page không được phân loại bởi category hay tag, và cũng không tự hiển thị ra
website nên tốt nhất chúng ta sử dụng nó như một trang giới thiệu về thông tin gì đó
và không có tính cập nhật thường xuyên, ví dụ như trang Liên hệ, Giới thiệu,…v…v…

3.4. Trình bày website
3.4.1. Thiết kế menu.

15


Wordpress cho phép chúng ta sử dụng các category, page, post, link… để sử dụng làm
menu.

Bước 1: Appearance -> Menu
Bước 2: Chọn Category, Page, Post …. cần thêm vào menu và bấm Add to menu.
Bước 3: Bấm save menu. Refresh lại trang web để kiểm tra kết quả.

16


3.4.2. Điều chỉnh menu
-

Tạo menu con.

3.4.3. Thêm Smart Slider (trình chiếu ảnh) vào vùng header của trang web.

17


Bước 1: Vào plugin Smart Slider tạo 1 slider mới.

Bước 2: Copy php code của smart slider
Bước 3: Thêm code php của smart slider vào theme
-

Appearance -> Editor -> Theme Header -> Dán code php của smart slider vào cuối
đoạn.

18


3.4.4. Thiết kế Home page (trang chủ):
Muốn đặt trang chủ, trước tiên chúng ta phải chỉ định một page nào đó làm trang chủ và phải
tạo ra các chuyên mục muốn hiển thị. Trong ví dụ này, chúng ta sử dụng 2 chuyên mục là
Tin tức sự kiện và Thông báo sinh viên. Lưu ý: chúng ta phải xóa trang Sample page của
wordpress trước khi tiến hành tạo trang chủ mới.

19


Bước 1: Pages -> Add pages. Add một page mới, ví dụ: “Trang chủ”, chúng ta không
cần thêm nội dung cho page này.
Bước 2: Chuyển sang chế độ điều chỉnh giao diện trang chủ -> Bấm Page Builder.
Bước 3: Chọn kiểu hiển thị Page Builder. Ở đây chúng ta muốn trang chủ hiển thị bao
nhiêu chuyên mục thì sẽ chọn số lượng block tương ứng. Trong ví dụ này, chúng ta
thêm 2 chuyên mục là Tin tức sự kiện và Thông báo sinh viên.

-

Bước 2: Đặt “Trang chủ”. Sau khi tạo xong Trang chủ, ta tiến hành cài đặt trang này
thành 1 trang chủ tĩnh.
Settings -> Reading -> Front page display: A static page -> chọn page “Trang chủ”
trong menu xổ xuống -> Save Changes.

20


3.4.5. Chỉnh sửa Banner cho trang web.
-

Chúng ta cần thêm banner cho trang web để dễ dàng nhận diện thương hiệu.

Bước 1: Sahifa -> Theme Settings -> Header Settings

Bước 2: Trong Header Settings -> Custom Image Logo -> Upload. Chúng ta tìm và
chọn hình ảnh làm banner cho trang web. Kích thước khuyến nghị 190px x 60px.
Trong bài hướng dẫn này, chúng ta sử dụng kích thước 1421px × 334px để làm
banner.

21


Bước 3: Bấm save change để lưu lại cấu hình. Trở lại trang web, refresh lại trang
web để kiểm tra kết quả.

3.4.6. Chỉnh sửa thông tin trong Footer:

-

Footer của trang web là phần cuối cùng của trang web, tại đây chúng ta thường thêm
thông tin liên hệ, icon mạng xã hội… để khách hàng liên hệ dễ dàng.

Bước 1: Appearance -> Widgets

22


Trong màn hình Widgets, chúng ta sẽ thêm mục liên hệ vào khu vực First Footer
Widget Area. Số lượng và bố cục các cột trong Footer có thể cài đặt trong menu footer
của sahifa setting.

Bước 2: Trong màn hình widget, tìm tới Widget có tên Visual Editor, và thêm vào First
Footer Widget Area.

Bước 3: Trong màn hình widget, tại First Footer Widget Area, chúng ta sẽ điều chỉnh
lại thông tin liên hệ.

23


Bước 4: Refresh lại trang web và kiểm tra kết quả.

3.4.7. Chỉnh sửa Sidebar:
Một trang web cần có side bar (thanh bên trái hoặc phải tùy bố cục) để khách hàng truy cập
vào một số mục như: Post list, Facebook Like Box, Youtube… Trong Wordpress, khu vực
của sidebar được quản lý trong Primary Widget Area.

24


Bước 1: Appearance -> Widgets -> Primary Widget Area

25