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:

  • duong phong

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

    • http://thegioimanguon.com xman

      bạn chèn vào file functions.php nhé

  • Ola

    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/

    • http://thegioimanguon.com xman

      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

      • Ola

        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

  • Tâm

    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!

    • http://thegioimanguon.com xman

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

  • whynot

    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.

    • http://thegioimanguon.com xman

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

      • nam

        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.

        • http://thegioimanguon.com xman

          bạn có thể dùng hàm < ?php get_header_image() ?> để lấy ảnh của header ra nhé :)

  • Đức

    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

    • http://thegioimanguon.com xman

      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.

  • http://dephiendai.net/ chung

    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

    • http://thegioimanguon.com xman

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

      • chung

        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!

        • http://thegioimanguon.com xman

          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é

  • aimong

    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?

    • http://thegioimanguon.com xman

      vào functions.php bạn nhé