BloGGood.ru

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

До Нового Года осталось:

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

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

Смена картинки в шапке сайта

2012-10-26 / Вр:20:49 / просмотров: 7027

Часто веб-мастера хотят, чтобы их сайт или блог выглядел как-то особенно. Для вас, читатели моего блога, я хочу показать эффект для сайта "смена картинки в шапке сайта".
С каждым обновлением страницы или переходом, на сайте будет меняется шапка сайта. Этот эффект сделает ваш сайт ярким, интересным, не стандартным и профессиональным.

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

1. Приготовьте или сделайте несколько изображений для шапки сайта (блога), дайте им имя  1.jpg, 2.jpg, 3.jpg и так далее. Вы можете создать столько картинок, сколько пожелаете.

2. Загрузите картинки в папку wp-content/themes/ваша_тема/images
Можно создать другую папку, например img-heder. Тогда путь к картинка будет таким: wp-content/themes/ваша_тема/img-heder

3. Теперь нужно отредактировать файл header.php. Откройте файл header.php и вставьте в него этот код:

<? $num = rand(1,10); ?>
<div id="header" style="background:transparent url(images/<?php echo $num; ?>.jpg) no-repeat top left;">

$num  имя переменной,
rand() для получения случайных чисел в диапазоне от 1 до 10,
url(images/<?php echo $num;?>.jpg) результат добавляется в переименую $num,
images папка, в которой находятся ваши шапки.

Если у вас меньше шапок, например 7, тогда нужно уменьшить число в коде rand(1,7), если больше 10, например 15, тогда
rand(1,15).

Пример:

<?$num = rand(1,15);?>

Вот и все! Пользуйтесь на здоровье.

С уважением Webmasterok2009

   

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

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

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

