Giáo trình Thiết kế và quản trị web (Phần 2)

 126 
CHƯƠNG 5. JAVASCRIPT 
5.1. JavaScript là gì 
Là ngôn ngữ kịch bản, thông dịch và hướng đối tượng hỗ trợ hiển thị các trang 
Web sinh động hơn, JavaScript thì hoàn toàn miễn phí. 
Là ngôn ngữ ở phía client, sử dụng kiểm tra nhập liệu hay các yếu tố khác (phiên bản trình 
duyệt) 
5.2. Chèn mã Javascript 
 Trực tiếp trong file HTML: 
document.write("Hello World!"); 
 Chèn từ file .js: 
 127 
Vị trí chèn thẻ thường nằm trong thẻ head. Ghi chú trong javascript sử 
dụng // hoặc /* */ 
5.3. THẺ VÀ 
Cặp thẻ này dùng để định rõ nội dung thông báo cho người sử dụng biết trình duyệt không 
hỗ trợ JavaScript. Khi đó trình duyệt sẽ không hiểu thẻ và nó bị lờ đi, còn đoạn 
mã nằm trong cặp thẻ này sẽ được Navigator hiển thị. Ngược lại, nếu trình duyệt có hỗ trợ 
JavaScript thì đoạn mã trong cặp thẻ sẽ được bỏ qua. Tuy nhiên, điều này cũng 
có thể xảy ra nếu người sử dụng không sử dụng JavaScript trong trình duyệt của mình 
bằng cách tắt nó đi trong hộp Preferences/Advanced 
 Trang này có sử dụng JavaScript. Do đó bạn cần sử dụng trình duyệt 
Netscape Navigator từ version 2.0 trở đi! 
 Hãy kích chuột vào đây để tải về 
phiên bản Netscape mới hơn 
Nếu bạn đã sử dụng trình duyệt Netscape từ 2.0 trở đi mà vẫn đọc được dòng chữ này thì hãy bật 
Preferences/Advanced/JavaScript lên 
5.4. Các lệnh xuất thông báo cơ bản 
 Thường sử dụng xuất các thông báo và là công cụ để kiểm lỗi(debug) 
alert(),prompt(),confirm() 
 128 
alert("Hi there"); 
confirm("I′m gonna do something, okay?"); 
prompt("What should I do?"); 
5.5. Chèn chuỗi vào nội dung trang HTML 
document.write("Hello"); 
 129 
 Xin Chào 
Có thể tạo một trang Web từ javascript 
5.6. Biến-Kiểu dữ liệu 
5.6.1 Khai báo biến 
var TenBien; 
Cách đặt tên biến như trong C++, Không cần xác định kiểu dữ liệu cho biến, 
KDL được xác định dựa trên giá trị gán cho biến. 
5.6.2 Gán 
TenBien = [Giá Trị]; 
5.6.3 Các liểu dữ liệu 
5.6.3.1 Undefined 
var foo; 
alert(foo);//chua xac dinh vi chua co gia tri gan cho bien 
5.6.3.2 Null 
var foo = null; 
alert(foo); 
 130 
5.6.3.3 Numbers 
var foo = 5; 
alert(foo); 
5.6.3.4 Strings 
var foo = "five"; 
alert( foo ); 
5.6.3.5 Booleans 
var foo = true; 
5.6.3.6 Arrays 
Khai báo, tạo mảng, mảng đc đánh số từ 0. 
var foo = [5, "five", "5"]; alert( foo[0]); // Alerts "5" alert( foo[1]); // Alerts "five" 
alert( foo[2]); // Also alerts "5" 
5.6.4 Các toán tử so sánh và toán học 
Tương tự C++ 
5.6.4.1 Toán tử == và === 
alert( "5" == 5 ); // "true", không phân biệt KDL 
alert( "5" === 5 ); // "false”, phân biệt KDL 
alert( "5" !== 5 ); // "true", phân biệt KDL 
 131 
5.6.4.2 Chuỗi 
Khi được sử dụng với chuỗi, toán tử + được coi là kết hợp hai chuỗi, ví dụ: 
"abc" + "xyz" được "abcxyz". 
5.6.4.3 Logic 
JavaScript hỗ trợ các toán tử logic sau đây: 
expr1 && expr2 
Là toán tử logic AND, trả lại giá trị đúng nếu cả 
expr1 và expr2 cùng đúng. 
expr1 || expr2 
Là toán tử logic OR, trả lại giá trị đúng nếu ít nhất 
một trong hai expr1 và expr2 đúng. 
! expr 
Là toán tử logic NOT phủ định giá trị của 
expr. 
5.7. Các Lệnh 
5.7.1 Câu Lệnh Điều Kiện 
Câu lệnh điều kiện cho phép chương trình ra quyết định và thực hiện công việc nào đấy 
dựa trên kết quả của quyết định. Trong JavaScript, câu lệnh điều kiện là if...else 
Câu lệnh này cho phép bạn kiểm tra điều kiện và thực hiện một nhóm lệnh nào đấy dựa 
trên kết quả của điều kiện vừa kiểm tra. Nhóm lệnh sau else không bắt buộc phải có, nó cho 
phép chỉ ra nhóm lệnh phải thực hiện nếu điều kiện là sai. 
Cú pháp 
if ( ) 
{ 
 132 
} 
else 
{ 
} 
//Các câu lệnh với điều kiện đúng 
//Các câu lệnh với điều kiện sai 
Ví dụ: 
if (x==10) 
{ 
document.write(“x bằng 10, đặt lại x bằng 0.”); 
x = 0; 
} 
else 
{ 
document.write(“x không bằng 10.”); 
} 
5.7.2 Câu Lệnh Lặp 
5.7.2.1 Vòng Lặp for 
Vòng lặp for thiết lập một biểu thức khởi đầu - initExpr, sau đó lặp một đoạn mã cho đến 
khi biểu thức được đánh giá là đúng. Sau khi kết thúc mỗi vòng lặp, biểu thức 
incrExpr được đánh giá lại. 
 133 
