Sach hoc thuc hanh wordpress huong dan xay dung website tieng viet hay nhat

Thực hành WordPress – Học là hiểu, là làm được
1
Tác giả : Ths Lê Quốc Toàn – alovoice.vn

2
Mục Lục
CHƯƠNG 1: CÀI ĐẶT WORDPRESS TRÊN LOCAL SERVER....................................................................................5
1. Cài đặt XAMPP.........................................................................................................................................5
2. Cài đặt WordPress...................................................................................................................................7
Bước 1: Tạo cơ sở dữ liệu............................................................................................................................7
Bước 2: Tải WordPress về máy tính ............................................................................................................8
Bước 3 : Cài đặt WordPress...................................................................................................................... 10
3. Thiết lập thông số cho website ............................................................................................................ 16
General Settings ....................................................................................................................................... 16
Permalink Settings.................................................................................................................................... 17
User Profile............................................................................................................................................... 19
CHƯƠNG 2: CÀI ĐẶT THEME PREMIUM ĐỂ XÂY DỰNG WEBSITE CHUYÊN NGHIỆP ....................................... 22
1. Đăng nhập vào WordPress................................................................................................................... 22
2. Chọn Theme để cài............................................................................................................................... 23
3. Cài đặt Theme ...................................................................................................................................... 24
4. Kích hoạt (Activate) cho Theme hoạt động.......................................................................................... 26
5. Cài đặt Plugin theo Theme đề xuất ...................................................................................................... 27
6. Xem thành quả sau khi cài Theme........................................................................................................ 27
CHƯƠNG 3: XÂY DỰNG WEBSITE GIỐNG BẢN DEMO ..................................................................................... 29
1. Nhập dữ liệu demo vào website .......................................................................................................... 30
2. Cài đặt Plugin “WordPress Importer” .................................................................................................. 30
3. Import dữ liệu mẫu vào website.......................................................................................................... 31
4. Tiến hành import dữ liệu demo ........................................................................................................... 32
5. Hoàn tất import nhập dữ liệu mẫu cho website.................................................................................. 33
6. Import cấu trúc website....................................................................................................................... 34
7. Hoàn tất import cấu trúc website ........................................................................................................ 35
CHƯƠNG 4: TINH CHỈNH THEME ĐỂ WEBSITE ĐẸP CHUYÊN NGHIỆP ............................................................. 37
1. Thiết lập thông số General Settings ..................................................................................................... 37
2. Thiết lập thông số Performance........................................................................................................... 40
3. Thiết lập thông số “Styling Options” .................................................................................................... 42
4. Thiết lập thông số “Header”................................................................................................................. 45

3
5. Thiết lập thông số “HomePage”........................................................................................................... 47
6. Thiết lập thông số “Footer”.................................................................................................................. 57
7. Thiết lập thông số “Single Posts” ......................................................................................................... 67
8. Thiết lập thông số “Social Buttons”...................................................................................................... 72
9. Thiết lập thông số “Ad Management” ................................................................................................. 74
10. Thiết lập thông số “Sidebars”........................................................................................................... 75
11. Thiết lập thông số “Navigation”....................................................................................................... 76
12. Thiết lập thông số “Theme Typography” ......................................................................................... 76
CHƯƠNG 5: TINH CHỈNH THEME NÂNG CAO................................................................................................... 77
1. Tạo các thể loại..................................................................................................................................... 77
2. Tạo Menu cho website......................................................................................................................... 81
Bước 1: Tạo menu .................................................................................................................................... 81
Bước 2: Thêm các thành phần vào menu................................................................................................. 82
Bước 3: Thêm icon vào menu................................................................................................................... 83
3. Thực hiện chèn quảng cáo vào vùng Header ....................................................................................... 84
4. Thêm các thành phần vào Sidebar ....................................................................................................... 87
5. Viết bài cho Website ............................................................................................................................ 92
6. Tạo Trang Liên Hệ cho Website............................................................................................................ 93
Bước 1: Tạo Trang liên hệ......................................................................................................................... 93
Bước 2: Chèn Shortcode vào trang liên hệ............................................................................................... 94
Bước 3: Đưa Trang liên hệ lên menu........................................................................................................ 95
Bước 4: Xem kết quả ................................................................................................................................ 96
7. Đưa website lên Internet ..................................................................................................................... 97

4
SÁCH THỰC HÀNH WORDPRESS
Học là hiểu là làm được
Tác giả Ths Lê Quốc Toàn – Tốt nghiệp Trường KHTN TP.HCM
http://alovoice.vn – alovoice@gmail.com
Bản quyền thuộc Ths Lê Quốc Toàn
Muốn sử dụng cho mục đích thương mại phải được sự đồng ý của tác giả.
Tài liệu thực hành lấy từ nhóm kín Facebook
https://www.facebook.com/groups/HocWordpressTaiAlovoice
Luôn cập nhật cho phiên bản WordPress mới nhất tại alovoice.vn

5
CHƯƠNG 1: CÀI ĐẶT WORDPRESS TRÊN LOCAL SERVER
Để xây dựng website bằng WordPress bạn cần phải có tên miền và Hosting. Tên miền
là địa chỉ của website còn hosting là nơi để đặt website lên đó.
Như vậy để có tên miền và hosting bạn có thể liên hệ với PAVietNam để mua, chi phí
từ vài trăm đến vài triệu 1 năm, tùy vào mục đích sử dụng mà bạn tìm mua gói phù hợp. tuy
nhiêu đối với các bạn sinh viên, các bạn mới tìm hiểu về WordPress mà chưa muốn bỏ tiền
ra mua thì cũng có giải pháp cho bạn. đó là tự tạo tên miền và hosting trên chính máy tính
của mình, sau đó cài WordPress lên và tha hồ mà trải nghiệm, tất nhiên theo cách này thì
website của bạn sẽ không được hiện diện trên Internet.
Bài hôm nay chính là làm việc này, cài đặt Local Server tạo tên miền và hosting trên
máy tính cá nhân của bạn sau đó cài đặt WordPress. Phần mềm Local Server có tên là
XAMPP, sử dụng được trên máy tính PC, máy MAC của Apple và ngay cả trên LINUX, địa
chỉ website để download phần mềm về sử dụng là https://www.apachefriends.org/
Trong nội dung hôm nay gồm có các phần sau:
1. Cài đặt XAMPP
2. Cài đặt WordPress
3. Thiết lập thông số cho website
1. Cài đặt XAMPP
Để cài đặt XAMPP bạn hãy vào website https://www.apachefriends.org/ và download
phần mềm về máy tính, máy tính bạn là PC bạn hãy chọn Windows, máy MAC hãy chọn
MAC OS X, máy linux hãy chọn gói Linux, sau đó click vào nút Download như hình minh
họa bên dưới:

6
Sau khi download về máy, bạn hãy click chạy phần mềm và cài đặt theo hướng dẫn.
Sau khi cài đặt thành công, trên màn hình Desktop xuất hiện icon XAMPP, chạy
chương trình sẽ có màn hình như sau:
Bạn hãy Click vào Start của module Apache để chạy Server Apache, Click vào Start
của module MySQL để chạy server MySQL. Nếu bạn không đăng nhập với quyền Admin
của máy thì sẽ yêu cầu bạn nhập password, đến đây mọi việc đã thành công.

7
Vị trí để đặt toàn bộ source code của WordPress là C:XAMPPhtdocs, có thể nói đây
như là hosting vậy, bạn hãy ghi nhớ vị trí này để chút nữa chép source code WordPress vào
mà cài đặt.
Một lần nữa để thử lại hoạt động của local Server bạn gõ địa chỉ http://localhost (tên
miền thay địa chỉ IP là 127.0.0.1) vào trình duyệt web, bạn sẽ thấy màn hình như trên. Ok,
tất cả phần cài đặt đã thành công bây giờ là lúc chúng ta cài đặt WordPress.
2. Cài đặt WordPress
Bước 1: Tạo cơ sở dữ liệu
+ Gõ vào trình duyệt web địa chỉ http://localhost/phpMyAdmin

