Cách sử dụng jQuery Tooltip cho WordPress

jQuery Tooltip là vấn đề có lẻ sẽ không lạ với các bạn đã học thiết kế web, bởi sự mới lạ cũng như gây ấn tượng cho mình khi làm quen với jQuery Tooltip. Hôm nay mình sẽ giới thiệu với các bạn cách sử dụng jQuery Tooltip cho WordPress và kết hợp với google timthumb.

jQuery Tooltip là một tính năng hay giúp bạn tiết kiệm được không gian trình bày web cũng như tạo cho site bạn mang tính chuyên nghiệp hơn vì trong một diện tích đó bạn có thể hover chuột vào là mở ra một không gian trình bày mới mô tả cho vấn đề mình đề cập.

Nhìn chung cách sử dụng jQuery Tooltip cho WordPress sẽ là khó khăn cho các bạn mới học thiết kế WordPress vì bài này vận dụng nhiều vấn đề liên quan như: biết cách tổ chức file trong theme wordpress, vòng lặp trong WordPress, Cách dùng Custom Fields …

Mình sẽ mô tả khái quát về vấn đề sử dụng jQuery Tooltip trong WordPress sẽ demo dưới đây cho các bạn nắm cũng như sẽ dễ dàng làm việc hơn. Mình sẽ trình bày một tên (tiêu đề bài viết rút gọn) hình demo nhỏ sau khi hover chuột vào sẽ mở ra cửa sổ có hình to và tiêu đề mô tả đầy dủ.

demo su dung tooltip trong wordpress

Cách trình bày này sẽ giúp bạn tạo ra dạng theme danh mục đầu tư, showcard lúc này jQuery Tooltip cũng sẽ phát huy tác dụng hơn, hiển nhiên là còn các tùy chọn như hình nhỏ và nội dung mô tả, tiêu đề kèm theo category … và trong phần demo jQuery Tooltip hôm nay mình sẽ trình bày như mẫu trên.

Tooptip mình dùng trong bài này là Easy Image Preview with jQuery, nó có ba dạng thứ nhất là: link mô tả bằng nội dung, thứ 2 hình nhỏ mô tả bằng hình lớn và tiêu đề, thứ 3 link môt tả bằng hình. Mình sẽ dùng cái 2

Bạn bấm vào 3 link bên để xem demo trước: DEMO 1, DEMO 2, DEMO 3 và download file gốc thì CLICK VÀO ĐÂY.

Mình cũng có vài lời lu bu khi bạn sử dụng jQuery Tooltip, các jQuery Tooltip khác nhau sẽ có cách trình bày dữ liệu mô tả khác nhau tuy nhiên chúng gần như đều có chung một dạng cấu trúc, cách nhúng … hiển nhiên là không giống nhau hoàn toàn. Khi áp dụng vào trong WordPress bạn cần xem thêm các vấn đề như đã nói ở trên, bạn có thể tham khảo cách dùng Custom Fields, Meta boxes WordPress hay các khía cạnh khác trong categories WordPress.

Sau khi download file về xong bạn copy 2 file: jquery.js, main.js vào trong thư mục js của theme, sau đó vào file header.php trong thẻ head copy đoạn code sau vào.

<!--
      <script src="<?php bloginfo('template_directory'); ?>/js/jquery.js" type="text/javascript"></script>
      <script src="<?php bloginfo('template_directory'); ?>/js/main.js" type="text/javascript"></script>
-->

Tiếp đến không thể không có định dạng CSS, bạn copy đoạn code sau vào trong thẻ HEAD của file header.php và tùy chỉnh lại nếu thấy không thích. Hoặc có thể copy vào 1 file CSS rồi link vào cũng được.

<!--
<style>
body {
	margin:0;
	padding:40px;
	background:#fff;
	font:80% Arial, Helvetica, sans-serif;
	color:#555;
	line-height:180%;
}

h1{
	font-size:180%;
	font-weight:normal;
	color:#555;
}
h2{
	clear:both;
	font-size:160%;
	font-weight:normal;
	color:#555;
	margin:0;
	padding:.5em 0;
}
a{
	text-decoration:none;
	color:#f30;	
}
p{
	clear:both;
	margin:0;
	padding:.5em 0;
}
pre{
	display:block;
	font:100% "Courier New", Courier, monospace;
	padding:10px;
	border:1px solid #bae2f0;
	background:#e3f4f9;	
	margin:.5em 0;
	overflow:auto;
	width:800px;
}

img{border:none;}
ul,li{
	margin:0;
	padding:0;
}
li{
	list-style:none;
	float:left;
	display:inline;
	margin-right:10px;
}

/*  */

#preview{
	position:absolute;
	border:1px solid #ccc;
	background:#333;
	padding:5px;
	display:none;
	color:#fff;
	}

/*  */
</style>
-->

Xong phần header, phần import các file js nếu các hàm chưa thông bạn có thể xem lại các cách khai báo trong WordPress. Trở lại vấn đề về WordPress jQuery Tooltip hôm nay, đề cập như ở trên có hai thành phần chính là name và hình ảnh, mình sẽ khai báo như hình.

Custom Fields trong jquery tooltip wordpress

Đó là hai trường mình cần có để lấy dữ liệu show ra, xét về hình ảnh thì mình dùng file google timthumb để resize ở hai cở lớn và bé. Sau đó bạn sẽ vào trong file index hay categories … để trình bày dữ liệu bạn code trong vòng loop như sau:

<!--
	<?php while ( have_posts() ) : the_post(); ?>
		<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
			<h2 class="entry-title"><a href="<?php the_permalink(); ?>" ><?php echo get_post_meta($post->ID,'name',true)?></a></h2>
			<a href="<?php bloginfo('stylesheet_directory'); ?>/timthumb.php?a=t&amp;w=350&amp;h=225&amp;src=<?php echo get_post_meta($post->ID,'thumb',true)?>" class="preview" title="<?php the_title(); ?> by BCDONLINE.NET"><img src="<?php bloginfo('stylesheet_directory'); ?>/timthumb.php?a=t&amp;w=130&amp;h=130&amp;src=<?php echo get_post_meta($post->ID,'thumb',true)?>" alt="gallery thumbnail" /></a>
		</div>
	<?php endwhile; // end of the loop. ?>
-->

Bạn phải nắm cấu trúc HTML của file jQuery Tooltip mẫu để có sự tùy chỉnh cho hợp lý, không cẩn thận sẽ không hoạt động được. Thường thi mình cần chú ý đến ID, Class, data-tooltip … nói chung là thuộc tính đích danh để giúp jQuery hoạt động.

Hình ảnh sẽ được load lên qua đích danh Custom Files là thumb, qua file timthumb.php resize ảnh theo cấu trúc như trên, ở đây có lớn có nhỏ cùng 1 hình resize ra. Nhận dữ liệu mô tả là tiêu đề của liên kết, bạn có thể thêm các thuộc tính khác vào trong này và CSS lại vẫn đẹp vi vu. Sau khi xong chạy demo lên thử ta được.

Them tinh nang tooptip thanh cong vao wordpress

Kết luận: Sử dụng jQuery Tooltip cho WordPress là một việc làm hay có thể tạo sự thích thú cho khách truy cập, và ở đây là cách mà mình nhúng Tooltip vào trong WordPress, có nhiều biến thể của nó nhưng suy cho cùng thì cấu trúc và cách nhúng sẽ gần giống nhau và để tùy biến được bạn cần phải hiểu về cách nó viết khung HTML như thế nào. Chúc mọi người thành công!

DOWNLOAD FILE DEMO TRONG BÀI VIẾT SỬ DỤNG JQUERY TOOLTIP

VN:F [1.9.22_1171]
Rating: 9.2/10 (5 votes cast)
Cách sử dụng jQuery Tooltip cho WordPress, 9.2 out of 10 based on 5 ratings
Share This