Уроки WordPress

Спонсор поста: Кайзер — это титул германских императоров?
Нет, это такая бытовая техника.

Возможно вам приходилось видеть готовые шаблоны WordPress, в которых при загрузке новых страничек меняется и картинка в верхней части сайта. Согласитесь, что если картинки подобраны тщательно, это может значительно разнообразить дизайн, хотя есть и противники этого.

Если даже ваша тема WordPress не поддерживает ротацию картинок, эту функциональность можно добавить своими руками в ходе простых манипуляций. Есть множество способов сделать ротацию изображений в WordPress, как с использованием плагинов, так и без них.

Расскажу два варианта ротации: один с помощью плагина, другой посредством простой модификации кода.

Ротация изображений заголовка с помощью кода

Решение было найдено в англоязычном блоге Pearsonified и состоит всего из двух шагов.

Шаг первый

Необходимо подготовить изображения одинакового размера (это важно, если вы хотите, чтобы сайт был валидными) и типа (если одино изображение имеет расширение gif, то и все остальные изображения также должны быть сохранены в gif).

Присваеваем этим изображениям названия в таком порядке:

• header_1.jpg
• header_2.jpg
• header_3.jpg
• header_4.jpg
• header_5.jpg

После этого загрузите изображения в удобную вам папку, например это может быть папка images вашей темы.

Шаг второй

Открываем файл header.php темы, и там, где выводится картинка заголовка, вставляем простой код:

<img src="http://путь_к_изображению/header_<?php echo (rand (1,5)); ?>.jpg"
width="ширина изображения" height="высота изображения" alt="заголовок изображения" />

Сложнее придется тем, у кого в шаблонах изображение заголовка вставляется в качестве бэкграунда через css-стиль.

Для этого придется создать отдельные div элементы для заголовка — banner_1, banner_2, banner_3 и так далее. После этого для каждого элемента banner назначаем свою картинку беэкграунда.

Тогда код в header.php будет выглядеть примерно так:

<div id="banner_<?php echo (rand (1,8)); ?>">

Такая структура в произвольном порядке будет выбирать один из определенных заранее div-элементов в вашем css-стиле.

Плагин — Header Image Rotator

• Меняет изображения по времени (каждую минуту, полчаса, час, день, неделю, месяц).
• Позволяет использовать столько изображений, сколько пожелаете.
• Поддерживает различные типы изображенй (jpg, gif, и т.д.)
• Обеспечивает просмотр и удаление изображений прямо на панели управления настройками.

Установка:

1. Разспакуйте и загрузите плагин в директорию /wp-content/plugins/.

2. Создайте папку «header-images» в директории /wp-content/.

3. Добавьте необходимые изображения в папку «header-images».

4. Активируйте плагин на админ-панели.

5. Зайдите в раздел Админка — Настройки — Header Image Rotator и выставьте необходимые параметры.

Скачать плагин на сайте разработчика.

Внимание! По умолчанию, автор плагина считает, что картинка заголовка вызывается через css-стиль header, если у вас этот стиль называется по-другому, например header-img, вам необходимо указать это в настройках плагина.

Опубликовано 24 Фев 2008 в 15:45. Автор: Анастасия. Рубрика: Настройки и плагины, Разработка шаблонов. Вы можете следить за ответами к этой записи через RSS 2.0. Вы можете оставить отзыв или трекбек со своего сайта.