Изменение стиля сайта используя PHP

Вы хотите, чтобы пользователь мог выбирать любой стиль сайта? Если ДА, то этот урок для Вас. В этом уроке мы научимся создавать пользовательское изменение стиля сайта. Для этого нам понадобится только знание PHP.

Допустим, что у нас есть 4 таблицы стилей:

blue.css

red.css

black.css

yellow.css

blue.css – это наш стиль по-умолчанию.

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

session_start();

Размещать код открытия сессии необходимо выше всех тегов, даже тегов типа документа. Не забудьте разместить код на всех страницах сайта.

Теперь будем создавать переключатель стилей. Именно он будет переключать стили.


 if(isset($_GET['css'])){ 
 switch ($_GET['css']) {
 case 'red': 
 $stylesheet = '<link rel="stylesheet" type="text/css" href="/style /red.css">'; 
 $_SESSION['switchcss']=$stylesheet; 
 break;
 case 'yellow': 
 $stylesheet = '<link rel="stylesheet" type="text/css" href="/style /yellow.css">'; 
 $_SESSION['switchcss']=$stylesheet; 
 break;
 case 'black': 
 $stylesheet = '<link rel="stylesheet" type="text/css" href="/style /black.css">'; 
 $_SESSION['switchcss']=$stylesheet; 
 break;
 // наш стиль по умолчанию 
 default: 
 $stylesheet = '<link rel="stylesheet" type="text/css" href="/style/blue.css">'; 
 $_SESSION['switchcss']=$stylesheet; 
 } 
 }
 

Как вы можете увидеть, у нас есть 3 случая.


 case 'red'
 case 'yellow'
 case 'black'
 

Каждый из них содержит код;


 $stylesheet = '<link rel="stylesheet" type="text/css" href="">';
 

Но у каждого разные значения для HREF (место нахождения таблицы стилей). Последний стиль называется не case ‘blue’, а default. Так как он является стилем по умолчанию.

Следующая часть кода вставляется в теге <head>


 echo ($_SESSION['switchcss'])? $_SESSION['switchcss']: '<link href="/ style /blue.css" type="text/css" rel="stylesheet">';
 

Этот код будет выводить ту сессию, какую выбрал пользователь. Соответственно будет отображаться тот стиль, какой выбрал пользователь.

Последний кусок кода вставляем там где Вы хотите разместить ссылки для изменения стиля.


 Выберите стиль <a href="/style/<?php echo $_SERVER['PHP_SELF']; ?>?css=red">[red]</a> 
 | 
 <a href="/ style /<?php echo $_SERVER['PHP_SELF']; ?>?css=default">[blue]</a> 
 | 
 <a href="/ style /<?php echo $_SERVER['PHP_SELF']; ?>?css=yellow">[yellow]</a> 
 | 
 <a href="/ style /<?php echo $_SERVER['PHP_SELF']; ?>?css=black">[black]</a>
 

Вот и все.

Примерно так должен выглядеть весь код.


 <?php session_start(); ?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html lang="en"> 
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
 <title>Изменение стилей</title>
 <?php 
 if(isset($_GET['css'])){ 
 switch ($_GET['css']) {
 case 'red': 
 $stylesheet = '<link rel="stylesheet" type="text/css" href="/style/red.css">'; 
 $_SESSION['switchcss']=$stylesheet; 
 break;
 case 'yellow': 
 $stylesheet = '<link rel="stylesheet" type="text/css" href="/style/yellow.css">'; 
 $_SESSION['switchcss']=$stylesheet; 
 break;
 case 'black': 
 $stylesheet = '<link rel="stylesheet" type="text/css" href="/style/black.css">'; 
 $_SESSION['switchcss']=$stylesheet; 
 break;
 default: 
 $stylesheet = '<link rel="stylesheet" type="text/css" href="/style/blue.css">'; 
 $_SESSION['switchcss']=$stylesheet; 
 } 
 } 
 ?>
 <?php echo ($_SESSION['switchcss'])? $_SESSION['switchcss']: '<link href="/style/blue.css" type="text/css" rel="stylesheet">';?>
 </head>
 <body>
 <div id="something"> 
 <div id="anotherthing"> 
 Select <a href="/style/<?php echo $_SERVER['PHP_SELF']; ?>?css=red">[red]</a> | <a href="/style/<?php echo $_SERVER['PHP_SELF']; ?>?css=default">[blue]</a> | <a href="/style/<?php echo $_SERVER['PHP_SELF']; ?>?css=yellow">[yellow]</a> | <a href="/style/<?php echo $_SERVER['PHP_SELF']; ?>?css=black">[black]</a> 
 </div>
 </div>
 </body> 
 </html>
 

Понравился урок? Добавьте его к себе в закладки.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *