BloGGood.ru

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

WordPress, PHP, HTML, CSS, Windows

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

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

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

2012-10-29 / Вр:20:11 / просмотров: 8471

Вот этот эффект для сайта действительно нужная вещь, особенно для тех веб-мастеров, которые любят менять шапки сайта по временам года в ручном режиме. При установки этого готового кода, шапка сайта будет меняется автоматически, зимой, весной, летом, осенью. Веб-мастеру только нужно один раз установить готовый код и четыре рисунка шапки и все, это весь процесс :).
Объясняю принцип работы этого эффекта:
к шапке блога или сайта нужно прописать класс «month-» (в переводе с анг. month означает месяц),
функция date() выводит  нынешний месяц, вот что получается: month-01 или month-12 ,
в файле CSS к каждому сезону указываем шапку сайта или фоновую картинку.

Итак, приступим.

Пример я буду показывать для сайтов CMS WordPress, для сайтов созданных на php можно проделать то же самое в своих файлах.
В Wordpress откройте  файл header.php
(Внешний вид > Редактор > header.php)  и ищем место где выводится шапка вашего сайта или блога, например:

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

или

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

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

class="month-<?php echo date('m'); ?>"

Это будет выглядит вот так:

<div id="header"class="month-<?php echo date('m'); ?>"</div>

или вот так

<div id="head" class="month-<?php echo date('m'); ?>"</div>

все зависит как вы назвали блок, header или head, возможно вы назвали этот блок по другому.

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

В файле style.css пишем:

/* Весна */
 .month-03, .month-04, .month-05
 {
 background:url(/img/vesna.jpg );
 }
 /* Лето*/
 .month-06, .month-07, .month-08
 {
 background:url(/img/leto.jpg) ;
 }
 /* Осень*/
 .month-09, .month-10, .month-11
 {
 background:url (/img/osen.jpg) ;
 }
 /* Зима */
 .month-12, .month-01, .month-02
 {
 background:url (/img/zima.jpg) ;
 }

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

Теперь, в папку вашей темы в папку img, нужно сохранить картинки vesna.jpgleto.jpgosen.jpg и zima.jpg.

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

Вот и все. Теперь ваша шапка сайта или фон будет меняться от времени года ;). Если вам понравился эффект для сайта и вы хотите быть проинформированы о новых эффектах на блоге, подписывайтесь на RSS-ленту новостей блога и вы будете в центре всех новостей.

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

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

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

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

  1. олег

    А у меня в хедере вот так

    ‘top_menu’ )); ?>
    </header
    
  2. Avatar photo Степан => автор блога

    И что, больше никакого кода?

  3. олег

    не всё вставилось.

     <html>
    ***********
         <header>
    	    <nav>
    		<?php wp_nav_menu( array( 'theme_location' => 'top_menu' )); ?>
    	    </nav>
         </header>
    ************
    
  4. Avatar photo Степан => автор блога

    Олег, в Вашем случае это будет так:

    <header class="month-<?php echo date('m'); ?>"

    В CSS

    header 
    {
    position: relative;
    display: block;
    width: 1000px;
    height: 270px;
    margin: 0 auto;
    }
    
    /* Весна */
     .month-03, .month-04, .month-05
     {
     background:url(/img/vesna.jpg );
     }
     /* Лето*/
     .month-06, .month-07, .month-08
     {
     background:url(/img/leto.jpg) ;
     }
     /* Осень*/
     .month-09, .month-10, .month-11
     {
     background:url (/img/osen.jpg) ;
     }
     /* Зима */
     .month-12, .month-01, .month-02
     {
     background:url (/img/zima.jpg) ;
     }
    

    Картинки загружаете в папку img.
    Будете пробовать с кодом, обязательно сделайте резервную копию файлов.

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

;-) :| :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