Tùy chỉnh header và background trong WordPress 3.4

WordPress 3.4 vừa ra mắt trong tuần này và bạn sẽ thấy thật thú vị khi làm quen với các tính năng mới bổ sung trong phiên bản này. Hầu hết các phiên bản mới của WordPress đều mang lại nhiều tính năng và khả năng tối ưu hệ thống, trong phiên bản này sẽ cho phép bạn tùy chỉnh thành phần header, background, XML-RPC, hỗ trợ đa ngôn ngữ tốt hơn, và nhiều sửa lỗi và tối ưu hóa hệ thống khác.

WordPress 3.4 Green

Tùy chỉnh Header và Background

Khi tính năng Featured Image đã được WordPress thêm vào từ phiên bản 2.9 thì một hàm mới mang tên add_theme_support cùng với đó được thêm vào. Hàm này như một định hướng trong chuẩn mực thiết kế giao diện. Từ khi nó được giới thiệu thì add_theme_support được xem như là gánh trách nhiệm xử lý định dạng bài viết, liên kết feed tự động và bây giờ trong phiên bản 3.4 này thì việc tùy chỉnh header và background đã được thêm vào danh sách chức năng hỗ trợ cho việc xử lý giao diện tốt hơn.

Thêm tùy chỉnh background.

Để sử dụng chức năng này bạn chỉ cần gọi hàm add_theme_support() với tham số “custom-background” đầu tiên và kèm theo đó là các tham số mặc định khác của hàm. Ví dụ sau đây là một cách khai báo:

$args = array(
	'default-image'          => get_template_directory_uri() . '/images/bg-default.png',
	'default-color'          => '#fafafa',
	'wp-head-callback'       => '',
	'admin-head-callback'    => '',
	'admin-preview-callback' => ''
);

add_theme_support( 'custom-background', $args )

Sau khi đã thêm code vào theme bạn sẽ thấy sự thay đổi trong admin như hình sau

Chức năng tùy chỉnh background mới trong wordpress 3.4

Thêm tùy chỉnh header

Việc thêm header gần giống như việc thêm background. Hoặc có cách khác giúp bạn linh hoạt hơn trong việc khai báo header đó là chỉ định height và width. Việc này khá tiện lợi cho những người thiết kế giao diện.

$args = array(
	'flex-height'            => true,
	'height'                 => 200,
	'flex-width'             => true,
	'width'                  => 950,
	'default-image'          => get_template_directory_uri() . '/images/headers/header-default.jpg',
	'random-default'         => false,
	'default-text-color'     => '',
	'header-text'            => true,
	'uploads'                => true,
	'wp-head-callback'       => '',
	'admin-head-callback'    => '',
	'admin-preview-callback' => '',
);
add_theme_support( 'custom-header', $args );

Sau khi bạn đã chèn code vào theme thì bạn sẽ có thêm một mục hiển thị trong phần Appearance và bạn đã có thể tùy chỉnh header và background một cách tùy ý.

Width và height bây giờ được gợi ý do người thiết kế quy định và được in đậm

Bạn đã nâng cấp và thử nghiệm WordPress 3.4 chưa ? Nếu chưa thì hãy nâng cấp ngay nhé

Did you like this? Share it:

Tham khảo:

Nói về xman

Thích lập trình, domain, hosting, php và social

