All-In-One Cufon - Plugin hỗ trợ làm đẹp font chữ cho Wordpress

Thảo luận trong 'Wordpress Plugins' bắt đầu bởi PVS, 25/07/2018.

  • Google checker:
  1. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    9,578
    Đã được thích:
    6,326
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    SV
    Nơi ở:
    Huế
    All-In-One Cufon - Plugin hỗ trợ làm đẹp font chữ cho Wordpress

    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, 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.

    cufon-cho-wordpress-1.jpg
    Để giải quyết nó, truy cập vào thư mục wp-content/plugins trên host để tạo một thư mục mới tên là cufon-fonts.

    cufon-cho-wordpress-2.jpg
    Khi tạo xong, vào lại Setting ⇨ All in One Cufon mà không còn thấy thông báo kêu bổ sung thư mục cufon-fonts nữa là ok.

    Upload font vào thư mục cufon-fonts
    Bước kế tiếp nữa là phải upload file Cufon đã tạo trước đó (Hãy đăng nhập hoặc đăng ký để xem được links) vào thư mục cufon-fonts vừa tạo ở bước trên. Ví dụ file font có tên là UVN_Bai_Sau_400.font.js

    cufon-cho-wordpress-3.jpg
    Được rồi, bây giờ vào lại Setting ⇨ All-in-One Cufon sẽ thấy font vừa được upload lên kèm theo các thông tin cần thiết đó là tên fontFamily, ảnh mô tả font. Tích vào dấu Enable lên để kích hoạt nó để sử dụng (nó sẽ tự chèn file font vào theme).

    cufon-cho-wordpress-4.jpg
    Ok, vậy là đã hoàn thành bước cài đặt. Bây giờ cùng nhau xem cách kích hoạt Cufon lên các thành phần trong WordPress nhé.

    Sử dụng Cufon cho WordPress
    Trong phần setting của All-in-One Cufon sẽ thấy khung Cufón Code, đây là nơi để 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èn ở đây sẽ không có <script type="text/javascript"> </script>

    Như ví dụ, nếu 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.
    Mã:
    Cufon('h2', { fontFamily: 'UVN Bai Sau' });
    Kết quả là các thẻ h2 đã được áp dụng font của Cufon.

    cufon-cho-wordpress-5.jpg
    Thế là xong rồi đấy, coi như đã áp dụng Cufon thành công trên blog WordPress.

    Bonus: Tìm class của từng thẻ HTML
    Nếu dùng code ở trên để áp dụng thì tất cả thẻ h2 trên blog WordPress đều được áp dụng Cufon. Nhưng nếu 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ì cần thêm class của thẻ h2 đó khi khai báo trong Cufon. Ví dụ nếu muốn áp dụng Cufon chỉ dành cho tiêu đề bài viết (thẻ h2 trong class entry-title) thì sẽ khai viết code như sau.
    Mã:
    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ả. Vậy làm thế nào để biết class của từng khu vực?

    Đơn giản là 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à sẽ thấy. Ví dụ muốn xem class của thẻ tiêu đề trong nội dung bài viết.

    cufon-cho-wordpress-6.jpg
    Sẽ thấy thẻ tiêu đề và class của nó.

    cufon-cho-wordpress-7.jpg
    Hy vọng với bài hướng dẫn ngắn này, các bạn có thể áp dụng Cufon thật tốt vào blog WordPress để trang trí các font chữ của mình thêm lộng lẫy.

    Cufon có ảnh hưởng tới SEO hay không?
    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 sau khi áp dụng Cufon thì thấy như thế này.

    cufon-cho-wordpress-8.jpg
    Nhưng các bạn hoàn toàn yên tâm, Google vẫn index website bình thường và nó vẫn hiểu ra các text đã áp dụng Cufon vì Google không đọc Javascript, Flash trong website. Mà nội dung này chỉ hiển thị khi file cufon-yui.js hoạt động. Có thể sử dụng exentions Hãy đăng nhập hoặc đăng ký để xem được links của Google Chrome và dùng tính năng tắt Javascript trong web để kiểm tra.

    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 một chút xíu, mà Google bây giờ đã ưu tiên những website có tốc độ tải trang nhanh.

    Chúc các bạn thành công.


    Nguồn: Thachpham​
     

    Các file đính kèm:

    Bài viết mới

Chia sẻ trang này

Đang tải...