Cú pháp: 
for (initExpr; ; incrExpr){ 
//Các lệnh được thực hiện trong khi lặp 
} 
5.7.2.2 While 
Vòng lặp while lặp khối lệnh chừng nào còn được đánh giá là đúng 
Cú pháp: 
while () 
{ 
//Các câu lệnh thực hiện trong khi lặp 
} 
5.7.2.2.1 BREAK 
Câu lệnh break dùng để kết thúc việc thực hiện của vòng lặp for hay while. Chương trình 
được tiếp tục thực hiện tại câu lệnh ngay sau chỗ kết thúc của vòng lặp. 
Cú pháp 
break; 
Đoạn mã sau lặp cho đến khi x lớn hơn hoặc bằng 100. Tuy nhiên nếu giá trị x 
đưa vào vòng lặp nhỏ hơn 50, vòng lặp sẽ kết thúc 
5.7.2.2.2 CONTINUE 
 134 
Lệnh continue giống lệnh break nhưng khác ở chỗ việc lặp được kết thúc và bắt đầu từ đầu 
vòng lặp. Đối với vòng lặp while, lệnh continue điều khiển quay lại ; với for, lệnh 
continue điều khiển quay lại incrExpr. 
Cú pháp continue; 
5.7.2.3 CÁC CÂU LỆNH THAO TÁC TRÊN ĐỐI TƯỢNG 
5.7.2.3.1 FOR...IN 
Câu lệnh này được sử dụng để lặp tất cả các thuộc tính (properties) của một đối tượng. Tên 
biến có thể là một giá trị bất kỳ, chỉ cần thiết khi bạn sử dụng các thuộc tính trong vòng lặp. Ví 
dụ sau sẽ minh hoạ điều này 
Cú pháp 
for ( in ) 
{ 
//Các câu lệnh 
} 
Ví dụ 
Ví dụ sau sẽ lấy ra tất cả các thuộc tính của đối tượng Window và in ra tên của 
mỗi thuộc tính. Kết quả được minh hoạ trên hình 5.2. 
for in example 
 135 
document.write("the properties of the window object are: "); 
for (var x in window) 
document.write(" "+ x + ", "); 
5.7.2.3.2 NEW 
Biến new được thực hiện để tạo ra một thể hiện mới của một đối tượng 
Cú pháp 
objectvar = new object_type ( param1 [,param2]... [,paramN]) 
Ví dụ sau tạo đối tượng person có các thuộc tính firstname, lastname, age, sex. Chú ý rằng 
từ khoá this được sử dụng để chỉ đối tượng trong hàm person. Sau đó ba thể hiện của đối tượng 
person được tạo ra bằng lệnh new 
new example 
 136 
function person(first_name, last_name, age, sex){ this.first_name=first_name; 
this.last_name=last_name; 
this.age=age; 
this.sex=sex; 
} 
person1= new person("Thuy", "Dau Bich", "23", "Female"); person2= new person("Chung", "Nguyen 
Bao", "24", "Male"); person3= new person("Binh", "Nguyen Nhat", "24", "Male"); person4= new 
person("Hoàn", "Đỗ Văn", "24", "Male"); 
document.write ("1. "+person1.last_name+" " + person1.first_name + "" 
); 
document.write("2. "+person2.last_name +" "+ person2.first_name + ""); 
document.write("3. "+ person3.last_name +" "+ person3.first_name + ""); document.write("4. "+ 
person4.last_name +" "+ person4.first_name+""); 
5.7.2.3.3 THIS 
Từ khoá this được sử dụng để chỉ đối tượng hiện thời. Đối tượng được gọi 
thường là đối tượng hiện thời trong phương thức hoặc trong hàm. 
Cú pháp 
 137 
this [.property] 
Có thể xem ví dụ của lệnh new. 
5.7.2.3.4 WITH 
Lệnh này được sử dụng để thiết lập đối tượng ngầm định cho một nhóm các lệnh, bạn 
có thể sử dụng các thuộc tính mà không đề cập đến đối tượng. 
Cú pháp 
with (object) 
{ 
// statement 
} 
Ví dụ: 
Ví dụ sau chỉ ra cách sử dụng lệnh with để thiết lập đối tượng ngầm định là 
document và có thể sử dụng phương thức write mà không cần đề cập đến đối tượng document 
With Example 
with (document){ 
write(“This is an exemple of the things that can be done ”); 
 138 
write(“With the with statment. ”); 
write(“This can really save some typing”); 
} 
5.8. Hàm (FUNCTIONS) 
JavaScript cũg cho phép sử dụng các hàm. Mặc dù không nhất thiết phải có, song các hàm 
có thể có một hay nhiều tham số truyền vào và một giá trị trả về. Bởi vì JavaScript là ngôn ngữ có 
tính định kiểu thấp nên không cần định nghĩa kiểu tham số và giá trị trả về của hàm. Hàm có thể 
là thuộc tính của một đối tượng, trong trường hợp này nó được xem như là phương thức của đối 
tượng đó. 
Lệnh function được sử dụng để tạo ra hàm trong JavaScript. 
Cú pháp 
function fnName([param1],[param2],...,[paramN]) 
{ 
//function statement 
} 
Ví dụ: 
 139 
Ví dụ sau minh hoạ cách thức tạo ra và sử dụng hàm như là thành viên của một 
đối tượng. Hàm printStats được tạo ra là phương thức của đối tượng person 
function example 
function person(first_name, last_name, age, sex) 
{ 
this.first_name=first_name; this.last_name=last_name; this.age=age; 
this.sex=sex; 
this.printStats=printStats; 
} 
function printStats() { 
with (document) { 
write (" Name :" + this.last_name + " " + this.first_name + "" ); 
write("Age :"+this.age+""); 
write("Sex :"+this.sex+""); 
} 
} 
 140 
person1= new person("Thuy", "Dau Bich", "23", "Female"); person2= new person("Chung", "Nguyen 
Bao", "24", "Male"); person3= new person("Binh", "Nguyen Nhat", "24", "Male"); person4= new 
person("Hoan", "Do Van", "23", "Male"); person1.printStats(); 
person2.printStats(); person3.printStats(); person4.printStats(); 
5.8.1 EVAL 
Hàm này được sử dụng để đánh giá các biểu thức hay lệnh. Biểu thức, lệnh hay các đối 
tượng của thuộc tính đều có thể được đánh giá. Đặc biệt hết sức hữu ích khi đánh giá các biểu 
thức do người dùng đưa vào (ngược lại có thể đánh giá trực tiếp). 
Cú pháp: 
returnval=eval (bất kỳ biểu thức hay lệnh hợp lệ trong Java) 
Ví dụ: 
eval example 
var string=”10+ Math.sqrt(64)”; 
document.write(string+ “=”+ eval(string)); 
 141 
5.8.2 PARSEINT 
Hàm này chuyển một chuỗi số thành số nguyên với cơ số là tham số thứ hai (tham số này 
không bắt buộc). Hàm này thường được sử dụng để chuyển các số nguyên sang cơ số 10 và 
đảm bảo rằng các dữ liệu đưọc nhập dưới dạng ký tự được chuyển thành số trước khi tính toán. 
Trong trường hợp dữ liệu vào không hợp lệ, hàm parseInt sẽ đọc và chuyển dạng chuỗi đến vị 
trí nó tìm thấy ký tự không phải là số. Ngoài ra hàm này còn cắt dấu phẩy động. 
Cú pháp 
parseInt (string, [, radix]) Ví dụ: 
 PERSEINT EXEMPLE 
document.write("Converting 0xC hex to base-10: " + parseInt(0xC,10) + ""); 
document.write("Converting 1100 binary to base-10: " + parseInt(1100,2) + ""); 
 142 
5.8.3 PARSEFLOAT 
Hàm này giống hàm parseInt nhưng nó chuyển chuỗi thành số biểu diễn dưới dạng dấu 
phẩy động. 
Cú pháp 
parseFloat (string) 
5.9. Sự kiện 
JavaScript là ngôn ngữ định hướng sự kiện, nghĩa là sẽ phản ứng trước các sự kiện xác 
định trước như kích chuột hay tải một văn bản. Một sự kiện có thể gây ra việc thực hiện một 
đoạn mã lệnh (gọi là các chương triình xử lý sự kiện) giúp cho chương trình có thể phản ứng 
một cách thích hợp. 
Chương trình xử lý sự kiện (Event handler): Một đoạn mã hay một hàm được thực hiện 
để phản ứng trước một sự kiện gọi là chương trình xử lý sự kiện. Chương trình xử lý sự kiện 
được xác định là một thuộc tính của một thẻ HTML: 
Ví dụ sau gọi hàm CheckAge() mỗi khi giá trị của trường văn bản thay đổi: 
Đoạn mã của chương trình xử lý sự kiện không là một hàm; nó là các lệnh của JavaScript 
cách nhau bằng dấu chấm phẩy. Tuy nhiên cho mục đích viết thành các module nên viết dưới 
dạng các hàm. 
Một số chương trình xử lý sự kiện trong JavaScript: 
 143 
onBlur 
Xảy ra khi input focus bị xoá từ thành phần form 
onClick 
Xảy ra khi người dùng kích vào các thành phần hay liên 
kết của form. 
onChange 
Xảy ra khi giá trị của thành phần được chọn thay đổi 
onFocus 
Xảy ra khi thành phần của form được focus(làm nổi lên). 
onLoad 
Xảy ra trang Web được tải. 
onMouseOver 
Xảy ra khi di chuyển chuột qua kết nối hay anchor. 
onSelect 
Xảy ra khi người sử dụng lựa chọn một trường nhập dữ 
liệu trên form. 
onSubmit 
Xảy ra khi người dùng đưa ra một form. 
onUnLoad 
Xảy ra khi người dùng đóng một trang 
Sau đây là bảng các chương trình xử lý sự kiện có sẵn của một số đối tượng. 
Các đối tượng này sẽ được trình bày kỹ hơn trong phần sau 
Đối tượng Chương trình xử lý sự kiện có sẵn 
Selection list onBlur, onChange, onFocus 
Text onBlur, onChange, onFocus, onSelect 
Textarea onBlur, onChange, onFocus, onSelect 
Button onClick 
Checkbox onClick 
Radio button onClick 
Hypertext link onClick, onMouseOver, onMouseOut 
Clickable Imagemap area onMouseOver, onMouseOut 
Reset button onClick 
Submit button onClick 
Document onLoad, onUnload, onError 
 144 
Window onLoad, onUnload, onBlur, onFocus 
Framesets onBlur, onFocus 
Form onSubmit, onReset 
Image onLoad, onError, onAbort 
Ví dụ sau là một đoạn mã script đơn giản của chương trình xử lý sự kiện thẩm định giá trị 
đưa vào trong trường text. Tuổi của người sử dụng được nhập vào trong trường này và chương 
trình xử lý sự kiện sẽ thẩm định tính hợp lệ của dữ liệu đưa vào. Nếu không hợp lệ sẽ xuất 
hiện một thông báo yêu cầu nhập lại. Chương trình xử lý sự kiện được gọi mỗi khi trường age 
bị thay đổi và focus chuyển sang trường khác. 
 An Event Handler Exemple 
function CheckAge(form) { 
if ( (form.age.value120) ) 
{ 
alert("Tuổi nhập vào không hợp lệ! Mời bạn nhập lại"); 
form.age.value=0; 
} 
} 
 145 
Nhập vào tên của bạn: 
tên đệm <input type=text name="dem" 
maxlength=15 size=10> họ 
age <input type=text name="age" maxlength=3 size=2 onchange=" CheckAge 
(phieu_dieu_tra)"> 
Bạn thích mùa nào nhất: 
Mùa xuân Mùa hạ<input type=radio name="mua" 
value="mua ha"> 
Mùa thu 
mùa đông 
Hãy chọn những hoạt động ngoài trời mà bạn yêu thích: 
Đi bộ 
Trượt tuyết 
Thể thao dưới nước<input type=”checkbox” name="hoat_dong" value="Duoi 
 146 
nuoc"> 
Đạp xe 
5.10. Các đối tượng trong javascript 
Như đã nói JavaScript là ngôn ngữ lập trình dựa trên đối tượng, nhưng không hướng đối 
tượng bởi vì nó không hỗ trợ các lớp cũng như tính thừa kế. 
 147 
Trong sơ đồ phân cấp các đối tượng của JavaScript, các đối tượng con thực sự là các thuộc 
tính của các đối tượng bố mẹ. Trong ví dụ về chương trình xử lý sự kiện trước đây form tên 
phieu_dieu_tra là thuộc tính của đối tượng document và trường text age là thuộc tính của 
form phieu_dieu_tra. Để tham chiếu đến giá trị của age, bạn phải sử dụng: 
document.phieu_dieu_tra.age.value 
Các đối tượng có thuộc tính (properties), phương thức (methods), và các chương trình xử lý 
sự kiện (event handlers) gắn với chúng. Ví dụ đối tượng document có thuộc tính title phản ánh 
nội dung của thẻ của document. Bên cạnh đó bạn thấy phương thức document.write 
được sử dụng trong nhiều ví dụ để đưa văn bản kết quả ra document. 
 148 
Đối tượng cũng có thể có các chương trình xử lý sự kiện. Ví dụ đối tượng link có hai chương 
trình xử lý sự kiện là onClick và onMouseOver. onClick được gọi khi có đối tượng link được 
kích, onMouseOver được gọi khi con trỏ chuột di chuyển qua link. 
Khi bạn tải một document xuống Navigator, nó sẽ tạo ra một số đối tượng cùng với những 
giá trị các thuộc tính của chúng dựa trên file HTML của document đó và một vài thông tin 
cần thiết khác. Những đối tượng này tồn tại một cách có cấp bậc và phản ánh chính cấu trúc 
của file HTML đó. 
Trong sơ đồ phân cấp này, các đối tượng con chính là các thuộc tính của một đối tượng 
cha. Ví dụ như một form tên là form1 chính là một đối tượng con của đối tượng document và 
được gọi tới là document.form1 
Tất cả các trang đều có các đối tượng sau đây 
• navigator: có các thuộc tính tên và phiên bản của Navigator đang được sử 
dụng, dùng cho MIME type được hỗ trợ bởi client và plug-in được cài đặt trên client. 
 ... hưng thực tế chúng là hai khái niệm hoàn toàn khác nhau. 
Tôi sẽ giải thích dễ hiểu nhất cho bạn. 
Với WordPress.com là một dịch vụ cho phép bạn tạo một website miễn phí trên website 
của họ. Họ có có giao diện có sẵn để bạn tùy chỉnh với chức năng kéo thả dễ dàng. Bạn 
được phép sử dụng một dung lượng họ cho phép (3GB nếu vượt quá sẽ phải trả thêm 
tiền). 
Nói chung là cài đặt rất dễ dàng, ko cần thuê hosting. Để sử dụng tên miền riêng bạn cần 
chi trả 25$/năm. Rất tiện đối với người mới sử dụng WordPress 
Nhưng nó cũng có những nhược điểm đó là: 
 Bạn không thể cài đặt plugin (tính năng làm nên tên tuổi của wordpress). Nếu muốn 
sử dụng plugin bạn phải trả phí ( 3750$/tháng, quá chát) 
 Không thể sử dụng theme bên ngoài những theme của họ 
 Bạn không có quyền kiểm soát 100% với website của mình. Họ có thể xóa website 
của bạn bất kỳ lúc nào.. 
Với WordPress.org là một website cung cấp bộ mã nguồn mở của nền tảng WordPress 
được cập nhật liên tục và hoàn toàn MIỄN PHÍ. 
Kèm theo đó là thư viện plugin miễn phí, diễn dàn hỗ trợ về wordprss. Điều bạn cần làm 
là: 
 Tải bộ mã nguồn tại wordpress.org 
 Mua một hosting và tên miền 
 Tiền hành cài đặt WordPress 
Ưu điểm của WordPress.org các bạn có thể thấy bạn có thể dễ dàng thay đổi giao diện, sử 
dụng plugin, toàn quyền kiểm soát 100% với website. Nếu bạn đang có ý định xây dựng 
website để kinh doanh thì hãy lựa WordPress.org ngay nhé. 
 226 
Mình đã có bài viết so sánh về WordPress.com và WordPress.org bấm vào link này để 
xem. 
6.4. Cài Đặt WordPress 
Để sử dụng WordPress bạn cần có một tên miền và một hosting ( thường thì khi mới sử 
dụng WordPress bạn chi cần Shared Hosting là đủ). 
Tiếp theo là mua một tên miền. Có một số nhà cung cấp tên miền rất nổi tiếng 
như: Godaddy, NameCheap, BigRock và 1and1 
Sau khi có tên miền và hosting là bạn có thể tiến hành cài đặt WordPress. Những bước 
tiến hành cài đặt khá đơn giản, bạn không cần phải là người am hiểu về kỹ thuật cũng có 
thể làm được 
Để bắt đầu sử dụng website, bạn cần đăng nhập vào hệ thống bằng tên đăng nhập và mật 
khẩu được điền trong quá trình cài đặt. Bạn có thể đăng nhập qua đường 
dẫn  và nhìn thấy màn hình dưới đây: 
giao diện đăng nhập WordPress 
Khi đã đăng nhập thành công, trang đầu tiên nhìn thấy sẽ là WordPress dashboard (bảng 
tin). 
Đây là khu vực chính của quản trị viên WordPress nới bạn cài đặt thông số kỹ thuật cho 
website, tạo bài viết và trang, cài đặt giao diện và plugin và nhiều tính năng khác nữa. 
 227 
Trong lần cài đặt đầu tiên của WordPress, bạn sẽ nhìn thấy khu vực “Chào mừng tới 
WordPress” ngay trên đầu màn hình. Khu vực này chứa một số đường dẫn giúp bạn hiểu 
rõ hơn về WordPress cũng như cách sử dụng chúng. 
Ở trong bài viết này mình sử dụng WordPress Tiếng Việt, nếu các bạn không quen sử 
dụng Tiếng Anh có thể chuyển sang cho dễ dùng. 
bảng tin WordPress 
Bạn có thể quan sát, chiêm ngưỡng giao diện mặc định của WordPress được cài đặt ở 
ngoài trang chủ. Trong phần cuối của bài viết này, chúng tôi sẽ hướng dẫn bạn cách thay 
đổi giao diện của website bằng cách cài đặt một giao diện mới. 
6.4.1. Cài đặt 
Có một vài thông số cài đặt mà bạn cần phải quan tâm trong lần đầu tiên sử dụng 
WordPress. Đây là cơ hội tốt để bạn làm quen với hệ thống. Để bắt đầu cài đặt căn bản, 
trong danh mục bên trái, chọn Cài đặt > Tổng quan và bạn sẽ nhìn thấy một vài tuỳ 
chọn cho website: 
 Tiêu đề trang (tên của website) 
 Khẩu hiệu (miêu tả trang web) 
 Địa chỉ WordPress (vị trí của website) 
 Địa chỉ trang web (trang chủ của website nếu bạn cài đặt WordPress trong thư mục 
khác) 
 Địa chỉ thử điện tử (email của quản trị viên) 
 Thành viên (chọn nếu bạn muốn cho người khác đăng ký là thành viên của website) 
 Vai trò thành viên mới (vai trò của người mới đăng ký trong website) 
 Múi giờ 
 Định dạng ngày 
 228 
 Định dạng thời gian 
 Tuần bắt đầu vào 
 Ngôn ngữ của trang 
cài đặt tổng quan WordPress 
Bạn không nhất thiết phải thay đổi mọi thứ ở đây, nhưng hãy nhớ rằng có thể bạn sẽ cần 
đến chúng trong tương lai khi bạn thay đổi tên miền, thay đổi hosting hay đổi tiêu đề. 
6.4.2. Đường dẫn tĩnh 
Việc tiếp theo cần phải làm là cài đặt “đường dẫn tĩnh” – cấu trúc URL mà website sẽ sử 
dụng. Mặc định của WordPress, cấu trúc này sẽ có dạng: 
 229 
Đây không phải là một cấu trúc tuyệt vời và không thân thiện với các công cụ tìm kiếm. 
Tuy nhiên, WordPress cung cấp cho người dùng rất nhiều lựa chọn có sẵn để thay đổi cấu 
trúc mặc định như: 
Trông đã tốt hơn nhiều rồi đúng không nào. Tuy nhiên, chúng tôi khuyên bạn nên sử 
dụng lựa chọn Tên bài và sử dụng tên bài viết để có đường dẫn ngắn nhất và đẹp nhất 
trong mắt người dùng: 
Và đừng quên chọn nút “Lưu thay đổi“. 
 230 
tùy chỉnh permalinks 
6.4.3. Thảo luận 
Bước tiếp theo với những trang WordPress mới là cài đặt thảo luận – tính năng cho phép 
người dùng bình luận trong website của bạn. 
Đây là một tính năng tuyệt vời của WordPress nhưng cần phải được quản lý để tránh các 
spammer. 
 231 
Để làm việc này, truy cập vào “Cài đặt” > “Thảo luận”. Chúng tôi khuyên bạn nên bỏ 
chọn “Cho phép liên kết các thông báo từ các blog khác (pingbacks và trackbacks) trên 
các bài viết mới” vì tính năng này sẽ gây nhiều phiên phức cho website sau này. 
Để hiểu rõ hơn vấn đề này, chúng tôi đã miêu tả rất chi tiết trong bài viết làm thế nào để 
vô hiệu hóa self pingbacks. 
Những lựa chọn còn lại hãy cứ để mặc định nếu như bạn không biết chắc mình đang làm 
gì. Bạn có thể thay đổi chúng sau nếu như website bắt đầu có nhiều bình luận spam. 
Tùy chọn thảo luận 
Ở phía cuối của trang web, có một vài lựa chọn cho ảnh đại diện. Nơi bạn nhìn thấy hình 
người nhỏ bên trái tên người. Bạn có thể chọn ảnh mặc định người cho các thành viên 
trong trường hợp họ không có bất kỳ ảnh đại diện nào hoặc có thể tắt chức năng đó nếu 
bạn muốn. 
 232 
ảnh đại diện bình luận 
6.4.4. Hồ sơ của bạn 
Một phần bạn không thể bỏ qua đó là trang hồ sơ cá nhân của bạn. Phần này nằm trong 
“Thành viên” > “Hồ sơ của bạn”, cho phép bạn cài đặt một vài tuỳ chọn trong quá trình 
sử dụng website và thông tin cá nhân của bạn. 
Phần trên cùng của trang, có một lựa chọn cho phép bạn có thể tắt tính năng “Hiển thị”. 
Chúng tôi khuyên bạn không nên làm như vậy vì nó sẽ gây khó khăn trong quá trình soạn 
thảo bài viết. 
Bạn có thể tuỳ chọn màu sắc hiển thị cho khu vực admin nếu thấy màu sắc mặc định quá 
nhàm chán. Hay ẩn “Thanh công cụ” trong quá trình sử dụng website. Thanh công cụ 
được hiển thị trên cùng của trang web với một vài tính năng cho phép bạn chỉnh sửa bài 
viết, website một cách nhanh và thuận tiện nhất. 
Cá nhân tôi khuyên bạn cứ giữ nguyên như vậy bởi tôi thích sự thuận tiện trong quá trình 
vận hành website của mình. 
 233 
hồ sơ cá nhân của bạn 
Ngay bên dưới những tuỳ chọn này, bạn có thể nhập tên, thông tin liên hệ, website cá 
nhân và đoạn miêu tả ngắn về bạn. 
6.5. Các Chức Năng Chính Trong WordPress 
Vậy là bạn đã khá quen thuộc với cách cài đặt wordpress, cấu hình chung của WordPress. 
Bây giờ là thời điểm sử dụng chúng vào những mục đích hữu ích hơn và xây dưng nội 
dung cho website của bạn. Trong phần này, tôi sẽ giới thiệu cho bạn cách đăng bài viết và 
trang với một vài tuỳ chọn mà bạn có thể sử dụng sau này. 
Vậy bài viết là gì? và trang là gì? Chúng tôi đã chỉ ra sự khác biệt giữa Post và Page trong 
WordPress rất kỹ lưỡng trong bài viết trên. 
6.5.1. Soạn thảo bài viết 
Chúng ta cùng đi đến trang soạn thảo bài viết, nơi bạn sẽ dành gần như toàn bộ thời gian 
để tạo ra những nội dung giá trị và công khai chúng trên trang web của mình. 
Thậm chí, bạn cũng có thể đặt lịch xuất bản cho chúng vào thời điểm mà bạn muốn. Để 
làm được việc đó, hãy truy cập vào “Bài viết” > “Viết bài mới“. 
Trang soạn thảo bài viết có chứa một ô trống cho phép bạn nhập tiêu đề bài viết và một ô 
to hơn nằm ngay bên dưới để nhập nội dung của bài viết. 
 234 
Ngay phía trên, bạn sẽ thấy “trình soạn thảo nâng cao”, nơi cho phép bạn chỉnh sửa định 
dạng bài viết như bôi đạm, in nghiêng, thêm đường dẫn Và phía trên công cụ soản thảo 
là nút “Thêm Media“, nơi bạn dùng để thêm ảnh, video, gif.v.. cho bài viết. 
thêm bài viết mới 
Hãy trải nghiệm ngay bây giờ bằng cách nhập tiêu đề bài viết và một vài nội dung tuỳ 
thích, sau đó bấm “Lưu nháp”. Với chức năng lưu nháp bài viết đó sẽ được lưu tạm như 
một bản nháp để bạn có thể tiếp tục khi bài viết còn chưa hoàn thiện 
Nếu muốn thêm đường dẫn, hãy chọn đoạn chữ mà bạn muốn gắn link cho chúng và chọn 
biểu tượng đường dẫn, rồi nhập đường dẫn bất kỳ bạn muốn. Bạn có thể chọn nút “Xem 
thử” để xem thành quả của mình trên trang web. Bạn yên tâm, bài viết chưa được công 
khai trong chế độ này.
Mặc định, bạn sẽ có nhiều lựa chọn để định dạng bài viết trên thanh công cụ soản thảo. 
Khi bấm vào biểu tượng ở ngoài cùng bên tay phải trên thanh công cụ với tên gọi “Hiện 
hoặc ẩn thanh công cụ”, sẽ xuất hiện dòng thứ hai ngay bên dưới với nhiều lựa chọn hơn 
 235 
cho định dạng bài viết.
Một điều quan trọng nữa là đưa bài viết đến được nhiều người đọc. Một bài viết có hay 
đến đâu mà không ai đọc thì cũng thật vô ích phải không. 
Vì vậy cho nên chúng ta phải viết bài chuẩn SEO. Điều đó giúp bài viết của bạn có thứ 
hạng cao hơn trong công cụ tìm kiếm, thứ hạng cao hơn đồng nghĩa việc có nhiều traffic 
hơn và được nhiều người biết đến hơn. 
6.5.2. Hướng dẫn tạo trang (Page) 
Như ở trên mình đã có bài giải thích sự khác biệt giữa Post và Page. Nói tóm lại Post 
mang tính cập nhật thay đổi liên tục, còn Page rất ít thay đổi, và có tính độc lập thường 
chỉ tạo một lần sử dụng mãi mãi như trang Liên hệ của website. 
Để tạo Trang(Page) bên thang Menu bên trái Page » Add New 
Giống như tạo một bài viết mới sẽ có một khung soạn thảo văn bản hiện ra cho bạn. Nhập 
nội dung mà bạn muốn ở dưới khung 
Ỏ bên tay phải sẽ có thêm một ô đó là Page Attributes (thuộc tính trang). 
 236 
Bạn có thể thêm trang mẹ con cho trang mới tạo: giống như việc tạo một thư mục con 
trên máy tính. Trang con sẽ có đường dẫn: tenmiencuaban/trangme/trangcon/ 
Ngoài ra bạn có thể chọn giao diện riêng cho trang. 
6.5.3. Quản lý thư viện Media 
Phần quan trọng của bất kỳ blog chuyên nghiệp nào chính là hình ảnh. Đã có nhiều chứng 
mình rằng bài viết có hình ảnh có nhiều lượt view hơn những bài viết không có. 
 237 
Tất cả hình ảnh, video và âm thanh trong WordPress đều được quản lý bởi “Thư viện 
Media”. Khi soạn thảo bài viết, bạn có thể truy cập vào thư viện để tải ảnh hoặc sử dụng 
hình ảnh có sẵn từ trước. 
Trong trang soạn thảo bài viết, chọn nút “Thêm Media” phía trên thanh công cụ. Một 
popup xuất hiện và hiển thị toàn bộ hình ảnh mà bạn đã sử dụng trong website hoặc tải 
lên trước đó. 
thư viện media 
Để thêm ảnh mới, chọn tab “Tải tập tin lên”, sẽ mở ra chức năng tải file của WordPress. 
Tại đây, bạn chỉ cần kéo thả một hoặc nhiều hình ảnh từ máy tính vào trong khu vực này 
hoặc bấm bút “Chọn tập tin”. Một khi ảnh đã được tải lên thành công, bạn sẽ nhìn thấy 
một vài tuỳ chọn bên tay phải màn hình. 
Các tính năng này cho phép bạn đặt tiêu đề hay miêu tả cho bức ảnh nếu cần thiết, thẻ Alt 
và một vài tuỳ chọn hiển thị trong bài viết. Tham khảo bài viết để hiểu rõ hơn về sự khác 
nhau giữa Alt Text Và tiêu đề hình ảnh. 
 238 
chèn ảnh vào bài viết 
Nhấn “Chèn vào bài viết” và hình ảnh đó sẽ được thêm vào bài viết. Nếu cần thay đổi bất 
cứ tuỳ chọn gì, chỉ việc chọn hình ảnh đó và thanh công cụ sẽ xuất hiện để bạn thực hiện 
việc đó. 
Để học cách quản lý thư viện Media một cách chuyên nghiệp hãy đọc bài viết: Hướng 
dẫn hoàn thiện về cách quản lý hình ảnh trong WordPress. 
Ngoài ra bạn cũng có thể tạo và chèn Gallery hình ảnh trong trang WordPress, nếu bạn là 
một nhiếp ảnh gia thì tạo một Gallery ảnh sẽ giúp website trông rất chuyên nghiệp và đẹp 
mắt 
6.5.4. Đăng bài viết 
Vậy là bạn đã hoàn thành việc soạn thảo bài viết đầu tiên cho website, bao gồm cả việc 
thêm đường dẫn và hình ảnh trong đó, nên tôi tin chắc rằng bạn đã sẵn sàng công khai nội 
dung đó với toàn bộ thế giới. Nhưng trước khi đăng bài viết, còn một vài việc bạn phải 
hoàn thành trước đã. 
Bên tay phải của màn hình soạn thảo, có một vài lựa chọn mà bạn nên hoàn tất. Bỏ qua 
mục đầu tiên “Đăng bài viết”, chúng ta sẽ quay lại đây cuối cùng. 
Hãy lựa chọn chuyên mục cho bài viết từ danh sách đã được tạo trước đó. Nếu muốn, bạn 
cũng có thể tạo thêm chuyên mục mới ngay tại đây. 
Điền một vài tag và bấm “Thêm” ngay sau đó. Và cuối cùng là ô hình ảnh đai diện. Tại 
đây, bạn sẽ tải lên hình ảnh liên kết với bài viết này. Mỗi một giao diện sẽ hiển thị hình 
 239 
ảnh này một cách khác nhau, nhưng về cơ bản thì sẽ hiển thị một ảnh to phía trên hoặc 
bên cạnh tiêu đề bài viết. 
 240 
 241 
Một khi bạn đã cảm thấy thoả mãn với những lựa chọn của mình, hãy quay lại khu vực 
trên cùng bên phải, nơi chúng ta đã bỏ qua lúc nãy “Đăng bài viết”. 
Để công khai bài viết của bạn trên trang web, đơn giản là bấm nút “Đăng bài viết” và thế 
là xong. Trươc khi làm việc đó, nếu bạn muốn trải nghiệm một vài thu thuat 
wordpress hay tính năng khác của WordPress như lập lịch bài đăng, thì bạn chỉ việc chọn 
“Chỉnh sửa” ngay bên cạnh đoạn “Đăng ngay lập tức”, bạn sẽ chọn được chính xác ngày 
và giờ mà bài viết sẽ được công khai. 
Nếu làm như vậy, nút “Đăng bài viết” sẽ tư động chuyển thành “Lên lịch” và khi đó bài 
viết của bạn sẽ được đăng vào đúng thời điểm mà bạn đã chọn trước đó. Đây là một tính 
năng tuyệt vời nếu bạn muốn thêm nhiều bài viết cùng lúc và phân chia thời gian đăng 
bài trong một khoảng thời gian khác nhau. 
Trước khi đăng bài viết nhớ bấm “Xem thử” để xem mình còn sai sót gì trước khi công 
khai bài viết hay không 
Giờ thì bạn đã biết làm thế nào để đăng bài viết trong WordPress website. Và trang cũng 
được thêm vào một cách tương tự như vậy. Truy cập “Trang” > “Tạo mới” và một màn 
hình soản thảo tương tự hiện ra, tuy nhiên sẽ không có lựa chọn chuyên mục và tag. 
Trang cũng có tính năng lên lịch như bài viết. 
 242 
Chức năng Revision 
Revision ( quảy lý nhật ký soạn thảo) chức năng này cho phép bạn lưu lại những bạn 
chỉnh sửa gần nhất của một bài viết khi lưu bản nháp. 
Giúp bạn có thể dễ dàng quay lại bạn chỉnh sửa cũ nếu muốn. 
Bạn sẽ cần ít nhất 2 bản nháp để sử dụng tính năng này. Bấm vào Revision(Xem lại) để 
chọn phiên bản muốn khôi phục 
6.5.5. Cách chèn video vào bài viết 
Để chèn video vào bài viết rất hơn đoan giản, bạn chỉ cần copy đường dẫn của video đó 
và dán vào bài viết là được. 
 243 
Hoặc bạn có thêm bằng cách vào Thêm Media » Chèn từ URL. Nhập đường dẫn video ( 
tốt nhất là từ youtube), rồi chọn chèn vào bài viết là được 
Trong WordPress có tính năng Embed cho phép tự động nhận diện những liên kết từ 
video và chuyển nó thành dạng nhúng video. Vì vậy mà bạn chỉ cần copy paste đường 
dẫn video. 
TÀI LIỆU THAM KHẢO 
[1] Chu Văn Hoành, Giáo trình thiết kế Web. 
[2] Giáo trình thiết kế web, NXB Giáo dục, 2007. 
[3] Hoàng Mạnh Hùng, Lập trình Web, Đại học Đà Lạt. 
[4] Lê Minh Hoàng, Tự học thiết kế Web tập 1 và tập 2, NXB Lao động, 2007. 
[5] Trung tâm CNTT – Bộ giáo dục đào tạo, Tài liệu giảng dạy: Thiết kế WEB với Front 
Page, NXB Giáo dục, 2003.