Делаем хедер на WordPress со сменяющимися картинками


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

Не знаю, может быть я плохо искал, но  для WordPress так и не сумел найти готового плагина для решения данной задачи. Избалованный Joomla с ее огромным набором модулей, в числе которых есть и для решения данной задачи, меня как-то не прельщало писать  самому плагин для WP, тем паче, что я не профильный веб-программист. Однако привыкший все время хитрить, я выкрутился из этой щекотливой ситуации нижеприведенным способом.

Вообще, лично я знаю только несколько способов сделать сменяющуюся картинку – собрать gif набор картинок, флэш анимация и javascript (точнее, его фрэймворк Jquery). Gif я сразу отмел, так как заказчик хотел сделать рандомный перебор картинок, к флэшу я все время был равнодушен. Поэтому решил связаться с JQuery. Повторюсь еще раз – возможно, что способов решения данной задачи значительно больше, но я их, к сожалению, не знаю.

Итак, чтобы не изобретать вновь велосипед, я решил  пробежаться по готовым плагинам, использующих  JQuery для показа слайд-шоу. Зачем писать что-то новое, если есть готовое? (первая заповедь программиста :) ) . Выбор мой пал на Superb slideshow gallery.

Настройка плагина

Мне понравилось, что в этом плагине можно задавать паузу между показами изображений, задавать рандомность, ну и такие «пустяковые» параметры как ширина и высота. Вообще, этот плагин может крутить изображения как на странице, так и в виджете. Но мы спокойно его засунем в шапку сайта.

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

После установки плагина, у вас появится папка images в директории распакованного Superb SlideShow gallery. Там лежат дефолтные четыре картинки. Удаляем их, а на их место кладем наши изображения (у меня их было 27). Чтобы вам проще было потом забивать их в галерею, дайти им простые цифровые имена типа 1,2 и т.д.

Теперь уже в параметрах плагина перейдите во вкладку Go to –Image Managment. Здесь мы и привяжем те изображения к нашему плагину.

Изначально у вас будет четыре картинки добавлено в меню. Возьмите на первом пункте нажмите Edit и скопируйте url указанного изображения. Он нужен нам для того, чтобы не ошибиться с путем.

Теперь остальные пункты можно удалять, так как мы добавим сюда новые.  Я привел вам скриншот с сайта заказчика, чтобы вы поняли куда что вставлять. Вам нужно для каждой новой картинки ввести ее url в одноименное поле и в остальных полях, кроме Display Order проставить так, как у меня. В Display Order укажите порядковый номер картинки. После этого вам нужно нажать  Insert Message и добавлять новую картинку. Учтите, что плагин чувствителен к регистру ввода. Даже расширения изображения JPG и jpg не одно и тоже с его точки зрения, что приведет  к отображению  черного квадрата.

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

Если вы сами нарисовали шапку, то вам проще – вы сами можете указать, где у вас будет слайд-шоу. Если же использовали готовый шаблон, то тогда вам понадобятся Firefox с плагином Firebug. Как им пользоваться я писать, с вашего позволения, не буду, так как уже рассчитываю, что вы это умеете делать. С помощью FireBug нам нужно определить, куда мы вставим вызов функции плагина. Так как здесь все сугубо индивидуально, то показывать  его на конкретном примере просто бессмысленно. Определившись с нужным вам div, теперь  пора сделать небольшую модификацию в файле header.php вашего шаблона.

Откройте его любым привычным вам редактором и сделайте небольшую правку. С помощью поиска найдите нужный вам div. Например, у меня он называется «headerobject», у вас как-то иначе. Теперь в контейнер нужно добавить вызов функции ssg_show ().  У меня такой код выглядит примерно так:

div class="headerobject"; <!--?php  if (function_exists (ssg_show)) ssg_show();?-->

Как видите,  нам нужно использовать php вставку, где мы проверяем на доступность функции ssg_show и в случае успеха вызываем саму функцию. После этого сохраните изменения в файл header.php и запускайте свой сайт для просмотра.

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

Вот так незатейливо и относительно быстро можно сделать слайд-шоу в шапке вашего сайта. Лично мой заказчик оказался доволен.

Рубрика: Web-мастерская

Комментарии

2 коммент. на “Делаем хедер на WordPress со сменяющимися картинками”
  1. woodhead:

    Картинки не увеличиваются. Ссылки, видимо, забыли прописать.

    • Вячеслав "VeGA" Головлев:

      Да, вы правы. Делал все впопыхах, что аукнулось. Кроме того, у меня появилась дурацкая ошибка не проверять работу, что сказывается на обилие очепяток и таких ляпов. Впредь буду внимателен. Спасибо за наблюдательность

Добавить комментарий

Внимание! Не будут добавляться комментарии в виде откровенного спама или прямого анкора на свои сайты. Все спамеры будут передаваться в базу Akismet

Подтвердите, что Вы не бот — выберите человечка с поднятой рукой: