18.07.2011

Скрипт смены стиля пользователем в WP и не только…

В одной из предыдущих статей я рассказывал как сделать смену стиля WP в зависимости от рубрики. Будем продолжать его усовершенствовать и позволим пользователю задавать свой цвет на страницах без специальных стилей.

Пользовательский выбор мы будем хранить в cookie.
Записывать через JavaScript, а вот читать cookie будем на PHP.
Разумеется без фреймворка jQuery тут не обошлось.

У нас там было условие

if ($category == "jQuery"){echo '<link rel="stylesheet" href="';bloginfo('template_url');echo'/jquery.css" type="text/css" media="all">';}
if ($category == "WordPress"){echo '<link rel="stylesheet" href="';bloginfo('template_url');echo'/wordpress.css" type="text/css" media="all">';}

Изменим его немного

if ($category == "jQuery"){echo '<link rel="stylesheet" href="';bloginfo('template_url');echo'/jquery.css" type="text/css" media="all">';}
elseif ($category == "WordPress"){echo '<link rel="stylesheet" href="';bloginfo('template_url');echo'/wordpress.css" type="text/css" media="all">';}
else {}

И дальше будем работать с else

Создадим внутри условия else еще одно условие

if (isset($_COOKIE['color'])){
	if (preg_match('/([0-9a-fA-F]+?){3,6}/i', $_COOKIE['color'])) {
		echo "<style>a,.sidebar li:before{color:#".$_COOKIE['color'].";}</style>";
	} 
}
else{}

Тут мы сначала проверяем наличие необходимой нам куки. Если её нет, то переходим к условию else, о котором будет рассказано чуть ниже. В данном случае скрипт ищет куку с именем color

Внутри создано очередное условие, в котором мы с помощью небольшого регулярного выражения проверяем — а не подсунули ли нам левое значение в куку? Если всё нормально, то прописываем в хедер стили. Разумеется тут вы можете прописать свои стили, а также — ссылку на файл стилей, но об этом я расскажу в следующей статье.

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

В условие else подключаем необходимые стили (если требуется…я подумал и решил их сохранить в общих стилях, благо там всего 5 строчек) и js-скрипт. Т.е. таким образом мы получаем вот такой код в хедере шаблона:

<?php
wp_enqueue_script('jquery'); // Подключаем jQuery, если необходимо
wp_head(); // Подключаем стандартную WP шапку

$category = get_the_category(); // Выводим в переменную массив категорий
$category = $category[0]->cat_name; // Оставляем из массива только первое значение, первую категорию

if ($category == "jQuery"){echo '<link rel="stylesheet" href="';bloginfo('template_url');echo'/jquery.css" type="text/css" media="all">';}
elseif ($category == "WordPress"){echo '<link rel="stylesheet" href="';bloginfo('template_url');echo'/wordpress.css" type="text/css" media="all">';}
else {
	if (isset($_COOKIE['color'])){
		if (preg_match('/([0-9a-fA-F]+?){3,6}/i', $_COOKIE['color'])) {
			echo "<style>a,.sidebar li:before{color:#".$_COOKIE['color'].";}</style>";
		} 
	}
	else {
?>
<script type='text/javascript' src='<?php bloginfo('template_url') ?>/color.js'></script>
<?php
}}
?>

С шаблоном мы закончили. Теперь переходим js скрипту. Весь скрипт разом приводить тут я не буду. Кому его хочется увидеть целиком, или лень читать дальше, то качаем его отсюда.

Сначала нам необходимо запустить выполнение скрипта после загрузки страницы полностью:

