Быстро создаем себе структуру своего шаблона с нуля
Автор: Львенок
Опубликовано: 797 дней назад (18 марта 2010)
Рубрика: Без рубрики
Редактировалось: 1 раз — 18 марта 2010
Играет: SpyGames OST
+23↑
Голосов: 27
Для тех, кто знает и немного работал с HTML и CSS, но пугается огромного объема информации, находящегося в "/templates/_default_/template.php".
Результат будет не совсем ожидаемый, но логика действий, надеюсь будет проста и понятна...
Итак...
1. Копируем себе в резерв на всякий случай "/templates/_default_/template.php" и "templates/_default_/css/styles.css"
2. Создаем себе простейший html-файл (хоть в Dreamweaver`е, как я) с таблицей похожей на расположение стандартного шаблона:
Код PHP:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>

<body bgcolor="#FFFFFF" text="#000000">
<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <tr> 
    <td colspan="3"> </td>
  </tr>
  <tr> 
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr> 
    <td colspan="3"> </td>
  </tr>
</table>
</body>
</html>
Надеюсь здесь все понятно. Заголовок, простая таблица 3х3 ячейки, верхние ячейки объединены в одну и нижние тоже...

3. В самое начало файла вместо тэга "<html>"вставляем инициализацию:
Код PHP:
<?php if(!defined('VALID_CMS')) { die('ACCESS DENIED'); } 
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

4. В средний ряд в ячейки вставляем строки для блоков модулей:
В левую среднюю ячейку вставляем "<?php cmsModule("left"); ?>". Заодно добавляем ей атрибуты <td valign="top" id="left">
В самую среднюю вставляем
Код PHP:
						<div><?php cmsModule("top"); ?></div>
						<div><?php cmsBody(); ?></div>
						<div><?php cmsModule("bottom"); ?></div>
Атрибуты ставим "<td  valign="top" id="center">"
В правую среднюю ставим
Код PHP:
<?php if (cmsCountModules("right")) { ?>			
					<?php cmsModule("right"); ?>
					<?php } ?>
Атрибуты ставим соответственно "<td valign="top" id="right">"
5. Теперь нам надо подцепить в заголовок кучу мета-данных, кодировки и яваскрипты:
из нашего файлика выкидываем все между тэгами "<head></head>" и вставляем туда код, находящийся в этих тэгах в файле "/templates/_default_/template.php":

Код PHP:
<!-- HEAD !-->
<?php cmsPrintHead(); ?>
<link href="/templates/_default_/css/styles.css" rel="stylesheet" type="text/css" />
<link type='text/css' href='/templates/_default_/basic/css/basic.css' rel='stylesheet' media='screen' />
<!--[if lt IE 7]>
<link type='text/css' href='/templates/modern/basic/css/basic_ie.css' rel='stylesheet' media='screen' />
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<script src='/templates/_default_/basic/js/jquery.simplemodal.js' type='text/javascript'></script>
<script src='/templates/_default_/basic/js/basic.js' type='text/javascript'></script>
<script type="text/javascript" src="/templates/_default_/jquery.iepnghack.1.6.js"></script>
<script type="text/javascript">$(function(){ $("#logoimg").pngfix(); })</script>
Так, скрипты подцепили...
6. В верхние объединенные ячейки вставляем код "<div id="sitename"><?php cmsPrintSitename(); ?></div>"
Сюда же через "
" прикручиваем "глубиномер": "<div><?php cmsPathway(’»’); ?> </div>".
7. В подвал (в нижние объединенные ячейки) вставляем "<div id="footer"><a href="/"><?php cmsPrintSitename(); ?></a> © <?php echo date(’Y’)?></div>"
8. Теперь самое сложное и интересное...
Нам нужно вставить кусок кода для авторизации, меню для пользователя "Зарегистрироваться, Авторизоваться, Выйти", и код для поиска.
Вам нужно определиться, куда вы хотите это прикрутить, и будем прикручивать.
Я решил что мне будет удобно в правой средней ячейке сверху перед блоком правых модулей.
Лезу, соответственно, в эту ячейку и поочередно вставляю следующие куски кода:

Для ввода пароля:
Код PHP:
<div id="authModal" style='display:none'>
					<form id="authform" target="_self" style="margin: 0px;" name="authform" method="post" action="/login">
					<div id="authtitle">Авторизация</div>
					<table cellpadding="2" cellspacing="2" align="center" id="authtable">
					  <tr>
						<td id="authtd">Логин:</td>
						<td id=""><input name="login" type="text" id="authinput" /></td>
					  </tr>
					  <tr>
						<td id="authtd">Пароль:</td>
						<td id=""><input name="pass" type="password" id="authinput" /></td>			
				  </tr>
				</table>
				<div id="authoption"><input type="checkbox" value="1" name="remember"/>Запомнить меня | <a href="/0/passremind.html">Забыли пароль?</a></div>
				<div id="authbutton"><input name="auth" type="submit" value="Войти" id="authbtn"/></div>
			</form>
		</div>
Этот блок на самом деле не имеет значение куда вставлять. Главное чтобы он не разбивал структуру документа в ненужном месте...
Дальше...
Блок меню "Зарегистрироваться, Авторизоваться, Выйти" идет одной таблицей, объединенной еще и с формой поиска. Берем все это также из "/templates/_default_/template.php":
Код PHP:
						  <table width="370" border="0" align="right" cellpadding="0" cellspacing="0" id="headtools">
						<tr>
					 <td>
					  <!-- Если юзер не авторизован, показываем ему ссылки с регистрацией и авторизацией -->
					  <?php if(!$inUser->id){ ?> 
						<a href="/registration" id="ht_reg">Регистрация</a>

						<a href="javascript:auth()" id="ht_auth">Авторизация</a>

						<a href="javascript:window.external.AddFavorite('http://<?php echo $_SERVER['HTTP_HOST']?>/', '<?php cmsPrintSitename(); ?>')" id="ht_fav">В избранное</a>

					  <?php } else { 
									$uid    = $inUser->id;
									$newmsg = usrNewMessages($inUser->id); 			  	
					  ?>
						<a href="/users/0/<?php echo $uid?>/profile.html" id="ht_profile">Мой профиль</a>

						<?php if (!$newmsg) { ?>	
							<a href="/users/0/<?php echo $uid?>/messages.html" id="ht_messages">Cообщения</a>

						<?php } else { ?>
							<a style="color:#F60;" href="/users/0/<?php echo $uid?>/messages.html" id="ht_messages">Cообщения <?php echo strip_tags($newmsg)?></a>

						<?php } ?>
						<a href="/logout" id="ht_logout">Выход</a>

					  <?php } ?>			
					 </td>
						</tr>
					<tr>
						 <td>
							 <div id="bar_search">
								 <form name="searchform" action="/index.php" method="get">
									<input type="hidden" name="view" value="search" />
									<input name="query" type="text" id="searchinput" /><input name="gosearch" id="searchbtn" type="image" src="/templates/_default_/images/searchbtn.png" alt="Поиск" width="22" height="23"  onclick="document.searchform.submit()"/>
								 </form>
							 </div>
							 </td>
					</tr>
				  </table>
Для того чтобы пункты меню справа были каждый с новой строки, я после каждой ссылки вида "<a href="/registration" id="ht_reg">Регистрация</a>" добавляю перенос строки "
". В вышеприведенном коде уже меню уже идет вместе с переносами строк, чтобы Вам было проще копировать, вставлять и разбираться дальше...
Собственно и все... Сохраняем получившийся файлик вместо "/templates/_default_/template.php".
В результате у меня получилос вот такой вот файл:
Код PHP:
<?php if(!defined('VALID_CMS')) { die('ACCESS DENIED'); } 
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- HEAD !-->
<?php cmsPrintHead(); ?>
<link href="/templates/_default_/css/styles.css" rel="stylesheet" type="text/css" />
<link type='text/css' href='/templates/_default_/basic/css/basic.css' rel='stylesheet' media='screen' />
<!--[if lt IE 7]>
<link type='text/css' href='/templates/modern/basic/css/basic_ie.css' rel='stylesheet' media='screen' />
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<script src='/templates/_default_/basic/js/jquery.simplemodal.js' type='text/javascript'></script>
<script src='/templates/_default_/basic/js/basic.js' type='text/javascript'></script>
<script type="text/javascript" src="/templates/_default_/jquery.iepnghack.1.6.js"></script>
<script type="text/javascript">$(function(){ $("#logoimg").pngfix(); })</script>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<table >
  <tr> 
    <td colspan="3"><div id="sitename"><?php cmsPrintSitename(); ?></div>
<div><?php cmsPathway('»'); ?>	</div></td>
  </tr>
  <tr> 
    <td valign="top" id="left"><?php cmsModule("left"); ?></td>
    <td  valign="top" id="center">	
						<div><?php cmsModule("top"); ?></div>
						<div><?php cmsBody(); ?></div>
						<div><?php cmsModule("bottom"); ?></div>	
</td>
    <td><div id="authModal" style='display:none'>
					<form id="authform" target="_self" style="margin: 0px;" name="authform" method="post" action="/login">
					<div id="authtitle">Авторизация</div>
					<table cellpadding="2" cellspacing="2" align="center" id="authtable">
					  <tr>
						<td id="authtd">Логин:</td>
						<td id=""><input name="login" type="text" id="authinput" /></td>
					  </tr>
					  <tr>
						<td id="authtd">Пароль:</td>
						<td id=""><input name="pass" type="password" id="authinput" /></td>			
				  </tr>
				</table>
				<div id="authoption"><input type="checkbox" value="1" name="remember"/>Запомнить меня | <a href="/0/passremind.html">Забыли пароль?</a></div>
				<div id="authbutton"><input name="auth" type="submit" value="Войти" id="authbtn"/></div>
			</form>
		</div>
						  <table width="370" border="0" align="right" cellpadding="0" cellspacing="0" id="headtools">
						<tr>
					 <td>
					  <!-- Если юзер не авторизован, показываем ему ссылки с регистрацией и авторизацией -->
					  <?php if(!$inUser->id){ ?> 
						<a href="/registration" id="ht_reg">Регистрация</a>

						<a href="javascript:auth()" id="ht_auth">Авторизация</a>

						<a href="javascript:window.external.AddFavorite('http://<?php echo $_SERVER['HTTP_HOST']?>/', '<?php cmsPrintSitename(); ?>')" id="ht_fav">В избранное</a>

					  <?php } else { 
									$uid    = $inUser->id;
									$newmsg = usrNewMessages($inUser->id); 			  	
					  ?>
						<a href="/users/0/<?php echo $uid?>/profile.html" id="ht_profile">Мой профиль</a>

						<?php if (!$newmsg) { ?>	
							<a href="/users/0/<?php echo $uid?>/messages.html" id="ht_messages">Cообщения</a>

						<?php } else { ?>
							<a style="color:#F60;" href="/users/0/<?php echo $uid?>/messages.html" id="ht_messages">Cообщения <?php echo strip_tags($newmsg)?></a>

						<?php } ?>
						<a href="/logout" id="ht_logout">Выход</a>

					  <?php } ?>			
					 </td>
						</tr>
					<tr>
						 <td>
							 <div id="bar_search">
								 <form name="searchform" action="/index.php" method="get">
									<input type="hidden" name="view" value="search" />
									<input name="query" type="text" id="searchinput" /><input name="gosearch" id="searchbtn" type="image" src="/templates/_default_/images/searchbtn.png" alt="Поиск" width="22" height="23"  onclick="document.searchform.submit()"/>
								 </form>
							 </div>
							 </td>
					</tr>
				  </table>
					<?php if (cmsCountModules("right")) { ?>			
					<?php cmsModule("right"); ?>
					<?php } ?>

		</td>
  </tr>
  <tr> 
    <td colspan="3">
						<div id="footer">
							<a href="/"><?php cmsPrintSitename(); ?></a> © <?php echo date('Y')?>
						</div>
</td>
  </tr>
</table>
</body>
</html>
Если вы зайдете на свой сайт с этим файлом шаблона, то увидите, что все это хоть и криво (CSS стили мы пока еще не трогали, они остались старыми), но примерно на том месте где и ожидалось. Теперь вы знаете что где находится. Знаете в каком блоке какие классы используются и что нужно прописывать в CSS, чтобы получить желаемый результат.
Теперь вы можете стереть файл "templates/_default_/css/styles.css"(предварительно сохранив старый вариант). Создать новый... и копировать в новый нужные блоки из старого файла, заодно разбираясь и внося нужные исправления в стили...
Если уж вы понимаете, что напортачили и запутались, то восстанавливаете ранее сохраненные файлы и начинаете заново...
Всем удачи!!! ;)
← Ридер excel | А что у нас за Яваскрипты в стандартном шаблоне??? →
Теги: шаблоны
Комментарии (24)
lezginka.ru # 18 марта 2010 в 04:38 +1
Львенок, отлично, еще бы скин шаблона отличного от дефолта и уроку цены не будет.
кстати , так же можно и нужно расписать css(если есть время и желание).
Львенок # 18 марта 2010 в 10:16 0
Я надеюсь, будет продолжение...
Делаешь какой угодно скин... Пункты 4,6,7,8 вставку делаешь туда, куда хочешь с поправкой на изменения...
Светлана Кондратьева # 18 марта 2010 в 10:20 0
Урок действительно отличный. Дорогой Львенок, не сочти за труд, размести в  нашей вики ссылку на свой урок, чтобы новички могли быстро его найти. Спасибо!
Светлана Кондратьева # 18 марта 2010 в 10:28 0
На странице http://www.instantcms.ru/wiki/doku.php/разработка:шаблоны
Выло бы клёво разместить там урок полностью, но это от твоего желания зависит. Если пожелаешь, я тебе помогу разобраться с вики-синтаксисом.
Львенок # 18 марта 2010 в 10:34 0
Сделай пожалуйста страничку под эту статью и я вставлю...
А дальше потом сама отформатируешь ;)
Светлана Кондратьева # 18 марта 2010 в 10:45 0
Так уже создана! Я ведь тебе на нее ссылку и дала)))) Просто нажми там кнопку "править страницу" и действуй. А как закончишь, нажмешь кнопку "сохранить". И не бойся накосячить - всегда можно поправить или откатить. Синтаксис тегов вики можешь найти на страничке "Синтаксис вики" - я ее перевела на русский язык, так что там все понятно)). Если будут затруднения - обращайся!
Львенок # 18 марта 2010 в 10:41 0
я просто весь текст статьи, как был, туда кинул...
надеюсь разберешься ))
Dimitrius # 18 марта 2010 в 12:04 0
жесть))))
Львенок # 18 марта 2010 в 12:06 0
всему свое время...
Светлана Кондратьева # 18 марта 2010 в 14:25 0
Ну, если честно, там сейчас каша....Ладно....сейчас я там все снесу и поставлю просто ссылку на твой блог. Потом, если выберу время, сама напишу туда статью от твоего имени. Урок этот очень полезный и надо сделать, чтобы он не утонул под новыми наслоениями.
Львенок # 18 марта 2010 в 14:27 0
когда там начнешь редактировать все будет понятно...
структура статьи вся сохранена....
LonelyCat # 18 марта 2010 в 15:17 0
теперь охота урок - как привязывать css
Львенок # 18 марта 2010 в 15:28 0
текст должен выноситься и родиться...
"если девять беременных женщин соберутся вместе, ребенок не родится через месяц"...
LonelyCat # 18 марта 2010 в 12:18 0
доходчиво и понятно!!!
freemen # 18 марта 2010 в 15:56 0
Действительно "доходчиво и понятно!!!"... Одно не ясно почему "человеки" продолжают заниматься "мартышкиным трудом"? Мы ведь на компьютере работаем? Так почему все эти "перетаскивания стандартных блоков" не "засунуть" в общий модуль с толковым интерфейсом. Дать на него линк из "админки" и обозвать просто - "Конструктор шаблонов"
Получим что-то типа этого:  http://anton.shevchuk.name/wordpress/theme-constructor-for-wordpress-updated/
Мы ведь к этому стремимся?
Спасибо автору, что сделал шаг в нужном направлении: "Строим любой сайт одними кликами - без программиста"
Львенок # 18 марта 2010 в 16:13 0
Без программиста скорее всего не получится...
До сих пор отсутствует четкая политика прописывания стилей и классов.
Есть только некоторое направление, которого желательно придерживаться...
Короче в связке "код модуля"->"шаблоны для Смарти"->"CSS" каждый стили прикручивает как вздумается и где вздумается...
Я понимаю что Смарти вещь полезная и "теоретически удобная", но требует значительного времени на освоение и привносит к сожалению еще одну "логику программирования", которую надо учитывать...
в идеале хотелось бы чтобы все заканчивалось на логике php+html+css, ну и JavaScript...

В общем каждый стремится к чему-то своему...
0 # 18 марта 2010 в 16:54 0
А какая логика в Smarty? и "теоретически удобная" с этим не соглашусь на 100% Smarty куда лучше чем native php шаблон. и если руки прямы и программист вынесет всю логику для smarty шаблонизатора то нет никаких проблем использовать унифицированные классы CSS.
LonelyCat # 19 марта 2010 в 06:22 0
ну хотя бы разобрать на примере привязку css, и то очень хорошо было бы
freemen # 18 марта 2010 в 16:24 +1
А если "разобрать на косточки" вот это: http://wiki.a-cms.ru/constructor/index и ...
с божьей помощью и того же Smarty ...
Естественно без унификации и некоторой "жесткости" в концепции не обойтись, зпто получим универсальный инструмент ...
прецеденты ведь на лицо
AndroS # 20 августа 2011 в 07:57 0
а какой модуль нужно прикрутить, чтобы отображался основной контент сайта?
Veris # 25 декабря 2011 в 12:35 -1
Извините, комменты не читал, но по-моему надо было сказать вначале "Копируем папку дефолтного шаблона и переименовываем к примеру в "mytemp"."
А дальше уже расписывать.
Почему? Да банально при обновлении затрется ваш шаблон.
p.s. документация ссылается сюда, а тут... как-то неполно, извините.
Veris # 25 декабря 2011 в 12:52 -1
ой ё..
одмины отжигают))
/templates/_default_/css/nyromodal.css
эт за что же нам такое?
так лучше по-моему
/css/nyromodal.css
Veris # 25 декабря 2011 в 12:56 -1
вернее /../../css/nyromodal.css (если не ошибаюсь)
Veris # 25 декабря 2011 в 12:57 -1
а что нет там параметров типа <? echo this->put_do_templates; ?> ?