Hướng dẫn sử dụng Cufón toàn tập – Phần 3

Xin chào các bạn,

Trong hai phần trước, chúng ta đã biết cách tạo một Cufón dựa trên một font có sẵn và cách tích hợp nó vào một tập tin HTML đơn giản. Ở phần 3 này chúng ta sẽ cùng tìm hiểu cách thức tích hợp nó vào WordPress.

Việc tích hợp Cufon vào WordPress thực chất là tích hợp vào theme mà bạn đang dùng. Để có thể tiếp tục, bạn cần xác định được WordPress của bạn đang sử dụng theme nào. Trong bài viết này, Việt Coding sử dụng theme mặc định của WordPress 3.1.2 là twentyeleven.

Theme twentyeleven mặc định của WordPress

Trong theme này có sẵn thư mục js (nếu không có bạn có thể tạo thư mục với tên bất kỳ) nên Việt Coding chỉ việc copy cufon-ui.js và UTM_Flamenco_400.font.js vào.

Tiếp theo, chúng ta mở tập tin functions.php và chèn đoạn mã sau vào cuối :

/* Cufon */

function init_cufon()
{
?>
	<script type="text/javascript" src="<?php bloginfo('template_url') ?>/js/cufon-yui.js"></script>
	<script type="text/javascript" src="<?php bloginfo('template_url') ?>/js/UTM_Flamenco_400.font.js"></script>

	<script type="text/javascript">
		Cufon.replace('h1.entry-title, h3.widget-title, #site-generator');
	</script>
<?php
}

add_action('wp_head', 'init_cufon');

Các bạn hãy lưu ý ở dòng code

Cufon.replace('h1.entry-title, h3.widget-title, #site-generator');

h1.entry-title là title của post WordPress
h3.widget-title là title sidebar
#side-geneator là dòng credit của phần footer của WordPress

Việt Coding sẽ áp Cufón vào 3 phần trên. Các bạn lưu ý là chỉ nên áp vào các tiêu đề lớn, không nên quá lạm dụng vào các text khác. Mặt khác, đối với từng theme, bạn phải xác định được các phần mà bạn định áp Cufón vì với theme này có thể là h1, h2,… chứ không phải lúc nào cũng là h1.entry-title. Các bạn nhớ lưu ý điểm này nhé !

Save functions.php lại, refresh trang và xem kết quả:

Cufón đã áp lên tiêu đề bài viết, sidebar title và dòng credit

Thật đơn giản đúng không các bạn ? Chúc các bạn thành công !