Nếu bạn muốn sử dụng Cufon cho WordPress thì sự lựa chọn tốt nhất dành cho bạn là plugin All-in-One Cufon
MỤC LỤC
Ở bài viết giới thiệu Cufon trước, mình đã hướng dẫn chi tiết qua cách tạo một font theo định dạng Cufon và cách chèn nó vào một website bình thường. Qua hướng dẫn đó, các bạn có thể dùng cách chèn javascript vào theme WordPress (cụ thể là file header.php) để có thể sử dụng Cufon cho WordPress. Tuy nhiên việc chỉnh sửa trực tiếp trong theme thông thường mình không khuyến khích cho lắm bởi nếu bạn muốn sử dụng Cufon cho WordPress thì chỉ cần cài một plugin là đủ, chính xác thì plugin này tên là All-in-One Cufon. Cách sử dụng cực kỳ đơn giản!
Sử dụng Cufon cho WordPress với All-in-One Cufon
Bước 1: Cài đặt plugin
Các bạn cài đặt plugin All-in-One Cufon theo cách cài đặt một plugin WordPress thông thường.
Khi cài đặt xong, các bạn vào Setting ⇨ All-in-One Cufon sẽ thấy một bảng thông báo màu đỏ bảo bạn phải bổ sung thư mục cufon-fonts trong thư mục wp-plugins.
Bước 2: Upload font vào thư mục cufon-fonts
Bước kế tiếp nữa là bạn sẽ phải upload file Cufon mà bạn đã tạo trước đó (xem cách tạo font cho Cufon) vào thư mục cufon-fonts mà bạn đã vừa tạo ở bước trên. Ví dụ file font của mình có tên là UVN_Bai_Sau_400.font.js
Bước 3: Sử dụng Cufon cho WordPress
Trong phần setting của All-in-One Cufon bạn sẽ thấy khung Cufón Code, đây là nơi để bạn chèn các đoạn script chèn Cufon vào một website thông thường, chỉ khác là code của chúng ta chèn ở đây sẽ không có <script type="text/javascript"> </script>
Như ví dụ của mình, nếu mình muốn sử dụng font UVN Bai Sau cho các thẻ h2 trên blog thì sẽ chèn code như sau vào phần Cufon Code.
|
1 |
Cufon('h2', { fontFamily: 'UVN Bai Sau' }); |
Kết quả là các thẻ h2 của mình đã được áp dụng font của Cufon.
Bonus: Tìm class của từng thẻ HTML
Nếu bạn dùng code ở trên để áp dụng thì tất cả thẻ h2 trên blog WordPress của bạn đều được áp dụng Cufon. Nhưng nếu bạn muốn áp dụng Cufon cho một vùng riêng biệt mà không bị ảnh hưởng đến các thẻ h2 nằm ở ngoài vùng chọn đó thì bạn cần thêm class của thẻ h2 đó khi khai báo trong Cufon. Ví dụ nếu mình muốn áp dụng Cufon chỉ dành cho tiêu đề bài viết (thẻ h2 trong class entry-title) thì mình sẽ khai viết code như sau.
|
1 |
Cufon('h2.entry-title', { fontFamily: 'UVN Bai Sau' }); |
Lúc này chỉ có thẻ h2 trên tiêu đề bài viết là được áp dụng Cufon, còn các phần khác thì vẫn bình thường. Cái này chắc ai có biết qua CSS thì đều biết cả
Đơn giản là bạn dùng tính năng Inspect Element trong Google Chrome để “soi”. Cứ rê chuột vào vị trí cần xem, ấn chuột phải chọn Inspect Element là bạn sẽ thấy. Ví dụ mình muốn xem class của thẻ tiêu đề trong nội dung bài viết.
Cufon có ảnh hưởng tới SEO hay không?
Đây là câu hỏi mình đã nhận được từ nhiều người, có nhiều người lo lắng Cufon sẽ ảnh hưởng trực tiếp đến SEO vì khi họ xem nội dung HTML của mình sau khi áp dụng Cufon thì thấy như thế này.
Nhưng Cufon cũng ảnh hưởng gián tiếp đến một chút về mặt SEO vì nó sẽ làm chậm website của bạn một chút xíu, mà Google bây giờ đã ưu tiên những website có tốc độ tải trang nhanh.
Hỗ trợ
Nếu các bạn có thắc mắc và gặp vấn đề trong lúc sử dụng Cufon trong WordPress, hãy để lại bình luận phía dưới bài viết này để mình có thể giải đáp trong thời gian sớm nhất.
WordPress FAQ > Hướng dẫn sử dụng WordPress > Hướng dẫn sử dụng Plugin WordPress
WordPress | Hoi dap WordPress | Hỏi đáp WordPress | WordPress FAQ | Hoc WordPress | Su dung WordPress | Lap trinh WordPress | Plugin WordPress | SEO WordPress | Thuat ngu WordPress | Theme WordPress | Huong dan su dung WordPress
