Картинки для шапки сайта, которые меняются в течение дня

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

Большинство шаблонов WordPress поддерживают статичную картинку для шапки сайта. Однако этот приём был впечатляющим несколько лет назад, сейчас же это обычное явление и выделиться с этим нельзя. Гораздо лучше запоминается и привлекает, когда изображение в шапке меняется автоматически. И в этой статье мы расскажем, как сделать так, чтобы картинки менялись в зависимости от времени суток – очень интересный эффект, который при правильном исполнении понравится и запомнится каждому посетителю сайта.

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

Картинки в шапке, которые меняются от времени суток

Итак, картинка для шапки сайта управляется файлом шаблона header.php, поэтому область для неё будем делать там. Для этого в данном файле нужно написать код:

<div id=”times” class=”times of day-<?php echo $vremya; ?>”> </div>

• times – это идентификатор области для отображения картинки шапки сайта. Написать можно всё, что угодно.
• times of day – это касс CSS, который мы опишем ниже. Благодаря коду, написанному после class, мы подключаем необходимый стиль к области картинки шапки сайта, и именно этот стиль будет управлять переключением в определённое время суток.

Чтобы картинка для шапки сайта умела определять текущее время, перед её областью в файле header.php нужно создать функцию now_times:

<?php

$ now_times = date(‘G’);

if($now_times <8)

{

$times = 1;

}

elseif($now_times <12 && $now_times >=8 )

{

$ times = ‘2‘;

}

elseif($now_times >=12 && $now_times <17)

{

$ times = ‘3‘;

}

elseif($now_times >=17 && $now_times <=23)

{

$ times = ‘4‘;

}

?>

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

Теперь подключаем стили и сами картинки для шапки сайта. Для этого добавляем в файл styles.css следующий код:

. times-1{

background:url /адрес для ночной картинки.jpg;

}

. times-2 {

background:url /адрес для утренней картинки.jpg;

}

. times-3 {

background:url /адрес для дневной картинки.jpg;

}

. times-4 {

background:url /адрес для вечерней картинки.jpg;

}

Для того чтобы картинки для шапки сайта менялись от времени суток, необходимо в стилях прописать для них адрес. Желательно, чтобы они находились на вашем же сайте. И после этого можно уже идти смотреть, что получилось.