Найти на сайте

Быстро создаем себе структуру своего шаблона с нуля

+28
3.81K
  2. Блоги
  3. Быстро создаем себе структуру своего шаблона с нуля
Для тех, кто знает и немного работал с HTML и CSS, но пугается огромного объема информации, находящегося в "/templates/_default_/template.php".
Результат будет не совсем ожидаемый, но логика действий, надеюсь будет проста и понятна...
Итак…
1. Копируем себе в резерв на всякий случай "/templates/_default_/template.php" и "templates/_default_/css/styles.css"
2. Создаем себе простейший html-файл (хоть в Dreamweaver`е, как я) с таблицей похожей на расположение стандартного шаблона:
  1. <html>
  2. <head>
  3. <title>Untitled Document</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  5. </head>
  6.  
  7. <body bgcolor="#FFFFFF" text="#000000">
  8. <table width="100%" border="1" cellspacing="0" cellpadding="0">
  9.   <tr> 
  10.     <td colspan="3"> </td>
  11.   </tr>
  12.   <tr> 
  13.     <td> </td>
  14.     <td> </td>
  15.     <td> </td>
  16.   </tr>
  17.   <tr> 
  18.     <td colspan="3"> </td>
  19.   </tr>
  20. </table>
  21. </body>
  22. </html>
Надеюсь здесь все понятно. Заголовок, простая таблица 3х3 ячейки, верхние ячейки объединены в одну и нижние тоже...

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

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

  1. <!-- HEAD !-->
  2. <?php cmsPrintHead(); ?>
  3. <link href="/templates/_default_/css/styles.css" rel="stylesheet" type="text/css" />
  4. <link type='text/css' href='/templates/_default_/basic/css/basic.css' rel='stylesheet' media='screen' />
  5. <!--[if lt IE 7]>
  6. <link type='text/css' href='/templates/modern/basic/css/basic_ie.css' rel='stylesheet' media='screen' />
  7. <![endif]-->
  8. <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
  9. <script src='/templates/_default_/basic/js/jquery.simplemodal.js' type='text/javascript'></script>
  10. <script src='/templates/_default_/basic/js/basic.js' type='text/javascript'></script>
  11. <script type="text/javascript" src="/templates/_default_/jquery.iepnghack.1.6.js"></script>
  12. <script type="text/javascript">$(function(){ $("#logoimg").pngfix(); })</script>
  13.  
Так, скрипты подцепили...
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. Теперь самое сложное и интересное...
Нам нужно вставить кусок кода для авторизации, меню для пользователя "Зарегистрироваться, Авторизоваться, Выйти", и код для поиска.
Вам нужно определиться, куда вы хотите это прикрутить, и будем прикручивать.
Я решил что мне будет удобно в правой средней ячейке сверху перед блоком правых модулей.
Лезу, соответственно, в эту ячейку и поочередно вставляю следующие куски кода:

Для ввода пароля:
  1. <div id="authModal" style='display:none'>
  2. 					<form id="authform" target="_self" style="margin: 0px;" name="authform" method="post" action="/login">
  3. 					<div id="authtitle">Авторизация</div>
  4. 					<table cellpadding="2" cellspacing="2" align="center" id="authtable">
  5. 					  <tr>
  6. 						<td id="authtd">Логин:</td>
  7. 						<td id=""><input name="login" type="text" id="authinput" /></td>
  8. 					  </tr>
  9. 					  <tr>
  10. 						<td id="authtd">Пароль:</td>
  11. 						<td id=""><input name="pass" type="password" id="authinput" /></td>			
  12. 				  </tr>
  13. 				</table>
  14. 				<div id="authoption"><input type="checkbox" value="1" name="remember"/>Запомнить меня | <a href="/0/passremind.html">Забыли пароль?</a></div>
  15. 				<div id="authbutton"><input name="auth" type="submit" value="Войти" id="authbtn"/></div>
  16. 			</form>
  17. 		</div>
Этот блок на самом деле не имеет значение куда вставлять. Главное чтобы он не разбивал структуру документа в ненужном месте…
Дальше...
Блок меню "Зарегистрироваться, Авторизоваться, Выйти" идет одной таблицей, объединенной еще и с формой поиска. Берем все это также из "/templates/_default_/template.php":
  1.  
  2. 						  <table width="370"  align="right" cellpadding="0" cellspacing="0" id="headtools">
  3. 						<tr>
  4. 					 <td>
  5. 					  <!-- Если юзер не авторизован, показываем ему ссылки с регистрацией и авторизацией -->
  6. 					  <?php if(!$inUser->id){ ?> 
  7. 						<a href="/registration" id="ht_reg">Регистрация</a>
  8.  
  9. 						<a href="javascript:auth()" id="ht_auth">Авторизация</a>
  10.  
  11. 						<a href="javascript:window.external.AddFavorite('http://<?php echo $_SERVER['HTTP_HOST']?>/', '<?php cmsPrintSitename(); ?>')" id="ht_fav">В избранное</a>
  12.  
  13. 					  <?php } else { 
  14. 									$uid    = $inUser->id;
  15. 									$newmsg = usrNewMessages($inUser->id); 			  	
  16. 					  ?>
  17. 						<a href="/users/0/<?php echo $uid?>/profile.html" id="ht_profile">Мой профиль</a>
  18.  
  19. 						<?php if (!$newmsg) { ?>	
  20. 							<a href="/users/0/<?php echo $uid?>/messages.html" id="ht_messages">Cообщения</a>
  21.  
  22. 						<?php } else { ?>
  23. 							<a style="color:#F60;" href="/users/0/<?php echo $uid?>/messages.html" id="ht_messages">Cообщения <?php echo strip_tags($newmsg)?></a>
  24.  
  25. 						<?php } ?>
  26. 						<a href="/logout" id="ht_logout">Выход</a>
  27.  
  28. 					  <?php } ?>			
  29. 					 </td>
  30. 						</tr>
  31. 					<tr>
  32. 						 <td>
  33. 							 <div id="bar_search">
  34. 								 <form name="searchform" action="/index.php" method="get">
  35. 									<input type="hidden" name="view" value="search" />
  36. 									<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()"/>
  37. 								 </form>
  38. 							 </div>
  39. 							 </td>
  40. 					</tr>
  41. 				  </table>
  42.  
Для того чтобы пункты меню справа были каждый с новой строки, я после каждой ссылки вида "<a href="/registration" id="ht_reg">Регистрация</a>" добавляю перенос строки "
". В вышеприведенном коде уже меню уже идет вместе с переносами строк, чтобы Вам было проще копировать, вставлять и разбираться дальше...
Собственно и все… Сохраняем получившийся файлик вместо "/templates/_default_/template.php".
В результате у меня получилос вот такой вот файл:
  1. <?php if(!defined('VALID_CMS')) { die('ACCESS DENIED'); } 
  2. ?>
  3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head>
  6. <!-- HEAD !-->
  7. <?php cmsPrintHead(); ?>
  8. <link href="/templates/_default_/css/styles.css" rel="stylesheet" type="text/css" />
  9. <link type='text/css' href='/templates/_default_/basic/css/basic.css' rel='stylesheet' media='screen' />
  10. <!--[if lt IE 7]>
  11. <link type='text/css' href='/templates/modern/basic/css/basic_ie.css' rel='stylesheet' media='screen' />
  12. <![endif]-->
  13. <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
  14. <script src='/templates/_default_/basic/js/jquery.simplemodal.js' type='text/javascript'></script>
  15. <script src='/templates/_default_/basic/js/basic.js' type='text/javascript'></script>
  16. <script type="text/javascript" src="/templates/_default_/jquery.iepnghack.1.6.js"></script>
  17. <script type="text/javascript">$(function(){ $("#logoimg").pngfix(); })</script>
  18. </head>
  19.  
  20. <body bgcolor="#FFFFFF" text="#000000">
  21. <table >
  22.   <tr> 
  23.     <td colspan="3"><div id="sitename"><?php cmsPrintSitename(); ?></div>
  24. <div><?php cmsPathway('»'); ?>	</div></td>
  25.   </tr>
  26.   <tr> 
  27.     <td valign="top" id="left"><?php cmsModule("left"); ?></td>
  28.     <td  valign="top" id="center">	
  29. 						<div><?php cmsModule("top"); ?></div>
  30. 						<div><?php cmsBody(); ?></div>
  31. 						<div><?php cmsModule("bottom"); ?></div>	
  32. </td>
  33.     <td><div id="authModal" style='display:none'>
  34. 					<form id="authform" target="_self" style="margin: 0px;" name="authform" method="post" action="/login">
  35. 					<div id="authtitle">Авторизация</div>
  36. 					<table cellpadding="2" cellspacing="2" align="center" id="authtable">
  37. 					  <tr>
  38. 						<td id="authtd">Логин:</td>
  39. 						<td id=""><input name="login" type="text" id="authinput" /></td>
  40. 					  </tr>
  41. 					  <tr>
  42. 						<td id="authtd">Пароль:</td>
  43. 						<td id=""><input name="pass" type="password" id="authinput" /></td>			
  44. 				  </tr>
  45. 				</table>
  46. 				<div id="authoption"><input type="checkbox" value="1" name="remember"/>Запомнить меня | <a href="/0/passremind.html">Забыли пароль?</a></div>
  47. 				<div id="authbutton"><input name="auth" type="submit" value="Войти" id="authbtn"/></div>
  48. 			</form>
  49. 		</div>
  50. 						  <table width="370"  align="right" cellpadding="0" cellspacing="0" id="headtools">
  51. 						<tr>
  52. 					 <td>
  53. 					  <!-- Если юзер не авторизован, показываем ему ссылки с регистрацией и авторизацией -->
  54. 					  <?php if(!$inUser->id){ ?> 
  55. 						<a href="/registration" id="ht_reg">Регистрация</a>
  56.  
  57. 						<a href="javascript:auth()" id="ht_auth">Авторизация</a>
  58.  
  59. 						<a href="javascript:window.external.AddFavorite('http://<?php echo $_SERVER['HTTP_HOST']?>/', '<?php cmsPrintSitename(); ?>')" id="ht_fav">В избранное</a>
  60.  
  61. 					  <?php } else { 
  62. 									$uid    = $inUser->id;
  63. 									$newmsg = usrNewMessages($inUser->id); 			  	
  64. 					  ?>
  65. 						<a href="/users/0/<?php echo $uid?>/profile.html" id="ht_profile">Мой профиль</a>
  66.  
  67. 						<?php if (!$newmsg) { ?>	
  68. 							<a href="/users/0/<?php echo $uid?>/messages.html" id="ht_messages">Cообщения</a>
  69.  
  70. 						<?php } else { ?>
  71. 							<a style="color:#F60;" href="/users/0/<?php echo $uid?>/messages.html" id="ht_messages">Cообщения <?php echo strip_tags($newmsg)?></a>
  72.  
  73. 						<?php } ?>
  74. 						<a href="/logout" id="ht_logout">Выход</a>
  75.  
  76. 					  <?php } ?>			
  77. 					 </td>
  78. 						</tr>
  79. 					<tr>
  80. 						 <td>
  81. 							 <div id="bar_search">
  82. 								 <form name="searchform" action="/index.php" method="get">
  83. 									<input type="hidden" name="view" value="search" />
  84. 									<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()"/>
  85. 								 </form>
  86. 							 </div>
  87. 							 </td>
  88. 					</tr>
  89. 				  </table>
  90. 					<?php if (cmsCountModules("right")) { ?>			
  91. 					<?php cmsModule("right"); ?>
  92. 					<?php } ?>
  93.  
  94. 		</td>
  95.   </tr>
  96.   <tr> 
  97.     <td colspan="3">
  98. 						<div id="footer">
  99. 							<a href="/"><?php cmsPrintSitename(); ?></a> © <?php echo date('Y')?>
  100. 						</div>
  101. </td>
  102.   </tr>
  103. </table>
  104. </body>
  105. </html>
  106.  
Если вы зайдете на свой сайт с этим файлом шаблона, то увидите, что все это хоть и криво (CSS стили мы пока еще не трогали, они остались старыми), но примерно на том месте где и ожидалось. Теперь вы знаете что где находится. Знаете в каком блоке какие классы используются и что нужно прописывать в CSS, чтобы получить желаемый результат.
Теперь вы можете стереть файл "templates/_default_/css/styles.css"(предварительно сохранив старый вариант). Создать новый… и копировать в новый нужные блоки из старого файла, заодно разбираясь и внося нужные исправления в стили...
Если уж вы понимаете, что напортачили и запутались, то восстанавливаете ранее сохраненные файлы и начинаете заново...
Всем удачи!!! ;)
А что у нас за Яваскрипты в стандартном шаблоне???
Ридер excel
шаблоны
0
lezginka.ru lezginka.ru 14 лет назад #
Львенок, отлично, еще бы скин шаблона отличного от дефолта и уроку цены не будет.
кстати , так же можно и нужно расписать css(если есть время и желание).

0
Львенок Львенок 14 лет назад #
Я надеюсь, будет продолжение...
Делаешь какой угодно скин... Пункты 4,6,7,8 вставку делаешь туда, куда хочешь с поправкой на изменения...
+2
Светлана Кондратьева ✝️ Светлана Кондратьева ✝️ 14 лет назад #
Урок действительно отличный. Дорогой Львенок, не сочти за труд, размести в нашей вики ссылку на свой урок, чтобы новички могли быстро его найти. Спасибо!
+2
Светлана Кондратьева ✝️ Светлана Кондратьева ✝️ 14 лет назад #
На странице http://instantcms.ru/wiki/doku.php/разработка:шаблоны
Выло бы клёво разместить там урок полностью, но это от твоего желания зависит. Если пожелаешь, я тебе помогу разобраться с вики-синтаксисом.
0
Львенок Львенок 14 лет назад #
Сделай пожалуйста страничку под эту статью и я вставлю...
А дальше потом сама отформатируешь ;)
+2
Светлана Кондратьева ✝️ Светлана Кондратьева ✝️ 14 лет назад #
Так уже создана! Я ведь тебе на нее ссылку и дала)))) Просто нажми там кнопку "править страницу" и действуй. А как закончишь, нажмешь кнопку "сохранить". И не бойся накосячить - всегда можно поправить или откатить. Синтаксис тегов вики можешь найти на страничке "Синтаксис вики" - я ее перевела на русский язык, так что там все понятно)). Если будут затруднения - обращайся!
0
Львенок Львенок 14 лет назад #
я просто весь текст статьи, как был, туда кинул...
надеюсь разберешься ))
0
Димитриус Димитриус 14 лет назад #
жесть))))
0
Львенок Львенок 14 лет назад #
всему свое время...
+2
Светлана Кондратьева ✝️ Светлана Кондратьева ✝️ 14 лет назад #
Ну, если честно, там сейчас каша....Ладно....сейчас я там все снесу и поставлю просто ссылку на твой блог. Потом, если выберу время, сама напишу туда статью от твоего имени. Урок этот очень полезный и надо сделать, чтобы он не утонул под новыми наслоениями.
0
Львенок Львенок 14 лет назад #
когда там начнешь редактировать все будет понятно...
структура статьи вся сохранена....
LonelyCat LonelyCat 14 лет назад #
Комментарий удален
0
Львенок Львенок 14 лет назад #
текст должен выноситься и родиться...
"если девять беременных женщин соберутся вместе, ребенок не родится через месяц"...
LonelyCat LonelyCat 14 лет назад #
Комментарий удален
0
freemen 14 лет назад #
Действительно "доходчиво и понятно!!!"... Одно не ясно почему "человеки" продолжают заниматься "мартышкиным трудом"? Мы ведь на компьютере работаем? Так почему все эти "перетаскивания стандартных блоков" не "засунуть" в общий модуль с толковым интерфейсом. Дать на него линк из "админки" и обозвать просто - "Конструктор шаблонов"
Получим что-то типа этого: http://anton.shevchuk.name/wordpress/theme-constructor-for-wordpress-updated/
Мы ведь к этому стремимся?
Спасибо автору, что сделал шаг в нужном направлении: "Строим любой сайт одними кликами - без программиста"
0
Львенок Львенок 14 лет назад #
Без программиста скорее всего не получится...
До сих пор отсутствует четкая политика прописывания стилей и классов.
Есть только некоторое направление, которого желательно придерживаться...
Короче в связке "код модуля"->"шаблоны для Смарти"->"CSS" каждый стили прикручивает как вздумается и где вздумается...
Я понимаю что Смарти вещь полезная и "теоретически удобная", но требует значительного времени на освоение и привносит к сожалению еще одну "логику программирования", которую надо учитывать...
в идеале хотелось бы чтобы все заканчивалось на логике php+html+css, ну и JavaScript...

В общем каждый стремится к чему-то своему...
0
14 лет назад #
А какая логика в Smarty? и "теоретически удобная" с этим не соглашусь на 100% Smarty куда лучше чем native php шаблон. и если руки прямы и программист вынесет всю логику для smarty шаблонизатора то нет никаких проблем использовать унифицированные классы CSS.
LonelyCat LonelyCat 14 лет назад #
Комментарий удален
+2
freemen 14 лет назад #
А если "разобрать на косточки" вот это: http://wiki.a-cms.ru/constructor/index и ...
с божьей помощью и того же Smarty ...
Естественно без унификации и некоторой "жесткости" в концепции не обойтись, зпто получим универсальный инструмент ...
прецеденты ведь на лицо
0
AndroS AndroS 13 лет назад #
а какой модуль нужно прикрутить, чтобы отображался основной контент сайта?
0
Veris Veris 13 лет назад #
Извините, комменты не читал, но по-моему надо было сказать вначале "Копируем папку дефолтного шаблона и переименовываем к примеру в "mytemp"."
А дальше уже расписывать.
Почему? Да банально при обновлении затрется ваш шаблон.
p.s. документация ссылается сюда, а тут... как-то неполно, извините.
-2
Veris Veris 13 лет назад #
ой ё..
одмины отжигают))
/templates/_default_/css/nyromodal.css
эт за что же нам такое?
так лучше по-моему
/css/nyromodal.css
-1
Veris Veris 13 лет назад #
вернее /../../css/nyromodal.css (если не ошибаюсь)
-2
Veris Veris 13 лет назад #
а что нет там параметров типа <? echo this->put_do_templates; ?> ?
0
NIR FROST NIR FROST 11 лет назад #
вот код вывода новостей и тд как я понял

{if $articles}
{assign var="col" value="1"}
<table class="contentlist contentlist" cellspacing="2" width="100%">
{foreach key=0 item=article from=$articles}
{if $col==1} <tr> {/if}
<td width="20" valign="top">
<img src="/templates/{template}/images/icons/article.png" class="con_icon"/>
</td>
<td width="" valign="top">
<div class="con_title">
<a href="{$article.url}" class="con_titlelink">{$article.title}</a>
</div>
{if $cat.showdesc}
<div class="con_desc">
{if $article.image}
<div class="con_image">
<img src="/images/photos/small/{$article.image}" alt="{$article.title|escape:'html'}"/>
</div>
{/if}
{$article.description}
</div>
{/if}

{if $cat.showcomm || $showdate || ($cat.showtags && $article.tagline)}
<div class="con_details">
{if $showdate}
{$article.fpubdate} - <a href="{profile_url login=$article.user_login}" style="color:#666">{$article.author}</a>
{/if}
{if $cat.showcomm}
{if $showdate} | {/if}
<a href="{$article.url}" title="{$LANG.DETAIL}">{$LANG.DETAIL}</a>
| <a href="{$article.url}#c" title="{$LANG.COMMENTS}">{$article.comments|spellcount:$LANG.COMMENT1:$LANG.COMMENT2:$LANG.COMMENT10}</a>
{/if}
| {$article.hits|spellcount:$LANG.HIT:$LANG.HIT2:$LANG.HIT10}
{if $cat.showtags && $article.tagline}
{if $showdate || $cat.showcomm} <br/> {/if}
{if $article.tagline} <strong>{$LANG.TAGS}:</strong> {$article.tagline} {/if}
{/if}
</div>
{/if}
</td>
{if $col==$cat.maxcols} </tr> {assign var="col" value="1"} {else} {math equation="x + 1" x=$col assign="col"} {/if}
{/foreach}
{if $col>1}
<td colspan="{math equation="y - x + 1" x=$col y=$cat.maxcols}">&nbsp;</td></tr>
{/if}
</table>
{$pagebar}
{/if}

что тут изменить чтоб например вывести записи из кактегории с id =2 к примеру

Еще от автора

Шаблоны и Стили. Что InstantCMS нам выдает...

Шаблоны и Стили. Что InstantCMS нам выдает...

Зайдите на страничку вашего сайта InstantCMS. Через контекстное меню откройте код HTML страницы... Понятно что-нибудь?? Сомневаюсь...
8
Шаблоны и стили. Пролог

Шаблоны и стили. Пролог

Снова предварительный пост. Мы будем разбираться в задачах, с которыми мы будем сталкиваться при работе с шаблонами, и которые нам придется решать.
3
А что у нас за Яваскрипты в стандартном шаблоне???

А что у нас за Яваскрипты в стандартном шаблоне???

Вот прежде чем начинать возиться со стилями компонентов и шаблона целиком будет полезно посмотреть, а что у нас в шаблоне за Яваскрипты подключаются..
13

InstantCMS Team

Связь с нами
Email dev@instantcms.ru

Делаем полезные Интернет проекты с 2008 года 💫

О проекте

Поддержка

Дополнения

Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.