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

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.jsUTM_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 :

[php]

 
[/php]

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

[js]

 
[/js]

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

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 !

About Author

Tuấn Anh

Là một người đam mê lập trình, hiện tập trung mảng phát triển ứng dụng web dựa trên nền tảng của WordPress. Đồng thời, nhằm đạt sự trọn vẹn trong công việc freelance, tôi đang học đồ hoạ, để có thể tự mình thiết kế layout, logo và những thứ khác liên quan đến đồ họa. Mục tiêu vài năm tới: Tôi sẽ là Full Web Developer = Graphics Design + Coding. Vietcoding Blog viết về WordPress, chia sẻ kinh nghiệm, mẹo vặt, viết plugin, làm theme và ôm ấp ý tưởng viết một Web Application Framework dựa trên WordPress. Đồ hoạ là chuyên mục đang được chuẩn bị trong tương lai.



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

  1. Tuấn says:

    Tem! e ko thích cái cufon này lắm vì nó ko copy đc 😀 dùng css font face tốt hơn 😀

    1. Cái đó trong CSS3 phải không bạn ? Việt Coding thấy CSS3 vẫn chưa được hỗ trợ đầy đủ trên các trình duyệt thì phải 🙂

      1. Tuấn says:

        Cái đó hình như css2 cũng có thể làm được a à (tham khảo: http://www.izwebz.com/video-tutorials/misc/font-face-cho-css2/), với lại h người dùng những trình duyệt hiện đại cũng khá nhiều rồi a à 😀 dùng font face cũng ổn rồi 😀

      2. @fontface đã hỗ trợ hầu hết các trình duyệt rồi bạn. Theo mình thấy thì sử dụng @fontface thì site load nhanh hơn so với cufón.

        1. Mình vừa test hồi chiều, thấy cũng ok đấy bạn ! Thanks bạn nhé 🙂

  2. Trang says:

    thank. mình thích những bài viết kỹ thuật như thế này.bác viết làm sao đễ hiểu copy and pase la ok. phức tạp quá anh em không thưc hành được

  3. vincom village says:

    Dùng cái này khó thật, làm mãi mà chẳng được gì cả :((


Got Something To Say:

Your email address will not be published. Required fields are marked *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

GENESIS FRAMEWORK