BloGGood.ru

Блог Костаневича Степана

WordPress, PHP, HTML, CSS, Windows

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Эффекты для сайта » Меняется шапка сайта по времени

Меняется шапка сайта по времени

2012-10-28 / Вр:16:09 / просмотров: 8030

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

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

Итак, начнем.
В Wordpress откройте  файл header.php
(Внешний вид > Редактор > header) 
 и ищем место, где выводится шапка вашего сайта или блога, например:

<div id="header"></div>

или

<div id="head"></div>

Далее добавляем к этому блоку класс «time-»:

class="time-<?php echo $time; ?>"

Теперь над выводом шапки сайта добавим функцию $now_hours:

<?php
$now_hours = date('G');
if($now_hours<8)
{
$time = 'night';
}
elseif($now_hours<12 && $now_hours>=8 )
{
$time = 'morning';
}
elseif($now_hours>=12 && $now_hours<17)
{
$time = 'day';
}
elseif($now_hours>=17 && $now_hours<=23)
{
$time = 'evening';
}
?>

Сохраните файл.

night - ночь,
morning - утро,
day - день,
evening - вечер.

В этой строке elseif($now_hours>=17 && $now_hours<=23меняем время.

Теперь откроем файл style.css и добавим нужную нам шапку, например:

/* Ночь */
 .time-night
 {
 background:url (/images/night.jpg);
 }
 /* Утро */
 .time-morning
 {
 background:url (/images/morning.jpg);
 }
 /* День */
 .time-day
 {
 background:url (/images/day.jpg);
 }
 /* Вечер */
 .time-evening
 {
 background:url (/images/evening.jpg);
 }

Сохраните файл.

Картинки night.jpg, morning.jpg, day.jpg, evening.jpg разместите в папке images, в вашей теме WordPress.

Меняется шапка сайта по времени.

Если вы все сделали правильно, то должно работать..... ;)

С Уважением Webmasterok2009

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

2 Ответов на комментарий - Меняется шапка сайта по времени

  1. Антон

    Степан здравствуйте. Идея интересная. Накачать картинок на темы дня ночи и немножко переделать их в фотошопе под вашу тематику сайта. Думаю будет красиво! Добавил ваш блог в закладки, много нужной информации тут у вас. Попробую осилить)

  2. Avatar photo Степан => автор блога

    Спасибо за комментарий, Антон. Рад что информация на моем блоге интересная и полезная людям. Желаю вам творческих успехов.

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 810
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4716