$(document).ready(function(){

Затем создаем две переменные:

var_text = 'Не нравится оранжевый цвет? Выбирай по вкусу:<a id="close">&times;</a><br>';
var default_colors = [
	'990033','ff3366','cc0033','ff0033','ff9999','cc3366','ffccff','cc6699',
	'993366','660033','cc3399','ff99cc','ff66cc','ff99ff','ff6699','cc0066',
	'ff0066','ff3399','ff0099','ff33cc','ff00cc','ff66ff','ff33ff','ff00ff',
	'cc0099','990066','cc66cc','cc33cc','cc99ff','cc66ff','cc33ff','993399',
	'cc00cc','cc00ff','9900cc','990099','cc99cc','996699','663366','660099',
	'9933cc','660066','9900ff','9933ff','9966cc','330033','663399','6633cc',
	'6600cc','9966ff','330066','6600ff','6633ff','ccccff','9999ff','9999cc',
	'6666cc','6666ff','666699','333366','333399','330099','3300cc','3300ff',
	'3333ff','3333cc','0066ff','0033ff','3366ff','3366cc','000066','000033',
	'0000ff','000099','0033cc','0000cc','336699','0066cc','99ccff','6699ff',
	'003366','6699cc','006699','3399cc','0099cc','66ccff','3399ff','003399',
	'0099ff','33ccff','00ccff','99ffff','66ffff','33ffff','00ffff','00cccc',
	'009999','669999','99cccc','ccffff','33cccc','66cccc','339999','336666',
	'006666','003333','00ffcc','33ffcc','33cc99','00cc99','66ffcc','99ffcc',
	'00ff99','339966','006633','336633','669966','66cc66','99ff99','66ff66',
	'339933','99cc99','66ff99','33ff99','33cc66','00cc66','66cc99','009966',
	'009933','33ff66','00ff66','ccffcc','ccff99','99ff66','99ff33','00ff33',
	'33ff33','00cc33','33cc33','66ff33','00ff00','66cc33','006600','003300',
	'009900','33ff00','66ff00','99ff00','66cc00','00cc00','33cc00','339900',
	'99cc66','669933','99cc33','336600','669900','99cc00','ccff66','ccff33',
	'ccff00','999900','cccc00','cccc33','333300','666600','999933','cccc66',
	'666633','999966','cccc99','ffffcc','ffff99','ffff66','ffff33','ffff00',
	'ffcc00','ffcc66','ffcc33','cc9933','996600','cc9900','ff9900','cc6600',
	'993300','cc6633','663300','ff9966','ff6633','ff9933','ff6600','cc3300',
	'996633','330000','663333','996666','cc9999','993333','cc6666','ffcccc',
	'ff3333','cc3333','ff6666','660000','990000','cc0000','ff0000','ff3300',
	'cc9966','ffcc99','ffffff','cccccc','999999','666666','333333','000000'
];

В первой переменной мы задаем текст, который будет предлагать нам выбрать цвет.
Обратите внимание на <a id=»close»>&times;</a><br> — это кнопка закрытия блока.
Вторая переменная — массив цветов. Этот массив меняйте на свой вкус — добавляйте, удаляйте, меняйте местами цвета. Если же Вы желаете использовать не цвета, а файлы стилей, то замените на свои. Как? Расскажу в следующей статье (я два раза не повторяю, не повторяю я два раза :-))

Далее напишем несколько функций.
Первая функция — функция, которая собирает из массива список цветов в единую таблицу и выводит на экран.

$.fn.color = function(color){
	for (var i=0; i < default_colors.length; i++) {
		var cell = $("<span id='c" + default_colors[i] + "'/>").css('backgroundColor', '#'+default_colors[i]);
		$("#color").append(cell);
	}
}

Так как на js нет стандартной функции чтения куки, была задействована функция чтения куки, найденная на просторах интернета. Она необходима для проверки — записалась ли кука.

function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return false;
}

Далее функция для записи куки. В ней мы генерируем время жизни куки.

function writeCookie(this_color) {
	var today = new Date();
	today.setTime(today.getTime());
	expires = 360 * 1000 * 60 * 60 * 24;
	var expires_date = new Date(today.getTime() + (expires));
	document.cookie='color='+this_color+'; expires='+expires_date.toGMTString()+';path=/;';
}

С функциями закончили, переходим к действиям.

Первым делом создаем блок сообщения, говорим в каком месте оно будет выводиться. В моем случае блок <div id=»color»></div> создается перед div#content. С ним то мы и будем дальше работать.

$("div#content").prepend('<div id="color">'+var_text+'</div>').color();