8
+ Để tạo cơ sở dữ liệu MySQL
a. Click vào Database
b. Nhập vào tên database ở đây là tên alovoice
c. Chọn collation hỗ trợ tiếng việt nên chọn là utf8-unicode-ci
d. Click vào Create để tạo cơ sở dữ liệu.
(Nhớ : Database : alovoice ; Username: root; Password: (để trống) ; Database host:
localhost)
Bước 2: Tải WordPress về máy tính
+ Vào trang web https://wordpress.org để Download source code Wordpress về máy
tính, click vào nút download màu xanh như hình bên dưới.

9
+ Sau khi tải về bạn tiến hành giải nén file .zip chứa toàn bộ source code của
WordPress và chép toàn bộ vào thư mục C:/XAMPP/htdocs như hình bên dưới:

10
Bước 3 : Cài đặt WordPress
1. Sau bước 2, chúng ta gõ vào trình duyệt web địa chỉ http://localhost để cài
đặt WordPress, click continue để tiếp tục như hình bên dưới
2. Chuẩn bị thông tin bên dưới, sau đó click vào let’s go
1. Database name : alovoice
2. Database username : root
3. Database password : (để trống)
4. Database host : localhost
5. Table prefix: (để mặc định)

11
3. Nhập đầy đủ thông tin như hình bên dưới sau đó click vào submit

12
4. Màn hình bên dưới thông báo là đã kết nối thành công với server MySQL, bây
giờ là lúc cài đặt WordPress, hãy click vào “Run the Install ” để cài đặt.

13
5. Tiếp theo là nhập thông tin của website như tên website, tài khoản quản trị
website, và email của người quản trị. Đây là những thông tin quan trọng bạn phải
ghi lại cẩn thận kẻo quên, nhất là tài khoản gồm username và password để đăng
nhập quản trị website. Tiếp theo click vào “Install WordPress” để tiến hành cài
WordPress.

14
6. Màn hình bên dưới thông báo cho chúng ta đã thành công cài đặt WordPress, bây
giờ hãy click vào log In, sau đó nhập username và password đã khai báo ở phần
trên để vào phần quản trị của Website WordPress.
7.Sau khi đăng nhập thành công chúng ta đã đăng nhập được vào phần quản trị của
website như màn hìn bên dưới

15
8. Bạn cũng có thể nhập http://localhost để xem diện mạo của website.

16
Như vậy chúng ta đã thực hiện thành công cài đặt website WordPress trên local
Server.
3. Thiết lập thông số cho website
Sau khi cài đặt thành công, tiếp theo bạn cần phải thực hiện thiết lập một số thông số
cần thiết cho website như tên website, mô tả website, múi giờ hay permalink để URL
thân thiện với google làm cho website dễ lên top. Sau đây là một số thông số cần phải
thiết lập:
General Settings
Từ menu trang quản trị website chọn “Settings->General” để tiến hành thiết lập
thông số.
Thiết lập thông số tại phần này sẽ có tác dụng cho toàn bộ website. Hầu hết các thiết
lập mặc định là có thể sử dụng được rồi tuy nhiên một số thông số cần phải quan tâm để thiết
lập cho đúng, cho phù hợp.
Site Title : Tên website được nhập trong quá trình cài đặt WordPress, tuy nhiên tại
đây bạn cũng có thể chỉnh sửa lại nếu bạn muốn.
Tagline : Phần mô tả Website, bạn cũng có thể sửa lại.
WordPress Address(URL) và Site Address(URL): bạn cứ để mặc định khỏi thay đổi
gì cả.
Email Address : địa chỉ Email dành cho người quản trị Website, các thay đổi trong
website như tạo mới user, duyệt comment… sẽ được gửi đến Email này.
Membership : nếu bạn click chọn vào “Anyone can register” có nghĩa là bạn cho
phép mọi người có thể đăng ký làm thành viên của website.
New user Default role : Khi mục “Membership” được chọn cho phép mọi người
đăng ký thành viên, thì tại mục này sẽ gán cho thành viên đó vai trò gì, hay quyền gì trong
website, thường là gán cho quyền Subcriber.
Timezone : bạn hãy chọn “Ho Chi Minh” như hình minh họa bên dưới.
Date format : hãy chọn định dạng ngày theo dạng ngày/tháng/năm
Các thiết lập còn lại hãy để mặc định và nhấp vào “save changes” để ghi nhận lại tất
cả các thay đổi vừa thiết lập ở trên. Nhớ nhé khi làm xong phải nhấp “save changes” để lưu
lại.

17
Permalink Settings
Từ menu trang quản trị website chọn “Settings-> Permalink” để tiến hành thiết lập
thông số.

18
Thiết lập thông số trong phần “Permalink Settings” mục đích chính là làm cho URL
của bài viết thân thiện với google, để từ đó giúp website của chúng ta dễ lên top google.
Như bạn thấy dưới đây, mặc định đường dẫn của bài viết khi hiển thị sẽ có dạng:
• http://example.com/?page_id=123
Tuy nhiên khi chúng ta cấu hình permalink để thân thiện với google thì đường dẫn
URL sẽ có dạng nhưu sau:
• http://example.com/ten-bai-viet/
Như vậy rõ ràng rằng khi cấu hình permalink thích hợp và tên bài viết có chứa từ
khóa thì hiển nhiên trong URL sẽ có từ khóa, điều này không những giúp cho người đọc mà
còn rất tốt cho bộ máy tìm kiếm. Như hình bên dưới là cách cấu hình đường dẫn URL phù
hợp nhất, chọn “custom structure” sau đó cấu hình thông số /%category%/%postname% ,
với cách cấu hình này sẽ hỗ trợ SEO rất tốt, đưa bài viết có từ khóa trong postname lên top,
từ đó hỗ trợ từ khóa trong category lên top luôn.
Nói tóm lại nêu cấu hình permalink như hình bên dưới.

19
Cuối cùng, phần cấu hình “Category base” và “Tag base” là bạn có thể thay đổi
đường dẫn mặc định “/categories/” và “/tags/” bằng bất cứ từ gì bạn thích, còn nếu bạn
không hiểu rõ bạn cứ để trống không sao cả. Sau đó nhớ nhấp nút “Save changes” để lưu lại
các thay đổi vừa cấu hình.
User Profile
Từ menu trang quản trị website chọn “Users->Your Profile” để tiến hành thiết lập
thông số.

20
First Name : Nhập tên của Bạn, ở đây tên của tôi là Toàn
Last Name : Họ và chữ đệm, ở đây của tôi là Lê Quốc
Display Name Publicly as : Chọn tên đầy đủ của bạn. Tên này sẽ được hiển thị đầy đủ
giống như hình bên dưới, thay vì admin hoặc tên username.

21
Biographical Info : Mô tả ngắn về bạn, sẽ hiển thị ra trang web như hình bên dưới:
Các thiết lập khác bạn cứ để mặc định, sẽ trình bày kỹ trong quá trình thực hành. Tất
cả các thiết lập mặc định của WordPress đã tối ưu tối đa cho website của chúng ta hoạt động
tốt nhất nên bạn cứ an tâm. Bạn có thể xem thêm trong chương “Tìm hiểu các thành phần
của Wordpress” tôi đã trình bày khá kỹ càng chi tiết về WordPress.
Tiếp theo là phần xây dựng wesbite chuyên nghiệp từ theme Premium( theme có trả
phí), để Bạn có thể ứng dụng ngay vào công việc, theme chuẩn SEO, load trang rất nhanh và
thân thiện với di động, sử dụng theme này cơ hội lên top google nhanh.

22
CHƯƠNG 2: CÀI ĐẶT THEME PREMIUM ĐỂ XÂY DỰNG
WEBSITE CHUYÊN NGHIỆP
Bạn muốn thay đổi giao diện website WordPress, hãy tiến hành cài đặt Theme. Mỗi
Theme tương ứng với một diện mạo của website, Bạn có sử dụng theme miễn phí hoặc có
phí. Theme miễn phí bạn có thể lấy từ thư viện của WordPress hoặc từ các nguồn tin cậy
khác, tuyệt đối không lấy những theme không rõ nguồn gốc để sử dụng, rất nguy hại cho
website. Theme có phí là các Theme Premium rất đẹp và chuyên nghiệp, bạn phải tìm và
chọn cho mình theme phù hợp với nhu cầu sử dụng. Trên thị trường, để sở hữu 1 Theme
Premium Bạn phải bỏ hầu bao lên đến cả 100 đô la. Trong phần hướng dẫn này chúng ta sẽ
đi cài Theme Premium có phí, với chi phí là 59 đô la. Đây là Theme có phí giúp bạn thực
hành, khi sử dụng chính thức Bạn nên mua một bản sử dụng, để được nhận update thường
xuyên.
Sau đây là các bước cài Theme Premium có phí, giúp bạn xây dựng website chuyên
nghiệp, sử dụng được ngay vào công việc.
1. Đăng nhập vào WordPress
Gõ vào trình duyệt web URL: http://localhost/wp-admin , sau đó nhập username và
password như đã cài đặt ở chương 1. Click vào “Appearance->Themes” sau đó click vào
“Add New” để cài đặt theme.

23
2. Chọn Theme để cài
Sau khi Click vào “Add New” ở bước 1, màn hình cài theme xuất hiện như hình bên
dưới: Tại đây bạn có hai cách để cài theme, thứ nhất là bạn nhập tên theme cần cài đặt vào ô
“Search themes…” chọn thêm các bộ lọc tìm kiếm themes như theme nổi tiếng nhiều người
sử dụng tại mục “Popular” và các bộ lọc khác như “lastest”, “Favorites”, “Feature
Filter”…. để chọn thêm cài đặt. Thứ hai Bạn nhấp vào “Upload Theme” nếu như bạn có
theme dạng file .zip mua từ các trang web có phí nổi tiếng, với các theme này bạn cài đặt
vào và sử dụng chính thức được ngay, vì theme rất đẹp và chuyên nghiệp đáng đồng tiền bỏ
ra mua sử dụng.
Trong bước này chúng ta sẽ cài đặt “Best theme” mua từ trang web mythemeshop,
đây là theme theo mình đánh giá là rất tốt về khía cạnh SEO lẫn giao diện đẹp đối với người
sử dụng, có tích hợp sẵn cửa hàng online nên bạn dễ dành xây dựng cho mình một cửa hàng
online để bán hàng online trên mạng.
Bạn hãy gia nhập vào Group Facebook bên dưới:
https://www.facebook.com/groups/HocWordpressTaiAlovoice , sau đó click vào
menu tệp để lấy theme về sử dụng, tên tập tin là
best_mythemeshop.zip, lưu ý đây là theme có phí mình
đã mua và hướng dẫn các bạn thực hành, nếu bạn muốn
sử dụng chính thức cho website, thì bạn cần chi một ít
tiền để mua về sử dụng cho yên tâm và quan trọng là
bạn sẽ luôn có bản cập nhật mới nhất cho theme của
mình.
Sau khi tải về và giải nén bạn sẽ có được ba tập tin như
minh họa bên cạnh: tập tin best_documentation.zip là
tập tin chứa tài liệu của theme bạn nên đọc kỹ trước khi sử dụng, tập tin
best_dummydata.zip chứa toàn bộ dữ liệu mẫu của website, phần sau Toàn sẽ hướng dẫn các
bạn xây dựng website đẹp long lanh với dữ liệu mẫu này, cuối cùng tập tin mts_best.zip đây
chính là tập tin theme của website, bạn sẽ cài theme từ tập tin này.
Như giải thích ở phần trên chúng ta sẽ đi thực hành cài theme từ tập tin mts_best.zip,
do đó bạn hãy click vào “upload Theme” để qua bước 3, cài đặt theme vào WordPress.

24
3. Cài đặt Theme
Tiếp theo bạn nhấp vào “Choose File” để chọn tập tin theme để cài đặt, sau đó Click
vào “Install Now” để tiến hành cài đặt.
Nếu trong quá trình cài theme xảy ra lỗi như bên dưới, có nghĩa là file php.ini của
WebServer XAMPP không cho phép upload file vượt quá kích thước đã thiết lập tại thông

25
số upload_max_filesize, thường chỉ có 2M, do đó chúng ta phải tiến hành thay đổi thiết lập
thông số này lên cao một chút, 100M chẳng hạn.
Để thay đổi upload_max_filesize bạn hãy mở XAMPP Control Panel lên sau đó click
vào “config” của module Apache chọn PHP (php.ini) như hình minh họa bên dưới
Sau khi file php.ini mở lên, bạn tìm đến thông số “upload_max_filesize” từ 2M bạn
sửa thành 100M như hình minh họa bên dưới, sau đó bạn save file lại.
Lưu ý: sau khi sửa file php.ini và save lại, để WebServer XAMPP có tác dụng cập
nhật thiết lập thông số mới cập nhật này, Trong phần XAMPP Control Panel như hình trên,

26
bạn hãy Click vào “Stop” của module Apache sau đó “Start” lên lại. Thế là xong, tất cả tốt
sẽ chuyển qua bước 4
4. Kích hoạt (Activate) cho Theme hoạt động
Sau khi cài đặt thành công bạn hãy click vào “Activate” để kích hoạt theme sử dụng
chính thức trong website.

27
5. Cài đặt Plugin theo Theme đề xuất
Tiếp theo bạn hãy cài đặt một số plugin cần thiết cho website tại mục chọn sẵn
“ESSENTIAL”, còn các plugin khuyến khích cài đặt “RECOMMENDED” sẽ tìm hiểu cài
đặt sau.
Bạn hãy click vào WP Review, WP Shortcode, WP Tab Widgets, tại box “Bulk
Action” chọn “Install” sau đó Click vào “Apply”. Sau khi cài đặt xong cũng làm các bước
tương tự như trên nhưng tại “Bulk Action” Chọn “Activate” để kích hoạt cho Plugin chính
thức hoạt động trên Website.
6. Xem thành quả sau khi cài Theme
Bước 6: Sau khi cài đặt các Plugin cần thiết cho “Best theme” xong, chúng ta nhập
http://localhost để xem diện mạo của website chúng ta đến lúc này như thế nào nhé!

28
Trên đây là diện mạo của website của chúng ta đến thời điểm này, tiếp theo chúng ta
sẽ đi thực hiện xây dựng cấu trúc và thêm dữ liệu của website sao cho giống với phiên bản
demo.
Xem phiên bản demo tại đây: https://mythemeshop.com/multiple/themes/best/
Tiếp tục nào.

29
CHƯƠNG 3: XÂY DỰNG WEBSITE GIỐNG BẢN DEMO
Có bao lần bạn đã gặp phải, khi thấy theme nào đó thật là đẹp nhưng khi cài đặt vào
website của mình thì hỡi ơi, sao nhìn hổng giống gì hết trơn. Đây là chương giúp bạn giải
quyết vấn đề trên, giúp bạn tiến hành cài đặt theme và tinh chỉnh sao cho theme giống phiên
bản demo nhất, và có thể sử dụng được ngay và luôn, bạn có trong tay một website thật đẹp
và thật lộng lẫy, sau khi bạn đọc và thực hành đầy đủ nội dung trong chương này.
Xem giao diện mẫu tại đây http://demo.mythemeshop.com/s/?theme=Best.

30
1. Nhập dữ liệu demo vào website
Trong trang quản trị bạn hãy chọn Tools->import sau đó click vào “WordPress”
2. Cài đặt Plugin “WordPress Importer”
Khi chúng ta thực hiện import dữ liệu mẫu vào WordPress, việc đầu tiên là phải cài
Plugin này vào. Đây là plugin cho phép thực hiện tác vụ đưa dữ liệu đã trích xuất từ công
“Tools->Export” từ trang web WordPress khác.
Click vào Install như hình bên dưới để cài đặt Plugin. Sau khi cài đặt xong click vào
“Activate Plugin & Run Importer” để import dữ liệu.

31
3. Import dữ liệu mẫu vào website

32
Ở chương trước chúng ta đã download tập
tin theme best_mythemeshop.zip, trong đó có tập
tin dữ liệu mẫu best_dummydata.zip, bây giờ hãy
giải nén tập tin này ra bạn sẽ có các tập tin sau:
dummy_data.xml là tập tin chứa tất cả dữ liệu mẫu,
tập tin options_panel_settings_Best_Default.txt
chứa tất cả các thiết lập cấu trúc của website, chúng
ta sẽ thực hiện cái này ở phần sau. Bây giờ là import dữ
mẫu.
Click vào “Choose File” để chọn tập tin dummy_data.xml, sau đó click vào “Upload file
and import”
4. Tiến hành import dữ liệu demo
Phần này chọn hai mục, thứ nhất là chọn tên username để dữ liệu mẫu được gán đến,
bạn hãy chọn admin. Thứ hai là click chọn vào “Download and import file attachments” để
tải về các tập tin gắn với bài viết, ví dụ như các tập tin hình ảnh trong bài viết. Click chọn
“Submit” để chính thức thực hiện import dữ liệu mẫu vào website.

33
5. Hoàn tất import nhập dữ liệu mẫu cho website
Màn hình thông báo chúc mừng cho bạn biết đã import nhập dữ liệu mẫu vào website
đã thành công
Bạn có thể vào http://localhost để xem dữ liệu đã được import vào website.

34
Đến bước này bạn đã hoàn thành thêm dữ liệu mẫu vào website, tiếp theo là thực hiện
Import cấu trúc mẫu cho website.
6. Import cấu trúc website
Bạn hãy chọn “Appearance->Theme options” sau đó click vào “Import/Export”
mục cuối cùng.

35
Kéo xuống bên dưới bạn sẽ thấy mục “Import Options” bạn hãy click vào “Import
Code”
Tiếp theo bạn mở tập tin “options_panel_settings_Best_Default.txt” trong gói theme
bạn đã download từ bước trên, chép toàn bộ nội dung từ tập tin này và chép vào box “import
Code” sau đó click vào “Import”, hộp thông báo tất cả thiết lập sẽ mất hết, bởi đây là lần
đầu tiên bạn làm nên bạn khỏi lo mất, bạn cứ click OK để tiếp tục.
7. Hoàn tất import cấu trúc website
Bạn có thể vào http://localhost để xem cấu trúc website, bạn thấy đó cấu trúc website
đã được import thành công, đã xuất hiện logo, đã có slider, cấu trúc rõ ràng.

36
Bạn hãy ngắm nhìn dung nhan của website của mình đến thời điểm này. Vẫn chưa đẹp
lắm phải không, trong chương sau chúng ta sẽ đi tinh chỉnh theme, thêm hình ảnh, thêm
footer, thay đổi logo, tạo menu… để cho website thêm phần sinh động và sử dụng được
ngay.
Bạn đừng lo, mình sẽ đi từng bước, từng bước một, bạn sẽ làm chủ được website sau khi
bạn đọc xong hết tất cả các chương trong quyển sách này. Chúng ta đang thực hành trên
theme có trả phí, rất chuyên nghiệp, website đẹp long lanh.
Bây giờ chúng ta đi qua chương tiếp theo về tinh chỉnh theme.

37
CHƯƠNG 4: TINH CHỈNH THEME ĐỂ WEBSITE ĐẸP CHUYÊN
NGHIỆP
Website có đẹp và chuyên nghiệp hay không là nhờ đọc kỹ chương tinh chỉnh Theme
này, tại đây khi đã hiểu rõ các thành phần cần tinh chỉnh bạn có thể sáng tạo không giới hạn
cho website của mình, bạn có thể thêm thành phần, bớt thành phần hoặc thay đổi màu sắc,
bố cục cho website sao cho phù hợp với nhu cầu sử dụng của bạn nhất. Lúc đó website đẹp
mê ly luôn, muốn vậy bây giờ bắt tay tìm hiểu ngay thôi.
1. Thiết lập thông số General Settings
Từ menu Admin Chọn “Appearance -> Theme Options” sau đó click vào “General
Setings”. Một số thiết lập quan trọng chúng ta cần thực hiện trong phần này như sau:
Đầu tiên bạn hãy gia nhập vào group Facebook để lấy dữ liệu thực hành:
https://www.facebook.com/groups/HocWordpressTaiAlovoice/ tải tập tin Hinh-thuc-hanh-
theme-best-mythemeshop.zip về máy tính, sau đó giải nén để lấy hình ảnh thực hành.
Logo Image : Bạn hãy chọn logo cho website, chú ý chọn kích thước của logo giống
như kích thước của logo mẫu “Best WordPress theme” để cho website đẹp. Tuyệt đối không
sử dụng logo không đúng kích thước, sẽ làm cho website trông rất xấu xí. Bạn click vào
“Remove Upload” sau đó click “Browse” để chọn file ảnh logo.png được giải nén từ tập tin
Hinh-thuc-hanh-theme-best-mythemeshop.zip, để tiến hành upload lên.
Favicon: Là một icon hiển thị trên tab của website, bạn làm tương tự như phần “logo
Image” để upload file favicon.ico cho mục này.

38
Touch Icon : Chọn ảnh có kích thước 152x152 để làm icon trên điện thoại di động.
Metro Icon: Chọn ảnh có kích thước 144x144 để làm icon trên điện thoại di động
window phone.
Twitter Username : nhập vào username Twitter của bạn, của tôi là toan8051.
FeedBurner URL : Nhập vào đường dẫn FeedBurner, để nhận Email khi khách hàng
nhập vào Subcriber.

39
Header Code: chứa đoạn code javascript nằm trong phần header, phía trước thẻ
</head>, thường nơi đây sẽ chèn vào đoạn code để kiểm tra tình trạng của website, như là
Webmaster tool…
Footer Code: chứa đoạn code javascript Google Analytic, tại phần footer, đoạn code
để theo dõi hoạt động của website: như bao nhiêu người đến với website trong ngày, trong
tháng, họ đến website đọc những chuyên mục nào nhiều nhất, họ đến website chúng ta từ
nguồn nào facebook, tìm kiếm trên Google, forum, hoặc đánh trực tiếp địa chỉ website…

40
Các mục còn lại trong phần “General Settings” bạn cứ để mặc định, nếu bạn muốn
thay đổi thì hãy đọc qua và làm được ngay.
Sau khi thực hiện xong nhớ click vào “Save changes” để lưu lại các thiết lập.
2. Thiết lập thông số Performance
Trong phần này cho phép bạn thực hiện thiết lập một số thông số giúp tăng tốc
website, để tăng tốc thêm nữa cho website khuyến khích bạn cài đặt thêm plugin “WP Super
Cache”.

41
Prefetching : Bạn chọn “On” để thực hiện chức năng nạp trước, ví dụ bạn đang ở
trang home, sau đó chuyển sang trang bài viết chi tiết sẽ nhanh hơn.
Lazy Load: Bạn chọn “On” để hình ảnh chỉ được nạp khi nó nằm trong vùng xem,
giúp cho hiển thị nhanh nội dung. nói dễ hiểu hơn là kéo xem nội dung đến đâu thì load ảnh
đến đó, không load trước, ảnh không nằm trong vùng xem thì không load.
Lazy load featured images: Bạn chọn “On” để thực hiện chế độ lazy load cho các ảnh
“featured images” trên trang website của bạn.
Lazy load post content images: Bạn chọn “On” để thực hiện chế độ lazy load cho các
ảnh trên từng bài viết.
Async JavaScript: thêm thuộc tính async vào Script tags ví dụ: “<script
src="demo_async.js" async></script>” để tăng tốc độ load trang. Async nghĩa là kỹ thuật
tải không đồng bộ. Theo cách load trang thông thường khi mở trang web nó tiến hành nạp
hết tất cả các file javascript sau đó mới tới các thành phần nội dung khác, điều này làm cho
người xem website có cảm giác đợi lâu mới thấy nội dung của website hiện ra. Nhưng khi áp
dụng kỹ thuật Async, khi khách hàng mở website thì nội dung sẽ được hiện ra ngay, còn các
file Javascript sẽ được nạp sau đó, giúp cho người xem website không có cảm giác đợi lâu,
nội dung được hiển thị ra ngay lập tức, tốc độ website được tải nhanh hơn.
Remove ver parameters : Nếu “On” sẽ loại bỏ thông số “ver” trong phần nạp file CSS
và JS, giúp tăng tốt độ website trong một số trình duyệt. Nên để mặc định.
Optimize WooCommerce scripts : Chọn “On” để thực hiện chỉ nạp các file CSS cà JS
của WooCommerce khi vào trang của WooCommerce, các trang khác sẽ không nạp, giúp
tăng tốc độ website, tránh việc nạp những file không cần thiết.
Trong phần này bạn có thể thiết lập các giá trị theo mặc định, sau đó điều chỉnh dần
để cải thiện tốc độ của website.

