Tính năng chủ đề WordPress Custom Header

Được giới thiệu trong phiên bản WordPress 2.1, tiêu đề tùy chỉnh WordPress là một tính năng chủ đề cho phép người dùng chọn hình ảnh đại diện xuất hiện, thường là ở phần trên cùng của chủ đề / trang web.Trong khi hình ảnh nổi bật là đại sứ hoặc đại diện của một mục cụ thể, hình ảnh tiêu đề là đại diện cho toàn bộ trang web. Nó chỉ ra một cách trực quan cho khách truy cập những gì họ muốn xem / đọc trong trang web hoặc chỉ đơn giản là một phần đi kèm trực quan ngẫu nhiên với nội dung. Để đơn giản cho phép chủ đề của bạn sử dụng trong tương lai này, hãy thêm phần sau vào :functions.php
add_theme_support( 'custom-header' );
Thông thường, bạn sẽ muốn kiểm soát nhiều hơn một chút đối với tính năng này ngoài việc chỉ làm cho nó khả dụng. Ví dụ: bạn có thể muốn đặt hình ảnh mặc định được sử dụng khi người dùng không tải lên và chỉ định hình ảnh tiêu đề tùy chỉnh. Bạn cũng có thể muốn kiểm soát chiều rộng và chiều cao. May mắn thay, hàm này chấp nhận một số đối số.

Xác định chức năng

Giả sử chúng tôi muốn một hình ảnh không rộng hơn 960px. Chúng tôi cũng muốn đặt chiều cao mặc định là 100px nhưng miễn là chiều rộng vẫn dưới 960, chiều cao có thể bằng bất kỳ giá nào (dù sao cũng có thể so với chiều rộng đã đặt). Ngoài ra, chúng tôi muốn đặt hình ảnh tiêu đề mặc định thành default-sunset-header.jpg tệp đẹp của chúng tôi đã có trong thư mục hình ảnh / trong thư mục chủ đề. Ngoài ra, chúng tôi muốn cho phép người dùng tải lên hình ảnh của chính họ để thay thế hình ảnh mặc định.

Để thực hiện điều này, sau đó chúng tôi sẽ điều chỉnh hàm trên trông giống như sau:add_theme_support()

add_theme_support( 'custom-header', array (
  'width'             => 960,
  'height'            => 100,
  'flex-height'        => true,
  'default-image'     => get_template_directory_uri() . '/images/default-sunset-header.jpg',
  'uploads'           => true
));

Sử dụng chức năng

Để xuất tiêu đề một cách đơn giản, chúng tôi sử dụng header_image hàm. Do chiều rộng và chiều cao đã được đặt rõ ràng, việc thêm các giá trị đó vào thẻ có thể là cần thiết.<img>
<img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>">
Tùy thuộc vào cách bạn sử dụng tính năng này, bạn có thể muốn / cần bao bọc đầu ra trong một liên kết liên kết đến URL trang chủ. Ngoài ra, bạn có thể cần phải kiểm tra xem hình ảnh tiêu đề có thực sự tồn tại hay không trước khi xuất ra đánh dấu ở trên.

Để kiểm tra xem hình ảnh tiêu đề có tồn tại hay không và bao bọc nó trong một home_url liên kết, hãy thay thế hình ảnh trên bằng hình ảnh sau:

<?php if ( get_header_image() ) : ?>
  <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
    <img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>">
  </a>
<?php endif; ?>

Đây là cách tiếp cận điển hình mà WordPress áp dụng cho các tính năng của chủ đề:

  1. trước tiên, bạn cho phép sử dụng chúng thông qua functions.php của theme, sau đó,
  2. trong các mẫu chế độ xem, bạn thực hiện kiểm tra có điều kiện để xem liệu người dùng của chủ đề đã sử dụng tính năng đã xác định chưa và nếu họ có,
  3. sau đó bạn xuất bất cứ thứ gì mà họ, tốt, đầu vào.
Hơi phức tạp nhưng khá trực quan: Xác định, kiểm tra và sau đó xuất.