Делаем плагин для WordPress.Ротатор картинок для шапки сайта. Вариант на PHP, без использования mySQL

Наблюдая за знакомыми на работе я заметил, что они кликают в картинки заголовка http://lifelongjourney.ru в надежде попасть на посты, содержащие эту самую фотку.

Раньше там стояла просто длинная картинка, скленная из 4-х более маленьких по размеру. Линк с нее, соответсвенно, вел на один пост. Ну и зародилась идея поеразть этот коллаж и еще имеющихся в запасе 3 штуки на 16 фото, сделать к каждой картинке ссылку и выводить это все в заголовке, собирая рандомно 4 картинки. Смотрим на lifelongjourney.ru в шапку сайта.

Ну и вот, что из этого получилось.

Для начала нарезал 16 картинок размером 275×182
Т.к. используется дочерняя тема (про дочернии темы как-нибудт напишу подробно), то все изменения проводим в файлах дочерней темы. Сразу сделаем задел на будущее – будем генерировать вывод функцией, соответсвенно в functions.php дочерней темы добавляем

function get_header_imageset(){
 $out = ‘’;
 echo $out;
 }

а в header.php добавляем вызов нашей функции, вместо картинки со ссылкой

getGeaderImageSet();

Тепрь дополним getGeaderImageSet() реальным конетнтом. Сделаем 2 массива – один под адреса картинок и второй под ссылки

$images = array();
 $links = array();

и наполним их данными

$images[0] = ‘http://lifelongjourney/…../Pict1.jpg’;
…
$images[15] = ‘http://lifelongjourney/…../Pict15.jpg’;

$links[0] = ‘http://lifelongjourney.ru/Post1’;
..
$links[15] = ‘http://lifelongjourney.ru/Post15’;

Цикл, который будет делать заголовок из 4-х картинок

//перменная i – 20 Лет на рынке счетчика циклов, традиции надо уважать :D
for ($i = 0; $i < 4; $i++){
    $out .= “<a href=\”$link[$i]\”><img src=\”$images[$i]\”></a>”; //используются “, а не ‘, т.к. внутри “” производится подстановка перменных
}

Ну первыч 4 картинки скрипт нам выводит! Ура. Почти победа.

Пока отложим файл functions.php в сторону и займемся CSS. Хотелось бы, чтобы картинки выглядили так же как и в исходном изображении – т.е. черная рамочка 4px вокруг каждой картинки. Учтем, что картинки, стоящие внутри не должны иметь одной грани, иначе выйдет слишком толстая граница. Для этого идем в файл style.css.

div#header-image a img{
border-color: black;
border-style: solid;
border-width: 4px 4px 4px 0;
display: block;
float: left;
margin: 0;
padding: 0;
}

div#header-image a img#first_pict{
border-color: black;
border-style: solid;
border-width: 4px 4px 4px 4px;
display: block;
float: left;
margin: 0;
padding: 0;
}

Обратим внимание на #, это селектор тега с определенным ID, не самый гибкий спопсоб, но нам подойдет, как раз ничего лишнего не затронем. В пирмере два блока почти идентичного кода, для первой картинки и для всех последующих. Первая имеет все 4 границы, а остальные только верхнюю, правую и нижнюю.

Теперь надо добавить в строчку генерации картинок тот самый ID. Меняем цикл.

for ($i = 0; $i < 4; $i++){
if ($i % 4 != 0) $id = “”; else $id = “id = \”first_pict\””;
$out .= “<a href=\”$link[$i]\”><img $id src=\”$images[$i]\”></a>”;
}

% – это остаток от деления, сделано так, чтобы при желании можно было выводить несколько рядов картинок. ПРи таком исполнении каждый ряд будет начинаться как и первый с картинки, полностью убраной в рамку.

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

$vImageCount = 16;//Всего картинок
$selected_images = array();//Каритнки, уже добавленные в заголовок

и теперь будет выбирать номер картинки функцией

for ($i = 0; $i < 4; $i++){
//if ($i != 0) $id = "";
if ($i % 4 == 0) $id = "id = \"first_pict\""; else $id = "";
$rnd = getNextImage($selected_images,$vImageCount);
$out .= "<a href=\"$links[$rnd]\"><img $id src=\"$images[$rnd]\"></a>\n";
}

getNextImage – новая функция, которую мы сейчас напише. Ей в параметрах передаются массив, с уже добавленными картинками и общее число картинок, участвующих в выборе.

/*
$selected_images – массив с номерами фотографий из заголовка
$maxCount – общее число картинок, участвующих в выборе
*/

function getNextImage(&$selected_images,$maxCount){
$arr_len = count($selected_images);//сколько всего картинок уже в заголовке
do{
$nextImage = mt_rand(0, $maxCount-1);//получить случайное число от 0 до максимального числа картинок
}while ($arr_len != 0 && in_array($nextImage,$selected_images));//Число считается выбранным, елси это первая картинка или такой номер отсутсвует среди уже добавленных
$selected_images[$arr_len] = $nextImage;//сохранить картинку в заголовке
return $nextImage;//вернуть ее номер в вызывающую функцию
}

Финальный вид двух функций:

//=================================================================================
/*
Function return UNIQUE number between 0 and $maxCount-1
$selected_images - array with imges already added into header.
$maxCount - total imgae count
*/
function getNextImage(&$selected_images,$maxCount){
$arr_len = count($selected_images);
do{
$nextImage = mt_rand(0, $maxCount-1);
}while ($arr_len != 0 && in_array($nextImage,$selected_images));
$selected_images[$arr_len] = $nextImage;
return $nextImage;
}
/*
Function generates header image consits from 4 small images with links
*/
function get_header_imageset(){
$vImageCount = 16;//Total image count
$selected_images = array();//Imgaes already added into header

$images = array    (
0 =>     'http://lifelongjourney.ru/***/header_images/Sablino_small.jpg',
1 =>     'http://lifelongjourney.ru/***/header_images/Karpaty1_small.jpg',
2 =>     'http://lifelongjourney.ru/***/header_images/Karpaty2_small.jpg',
3 =>     'http://lifelongjourney.ru/***/header_images/Nepal_small.jpg',
4 =>     'http://lifelongjourney.ru/***/header_images/Crimea_Demerdgi_small.jpg',
5 =>     'http://lifelongjourney.ru/***/header_images/Karelia_OD_small.jpg',
6 =>     'http://lifelongjourney.ru/***/header_images/Moscow_small.jpg',
7 =>     'http://lifelongjourney.ru/***/header_images/Nepal_Tilicho_small.jpg',
8 =>     'http://lifelongjourney.ru/***/header_images/Crimea_demerdgi_fog_small.jpg',
9 =>     'http://lifelongjourney.ru/***/header_images/Crimea_sea_fog_small.jpg',
10 =>     'http://lifelongjourney.ru/***/header_images/Nepal_clouds_small.jpg',
11 =>    'http://lifelongjourney.ru/***/header_images/Nepal_Tilicho_Lake_small.jpg',
12 =>    'http://lifelongjourney.ru/***/header_images/Crimea_Demerdji_Over_Clouds_small.jpg',
13 =>    'http://lifelongjourney.ru/***/header_images/Paraplan_small.jpg',
14 =>    'http://lifelongjourney.ru/***/header_images/Shushmor_night_small.jpg',
15 =>    'http://lifelongjourney.ru/***/header_images/Warsaw_old_city_small.jpg'
);

$links = array    (
0 =>    'http://lifelongjourney.ru/2012/03/08/sablinskie-podzemelya-zabroshennaya-kamenolomnya-plyazhnaya/',
1 =>    'http://lifelongjourney.ru/2012/05/17/pervocvety-guculshhiny-vesennij-treking-v-karpatax/',
2 =>    'http://lifelongjourney.ru/2012/05/17/pervocvety-guculshhiny-vesennij-treking-v-karpatax/',
3 =>     'http://lifelongjourney.ru/2011/09/14/nepal-2011-vokrug-annapurny-v-sezon-dozhdej/',
4 =>    'http://lifelongjourney.ru/2012/03/15/zimnij-krym/',
5 =>    'http://lifelongjourney.ru/2010/11/13/osudareva-doroga/',
6 =>     'http://lifelongjourney.ru/2011/10/24/o-progulke-po-moskve-reke-i-kremlevskix-zvyozdax/',
7 =>    'http://lifelongjourney.ru/2011/11/19/annapurna-v-sezon-dozhdej-manang-tilicho-base-camp-4-avgusta/',
8 =>    'http://lifelongjourney.ru/2012/03/15/zimnij-krym/',
9 =>     'http://lifelongjourney.ru/2012/11/14/volshebnyj-krym-v-yanvare/',
10 =>    'http://lifelongjourney.ru/2011/11/02/annapurna-v-sezon-dozhdej-shrichaur-tal-28-iyulya/',
11 =>    'http://lifelongjourney.ru/2011/11/20/annapurna-v-sezon-dozhdej-tilicho-base-camp-ozero-tilicho-tilicho-base-camp-5-avgusta/',
12 =>     'http://lifelongjourney.ru/2012/11/14/volshebnyj-krym-v-yanvare/',
13 =>    'http://lifelongjourney.ru/2012/05/29/proletaya-nad-kon-kamnem/',
14 =>    'http://lifelongjourney.ru/2012/05/29/shushmor-peshkom/',
15 =>    'http://lifelongjourney.ru/2010/12/31/novogodnij-pobeg-29-12-2010/'
);
$out = "";

//make 4 pictures
for ($i = 0; $i < 4; $i++){
//if ($i != 0) $id = "";
if ($i % 4 == 0) $id = "id = \"first_pict\""; else $id = "";
$rnd = getNextImage($selected_images,$vImageCount);
$out .= "<a href=\"$links[$rnd]\"><img $id src=\"$images[$rnd]\"></a>\n";
}
echo $out;
}

В следующий раз перенесем хранение информации о картинках в базу данных.

Поделиться в соц.сетях

• Facebook
• Twitter
• Мой мир
• Вконтакте
• Одноклассники
• LiveJournal
• Яндекс