42
3. Thiết lập thông số “Styling Options”
Trong phần này bạn sẽ thay đổi màu sắc bố cục tổng thể của website, đây là phần ảnh
hưởng đến bộ mặt của website, nên cần tìm hiểu kỹ và thực hành nhiều lần để có màu sắc bố
cục website đẹp.
Color Scheme : thay đổi sơ đồ màu của website, đây là màu chính của toàn bộ
website, mặc định là màu xanh nước biển “#3498db”. Màu mặc định là đẹp rồi, tuy nhiên
bạn muốn thay đổi màu khác thì hãy click vào và chọn màu tương ứng. Bạn cũng có thể vào
đây https://goo.gl/CNEQmL để chọn cho mình một màu ưng ý. Ví dụ chọn màu cam
“#dd9933” thì kết quả thanh menu cũng như chữ trên tiêu đề thay đổi thành màu cam như
hình bên dưới, nói chung tại đây bạn hãy chọn sơ đồ màu cho toàn bộ website của bạn sao
cho đẹp nhất theo cách nhìn của bạn. Nếu không cứ để mặc định mà sài.

43
Layout Style : chọn sidebar nằm phía bên phải hoặc bên trái của website, mặc định
sidebar nằm phía bên phải, đây cũng là cách thiết lập chuẩn của blog, nên cứ để mặc định
mà sài.
Site Background : chọn màu nền của website, bạn muốn phong cách thì có nhiều lựa
chọn cho bạn: như chọn màu tại Background Color, Chọn ảnh làm background tại mục
Background Image. Bạn là người mới, cứ để mặc định mà sài, cho nhẹ website.
Custom CSS : tinh chỉnh website bằng CSS, bạn khỏi quan tâm, sau này có điều kiện
học nâng cao và biết thêm về CSS thì sử dụng, bây giờ cứ để mặc định mà sài.
Lightbox : Nên bật “On” để khi click vào xem bức ảnh, ảnh lớn sẽ hiển thị ở chế độ
lightbox để xem cho đẹp mắt, như hình bên dưới

44

45
Trong phần setting này bạn sẽ thay đổi màu sắc diện mạo của website và một số tùy
chỉnh khác, nếu bạn không chắc cứ để mặc định mà sài.
4. Thiết lập thông số “Header”
Tinh chỉnh màu sắc và các thành phần trong vùng header, cho hiển thị hay ẩn, hoặc
có Floating hay không, tất cả thực hiện trong phần này.
Navigation Background : Thay đổi màu cho menu chính, cứ để mặc định mà sài.
Header Background : Thay đổi màu nền của header, xem hình bên dưới.
Show Header: Thay đổi ẩn hoặc hiển thị vùng header, nếu chọn “Off” thì vùng này sẽ
biến mất. Mặc định là “On”. Cứ để mặc định mà sài.
Show Primary Menu : Nếu chọn “Off” thì menu sẽ biến mất. mặc định là “On”, cứ để
“On” mà sài.
Floating Navigation Menu: Chọn “On” để khi kéo xuống xem phần nội dung bên
dưới, thì thanh menu vẫn xuất hiện, để cho phép chúng ta dễ điều hướng, nên chọn “On”.
Mặc định là “On”.

46
Trong phần thiết lập này Bạn có thể để mặc định mà sài.

47
5. Thiết lập thông số “HomePage”
Đây là vùng kiểm soát tất cả các thành phần trong giao diện trang chủ HomePage,
bạn sẽ tối ưu tinh chỉnh sao cho phù hợp với nhu cầu của bạn. Mình sẽ trình bày kỹ phần này
vì khá hay và thú vị. Hiểu được cách thiết lập phần này là quan trọng, giúp bạn tinh chỉnh và
làm chủ được layout website của mình.
Homepage Slider : Chọn “On” để bật chức năng slider trên trang chủ, khi bật “On”
rồi tiếp tục chọn các mục thể loại và số bài viết trong vùng slider bên dưới.
Slider Category(s) : Chọn thể loại, những bài viết mới nhất của thể loại này sẽ được
đưa vào vùng slider, tất nhiên bạn có thể chọn nhiều thể loại cùng lúc.
Number of posts: Số bài viết tối đa để chạy slider, mặc định là 3. Bạn có thể chọn con
số tùy ý, hai hình bên dưới minh họa cách tinh chỉnh thông số ở vùng admin và vùng bên
ngoài của website. Bạn xem kỹ để ứng dụng cho website của mình.

48
Tiếp theo là phần tinh chỉnh nâng cao cho slider, trong phần này chúng ta sẽ tinh
chỉnh slider bằng cách chọn hình và link đến trang xác định, không phải slider các bài viết
như ở phần trên. Để thực hành phần này chúng ta làm như sau:
Homepage Slider : Chọn “On” để bật chức năng slider trên trang chủ.
Slider Category(s) : Trong mục này bạn không chọn thể loại nào cả, để trống.
Number of posts: Trong mục này cũng để trống không nhập số gì cả.

49
Tại đây bạn thực hiện 3 Custom Slider: Khóa học WordPress Online, Khóa học
WordPress Offline, và Khóa học SEO trên WordPress.
- Tạo Slider Khóa học WordPress Online:
+ Tại mục “Custom Slider” Click vào “Add Slider” Bạn hãy nhập vào thông tin
như hình minh họa bên dưới; Title có giá trị là Khóa Học WordPress Online; Image
upload hình ảnh khóa học WordPress Online từ thư mục anh-bai-viet trong tập tin Hinh-
thuc-hanh-theme-best-mythemeshop.zip lấy từ nhóm facebook ở mục 1; Text nhập nội
dung mô tả slider ở đây với nội dung là “Khóa học miễn phí chất lượng như có phí” ;
Link nhập vào đường link đến trang website đào tạo khóa học WordPress Online. Tại
trường Link này bạn cũng có thể nhập vào đường dẫn đến trang giới thiệu khóa học,
trong chính website của chúng ta.

50
- Tạo Slider Khóa học WordPress Offline:
+ Tương tự cách tạo slider ở mục trên, cũng tại mục “Custom Slider” Click
vào “Add Slider” Bạn hãy nhập vào thông tin; Title có giá trị là Khóa Học
WordPress Offline; Image upload hình ảnh khóa học WordPress Offline từ thư
mục anh-bai-viet trong tập tin Hinh-thuc-hanh-theme-best-mythemeshop.zip
lấy từ nhóm facebook ở mục 1; Text nhập nội dung mô tả slider, ở đây với nội
dung là “Hướng dẫn hoàn thành website chuẩn SEO trong 1 ngày” ; Link nhập

51
vào đường link đến trang website đào tạo khóa học WordPress Offline. Tại
trường Link này bạn cũng có thể nhập vào đường dẫn đến trang giới thiệu
khóa học, trong chính website của chúng ta.
- Tạo Slider Khóa học SEO trên WordPress:
+ Tương tự cách tạo slider ở mục trên, cũng tại mục “Custom Slider” Click
vào “Add Slider” Bạn hãy nhập vào thông tin; Title có giá trị là Khóa học
SEO trên wordPress; Image upload hình ảnh khóa học SEO trên WordPress từ
thư mục anh-bai-viet trong tập tin Hinh-thuc-hanh-theme-best-
mythemeshop.zip lấy từ nhóm facebook ở mục 1; Text nhập nội dung mô tả
slider ở đây với nội dung là “Hướng dẫn cách SEO WordPress lên top Google
trong 1 tháng” ; Link nhập vào đường link đến trang website đào tạo khóa học
SEO trên WordPress. Tại trường Link này bạn cũng có thể nhập vào đường
dẫn đến trang giới thiệu khóa học, trong chính website của chúng ta.
Xong phần thực hành trên chúng ta có kết quả 3 slider tương ứng cho 3 khóa học và
có đường link bất kỳ, bên ngoài hoặc trang giới thiệu khóa học trên chính website như sau:

52
Tiếp theo là tinh chỉnh cho vùng hiểu thị các tin tức nổi bật:

