Как настроить добавление произвольных изображений в область 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