Sử dụng Text Widget để trang trí blog WordPress
Một điểm rất hay của WordPress.com là nó cho phép người dùng thêm/xóa các Widget bằng cách kéo/thả để trang trí cho blog của mình. Bài viết sau đây tôi sẽ hướng dẫn các bạn sử dụng Text Widget để tổ điểm cho WordPress, ví dụ như khung My Profile và Friend List mà bạn thây trên blog tôi.
Text Widget là gì?
Như mọi Widget khác, Text Widget thêm những phần nội dung mới vào Sidebar của bạn. Điểm khác biệt của Text Widget là nó không có một chức năng cụ thể mà nó phụ thuộc vào quyết định của bạn và nó không có giới hạn cho số lần xuất hiện trên Sidebar.
Text Widget đơn giản là một khung soạn thảo cùng với tiêu đề. Nội dung sau khi soạn thảo sẽ xuất hiện trên Sidebar.
Cách sử dụng Text Widget
Sau khi vào Dashboard của bạn, hãy mở tab Design lên. Ở tab Design, nhấn vào link Widget để hiển thị toàn bộ danh sách các Widget đang có.
Tìm trong danh sách Widget có tên là Text rồi nhấn nút Add để thêm nó vào Sidebar.
Sau khi thêm, bạn có thể kéo thả vị trí cho phù hợp với ý thích của mình. Nhấn vào nút Edit để thay đổi nội dung.
Một khung lớn hơn sẽ xuất hiện bao gồm một text input và một text box. Text Input để nhập tiêu đề, ví dụ như My Profile, Friend List. Trong khi Text Box sẽ nhập nội dung mình muốn vào.
Sau khi hoàn thành, nhấn nút Change tại Text Widget rồi Save Change để WordPress lưu lại các thay đổi và hoàn thành.
My Profile – Thông tin cá nhân
Text Input: My Profile
Text box: Chép đoạn code này vào
<p align=”center”><img src=”http://img181.imageshack.us/img181/7962/459arb8.jpg“></p>
Nguyễn Vũ Phương Anh<br>
Age: 20<br>
Location: Hồ Chí Minh<br>
Work: Báo Thanh Niên, Cyworld
University: Ngoại Ngữ & Tin Học<br><br>
Những chỗ gạch dưới là những chỗ bạn phải thay đổi. Ví dụ, link hình đầu tiên bạn phải đổi thành link hình của bạn. Các phần còn lại thì tùy ý thích.
Friends List – Danh sách bạn
Text Input: Friends List
Text box: Chép đoạn code này vào
<table width=”100%” border=”0″>
<!– Begin List –>
<tr>
<td width=”50%”><a href=”http://trantri.wordpress.com (1a)“><img src=”http://a.wordpress.com/avatar/mrkythien-96.jpg?1208410852 (1b)“></a></td>
<td width=”50%”><a href=”http://chaulkt6m.wordpress.com (2a)“><img src=”http://a.wordpress.com/avatar/chaulkt6m-96.jpg?1208410852 (2b)“></a></td>
</tr>
<tr>
<td align=”center”><b>Trần Trí (1c)</b></td>
<td align=”center”><b>ChAuLkT Le (2c)</b></td>
</tr><!– End List –>
[blah... blah]
</table>
Những chỗ gạch dưới là những chỗ bạn phải thay đổi. Ở đây, danh sách được chưa làm 2 cột trong một bảng. Mỗi hàng sẽ chưa 2 người. Có thể tách ra làm 3 thành phần như ví dụ trên:
- a: Đường dẫn đến blog của người bạn muốn thêm vào
- b: Đường dẫn đến avatar của người bạn muốn thêm vào. Ở đây mrkythien hay chaulkt6m là tên tài khoản, bạn có thể hỏi người bạn của mình để thêm vào. Còn 96 là 96 pixcel, kích thước thumbnail của avatar.
- c: Tên của người bạn muốn thêm vào.
Code HTML trên là demo sẵn 2 người. Nếu bạn muốn thêm vào nữa thì cứ copy đoạn code trong tag Beign List & End List rồi Paste vào chỗ [blah... blah], sau đó sửa đổi thông tin lại cho phù hợp.
Dĩ nhiên, đây là một cách làm thủ công, chỉ mang tính mô phỏng là chính. Bạn cũng có thể add thành link trong Blogroll, tuy nhiên tôi nghĩ làm kiểu này sẽ trực quan và đặc biệt hơn.
Chúc bạn những giây phúc vui vẻ khi sử dụng WordPress