53
Featured Section : Muốn cho vùng tin nổi bật xuất hiện trên trang chủ thì phải “On”
nó lên. Mặc định là “On”
Featured Section Title : Nhập vào tiên đề của vùng này, ở đây là “TIN NỔI BẬT”
Featured Section Category(s) : Chọn thể loại tin nổi bật, có 4 tin mới nhất của thể
loại tin nổi bật sẽ hiện thị tại đây.

54
Tiếp theo là tinh chỉnh cho vùng hiển thị bài viết mới nhất cho thể loại bài viết.
Tại vùng “Home Sections” mặc định có 1 vùng (section) hiển thị bài viết mới nhất
dạng hai cột cho tất cả các thể loại. Trong mục “Number of Posts” bạn muốn hiển thị 2 bài
viết mới nhất thì bạn vào Settings->Reading tại mục “Blog pages show at most” bạn nhập
vào số 2 sau đó nhấp “Save Changes” để lưu lại. Nếu bạn muốn thêm 1 vùng(section) nữa
thì Click vào ”Add Section” để thêm vào.

55
Vùng Hiển thị 2 bài viết mới nhất được hiển thị như hình minh họa bên dưới.
Phần cuối cùng trong mục “Setting HomePage” là “HomePage Post Meta Info” bạn
cứ kéo hết bỏ vào phía “Enable” nhé. Đơn giản bạn click vào giữ chuột và kéo bỏ qua.
Hoàn tất bước kéo thả chúng ta có hình như bên dưới.

56
Và đây là kết quả của các thành phần được thực hiện ở bước trên:
Categories: Hiển thị Bài viết thuộc thể loại nào, ở đây là Entertainment
Comment Count : Hiển thị cho chúng ta biết có bao nhiêu bình luận trong bài viết
này, ở đây là 0.
Date: Hiển thị ngày bài viết được public ở đây là 18/5/2014
Author Name : Hiển thị tên tác giả bài viết ở đây là admin(Lê Quốc Toàn).
Bước này quan trọng nên trình bày rất kỹ và chi tiết, Bạn cố gắng đọc và thực hành
theo nhất định sẽ hiểu và làm được.

57
6. Thiết lập thông số “Footer”
Bạn sẽ thiết lập tất cả các thành phần liên quan đến footer của website.
Copyrights Text: Theme mua nên bạn có thể xóa bỏ tất cả các dòng text trong ô kế
bên như hình minh họa bên dưới.
Copyrights Text: xuất hiện trên phần footer như hình minh họa bên dưới.
Footer Carousel: Cho phép hoặc không cho phép Carousel phía dưới phần footer của
trang web, mặc định là “On” cho phép. Nếu chọn “On” chúng ta sẽ đi thiết lập thêm các
thông số tinh chỉnh cho nó ở phần tiếp theo sau đây.

58
Footer Carousel Category(s): Chọn thể loại bài viết cho phần Carousel.
Footer Carousel Locations : Carousel xuất hiện ở trang nào, mặc định là cho hiển thị
tất cả, trang chủ, bài viết Post và các trang page. Cứ để mặc định.
Footer Carousel Background Color : Màu nền cho Carousel, màu xanh mặc định đẹp
rồi, cứ để vậy mà sài.

59
Footer Widgets: Chọn “On” để hiển thị Widgets ở chân trang footer.
Footer Layout: Cho phép bạn chọn vùng Footer Widgets gồm 3 cột hay 4 cột, bạn cứ
để mặc định 3 cột mà sài.
Sau khi thiết lập các thông số vùng Footer Widgets, bạn đi vào vùng Widgets để thêm
nội dung cho vùng footer gồm 3 cột này.

60
Trong trang quản trị Admin bạn hãy chọn Appearance->Widgets bạn sẽ thấy 3 vùng
Top Footer 1, Top Footer 2, Top Footer 3. Bây giờ chúng ta thực hiện thêm các chức năng
widget vào 3 vùng này.
+ Thêm chức năng Text giới thiệu đôi nét về blog vào vùng Top Footer 1 như sau:
Bạn Click Widgets Text sau đó chọn Top Footer 1 và click vào Add Widget để đưa
chức năng Text vào vùng Widgets Top Footer 1 như hình minh họa bên dưới.

61
Sau đó bạn sẽ thấy Widget Text đã được đưa vào vùng Top Footer 1, công việc tiếp
theo là bạn nhập thông tin như hình bên dưới và Click vào “Save” để lưu lại.

62
Sau khi thực hiện xong bạn xem kết quả thực hiện như hình bên dưới.
+ Thêm chức năng Bài viết nổi bật vào vào vùng Top Footer 2 như sau:
Click vào MTS Popular Posts, chọn Top Footer 2, Click vào Add Widgets

63
Trong vùng Widgets Top Footer 2 sửa lại Title giá trị “Bài viết nhiều người xem”
như hình bên dưới và click vào “Save” để lưu lại.

64
Kết quả thêm chức năng vào vùng Widget Top Footer 2 như sau:
+ Thêm chức năng Social Profile Icons vào vùng Top Footer 3 như sau:
Click vào MTS Social Profile Icons, chọn TOP Footer 3, Click vào “Add Widget”

65
Bạn nhập tất cả các link mạng xã hội bạn có vào mục này, để mọi người liên lạc với
bạn. Nhập các link mạng xã hội như hình minh họa bên dưới

66
Và đây là kết quả

67
Các thông số còn lại như Footer Background, Copyrights Background Color Bạn cứ
để mặc định mà sài. Mặc định cũng tốt lắm rồi.
7. Thiết lập thông số “Single Posts”
Trong phần này bạn thiết lập các thông số liên quan đến cách hiển thị bài viết.
Single Post Layout: Kéo tất cả các thành phần từ box Disabled qua phía
Enabled như hình bên dưới. Cấu trúc của bài viết gồm: Nội dung bài viết “Post
Content”, tiếp đó là hộp hiển thị thông tin tác giả bài viết “Author Box”, trong hộp
này mặc định cho hiển thị địa chỉ Email của tác giả, nếu bạn muốn ẩn nó đi thì bạn
click vào dấu “+” phía trước “Author Box” sau đó chọn “Off” để ẩn đi, cuối cùng là
hiển thị các Tag của bài viết. Lưu ý bên trong “Post Content” có chứa một số thông
số để tùy biến cách hiển thị các bài viết liên quan, nếu muốn thay đổi bạn nhấp vào
dấu “+” phía trước “Post Content”.

68
Meta Info to Show : Hiển thị các thông tin liên quan ngay bên dưới tiêu đề bài viết,
Bạn cứ chọn kéo qua phía Enabled tất cả các thành phần, kết quả như hình bên dưới
Categories: Hiển thị bài viết thuộc thể loại nào, ở đây là Entertainment
Comment Count : Hiển thị cho chúng ta biết có bao nhiêu bình luận trong bài viết
này, ở đây là 0.
Date: Hiển thị Ngày bài viết được public ở đây là 18/5/2014

69
Author Name : Hiển thị tên tác giả bài viết ở đây là admin(Lê Quốc Toàn).
Tags : các tag của bài viết ở đây bài viết có tag là Soccer
Tiếp theo chúng ta cấu hình các thông số :
Breadcrumbs : hiển thị đường dẫn điều hướng các link trong website, cho biết hiện
tại chúng ta đang ở vị trí nào trong website.
Highlight Author Comment: Tô sáng tên tác giả.
Date in Comments : Hiển thị ngày xuất hiện của bình luận.

70
Hình bên dưới minh họa sự xuất hiện của Breadcrumbs. Bạn muốn tắt không cho nó
xuất hiện thì bạn chọn “Off” là xong. Mặc định là “On. Khuyến khích để “ON” tốt cho SEO.

71
Còn hình sau đây minh họa cho việc tinh chỉnh thông số Highlight Author Comment,
Date in Comments, bạn muốn tắt không cho nó xuất hiện thì bạn chọn “Off” là xong. Mặc
định là “On”.

