С помощью этого руководства вы сможете создать собственную тему, здесь
описаны только базовые принцимы. Создание темы рассмотрено как пример
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
|