Часто веб-мастера хотят, чтобы их сайт или блог выглядел как-то особенно. Для вас, читатели моего блога, я хочу показать эффект для сайта "смена картинки в шапке сайта".
С каждым обновлением страницы или переходом, на сайте будет меняется шапка сайта. Этот эффект сделает ваш сайт ярким, интересным, не стандартным и профессиональным.
Итак, приступим.
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
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Шумящий эффект для картинки при наведении
Эффект для ссылки – радужная ссылка
Выделение цветом ссылок при наведении на параграф
Фиксированное меню при прокрутке сайтаПохожие статьи
Сайт пока не может обработать этот запрос HTTP ERROR 500
Форма входа для сайта (блога) на WordPress
13 красивых CSS эффектов для изображений
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 331671 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 275609 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 226702 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 193200 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 187094
А как к конкретному пункту меню привязать свою картинку в шапке ?
Роман, в папку «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="https://bloggood.top/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 вида https://сайт.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="https://wm.freeacces.ru/wp-content/themes/contango/images/<?=$fonimg?>"/></div> </div>Пример можно посмотреть вот здесь wm.freeacces.ru
Все работает прекрасно, так что вот вам пример и можете воять все что вам угодно
И ГЛАВНОЕ не забываем в файле switch.php в самом начале перед кодом прописать строчку <?php, а то работать не будет.
Вот только один нюанс, я вот не в курсе как сделать с ЧПУ, то есть со страницами получается а вот с категориями нет. Если найду решение напишу
Мой код работает если Постоянные ссылки заданы произвольно
И так, для тех у кого настроены ссылки ЧПУ вида /%category%/%postname%.html следующий код будет работать для страниц и рубрик, то есть кликая по страницам и рубрикам картинки будут меняться.
Начнем… Открываем наш файл switch.php и меняем код выше на вот этот код
<?php /** * Пример * @author Трушкин Александр Сергеевич, https://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%.
Запарился с последним кодом но сделал:?:
И все это дорогие читатели только для вас
Спасибо, Александр!
Привет Степан! Пожалуйста, вот можно вообще написать пост на ту тему, вот и напиши, может что усовершенствуешь
Саша большое спасибо !
Пожалуйста Роман. Надеюсь у вас получилось реализовать.