Bình luận

  1. duong phong viết:

    Cho mình hỏi, chèn các đoạn trên vào file nào. :D

  2. Em mới dùng WP làm blog viết những câu chuyện vui – buồn ở quê em. em fungf một theme đơn giản không có Ferture mà em thích cái ferture của http://demo.wpzoom.com/sportpress/ anh có thể giúp em làm một cái giống vậy được không anh với lại cái menu giống http://yootheme.com/demo/themes/wordpress/2010/studio/

    • sorry bạn, mình không phải thiết kế theme cho wordpress. Nếu bạn chịu khó mày mò thì có thể đọc qua các bài viết rồi tự làm 1 cái theme xem thế nào. Mình nghĩ là sẽ rất thú vị và cũng là một trải nghiệm thêm cho bạn.

      Thân, Xman

      • Em co biet thiet ke gi dau.voi lai Wp day theme toi gi phai thiet ke cho met nguoi anh hi`^^ khong duoc vay em cam on anh nha. tai em dang dung Wp-launch em thich cai Ferture cua no thui hjhj

  3. 1/ Rất cám ơn bạn, mình đã làm được phần Image rồi!
    2/ Xin giúp mình điều này: Trong theme Morning After mình muốn bỏ text”trang chủ” ở header khi xem trang chủ, và bỏ “bạn đang đọc…” khi xem các bài viết thì làm sao? Xin cám ơn bạn!

    • nó nằm trong gói theme của bạn hết đó, bạn hãy kiểm tra hoặc search thử text đó trong gói theme của bạn sẽ thấy nó.

  4. whynot viết:

    Bạn ơi cho mình hỏi, mình đã làm theo cách của bạn và “có vẻ” đã thành công, nhưng khi mình thêm ảnh xong và nó cũng thông báo hoàn tất thì lại không thấy hình hiển thị đâu cả. Bạn có thể giúp mình tí ko. Ah mình đang dùng theme AccentBox, mới tìm hiểu về WP nên chưa biết đc gì cả. Thanks bạn trước nha.

    • bạn cần phải lấy ảnh ra vì ảnh đó đang lưu trong csdl

      • mình cũng giống như bạn whynot, mình đã add thêm cái banner vào header nhưng nó ko hiển thị. Bạn có thể hướng dẫn cụ hơn được ko, lấy ảnh ra thế nào hả bạn. Thank bạn nhìu.

  5. Đức viết:

    Xman cho mình hỏi là giao diện web này của bạn dùng theme có tên là gì vậy. Nếu là giao diện public miễn phí thì cho mình xin cái tên để mình download nhé :P

    • Mình đang dùng là Extended Magazine trên nền Genesis bạn ạh, theme này trả phí nhưng bạn có thể search trên mạng khá nhiều và hiện tại thì tác giả không còn hỗ trợ nữa.

  6. xin hỏi Xman, mình mới cài đặt code background mà xman đưa ở trên, cài ok, đã có biểu tượng nhưng mình tùy chỉnh thì nó không thay đổi background, xman có thể giải thích xem mình làm chưa đúng chỗ nào không? thank xman nhiều

    • bạn có đang dùng plugin cache nào trên site kô

      • chung viết:

        mình có dùng plugin W3 Total Cache, với cả đợt vừa rồi web của mình mới bị hacker tấn công. Mình mong Xman tư vấn thếm cách bảo mật hoặc có bài viết nào cụ thể về bảo mật cho wordpress không gửi cho mình tham khảo.Thank!
        chung đã viết..Hotgirl Tâm tít e ấp vẻ đẹp tinh khôi

        • WordPress bảo mật khá tốt bạn ạh, hack qua wordpress thì mình ít thấy, có lẽ là bạn bị hack qua hosting hoặc để mất account. Hack qua hosting và account thì không liên quan đến script mà do nhà cung cấp và kỹ năng của mỗi người. Thường thì kinh nghiệm của mình là không nên dùng các phần mềm ftp crack vì dễ dính trojan trong soft, 2 nữa là không nên dùng các máy tính kô rõ nguồn gốc để đăng nhập vào các account web vì rất dễ dính keylog hoặc virus bạn nhé

  7. aimong viết:

    Bạn có thể hướng dẫn chi tiết hơn được không? Đoạn mã trên chèn vào đâu? Mở chỗ nào để có thể chèn được đoạn mã trên hả bạn?

Hãy để lại ý kiến

*

Kèm theo bài viết gần đây nhất từ web của bạn