Далее я вставил небольшую проверку — разрешены ли у пользователя куки в браузере и в случае запрета кук выводится предупреждающее сообщение.

if (navigator.cookieEnabled){}else{
	$("#color").append('<font style="color:red;">Внимание! У Вас отключены cookie.<br>Для продолжения работы рекомендуется их включить.</font>')
}

Если пользователь выбрал цвет, кликнул по цвету, то выводим запрос на подтверждение выбранного цвета

$("#color span").live('click', function(){
	var this_id = this.id;
	var this_id = this_id.slice(1);
	$("#color").html('<p id="c'+this_id+'" style="color:#'+this_id+'"><strong>Вы уверены, что это ваш любимый цвет?</strong><br><a id="yes_color">Да</a> <a id="no_color">Нет</a><p>');
})

Если пользователь передумал, выбрав НЕТ, то возвращаем ему палитру цветов для выбора

$("#no_color").live('click', function(){
	$("#color").html(var_text).color();
})

Если ответил — ДА, то приступаем к записи куки (подробности в комментариях)

$("#yes_color").live('click', function(){
	// Получаем выбранный цвет чтобы записать его в куку
	var this_color = this.parentNode.id;
	var this_color = this_color.slice(1);
	// Записываем куку
	writeCookie(this_color);
	// Запускаем проверку на корректность записи куки
	$("#color").html("Cookie записан.<br>Запускается проверка на корректность записи cookie.");
	setTimeout(function(){
		// смотрим через функцию наличие куки
		var CoLoR = readCookie("color");
		// Если ее нет, то говорим об этом пользователю.
		if (CoLoR == false){
			$("#color").html('Не удалось записать cookie.<br>Возможно у вас отключены cookie.<br>Пожалуйста, включите cookie в браузере и <a id="no_color" style="padding:0;">попробуй еще раз</a>.');
		// Если она присутствует, то всё заебись... должно быть так
		} else {
			// Всё хорошо, дорогой пользователь, мы сделали тебе заябись
			$("#color").html("Cookie записано корректно.<br>Спасибо и приятного просмотра сайта!");
			// И чтобы цвета сразу же поменялись, без перезагрузки страницы, то
			// сразу прописываем изменения в хедаре
			// Если у Вас подключается определенный файл, то необходимо изменить на путь до файла
			$('head').append("<style>a,.sidebar li:before{color:#"+CoLoR+";}</style>");
			setTimeout(function(){
				// Убираем с экрана блок
				$("#color").slideUp(800);
			}, 3000);
		}
	}, 2000);
	
} )

Ну и кнопочка CLOSE, с помощью которой убираем табличку и пишем, если требуется, куку по умолчанию.
Это необходимо для того, чтобы табличка постоянно не появлялась.
Проверка PHP посмотрит, что кука есть и не будет пытаться выводить блок палитры.

$("#close").live('click', function(){
	// Если по ней тыкнули моусом, то скрываем блок
	$("#color").slideUp(800);
	// Записываем куку по умолчанию
	writeCookie('FF7700');
})

Ну и в конце нам осталось закрыть объявление о вызове скрипта — });. Ну думаю вы и сами догадались.

В заключение

Хотел тут написать обещанное выше — модификации скрипта, но статья и так получилась чересчур длинная, поэтому решено было написать это в следующей статье.

Напоследок публикую свои CSS стили, для тех у кого совсем туго с руками

#color {-moz-border-radius: 1em;-webkit-border-radius: 1em;-khtml-border-radius: 1em;border-radius: 1em;}
#color{border:1px solid #FF7700;padding:5px 0;margin:20px auto 30px;max-width:650px;min-width:300px;width:100%;text-align:center;}
#color span, #color img{cursor:pointer;height:10px;width:10px;display:inline-block;margin:0 4px;}
#color a{cursor:pointer;padding:0 0 0 10px;}
#close{float:right;color:red;font-weight:bold;margin:0 10px;}#close:hover{text-decoration:none}

Скачать скрипт смены стиля пользователем в WP и не только. В архиве исходный JS файл, а так же сжатый JS файл.

Продолжение следует…