Лучшая система размещения статей
 Добавить в избранное |  Сделать стартовой 
Поиск По Сайту
Навигация
     Главная
     Форум
     Новости
     Обзор новостей
     Гостевая
     Статьи
     Файлы
     Магазин
     Пользователи
     Контакты
     О Проекте
     Карта Сайта
Вход
Логин:

Пароль:


Запомнить меня
Вам нужно Авторизоваться.
Забыли Пароль?
Регистрация
Атестат
Подписка на новости: Подписаться

Делаем тему (пошаговое руководство)

Автор: Александр Ковальский
E-Mail: webing@kmstudio.com.ua
Источник: subbota.com.ru
Добавлено: 2005-06-30 21:16:49

Документация
Делаем тему (пошаговое руководство)

С помощью этого руководства вы сможете создать собственную тему, здесь описаны только базовые принцимы. Создание темы рассмотрено как пример 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);?>&nbsp;</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);?>&nbsp;</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_dasvasas_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>\n<div class=\"blockContent\">"
;}
function
wctabledown(){echo "</div>\n"
;}

Данный код в дальнейшем будет вписан в 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_."\n";
    
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>\n";
} else {
echo
"                    <a class=\"menuMain\" href=\"".linc_get('index','index','')."\">"._INDEXURLS_."</a>\n";
}

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>\n";
         }
     }
    
$echos = "                    <a class=\"$clas\" href=\"".linc_get($line[0],'index','')."\">$line[1]</a>$plus\n";
  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


Понравилась статья? Поделись с друзьями!
Facebook Опубликовать в LiveJournal Tweet This


Оглавление   |  ?? ????

Оглавление        Вернуться к Статье

Скачай CMS сейчас!
Текущая версия системы управления сайтом WebCodePortalSystem:
v.7.1.00
Скачать CMS v.7.1.00
Обновление с версии 6.2.01

Сайт разработчика:
Новые бета версии

На Сайте
Гостей: 9
Пользователей: 0


10 новых статей
Наши Партнеры


Copyright WebCode-Command © 2003-2012
Работает под управлением WebCodePortalSystem v. 6.2.01
Rambler's Top100