Часто веб-мастера хотят, чтобы их сайт или блог выглядел как-то особенно. Для вас, читатели моего блога, я хочу показать эффект для сайта "смена картинки в шапке сайта".
С каждым обновлением страницы или переходом, на сайте будет меняется шапка сайта. Этот эффект сделает ваш сайт ярким, интересным, не стандартным и профессиональным.
Итак, приступим.
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
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Шумящий эффект для картинки при наведении
Эффект для ссылки – радужная ссылка
Выделение цветом ссылок при наведении на параграф
Фиксированное меню при прокрутке сайтаПохожие статьи
CSS3 фильтры изображений
Как вывести ссылки «Следующая» и «Предыдущая» запись в WordPress
Как исправить корявые кавычки в WordPress
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 330346 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274701 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 222535 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 187747 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186564
А как к конкретному пункту меню привязать свою картинку в шапке ?
Роман, в папку “images” залейте картинки с названием “1.jpg”, “2.jpg”, “3.jpg”, “4.jpg”.
Там где будет шапка, ставьте вот этот код:
Вы по сути повторили то, что у вас написано в статье, но так и не ответили на вопрос как к конкретному пункту меню привязать свою картинку в шапке ?
Если Вы нажмете у меня в меню на “контакты”, хвост ссылки будет “kontakty”, если нажмете на “автор”, хвост будет “avtor”.
Код значит будет вот такой:
<? if($name=="avtor"){$fonimg = "icon-avtor.jpg";} if($name=="kontakty"){$fonimg = "icon-bootsrap.jpg";} ?> <img src="/wp-content/themes/bloggood/images/<? echo $fonimg; ?>">Кстати, хвост можно определить вот этим кодом:
Попробуйте сами разобраться в моем коде. Если не получиться, буду писать статью на эту тему, так как в комментариях сильно будет много информации.
Этот код действует только на страницы, на записи он не действует.
То есть, если у меня пункты меню состоят из рубрик и страниц, на пункты меню которые состоят из страниц этот код будет работать, а на пункты меню которые состоят из рубрик не будет ? А какой код будет работать для рубрик и как можно совместить код для рубрик и страниц ? Заранее спасибо.
Вообще нужно организовывать не через IF а через switch, так будет правильней. Если у страниц и у рубрик один GET параметр то связать можно, если разный GET то нет. Если разный GET параметр, то для страниц нужно прописывать свой переключатель, а для рубрик свой
Пример. Здесь есть Ноо… Откуда взялась переменная $name? Если это GET параметр, тогда нужно объявить переменную, что то вроде этого:
$name = $_GET[‘name’];
switch($name) { case 'avtor' : $fonimg = 'адрес картинки'; break; case 'kontakty' : $fonimg = 'адрес картинки'; break; }Роман, отвечаю на вопрос: “А какой код будет работать для рубрик и как можно совместить код для рубрик и страниц ?”
Если 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 параметр. А как это сделать написал выше.
И так, показываю код и поясняю. Для начала создаем картинки и заливаем в папку 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, а то работать не будет.
Вот только один нюанс, я вот не в курсе как сделать с ЧПУ, то есть со страницами получается а вот с категориями нет. Если найду решение напишу
Мой код работает если Постоянные ссылки заданы произвольно
И так, для тех у кого настроены ссылки ЧПУ вида /%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; }Остальное остается все так же как и писал в комментариях выше.
Короче у кого ссылки ЧПУ то ставим этот код, у кого ссылки не настроены и в настройках указано “Простые” ставим код выше.
Чтобы просмотреть работу последнего кода идем сюда wm.freeacces.ru. Я здесь настроил работу кода для нормальных ЧПУ вида /%category%/%postname%.html. В принципе работает и с ЧПУ вида /%category%/%postname%.
Запарился с последним кодом но сделал:?:
И все это дорогие читатели только для вас
Спасибо, Александр!
Привет Степан! Пожалуйста, вот можно вообще написать пост на ту тему, вот и напиши, может что усовершенствуешь
Саша большое спасибо !
Пожалуйста Роман. Надеюсь у вас получилось реализовать.