|
С помощью этого руководства вы сможете создать собственную тему, здесь
описаны только базовые принцимы. Создание темы рассмотрено как пример
default для дальнешего использования своих тем с
использованием стилей CSS.
Итак, приступим! Попытаемся создать тему почти с нуля.
Шаг
первый
Создайте папку с новой темой и назовите
её например mytheme.
Теперь у вас есть папка с новой
темой, ее мы загружем пока пустыми, но основными файлами:
templates_index.php
style.css
Остальные файлы мы дополним по мере необходимости.
Шаг
второй
Откройте файл
style.css, и загрузите в него из статьи "CSS темы default
с комментариями" весь контент css, для самого начала этого хватит, в
дальнейшем его можно будет заменить на другой или отредактировать в
зависимости от ваших вкусов.
Для большего удобства предлагаю воспользоватся
какой нибуть боле продвинутой программой, например у меня Тор Style
Pro 3.10. Это облегчит создание наглядности темы, так как наглядность в
основном будет происходить за счет стилей
css.
Шаг третий
Откройте файл
templates_index.php. Создадим начало темы,
для всех тем начало (head) одинаковое, по этому просто скопируем
ниже следующие:
<html>
<head>
<?
$wcps_imageurl=$portal_subdir."/thema/".$portal_skin;
echo meta_tegs();
?>
<link
rel="stylesheet" type="text/css"
media="all"
href="<? echo
"$wcps_imageurl/style.css";?>"
/>
</head>
<body>
Переменная
$wcps_images
формируется для удобства - это путь к картинкам и
стилям.
Как она выводится видно на
примере силя<? echo
"$wcps_imageurl/style.css";?>
Вывод всех
остальных мата тагов и титлов выполняется порталом, путем обращения к
подпрограмме meta_tegs();
Так что менять
чего либо в начало индексного темплейта templates_index.php
темы не нужно.
Изначально, пока тема не сформирована, стартовать на неё не нужно, она
еще не готова.
Шаг четвёртый
Ну что ж, а теперь
приступим непосредственно к созданию
темы.
Проектирование структуры
Обычно,
боки размещают столбцами, но при желании их можно выстроить и
по-горизонтали. Вот так стандартно выглядит
тема:
------------------------------------
Header
------------------------------------
|
|
|
|
| lc
| cc
| rc
|
|
|
|
|
-------------------------------------
Footer
--------------------------------------
lc =
leftcolumn
cc = centercolumn
rc = rightcolumn
Нужно учесть, что
эти имена задаются в id тага <td>, например <td
id=leftcolumn>.
Сначала нужно создать
блок между тегами head и 3-х столбцовым шаблоном.
Обычно что входит в
Header: Логотип; Банер; Гоизонтальная навизация; Аутотентификация; Дата;
Добавить в фавориты.
Ограничеся минимумом - логотип, банер, строка
навигации. Исходя из этого создадим табличку:
<table
cellspacing="0" id="top">
<tr>
<td class="search"><img
src="<?=$wcps_imageurl;?>/logo.gif"></td>
<td id="headerbanner"><?connect_my_blocks(1);?></td>
</tr>
</table>
<table cellspacing="0">
<tr>
<td
id="headerbar"><?connect_my_blocks(6);?></td>
</tr>
</table>
Из HTML кода
видно:
наличие картинки с путем согласно
темплейта и собственно говоря gif файл с названием "logo". Дополнительно
можно было бы поставить линк на логотипе, типа Home, то есть в корень
сайта, но я думаю это Вы решите сами, используя в href динамичный
путь "<?=$portal_subdir;?>/index.php"
;
ПХП фукции <?connect_my_blocks(6);?>,
которые указывают что здесь будет вставка (Вполне возможно цикличная)
блоков 1 и 6
1 - Это банер 640х480 или дата или то что вы захотите
6
- Это блок горизонтальной навигации или аутотентификации.
Шаблон
из 3-х столбцов, представляет собой таблицу с 3 колонками, поскольку
мы используем CSS вид этой таблицы будет простой, в местах где мы будем чтото вставлять мы ставим
коментарии:
<table cellspacing="0">
<tr>
<td id="leftcolumn">
<!--
Start left blocks loop
-->
<!--
End left blocks loop
-->
</td>
<td id="centercolumn">
<!--
Display center
blocks -->
<!--
End display center blocks
-->
<div id="content">
</div>
</td>
<td id="rightcolumn">
<!--
Start right blocks loop
-->
<!--
End right blocks loop
-->
</td>
</tr>
</table>
Из кода HTML видно что таблица очень проста, и
отличительной осбенностью, является наличие ID и
комментариев.
Вставим код для
отображения левой колонки:
<!-- Start left blocks
loop -->
<?connect_my_blocks("m");?>
<?connect_my_blocks("l");?>
<!--
End left blocks loop -->
Ячейка таблицы куда Вы вставляете этот код должна
иметь id="leftcolumn" -
это необходимо для css, ну исогласно комментариям, Вы
промазать не должны.
Код
центральной части, мы разобьем на
части:
--------------------
|
Cc
|
--------------------
| CL | CR
|
--------------------
Где:
Cc - id="centerCcolumn"
CL - id="centerLcolumn"
CR - id="centerRcolumn"
На всякий случай, CL и CR
сделаем отключаемыми с помощью ПХП и оператора IF
Для легенды центральной колонки выполним ПХП
условие и опредилим $titlex
.
<!-- Display center
blocks -->
<?if ($nma ==
'default'){$titlex=$portal_name;} else {$titlex=$wcpsval['module_name'];}?>
<table
cellspacing="0">
<tr>
<td id="centerCcolumn" colspan="2">
<!--
Start center-center blocks loop -->
<fieldset>
<legend class=blockTitle><?=$titlex;?></div></legend>
<div class="blockContent"><?connect_my_blocks(2);body_text();?></div>
</fieldset>
<!--
End center-center blocks loop -->
</td>
</tr>
<?if
(empty($wcpsval['left_right_blosks'])){?>
<tr>
<td id="centerLcolumn">
<!--
Start center-left
blocks loop -->
<fieldset>
<legend class="blockTitle">Left</legend>
<div class="blockContent"><?connect_my_blocks(3);?> </div>
</fieldset>
<!--
End center-left
blocks loop -->
</td><td
id="centerRcolumn">
<!--
Start center-right
blocks loop -->
<fieldset>
<legend class="blockTitle">Right</legend>
<div class="blockContent"><?connect_my_blocks(4);?> </div>
</fieldset>
<!--
End center-right
blocks loop -->
</td>
</tr>
<?}?>
</table>
<!--
End display center blocks -->
Из HTML видно использование блоков:
2 - Блок перед
основным контентом, может быть отведен под
рекламы,анонсы.
3 и 4 - дополнительные
блоки, например для голосования, были бы блоки а что туда запихнуть это
дело уже другое, эти блоки отключаются с помощью переменной $wcpsval['left_right_blosks'] при ее значении 1. Устанавливается
она в опциях на модуль 1 - для
всех.
Основная функция
вывода контента body_text()
стоит после
блока2.
Соответственно каждая ячейка таблицы имеет свой
ID, при том что классы одинаковые вывод, и соответственно дизайн, будут
разные.
Для добавления контента типа коментария мы
добавим в ID content блок с номером 5.
<div
id="content">
<?connect_my_blocks(5);?>
</div>
Ячейка таблицы куда Вы вставляете этот весь код
должна иметь id="centercolumn" ,
и соответствующие коментарии присутствуют, вставите не
ошибетесь.
И наконец
правая колока:
<!-- Start right blocks loop
-->
<?connect_my_blocks("r");?>
<!--
End right blocks loop -->
Ячейка таблицы куда Вы
вставляете этот код должна иметь id=
"rightcolumn".
Окончательным шагом
бедет установка Описания сайта и Копирайта, без последнего сайт с
даной темой не запустится.
<table
cellspacing="0" cellpadding="0">
<tr id="footerbar">
<td><?echo$copyright;?></td>
</tr>
</table>
<div
class="resultMsg"><?echo$portal_opis;?></div>
</body>
</html
>
Вот и
все что касается
templates_index.php, этот темплейт готов.
P.S. Нужно учитывать что пути к
бекграундам указанные в CSS
должны быть относительно CSS.
Для большей наглядности
необходимо добавить дополнительные темплейты, в версии wcps v2.1
некоторые темплейты
будут зашиты в портал.
Теперь для теста можно
запустить темплейт. Для этого нужно зайти в Админ->Опции и поменять
темплейт на mytheme.
Запомните, это основные шаги! Свою тему Вы можете
делать как пожелаете и не обязатьльно с такой структурой, но также нужно
учесть что с данным темплейтом, но разными CSS файлами, можно сделать
совершенно
разные дизайны Вашего портала.
Здесь все заложенно в стилях файла style.css
Если Вы
используете изображения непосредственно в темплейте, тогда необходимо указать
правильный путь к изображениям, содержащимся в templates_index.php,
если они лежат непосреддственно в папке темы, то путь будет
<?$wcps_imageurl;?>, например:
<img src="<?=$wcps_imageurl;?>/logo.gif"
>
Иначе изображения будут неправильно отображаться, и опять же для
изображений учтите что в css прописано что border=
0.
Шаг пятый
Создадим файл
templates_wc_table.php
, поскольку о нем много писалось, как
сказал Путин "буду краток"
Суть его проста, но
очень важна, в дальнейшем можно будет менять как захочется но в данный
момент мы сделаем по миниму то что испльзует стили
CSS. Поэтому копируем код.
<?
function wctableup(){
global
$portal_subdir,$portal_skin,$row;
echo
<<<TOP
<!-- БЛОК
$row[bpol]
-->
<div class="blockTitle">
TOP;}
function
wctablecenter(){
global
$portal_subdir,$row,$portal_skin;
echo <<<CEN
</div>
<div class="blockContent">
CEN;}
function
wctabledown(){
global
$portal_subdir,$pol,$portal_skin,$row;
print
<<<DOWN
</div>
<!-- КОНЕЦ БЛОК $pol
-->
DOWN;}
?>
Структура: в файле
находятся 3 функции, первая выполняет вывод того что должно быть
до
титла (заглавия блока)
вторая
фунция выполняет вывод того что должно быть между
титлом и контентом,
третья функция закрывает контент и
на этом вывод блока закнчивается.
В
нашем случае все сделано очень просто стоит таг DIV с классом для титла
и контента. дополнительно глобализуются необходимые переменные для дальнейшего более широкого использования,
например с таблицами, с картинками...
P.S. В версии 2.0 $pol и $row
не работают.
Если
Вас затрудняет вышенаписанный темплейт, можно
вписать то же, но попроще:
function wctableup(){
echo "<div
class=\"blockTitle\">";}
function wctablecenter(){ echo "</div>
<div
class=\"blockContent\">";}
function wctabledown(){echo "</div>
"
;}
Данный код в дальнейшем будет
вписан в php_function по умолчанию.
Да, а теперь самое главное,
портал не видит что появился новый темплейтный файл, нужно сходить в
Админ->Опции-> * Обновить темплейты *
Ну вот
теперь вид совсем другой.
Шаг пятый
Создадим файл templates_menu.php,
Здесь дело обстоит немного банальнее, нужно просто скопировать в файл ниже
следующий код:
<?
if(!defined('L_MOD')) {echo
"<metahttp-equiv='refresh'content='0;url=/?nma=error&act=403'>";exit;}
$query="SELECT
lg.name, lg.value, md.mforreg FROM ".$wcpref."language AS
lg, ".$wcpref."modules AS
md WHERE md.mforreg>='1' AND md.murl=lg.name
AND lang='$portal_lang' ORDER BY md.npp ASC LIMIT
0,50";
$result =
MYSQL_QUERY($query);
wctableup();
echo _NAVIGATION_."
";
wctablecenter();
print <<<UP
<!-- МЕНЮ
-->
<table
width="100%" border="0" cellpadding="0"
cellspacing="0">
<TBODY>
<tr>
<td
id="mainmenu">
UP;
if($GLOBALS['nma']=='default'){
echo " <a
class=\"menuTop\" href=\"".linc_get('index','index','')."\">"._INDEXURLS_."</a>
";
} else {
echo " <a
class=\"menuMain\" href=\"".linc_get('index','index','')."\">"._INDEXURLS_."</a>
";
}
while ($line=mysql_fetch_array($result)){
if(@$GLOBALS['nma']==$line[0]){
$clas="menuTop";
} else {$clas="menuMain";}
$plus=null;
if ($line[0]=='catalog'
&& $GLOBALS['nma']==$line[0] && !empty($GLOBALS['wcpsval']['menu_catview'])){
$cat=MYSQL_QUERY("SELECT
id,categoria FROM ".$wcpref."catalog_cat");
while($row = MYSQL_FETCH_ARRAY($cat))
{
$masivs['cat_id']=$row[0];
$link=linc_get($line[0],'tema',$masivs);
$plus .= "<a
class=\"menuSub\" href=\"$link\">$row[1]</a>
";
}
}
$echos =
" <a
class=\"$clas\" href=\"".linc_get($line[0],'index','')."\">$line[1]</a>$plus
";
if($line['2']=="1"){
print $echos;
}elseif ($line['2']=="2"
&& $_SESSION['auth']){
print $echos;
}elseif($line['2']=="3"
and $_SESSION['urov']=="1"){
print $echos;
}elseif($line['2']=="4"
and $_SESSION['urov']=="1"
or $_SESSION['urov']=="2"){
print $echos;
}
}
print
&;lt;<<DOWN
</td></tr></TBODY></TABLE>
<!--
КОНЕЦ МЕНЮ -->
DOWN;
wctabledown();
?>
Записали,
обновили в админе темплейты, посмотрели. Да и самое главное, нет никакого
JavaScript.
Из практических решений, этот вариант оказался самым
универсальным и подходит под все темы, дизайн кнопок соответственно меняется
в CSS. В темплейте существуют id и классы:
id="mainmenu" соответственно все стили
должны относится к этому ID.
class="menuTop" активная
кнопка:
class="menuMain" все остальные
не активные кнопки;
class="menuSub" стиль кнопок подменю, в данном
примере подменю работает с каталогом статей при условии что
переменная $wcpsval['menu_catview'] будет равна 1
Выглядят стили полностью вот так:
td#mainmenu
a {display: block; margin-bottom:
1px; padding: 4px; color: #6685C2; background-color: #FFFFFF; border-left:
8px solid #B2C1E0;}
td#mainmenu a:hover
{color: #FFFFFF; text-decoration: none;
background-color: #B2C1E0; border-left: 8px solid #7F99CC;
}
td#mainmenu a.menuTop {}
td#mainmenu a.menuMain {}
td#mainmenu a.menuSub {padding-left:
20px;}
Поменяв в файле style.css на выше написанное мы получим
совершенно другой вид кнопок, чем были раньше.
Я думаю, Вы
понимаете, какое поле для эксперементов открывается для Вас, так что
эксперементируйте.
Из
советов , больше задавайте в стили на задний фон
(бекграунд) картинок, высоту над надписью и под надписью можно
коректировать (padding), тем самым вписывая картинку под надписью.
Успехов Вам в
творчестве.
Перепечатка
разрешается при указании автора и сайта автора http://kmstudio.ru
|