Bim ơi mò cách tạo quick comment đi. em thấy người ta có trang quick comment hay lém T_T
Cho anh link
http://trungtuan.wordpress.com/about/quick-comment/ đó
tối send em fát code cái table nha . Lười làm wá ~<
code đã paste lên rồi còn send gì nữa
good blog!
Thx ngaythuhai ^_^
hic tạo friend list trong wordpress sao mệt quá! Có cách nào dễ hơn, kiểu chỉ việc add nick như yahoo 360 không hả bạn?
@drifterus: không được đâu bạn, vì WordPress hoàn toàn không có chức năng thiết lập bạn bè như Yahoo! 360.
Huhuhu vậy là lạc trên hoang đảo rồi! Sợ nhà Yahoo sập bất tử nên dọn sang đây, ai ngờ nó vẫn còn là khu quy hoạch treo! Không bạn bè thì làm sao tạo thành cộng đồng được? Nói không bạn bè có hơi quá, nhưng bạn bè kiểu wordpress (hỏi đường dẫn trang, hỏi đường dẫn avatar…) thật bất tiện quá, cứ như thể là phải soi CMND, hộ khẩu trước rồi mới kết bạn ấy!
@drifterus: Vì bản chất WordPress là một blog cá nhân (blogging platform) chứ không phải mạng xã hội (social network) như Yahoo! 360 nên nó không có tính năng này.
Với WordPress người ta theo dõi blog bạn bè của mình bằng nhiều cách. Tạo RSS, xem bằng chức năng Blog Surfer trong Dashboard hoặc mô phỏng chức năng Lastest from friends như tại đây: http://vuphuong87.wordpress.com/2008/04/19/mo-phong-tinh-nang-lastest-from-my-friend-cua-yahoo-360-trong-wordpress-com/#comment-122
Còn làm liên kết với bạn thì có thể làm link = Blogroll cũng được, không nhất thiết phải làm như thế này
Cám ơn bạn đã thông tin nhiều nha :=)
you’re welcomed
Hay quá, cảm ơn bạn đã chia sẻ và cho phép mình sử dụng kỹ thuật bạn đề xuất nhé. Chúc bạn thành công hơn.
Dĩ nhiên rồi doanchi ^^
Mình làm profile nhưng nó không hiển thị ảnh, có phải là ảnh quá to ? Nó có tự động thu ảnh nhỏ lại cho vừa khổ không ? Ngoài ra, cái photo album của mình link từ Flickr Album qua cũng không bao giờ hiển thị ảnh. Chán ghê !
@thienthanxinh: bạn lấy đúng link như http://a.wordpress.com/avatar/mrkythien-96.jpg thì nó mới tự resize ảnh. Sao không ra được nhỉ? Bạn thử lấy link rồi dán vào address của trình duyệt xem có ra hình không?
À không, mình đang nói là ảnh cho profile chứ không phải friend list. Vì ảnh trong profile là link tự do, cho nên mình đưa vào đó ảnh từ Flickr, đã thử link, vẫn chạy tốt. Mình cũng vừa resize xong, nhưng vẫn không được.
Nếu không phiền, bạn thử xem giúp mình nhé, nội dung đây
Tên : Nguyễn Hoàng Gia Khánh
Ngày sinh : 30/06/2003
Trường : Mầm Non Việt Hoa – Lớp : Lá
Sở thích : Đọc sách, chơi game giáo dục, vẽ tranh
Tên : Nguyễn Hoàng Hiểu Quân
Ngày sinh : 03/05/2007
Trường : Bà Ngoại – Lớp : Bà Tư
Sở thích : Lục lọi & phá phách đồ đạc
Ui trời, mình copy đoạn code vào comment, ai dè post xong là nó hiển thị luôn, mất tiêu cái link ảnh ! Hic !
Bạn paste thử cái code chèn ảnh của bạn xem. Nhớ cách ra để không nhầm thành HTML tag ví dụ như: < img …
Link ảnh đây :
Mặc dù đã cách ra, vẫn bị nhầm html. Mình bỏ bớt 2 dấu nhé :
img src=”//farm4.static.flickr.com/3111/2517233319_b17c50f21c_m.jpg“”
theo như code của bạn thì thiếu http: trước cái //farm4… đó
Đây cũng là vấn đề không hiểu !
Lúc paste link vào, mình thấy thiếu, đã bổ sung cái http: vào, sau khi save change và xem lại blog thì nó vẫn không hiển thị ảnh. Sau đó, mình trở lại Widget xem thì thấy chữ http biến mất. Mình lại bổ sung và save, vẫn lập lại tình trạng đó.
Mà thôi, phiền bạn như thế đủ rồi. Mình không gắn ảnh vào profile cũng không sao. Chắc là một hôm đẹp trời nào đó là blog của mình nó vui vẻ trở lại và chịu hiển thị ảnh !!!! Cám ơn bạn đã rất nhiệt tình. Mất thời gian của bạn nhiều quá ! Sorry nhé.
hình như bạn để dư 1 dấu ” ở cuối cùng nên nó mới thế
chi minh cach dua avata len blog voi nhe
cam on !
@dungdt87: Dùng Text Widget thôi bạn. Bên trên có hướng dẫn mà
cam on nhe!
lau nay ban qua nen ko choi blog duoc
dashboard la` yh` dzay. ban. chj~ mjnh` dc. hum
@pecun: Dashboard là cái trang quản lý của bạn nằm ở địa chỉ /wp-admin/
^^
Cám ơn bạn Phương về những hướng dẫn của bạn nhé, rất hay cho người mới bắt đầu như mình
.
Phương cho mình hỏi thêm là cái lỗi không hiện thị ảnh như của bạn thienthanxinh bạn đã tìm ra tại sao chưa thế? Mình cũng bị lỗi như vậy mà mãi không chỉnh đc
. Nếu bạn tìm ra rồi thì chỉ mình giúp cái nhé. Cám ơn bạn trước nhiều
.
Theo mình thì do nội dung tag img scr của bạn sai thôi.
Ví dụ: img src=”http://farm4.static.flickr.com/3111/2517233319_b17c50f21c_m.jpg”
Là đúng. Như của thienthanxinh bị dư dấu ” nên chắc bị WP nó lọc đi làm cho hiển thị ko đc @.@
Hic… Liệu chỗ trên có sai chỗ nào không thế bác?
Oh… Cái đoạn code ko hiển thị đc à
.
Của mình là như thế này có đúng không bác?
[Ở ô comment này không post code lên là nó không hiển thị à bác
].
img src=”http://i470.photobucket.com/albums/rr68/Silentwindb/Silentwind/Silentwind.jpg“
vậy là đúng rồi mà, vẫn không hiển thị à @.@
Mình tìm ra nguyên nhân rồi
. Hóa ra ta phải xóa những dấu nháy kép ” đi và gõ lại thì mới ổn
.
Bạn ơi, bạn biết cách add thêm widget từ wordpress vào theme có widget ready khong? mình add thêm nhưng những widget ready mất lun. có cách nào giữ lại cả hai k?
cảm ơn.
Không được đâu bạn. Phải sửa trực tiếp trên file ^^
CŨng làm như you nhưng ko dc. Comment làm quen nhá.
Tên : JAck CHon age: 23
SV: NIIT
http://jackeychon.wordpress.com
Lỗi gì không được vậy bạn?
thank phuong nhieu
http://www.aronvn.co.cc ranh phuong ghe tham chi dan minh ti hen cam on phuong truoc
Em ơi, cho chị hỏi cách làm giống phần daisypath của em nha? Thanks in advanced!
Dùng Text Widget rồi chèn code của Daisypath thôi chị
Ủa vậy có 2 text widget hả? Để chị thử, cám ơn em nhiều!
Sao chị làm rồi mà không hiện lên hình mà chỉ có chữ thôi, xem dùm chị nhé!
Phải dùng image host để úp hình hả em, chị dùng flickr được không?
Chị vào đây reg account http://daisypath.com/ đăng ký ngày này n5o nó sẽ cho chị link tấm hình
Chị làm được rồi cảm ơn em nhiều!
ôi, mình học được cách làm cái Daisypath giống của bạn mới được…mình thấy quả là dễ thương ý…cám ơn bạn về những chia sẻ rất hay này…mình cũng mới thử làm thôi nên chả rõ gì cả…đang tìm hiểu thấy khó hơn các blog khác nhiều lắm, nhưng mà cũng vui …và học được nhiều điều mới nên cũng hay..:D….wordpress thì buồn thật ấy…chả có bạn bè gì cả mà sao mình nhấn vào ava của ai thì nó cũng chả có link để thăm nhà người đó nữa chứ…thấy lạ lạ sao ý… thôi, bạn vào blog mình xem thử, có gì góp ý với mình với, nếu bạn có thời gian…:D (http://bupbekiwi.wordpress.com)
Bạn có thể đọc bài sau để hiểu rõ hơn về WP: http://vuphuong87.wordpress.com/2009/06/01/ben-do-nao-cho-nguoi-dung-thoi-hau-yahoo-360/
Mình có ghé qua blog bạn. Dùng WP là thích hợp rồi ^^ Bạn có thể tham gia LinkHay.com, submit link để nhiều người biết đến blog của mình hơn.
đang tìm hiểu cái này, thanks bài viết của bạn
Mà làm thế nào để kết bạn nhỉ :-s
thanks