18 Ответов на комментарий - Смена картинки в шапке сайта

  1. Роман

    А как к конкретному пункту меню привязать свою картинку в шапке ?

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Роман, в папку “images” залейте картинки с названием “1.jpg”, “2.jpg”, “3.jpg”, “4.jpg”.
    Там где будет шапка, ставьте вот этот код:

    <? $num = rand(1,4); ?>
    <div id="header" style="background:transparent url(images/<?php echo $num; ?>.jpg) no-repeat top left;">
    

    Ответить

    Роман отвечает:

    Вы по сути повторили то, что у вас написано в статье, но так и не ответили на вопрос как к конкретному пункту меню привязать свою картинку в шапке ?

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Если Вы нажмете у меня в меню на “контакты”, хвост ссылки будет “kontakty”, если нажмете на “автор”, хвост будет “avtor”.
    Код значит будет вот такой:

    <? 
    if($name=="avtor"){$fonimg = "icon-avtor.jpg";}
    if($name=="kontakty"){$fonimg = "icon-bootsrap.jpg";}
    ?>
    
    <img src="http://bloggood.ru/wp-content/themes/bloggood/images/<? echo $fonimg; ?>">
    

    Кстати, хвост можно определить вот этим кодом:

    <? print_r($name); ?>
    

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

    Ответить

    Роман отвечает:

    То есть, если у меня пункты меню состоят из рубрик и страниц, на пункты меню которые состоят из страниц этот код будет работать, а на пункты меню которые состоят из рубрик не будет ? А какой код будет работать для рубрик и как можно совместить код для рубрик и страниц ? Заранее спасибо.

  2. Вообще нужно организовывать не через IF а через switch, так будет правильней. Если у страниц и у рубрик один GET параметр то связать можно, если разный GET то нет. Если разный GET параметр, то для страниц нужно прописывать свой переключатель, а для рубрик свой

    Ответить

  3. Пример. Здесь есть Ноо… Откуда взялась переменная $name? Если это GET параметр, тогда нужно объявить переменную, что то вроде этого:
    $name = $_GET[‘name’];

    switch($name) 
    {
    case 'avtor' :
       $fonimg = 'адрес картинки';
    break;
    
    case 'kontakty' :
      $fonimg = 'адрес картинки';  
    break;  
    
    }

    Ответить

  4. Роман, отвечаю на вопрос: “А какой код будет работать для рубрик и как можно совместить код для рубрик и страниц ?”

    Если GET параметр одинаковый, то есть и у страниц и у рубрик GET вида http://сайт.ru/?page=7, в данном случае здесь GET это $_GET[‘page’], одинаковый то совместить можно. Но я в этом очень сомневаюсь… Так как страницы это одно, а рубрики вордпресс формирует по другому GET. Соответственно придется прописывать разные переключатели страниц, отдельно для рубрик и отдельно для страниц.

    Как узнать где какой GET параметр?

    Все просто, идете в админку и на время в мню Настройки – Постоянные ссылки выбираете “Простые”, Далее обновляете страницу блога и переходите по ссылка страниц, увидите GET параметр, на моем блоге это вид freeacces.ru/?page_id=7, то есть здесь GET параметр вида $_GET[‘page_id’], а у рубрик у меня вид ссылок freeacces.ru/?cat=3 где GET будет $_GET[‘cat’].

    Так что сволить все в кучу не получится, просто пропишите переключатель отдельно для страниц и отдельно для рубрик и соответственно у вас получится два переключателя switch,

    К примеру:
    Один будет для страниц
    switch($_GET[‘page_id’])

    // здесь делам то что касается страниц

    Второй будет для страниц
    switch($_GET[‘cat’])

    // здесь делам то что касается рубрик

    Главное проверить какой именно у вас GET параметр. А как это сделать написал выше.

    Ответить

  5. И так, показываю код и поясняю. Для начала создаем картинки и заливаем в папку images вашей темы, далее создаем файл с расширением .php, в моем примере я назвал его switch.php и прописываем в него код. Файл switch.php я залил не в корень сайта, а в корень с нашей темой, то есть адрес такой wp-content/themes/ваша тема/switch.php

    Пример кода

    // Мой переключатель картинок страниц
    $page = isset($_GET['page_id']) ? $_GET['page_id'] : false;
    
    switch($page) 
    {
    case '6' : // Здесть страница автор где page_id=6
       $fonimg = 'avtor.jpg';
    break;
    
    case '4' : // Здесть страница контакты где page_id=4
      $fonimg = 'contact.jpg';  
    break;  
    }
    
    //////////////////////////////////////////////////////
    // Мой переключатель картинок рубрик
    $cat = isset($_GET['cat']) ? $_GET['cat'] : false;
    
    switch($cat) 
    {
    case '2' : // Здесть рубрика вебмастер где cat=2
       $fonimg = 'web.jpg';
    break;
    
    case '3' : // Здесть рубрика как заработать где cat=3
      $fonimg = 'kak.jpg';  
    break;  
    }

    Далее идем в админку, выбираем файл header.php и прописываем вот такой код

    <div class="hed">
    <?php include $_SERVER['DOCUMENT_ROOT'].'/wp-content/themes/contango/switch.php';?>
    
    <img src="http://wm.freeacces.ru/wp-content/themes/contango/images/<?=$fonimg?>"/></div>
            
    </div>

    Пример можно посмотреть вот здесь wm.freeacces.ru

    Все работает прекрасно, так что вот вам пример и можете воять все что вам угодно

    Ответить

    Александр отвечает:

    И ГЛАВНОЕ не забываем в файле switch.php в самом начале перед кодом прописать строчку <?php, а то работать не будет.

    Ответить

    Александр отвечает:

    Вот только один нюанс, я вот не в курсе как сделать с ЧПУ, то есть со страницами получается а вот с категориями нет. Если найду решение напишу

    Ответить

    Александр отвечает:

    Мой код работает если Постоянные ссылки заданы произвольно

    Ответить

  6. И так, для тех у кого настроены ссылки ЧПУ вида /%category%/%postname%.html следующий код будет работать для страниц и рубрик, то есть кликая по страницам и рубрикам картинки будут меняться.

    Начнем… Открываем наш файл switch.php и меняем код выше на вот этот код

    <?php
    /**
    * Пример
    * @author Трушкин Александр Сергеевич, http://freeacces.ru
    * @copyright © 2016 freeacces.ru
    */
    /////////////////////////////////////////////////////////
    // Мой переключатель картинок страниц
    
    switch($name) 
    {
    case 'avtor' : // Здесть страница автор
       $fonimg = 'avtor.jpg';
    break;
    
    case 'kontaktyi' : // Здесть страница контакты
      $fonimg = 'contact.jpg';  
    break;  
    }
    
    //////////////////////////////////////////////////////
    //////////////////////////////////////////////////////
    // Мой переключатель картинок рубрик
    $cat = get_the_category($post_id);
    
    switch($cat[0]->name) 
    {
    case 'Вебмастер' : // Здесть рубрика вебмастер
       $fonimg = 'web.jpg';
    break;
    
    case 'Как заработать' : // Здесть рубрика как заработать
      $fonimg = 'kak.jpg';  
    break;  
    }

    Остальное остается все так же как и писал в комментариях выше.

    Короче у кого ссылки ЧПУ то ставим этот код, у кого ссылки не настроены и в настройках указано “Простые” ставим код выше.

    Ответить

  7. Чтобы просмотреть работу последнего кода идем сюда wm.freeacces.ru. Я здесь настроил работу кода для нормальных ЧПУ вида /%category%/%postname%.html. В принципе работает и с ЧПУ вида /%category%/%postname%.

    Запарился с последним кодом но сделал:?:

    И все это дорогие читатели только для вас :arrow:

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Спасибо, Александр! :arrow:

    Ответить

    Александр отвечает:

    Привет Степан! Пожалуйста, вот можно вообще написать пост на ту тему, вот и напиши, может что усовершенствуешь

    Ответить

    Роман отвечает:

    Саша большое спасибо !

    Ответить

    Александр отвечает:

    Пожалуйста Роман. Надеюсь у вас получилось реализовать.

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

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

Subscribe without commenting

Метки: , ,

Мои цели на 2016 год:

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

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

3). Довести количество статей до 600

4). Добиться стабильной посещаемости 2500 человек/сутки

5). Закончить все статьи, которые находятся в черновиках

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

7). Создать книгу

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

9). Довести количество статей до 700

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

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

Количество записей на блоге: 671
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 3683