Как настроить добавление произвольных изображений в область header’а

Каждая новая версия WordPress несет в себе набор интересных функций и возможностей. Одна из таких возможностей, появившаяся в версии 3.0 — добавление изображений в область header’а. Эта функциональность выпала из моего внимания, однако сейчас я решил снова к ней вернуться. До версии 3.0, чтобы решить проблему с изображением в header’е, необходимо было использовать произвольные поля или устанавливать отдельный плагин. К счастью, команда разработчиков WordPress добавила указанную функциональность непосредственно к ядру системы.

Так получилось, что в числе требований к будущему проекту клиент указал наличие настраиваемых изображений в области header’а, и я решил посмотреть, насколько трудно это будет реализовать. Как я понял, ничего сложного в реализации этого решения нет.

Для начала вам понадобится отредактировать файл functions.php, расположенный в каталоге с темой. Если этого файла там нет, то создайте его. Теперь скопируйте и вставьте в него приведенный ниже код. Комментарии в тексте кода помогут вам разобраться, что и как он делает. Вам останется лишь изменить высоту и ширину изображений, а также установить путь к своим каталогам.

<?php
//Проверяем, существует ли функция customisetheme_setup
if ( !function_exists('customisetheme_setup') ):
     //Любые изменения темы выполняются в этой функции
     function customisetheme_setup() {
         //Определяем стандартное изображение для области header
         define( 'HEADER_IMAGE', '%s/header/default.jpg' );
         
         //Определяем ширину и высоту этого изображения
         define( 'HEADER_IMAGE_WIDTH', apply_filters( 'customisetheme_header_image_width', 960 ) );
         define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'customisetheme_header_image_height', 220 ) );
         
         //Убираем текст на месте изображения
         define( 'NO_HEADER_TEXT', true );
         
         //Не забываем добавить функциональность в меню администратора
         add_custom_image_header( '', 'customisetheme_admin_header_style' );
         
         //Добавляем несколько произвольных изображений, столько, сколько вам захочется
         //%s это заполнитель для вашего каталога с темой 
         $customHeaders = array (
                 //Image 1
                 'perfectbeach' => array (
                 'url' => '%s/header/default.jpg',
                 'thumbnail_url' => '%s/header/thumbnails/pb-thumbnail.jpg',
                 'description' => __( 'Perfect Beach', 'customisetheme' )
             ),
                 //Image 2
                 'tiger' => array (
                 'url' => '%s/header/tiger.jpg',
                 'thumbnail_url' => '%s/header/thumbnails/tiger-thumbnail.jpg',
                 'description' => __( 'Tiger', 'customisetheme' )
             ),
                 //Image 3
                 'lunar' => array (
                 'url' => '%s/header/lunar.jpg',
                 'thumbnail_url' => '%s/header/thumbnails/lunar-thumbnail.jpg',
                 'description' => __( 'Lunar', 'customisetheme' )
             )
         );
         //Регистрируем изображения в WordPress
         register_default_headers($customHeaders);
     }
endif;

if ( ! function_exists( 'customisetheme_admin_header_style' ) ) :
     //Функция добавляет стили к панели администратора
     //Измените их по своему вкусу
     function customisetheme_admin_header_style() {
     ?>
         <style type="text/css">
             #wpbody-content #headimg {
                 height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
                 width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
                 border: 1px solid #333;
             }
         </style>
     <?php
     }
endif;

//Приводим в исполнение нашу произвольную функциональность
 add_action( 'after_setup_theme', 'customisetheme_setup' );
?>      

Как только вы добавите представленный выше код в functions.php, вы увидите новый пункт «Header» в секции «Внешний вид». Теперь нам осталось только добавить изображение для области header к теме.

То место, куда вам необходимо будет поместить следующий код, напрямую зависит от вашей темы; я решил поместить код в файл header.php, поскольку я хочу, чтобы изображение появилось на каждой странице. Вы можете настроить, чтобы изображение выводилось только в определенных шаблонах (к примеру, в архивах, в рубриках, на страницах и т.д; произвести такую настройку в WordPress можно и с помощью условных тегов).

<div id="header">
     <!-- здесь идет код области header.... -->
     
     <!-- эта строка добавляет header к теме -->
     <img id="headerimg" src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="Header image alt text" />
</div>

Теперь у вас есть изображение, расположенное в области header, и это изображение вы легко можете изменить через панель администратора. Атрибут ID, добавленный к изображению, используется для дополнительной CSS-стилизации.

Пример выше является упрощенной версией функциональности, отвечающей за добавление произвольного изображения в область header’а. Реализация остальных аспектов выходит за рамки данной статьи.

http://nooshu.com/adding-a-custom-header-image-to-your-wordpress-theme