72
Đến đây chúng ta đã thực hiện xong phần setting “Single Posts”, phần này cũng khá
đơn giản, nhưng bạn phải hiểu để làm chủ website của mình.
8. Thiết lập thông số “Social Buttons”
Đây là phần thiết lập các thông số liên quan đến các nút Social để chia sẻ bài viết trên
mạng xã hội, Tại Việt Nam chia sẻ bài viết trên facebook là thông dụng nhất, nhưng các hình
thức khác cũng nên để nút chia sẻ cho mọi người quan tâm có cái mà sài.
Social Sharing Buttons Position: Thiết lập những nút Social xuất hiện ở vị trí nào
trong bài viết, ở đây tôi chọn xuất hiện ở cuối bài viết bằng cách nhấp chọn giá trị “Below
Content”.

73
Social Sharing Buttons on Pages: Chọn “On” để các nút Social xuất hiện trên các
trang Page.
Social Media Buttons : Chọn các nút mạng xã hội bạn muốn chia sẻ(share). Mục này
bạn cứ để mặc định là đủ sài.
Nhớ khi làm xong bạn phải click vào “Save changes” để lưu lại.

74
9. Thiết lập thông số “Ad Management”
Trong phần này bạn quản lý chèn banner quảng cáo hoặc Google Adsense vào trong mỗi bài
viết.
Below Post Title : Quảng cáo xuất hiện dưới tiêu đề bài viết.
Show After X Days: quảng cáo sẽ xuất hiện bao nhiêu ngày, nhập số ngày vào đây
hoặc nhập số 0 để xuất hiện mãi mãi.
Below Post Content : Quảng cáo xuất hiện dưới nội dung bài viết.

75
10. Thiết lập thông số “Sidebars”
Quản lý Sidebar, phần này cho chúng ta tạo Sidebar mới, có thể mỗi trang chúng ta
gán một sidebar riêng. Có ứng dụng rất hay ví dụ như khách hàng xem bài viết nói về điện
thoại thì trong slidebar chúng ta đặt các banner quảng cáo bán điện thoại, hoặc khi bài viết
chúng ta viết về xe hơi thì chúng ta nên đặt các quảng cáo về xe hơi trên sidebar.
Hiện tại chúng ta chưa sử dụng đến nên cứ để mặc định.

76
11.Thiết lập thông số “Navigation”
Thực tế đây là phần tạo menu, bạn làm việc này tại Appearance->Menus. Chương
tinh chỉnh nâng cao sẽ hướng dẫn bạn tạo menu.
12. Thiết lập thông số “Theme Typography”
Phần này thiết lập font chữ, kích cỡ chữ, màu chữ… cho tất cả các thành phần liên
quan.
Trong phần Character sets: Chọn Vietnamese sau đó click “Save Changes” như hình
minh họa bên dưới:
Như vậy chúng ta đã tìm hiểu tất cả các thành phần để tinh chỉnh website, Mọi ngóc
ngách của Theme được giải thích khá kỹ càng. Phần sau chúng ta tiếp tục với các phần tinh
chỉnh theme nâng cao, để hoàn tất các chức năng của website, để sử dụng được ngay và
luôn.
Bạn muốn hiểu tất cả các thành phần của WordPress bạn tìm đọc quyển sách “Hiểu
WordPress” tại alovoice.vn nhé.
Hẹn gặp các bạn ở phần sau.

77
CHƯƠNG 5: TINH CHỈNH THEME NÂNG CAO
Để cho website đầy đủ chức năng và trông chuyên nghiệp, chúng ta tiếp tục thực hiện
một số công việc nữa, như đã định hình ban đầu, dữ liệu mẫu đã có tuy nhiên vấn đề là phải
tự tay xây dựng dữ liệu theo đúng nhu cầu thực tế sử dụng. Một số tinh chỉnh giống với nhu
cầu thực tế sử dụng như là tạo ra thể loại bài viết, viết nội dung cho bài viết rồi gán đúng thể
loại, sau đó tạo menu, tạo quảng cáo, thêm form liên lạc… Bây giờ chúng ta sẽ bắt đầu thực
hiện.
1. Tạo các thể loại
Thực hành tạo thể loại theo cấu trúc như sau:
Thiết kế WordPress
- Landing Page
- Web bán hàng
- Web công ty
- Web tin tức
Lập trình WordPress
- Lập trình Plugin
- Lập trình Theme
Online Marketing
- SEO
- FaceBook Marketing
- Youtube
- Adwords
Tiến hành tạo thể loại bài viết như cấu trúc. Nghĩa là các thể loại “Thiết kế
WordPress”, “Lập trình WordPress”, “Online Marketing” có các thể loại con bên trong nó.
Để tạo thể loại, tiến hành thực hiện như sau: Từ menu của trang quản trị Admin,
Click “Posts->Categories”. Như hình bên dưới

78
Tạo thể loại “Thiết kế WordPress”: nhập vào trường “Name” là tên của thể loại, ở
đây là “Thiết kế WordPress”, Mục Parent chọn giá trị None, bởi vì “Thiết kế WordPress” là
thể loại Cha, thể loại cao nhất, bên trên nó không có thể loại nào nữa. Nhập thông tin vào
Discription để mô tả thể loại sau đó click vào “Add new Category” để tạo thể loại.

79
“
Như vậy thể loại “Thiết kế WordPress” đã tạo xong, tiếp theo là tạo thể loại
“Landing Page”.
Cách tạo thể loại “Landing Page” cũng giống cách tạo “Thiết kế WordPress” chỉ
khác là ngay trường Parent phải chọn “Thiết kế WordPress” bởi vì “Landing Page” là thể
loại con của thể loại “Thiết kế WordPress”. Các phần còn lại nhập bình thường. Sau đó click
“Add new Category” để tạo thể loại.

80
Như vậy chúng ta tiến hành tạo hết các thể loại trên.
+ Thể loại “Web bán hàng”, “Web công ty”, “Web tin tức” tạo giống thể loại
“Landing Page”
+ Thể loại “Lập trình WordPress” và “Online Marketing” tạo giống như tạo thể loại
“Thiết kế WordPress” có “Parent” là None.
+ Thể loại “Lập trình Plugin”, “Lập trình Theme” tạo giống thể loại “Landing
Page” có thông số Parent được gán là “Lập trình WordPress”, đơn giản bởi vì hai thể loại
này là thể loại con của “Lập trình WordPress”.
+ Thể loại “SEO”, “FaceBook Marketing”, “Youtube”, “Adwords” tạo giống thể
loại “Landing Page” có thông số Parent được gán là “Online Marketing”, đơn giản bởi vì
các thể loại này là thể loại con của “Online Marketing”.
Bạn hãy tạo đầy đủ các thể loại trên.

81
2. Tạo Menu cho website
Sau khi tạo thể loại xong, chúng ta tiến hành đi tạo menu cho website, đây là phần
quan trọng tạo nên cấu trúc của website.
Để tạo Menu chúng ta thực hiện như sau:
Từ trang quản trị chọn “Appearance->menus“
Bước 1: Tạo menu
Bạn Click vào “Create a new menu”, trong trường “Menu Name” nhập vào giá trị
tên menu là MenuChinh sau đó click vào “Create Menu” để tiến hành tạo menu.

82
Bước 2: Thêm các thành phần vào menu
Bạn nhấp vào “Categories” sau đó chọn tab “View all”, trong box này click chọn tất
cả các thể loại đã tạo ở bước trên, sau đó nhấp vào “Add to Menu”.
Bạn nhấp vào “Pages” sau đó chọn tab “View all”, trong box này click Home. sau đó
nhấp vào “Add to Menu”.
Tất cả các thể loại con kéo vô trong như minh họa bên dưới, ví dụ thể loại con “Lập
trình Plugin” chúng ta muốn đưa thục vô so với thể loại cha “Lập Trình WordPress” thì thực
hiện như sau: click vào “Lập trình Plugin” giữ phím trái chuột và kéo vào trong.

83
Sau khi thực hiện xong, tiến hành gán menu vào vùng tương ứng của nó, thực hiện
bằng cách: tại “Menu Settings” mục “Theme locations” click chọn “Navigation” và
“Mobile”
Cuối cùng click vào “Save menu” để lưu lại tất cả các thiết lập.
Và kết quả là đây:
Bước 3: Thêm icon vào menu
Bạn click vào menu Home, click vào Icon (optional) chọn Home sau đó click vào
“Save Menu” như hình bên dưới:

84
Và đây là kết quả:
Với cách làm tương tự bạn có thể tạo các Icon khác cho các menu khác còn lại, xem
đây là bài thực hành thực tế dành cho bạn.
3. Thực hiện chèn quảng cáo vào vùng Header
Chọn “Media->Add New” sau đó click vào “Select Files” chọn tập tin “banner-qc-
alovoice.png” trong thư mục “banner” của tập tin thực hành “Hinh-thuc-hanh-theme-best-

85
mythemeshop.zip” mà bạn đã download từ group facebook. Chờ chút cho WordPress upload
lên trang web, sau đó click vào “Edit”
Sau khi click vào Edit, trong Box “File URL” chọn đường dẫn đến tập tin ảnh sau đó
nhấn nút phải chuột và chọn copy như hình minh họa bên dưới.
Bạn vào “Appearance->Widgets” click vào “MTS 728x90 ad” sau đó chọn “Header
Ad” và click “Add Widget”. Như hình minh họa bên dưới.

86
Sau khi click vào “Add Widget”, “Widget MTS 728x90 ad” đã được đưa vào vùng
quảng cáo “Header ad”, tại đây trong vùng “Ad image url” bạn dán (Paste) Đường link
URL của file ảnh đã copy ở bước trên. Còn trường “As link url” bạn gõ vào trang web cho
banner quảng cáo này, ví dụ ở đây là alovoice.vn Sau đó bạn click “Save” để lưu lại.
Và đây là kết quả:

87
4. Thêm các thành phần vào Sidebar
Bạn vào “Appearance->Widgets” , đầu tiên bạn xóa tất cả các Widgets trong phần
Sidebar bằng cách click lên Widget và nhấp vào delete như hình bên dưới. Chỉ để lại Widget
Search mà thôi.
Vùng Sidebar sau khi xóa như sau:

88
+ Thêm bài viết mới nhất vào vùng sidebar
Click vào “MTS Recent Posts”, chọn “Sidebar” sau đso click vào “Add Widget” như
hình bên dưới
Sau khi widget đã được đưa vào vùng Sidebar, Bạn nhập “Bài viết mới nhất” vào
trường title sau đó click “Save” để lưu lại những gì vừa làm.

89
Sau đây là kết quả.

90
+ Thêm Tag Cloud vào Sidebar

91
+ Thêm quảng cáo vào Sildebar, phần này làm các bước giống như mục “Thực hiện chèn
quảng cáo vào vùng Header” như ở trên để thêm ảnh và link cho quảng cáo.
Và đây là kết quả sau khi thêm Tag và quảng cáo:

92
Còn rất nhiều thành phần widget để thêm vào vùng sidebar này, bạn có thể khám phá
để thêm vào những thành phần phù hợp với nhu cầu sử dụng của bạn.
5. Viết bài cho Website
Nội dung trong phần này bạn sẽ viết 10 bài viết, mỗi bài có ít nhất 1 tấm hình.
Để viết bài bạn vào menu “Posts->Add New” và nhập thông tin như mô tả bên dưới
a. Nhập vào tiêu đề bài viết
b. Chèn file media (image, video, audio) vào bài viết
c. Soạn nội dung.
d. Gán thể loại cho bài viết
e. Gán Tag cho bài viết
f. Gán một tấm ảnh đại diện
g. Click vào publish để đưa bài viết lên website

93
Bạn muốn hiểu sâu hơn tất cả các thành phần viết bài của WordPress bạn tìm đọc
quyển sách “Hiểu về WordPress” tại alovoice.vn nhé.
6. Tạo Trang Liên Hệ cho Website
Trong phần này sẽ thực hiện form liên lạc, để giúp khách hàng liên lạc với quản
trị website dễ dàng hơn.
Bước 1: Tạo Trang liên hệ
1. Vào mục Pages->Add New
2. Nhập tên trang liên hệ ở đây là “Liên hệ”
3. Trong box sildebar chọn “No sidear” mục đích của việc này là sẽ không
xuất hiện sidebar khi mở trang liên hệ
4. Chọn Template là Contact Page
5. Click vào Publish để đưa trang liên hệ lên website

94
Bước 2: Chèn Shortcode vào trang liên hệ
1. Chọn “Contact->Contact forms”
2. Copy nội dung Shortcode từ “Contact form 1” như hình minh họa bên dưới
3. Sau đó vào “Pages->All Pages”, rê chuột “Liên hệ” click vào “Edit”
4. Dán(Paste) nội dung Shortcode vừa copy ở bước 2 vào trang “Liên hệ”. Xem
hình.
5. Click vào “Update” để lưu lại.

95
Bước 3: Đưa Trang liên hệ lên menu
1. Chọn “Appearance->Menus”
2. Click vào “View All”
3. Chọn “Liên hệ”
4. Click vào “Add to Menu”
5. Click vào “Save Menu”
Minh họa như hình bên dưới

96
Bước 4: Xem kết quả
Bạn click vào “Liên hệ” trên menu, tức thì forrm liên hệ sẽ hiển thị ra, bạn sẽ nhập
thông tin để gửi cho quản trị website. Muốn sửa chữ tiếng anh thành tiếng việt bạn có thể
vào “Contact->Contact Forms” rê chuột vào tiêu đề Form “Contact form 1” click vào link
“Edit”, tìm tab messages để sửa.

97
Qua chương này bạn đã hoàn thành được Website với đầy đủ các chức năng khai thác
cho mục đích công việc của bạn. Bây giờ bạn cần chức năng gì thì cài đặt Plugin tương ứng
mà sử dụng. Trong quyển sách tiếp theo chúng ta sẽ tìm hiểu một số plugin thông dụng ứng
dụng thực tế cho Website của Bạn. Như tối ưu tăng tốc độ cho website, bảo mật cho website
và làm cho website thân thiện với Google để có cơ hội lên trang nhất của bộ máy tìm kiếm
Google (SEO).
7. Đưa website lên Internet
Để đưa Website lên Internet Bạn hãy liên hệ với nhà cung cấp dịch vụ Hosting và Tên
miền. Sau đó tiến hành mua gói có hỗ trợ WordPress, bạn tiến hành cài WordPress tự động
để sử dụng.
Nếu có khó khăn trong quá trình đưa website từ local lên Internet để sử dụng, bạn có
thể vào Group nhóm trao đổi, Toàn và mọi người sẽ hỗ trợ cho Bạn.
Nhóm hỗ trợ: https://www.facebook.com/groups/HocWordpressTaiAlovoice

98
Bạn muốn hiểu tất cả các thành phần của WordPress, bạn tìm đọc quyển sách “Hiểu
về WordPress” tại alovoice.vn nhé.

99
Trong quá trình đọc quyển sách này bạn có thắc mắc muốn gặp trực tiếp giảng viên
để trao đổi, để hiểu thêm, mời bạn đăng ký tham dự khóa học hoàn toàn MIỄN PHÍ trong 1
ngày tại Alovoice – Hướng dẫn hoàn thành website chuẩn SEO trong 1 ngày. Khóa học diễn
ra vào ngày thứ 7 hàng tuần từ 8h30 đến 18h00. Bạn vào http://alovoice.vn để đăng ký và
nhận lịch học, địa điểm học. Bạn tham dự học chỉ trả tiền cà phê, nước bạn uống và thuê
phòng, trang thiết bị phục vụ cho việc học tập(Phòng riêng, âm thanh, ánh sáng, wifi, máy
chiếu projector…)…150K. Bạn được tặng miễn phí tên miền(sub-domain) & hosting trị giá
370K trong 6 tháng, tặng Theme Premium ( mua trả phí ) trị giá 59$ tương dương 1,3 triệu
đồng để thực hành, tặng giá trị khóa học tương đương 3 triệu đồng.
Vì học viên đông nên bạn đăng ký sớm sẽ được học sớm. http://alovoice.vn
CHÚC BẠN THÀNH CÔNG

Sach hoc thuc hanh wordpress huong dan xay dung website tieng viet hay nhat

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (8)

Similar to Sach hoc thuc hanh wordpress huong dan xay dung website tieng viet hay nhat

Similar to Sach hoc thuc hanh wordpress huong dan xay dung website tieng viet hay nhat (20)

Sach hoc thuc hanh wordpress huong dan xay dung website tieng viet hay nhat