В данном уроке мы создадим простой переключатель шаблонов оформления с помощью PHP переменных и в CSS.
Существует множество подобных переключателей, и пару раз я уже переводил уроки на эту тему. Можно менять оформления полностью с помощью специальных PHP скриптов, можно использовать JavaScript. При этом скрипты просто меняют таблицы стилей. А что если нам необходимо сменить всего несколько стилей на странице? Не будем же мы из-за этого создавать несколько разных CSS файлов.
К счастью, есть выход из этой ситуации. В этом нам помогут PHP переменные, которые будут менять некоторые строки в таблице стилей и соответственно у нас будет меняться оформление.
Первым делом нам необходимо создать PHP файл для содержания нашей страницы. Мы сделаем его предельно простым, но Вы можете разработать более сложные схемы применения. Обратите внимание, что таблица стилей у нас имеет расширения .php, и находится в папке CSS.
<! DOCTYPE HTML >
< html >
<head>
<title>PHP Variables In CSS Demo</title>
< meta http -equiv="Content -Type" content="text /html; charset = utf-8" />
<link rel="stylesheet" href="css/style.php" type="text/css" media="screen" />
</head>
<body>
<div id="wrap">
<div id="nav">
<img src="images/adamoliver.jpg" alt="adamoliver.net" id="logo" />
<p id="switcher">
<span>switch theme:</span>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
</p>
</div>
<div id="header">
<h1>PHP Variables In PHP</h1>
</div>
<div id="col1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="col2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</body>
</ html >
Я создал немного контента с небольшой навигацией, которая позволит нам менять шаблон (в нашем случае будет меняться шапка).
Мы будем использовать строку запроса для того, чтобы изменить текущую тему оформления передавая значение имени к тому же PHP файлу. Нам также необходимо, чтобы скрипт помнил какое оформление мы сейчас используем и оно оставалось на всем сайте.
Вставьте следующий код перед указанием doctype:
<?php
session_start();
if (isset($_GET['template'])) {
$_SESSION['template'] = $_GET['template'];
$template = '?template='.$_SESSION['template'];
} elseif (isset($_SESSION['template'])) {
$template = '?template='.$_SESSION['template'];
} else {
$template = '';
}
?>
Итак, вот что этот код делает. Поскольку мы используем сессии, для начала нам необходимо начать сессию. Далее мы проверяем не содержит ли строка запроса значение переменной шаблона. Если не содержит, мы тогда придаем переменной сессии значение шаблона. Далее мы создаем локальную переменную со строкой, которую мы добавим к местонахождению CSS файла. Она позволит нам передать название шаблона, который мы хотим использовать в PHP файл, создавай стили CSS.
Теперь мы можем создать переключатель шаблонов. Мы используем цифры 1-3 для идентификации нужного шаблона:
<p id="switcher">
<span>switch theme:</span>
<a href="index.php?template=1">1</a>
<a href="index.php?template=2">2</a>
<a href="index.php?template=3">3</a>
</p>
Нам также необходимо изменить местонахождение PHP файла, который отвечает за создание CSS.
<link rel="stylesheet" href="css/style.php<?php echo $template; ?>" type="text/css" media="screen" />
Теперь мы готовы создать PHP файл, который будет отвечать за создание нашего шаблона. Нам необходимо в самом начале файла дать знать браузеру, что здесь будут содержаться CSS стили. Поможет нам в этом следующая строка кода:
header("Content-type: text/css; charset: UTF-8");
Теперь Вы можете просто использоваться этот файл, как нормальную таблицу стилей с возможностью вставлять PHP переменные. Это открывает перед Вами большие возможности не только изменения внешнего вида страницы, но и динамическая замена содержимого.
Поскольку у нас всего 3 возможных шаблона, нам необходимо убедиться, чтобы можно было использовать только эти 3 цифры. Если вдруг, кто-либо в строке запроса попробует передать другое значение, у него перед глазами откроется шаблон по умолчанию (в нашем случае - это "1").
$numberoftemplates = 3;
if (isset($_GET['template'])) {
$template = $_GET['template'];
if ((!is_numeric($template)) || ($template > $numberoftemplates) || ($template < 0)) {
$template = 1;
} else {
$template = round($template);
}
} else {
$template = 1;
}
Теперь у нас есть локальная переменная $template, которая содержит номер шаблона для использования. Для ясности можете проверить это, используя ее в качестве комментария к CSS коду:
echo '/*====== template used: '.$template.' ======*/';
Можете после этого обратится к файлу style.php и увидите в исходном коде такую надпись: “/*====== template used: 1 ======*/”. Если в брайзере обратиться к style.php?template=2, тогда будет другое значение.
Поскольку мы не создаем отдельно таблицу стилей для каждого шаблона, нам достаточно указать лишь разницу между нашими оформлениями в одном файле. Можем вписать эти изменения в массив:
$css = array(
'header-background' => array(
1 => 'url(../images/header-bg-1.jpg) no-repeat',
2 => 'url(../images/header-bg-2.jpg) no-repeat',
3 => 'url(../images/header-bg-3.jpg) no-repeat'
),
'header-h1-colour' => array(
1 => '#fff',
2 => '#fff',
3 => '#666'
),
'header-h1-font' => array(
1 => 'bold normal 35px Helvetica, Arial, sans-serif',
2 => 'bold normal 35px Trebuchet MS, Arial, sans-serif',
3 => 'normal normal 35px Georgia, serif'
)
);
Как Вы видите, я выделил 3 элемента в массиве к каждому CSS селектору.
Теперь в нужном месте нам достаточно подставить:
background: <?php echo $css['header-background'][$template]; ?>;
и у нас, в зависимости от шаблона, будет разное фоновое изображение.
Вот все что необходимо. Используйте такие конструкции по всему файлу. Таким образом можете заменить множество разных элементов на странице. Полная таблица стилей:
* {
margin:0;
padding:0;
}
body {
font-size:.8em;
background:#F3F4F9;
font-family:Arial;
text-align:center;
}
#wrap {
width:990px;
margin:0 auto;
text-align:left;
}
#nav {
padding:10px 0;
width:990px;
overflow:auto;
}
#logo {
float:left;
}
#switcher {
float:right;
width:170px;
text-align:right;
padding:45px 20px 0 0;
}
#switcher span {
float:left;
padding:6px 10px 0 0;
}
#switcher a {
display:block;
float:left;
padding:4px 8px;
border:1px solid #ccc;
background:#eee;
margin:0 0 0 2px;
}
#switcher a:hover {
background:#fff;
}
#header {
clear:both;
background: <?php echo $css['header-background'][$template]; ?>;
height: 206px;
}
#header h1 {
text-align:right;
padding:155px 25px 0 0;
color: <?php echo $css['header-h1-colour'][$template]; ?>;
font:<?php echo $css['header-h1-font'][$template]; ?>;
}
#col1 {
width:450px;
float:left;
margin:20px 0 0 0;
}
#col2 {
width:450px;
float:right;
margin:20px 0 0 0;
}
Вот и все готово! Наслаждайтесь!