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



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



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



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 – [email protected]

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

http://alovoice.vn/

https://www.facebook.com/groups/HocWordpressTaiAlovoice



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:

https://www.apachefriends.org/download.html



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.



Vị trí để đặt toàn bộ source code của WordPress là C:\XAMPP\htdocs, 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

http://localhost/

http://localhost/phpMyAdmin



+ Để 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.

https://wordpress.org/



+ 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:



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)

http://localhost/



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



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.



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.



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



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

http://localhost/



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.



Permalink Settings

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



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.



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ố.



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.



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.



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.

http://localhost/wp-admin



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.




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



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,



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.



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é!

http://localhost/



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.

https://mythemeshop.com/multiple/themes/best/



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.

http://demo.mythemeshop.com/s/?theme=Best



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.



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



Ở 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.

https://lookaside.fbsbx.com/file/best_mythemeshop.zip?token=AWwQWya56SFgLWNOTKzc7cHYUmHEr5a85Kvtu-3pNSW2Xi6unmS-15Qmmf49NuEAtU88aynWY8xJnMsYUXngvtnjEyPhxsCwSZeCxKliZpHaTEDU1IeA34q7R9MiOqj-bHWK3cy3z8_J5kBYpy7dTodWBQNJ5lDpjXRdRa00Mha_yQ



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.

http://localhost/



Đế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.



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.

http://localhost/



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.



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.

https://www.facebook.com/groups/HocWordpressTaiAlovoice/



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.



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…



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”.



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.




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.

https://goo.gl/CNEQmL



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





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”.



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




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.



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ả.



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.



- 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



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:



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



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.



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.



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.



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.



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.



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.



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.



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.



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.



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



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.



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”



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



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



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”.



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



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.



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.



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”.



Đế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”.



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.



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.



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.



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.



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



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.



“

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.



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.



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.



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.



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:



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-



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.



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ả:



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:



+ 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.



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



+ Thêm Tag Cloud vào Sidebar



+ 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:



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



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



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.



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



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.



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




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é.



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

http://alovoice.vn/

http://alovoice.vn/