Меняющийся цвет фона на сайте

Здравствуйте, сегодня рассмотрим как сделать так, чтобы цвет фона на сайте менялся произвольным способом?


Скачать исходники для статьи можно ниже

1. С помощью кода.

Для этого в файл functions.php вашей темы вписываем следующий код:

function wpb_bg() { 
$rand = array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f');
$color ='#'.$rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)].
$rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)];
echo $color;
}

Эта функция просто генерирует случайные шестнадцатеричные значения цвета.

Теперь вам нужно отредактировать файл header.php вашей темы. Найдите тег , он выглядит примерно так:

<body <?php body_class(); ?>>

и меняем его на следующий:

<body <?php body_class(); ?> style="background-color:<?php wpb_bg();?>">>

Все готово! Переходим на сайт и любуемся рандомным сменой фона при открытии новой странички сайта.

2. При помощи плагина.

Плагин называется Fabulous Background Colors, сведения о нем:
Количество активных загрузок: 100+
Сайта плагина: «wordpress.org/plugins/fabulous-background-colors/»
Автор плагина: Matthias Ulrich

Так как сайт давно не обновлялся, то может исчезнуть с репозитория wordpress, поэтому вы можете загрузить его с моего сайта по следующей ссылке — скачать плагин Fabulous Background Colors.

Устанавливаем и активируем плагин.

Сайт будет выглядить следующим образом:

3. С помощью CSS.

Практически все стандартные темы WordPress используют тег body_class() — если данный тег в вашей теме присутствует значит и указанный ниже способ будет действовать.

Например, чтобы изменить фон для определенной записи — достаточно узнать её id и в файл стилей (style.css — находится в админке — пункт «Внешний вид» — подпункт «Редактор») добавить сдедующий код:

body.postid-65 { 
background-color:#faebd7;
} 

Как узнать id записи?
Достаточно зайти в «Редактор записи» и кликнуть по адрессной строке, появится вроде следующего:
«mnogoblog.ru/wp-admin/post.php?post=13803&action=edit»
Следовательно id=13803

Аналогично делается для рубрик и страничек сайта:

body.category-photography { 
background-color:#faebd7;
}

Как узнать класс рубрики или странички — можно воспользоваться панелью разработчика, встроенную в браузер, так в Яндекс.Браузер нужно кликнуть правой кнопкой мышки и выбрать пункт «Исследовать элемент»:

В данном примере класс «category-photography».

На этом всё! Красивых вам сайтов!

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *