Differences

This shows you the differences between two versions of the page.

--- ru:themes:tutorial [2013/09/18 10:05]
Arkady [Контент]
+++ ru:themes:tutorial [2014/01/10 20:54]
lukoie [Страницы этой секции]
@@ Line 10: / Line 10: @@
 Теперь вы можете активировать тему beadysite в панели управления на вашем новом GS-сайте и видеть все происходящие изменения по мере продвижения вперед. Сейчас все ссылки на графику и стили битые, но вскоре вы это исправите. Откройте файл template.php вашей новой темы в своем любимом текстовом редакторе, в другом окне откройте файл template.php из темы Cardinal, чтобы вам было удобно копировать и вставлять тэги из одного шаблона в другой.
-Вот так выглядит наш статический файл index.htm
+Вот так выглядит наш статический файл index.html
 <file>
@@ Line 35: / Line 35: @@
 				<div class="post">
 					<h2>About Beady Site</h2>
-					<p>Bla bla bla a load of old nonsense goes here in this area, move on nothing of interests to read here just a load of old nonsense.Bla bla bla a load of old nonsense goes here in this area, move on nothing of interests to read here just a load of old nonsense. </p>
+					<p>Bla bla bla a load of old nonsense
-					<p>Bla bla bla a load of old nonsense goes here in this area, move on nothing of interests to read here just a load of old nonsense.Bla bla bla a load of old nonsense goes here in this area, move on nothing of interests to read here just a load of old nonsense.</p>
+goes here in this area, move on nothing of interests to read here just a load of old nonsense.
+Bla bla bla a load of old nonsense goes here in this area, move on nothing of interests
+to read here just a load of old nonsense. </p>
+					<p>Bla bla bla a load of old nonsense goes here
+in this area, move on nothing of interests to read here just a load of old nonsense.
+Bla bla bla a load of old nonsense goes here in this area, move on nothing of interests
+to read here just a load of old nonsense.</p>
 					<hr />
 				</div>
 				<div id="left">
 					<h2>Welcome to Beady Site</h2>
-					<p>Bla bla bla a load of old nonsense goes here in this area, move on nothing of interests to read here just a load of old nonsense.Bla bla bla a load of old nonsense goes here in this area, move on nothing of interests to read here just a load of old nonsense.</p>
+					<p>Bla bla bla a load of old nonsense
+goes here in this area, move on nothing of interests to read here just
+a load of old nonsense.Bla bla bla a load of old nonsense goes here in this area,
+move on nothing of interests to read here just a load of old nonsense.</p>
 					<img src="images/cock.jpg" title="cock" alt="cock" />
 					<br />
-					<p>Bla bla bla a load of old nonsense goes here in this area, move on nothing of interests to read here just a load of old nonsense.Bla bla bla a load of old nonsense goes here in this area, move on nothing of interests to read here just a load of old nonsense.</p>
+					<p>Bla bla bla a load of old nonsense
+goes here in this area, move on nothing of interests to read here just
+a load of old nonsense.Bla bla bla a load of old nonsense goes here in this area,
+move on nothing of interests to read here just a load of old nonsense.</p>
 				</div>
 				<div id="right">
 					<h2>Latest news</h2>
-					<p>This is a free html5 web template, It`s very easy to edit and redesign in anyway you want. The PSD for the logo image is in the &quot;images/psd&quot; directory of this template.</p>
+					<p>This is a free html5 web template,
-					<p>If you're having problems editing the template you can find help on my website via the  <a href="http://www.html5-templates.co.uk/forum/index.php">forums</a>.</p>
+ It`s very easy to edit and redesign in anyway you want. The PSD for the logo image
+is in the &quot;images/psd&quot; directory of this template.</p>
+					<p>If you're having problems editing the template
+you can find help on my website via the  <a href="http://www.html5-templates.co.uk/forum/index.php">forums</a>.</p>
 				</div>
 			</div>
@@ Line 75: / Line 90: @@
 				<br />
 				<p>
-					<a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!"/></a>
+					<a href="http://jigsaw.w3.org/css-validator/check/referer">
+<img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!"/></a>
 				</p>
 				<br />
 				<p>
-					<a href="http://creativecommons.org/licenses/by/3.0/"><img style="border:0;width:88px;height:31px" src="http://i.creativecommons.org/l/by/3.0/88x31.png" alt="Creative Commons Attribution 3.0 Unported License!" /></a>
+					<a href="http://creativecommons.org/licenses/by/3.0/">
+<img style="border:0;width:88px;height:31px" src="http://i.creativecommons.org/l/by/3.0/88x31.png"
+alt="Creative Commons Attribution 3.0 Unported License!" /></a>
 				</p>
 			</div>
@@ Line 99: / Line 117: @@
 ====Редактирование====
-From the top, these are the changes I make:
+Все изменения, с начала файла новой темы template.php, которые необходимо сделать:
-**1**       The file needs to start with:
+**1**       **Файл шаблона должен всегда начинаться со следующей инструкции:** ''<?php if(!defined('IN_GS')){ die('you cannot load this page directly.'); }?>'' Можно включить в файл закоментированные заметки, как это сделать – посмотрите код ниже. Проверьте, закрыта ли инструкция PHP закрывающим тэгом ''?>''.
-''<?php if(!defined('IN_GS')){ die('you cannot load this page directly.'); }?>''
-Optionally, I put in the commented notes, but make sure the php tag is closed with ''?>''
-**2**       Between the title tags I copy and paste the php tags
+**2**       В тэг <title></title> вставляем тэги шаблона GetSimple: ''<?php get_page_clean_title(); ?> &lt; <?php get_site_name(); ?>''
-''<?php get_page_clean_title(); ?> &lt; <?php get_site_name(); ?>''
-I don't much like the ”less than” symbol so I am going to replace it with a long dash:
+Для тех, кто не любит символ «больше», можно заменить его, например, на длинное тире: ''<?php get_page_clean_title(); ?> &mdash; <?php get_site_name(); ?>''
-''<?php get_page_clean_title(); ?> &mdash; <?php get_site_name(); ?>''
-**3**	''<?php get_header(); ?>'' is required in the head section by some plugins
+**3**	В секцию <head></head> нашего шаблона необходимо вставить тэг ''<?php get_header(); ?>'', поскольку некоторые плагины не работают, если в шаблоне нет этого тэга.
-**4**	The relative link to the css is broken already so I make it an absolute link by replacing ''href="style.css"'' with ''href="<?php get_theme_url(); ?>/style.css"''
+**4**	Относительная ссылка на css-файл сейчас указывает в никуда, надо ее поправить и лучше сделать из нее абсолютную. Замените атрибут ''href=“style.css”'' на  ''href=”<?php get_theme_url(); ?>/style.css”''
-That's the head section done and now that the link to the css is mended I can look at my new GS page in my browser with a little more pleasure.
+Вы справились с секцией <head></head> шаблона, и теперь, когда вы правильно сослались на css-файл, наша страница в браузере выглядит значительно лучше.
-**5**	It's optional but handy to id the page body with ''<body id="<?php get_page_slug(); ?>" >'' It makes it easy to restyle a single page.
-**6**	In the header I fix the links to images by adding ''<?php get_theme_url(); ?>/'' and check that they now display on my page.
+**5**	Иногда полезно снабдить тэг <body> шаблона вот таким кодом: ''<body id=”<?php get_page_slug(); ?>” >''  Теперь к каждой странице будущего сайта будет удобно применять свои стилевые правила.
-**7** That first image is the site logo. I want the logo on each page of my site to be a link back to the homepage, and I want it to have the site name as alt text so the whole line is written like this:
+**6**	В шапке сайта необходимо поправить ссылки на графику. Добавляем к атрибуту src  тэг шаблона и правый слэш ''<?php get_theme_url(); ?>/'', убеждаемся, что теперь рисунок отображается на странице.
-''<a href="<?php get_site_url(); ?>"><img src="<?php get_theme_url(); ?>/images/logo.png" width="303" height="82" alt="<?php get_site_name(); ?>" /></a>''
-Better still would be to replace the image with the text of the site name by using the tag ''<?php get_site_name(); ?>'' and styling with font and colour but we will do that another day.
+**7** Теперь займемся логотипом сайта. Предположим, нам необходимо, чтобы логотип сайта на каждой станице был еще и ссылкой на главную страницу сайта. Кроме того, давайте запишем наименование нашего сайта в атрибут alt рисунка логотипа. Достигается это с помощью следующего кода: ''<a href=”<?php get_site_url(); ?>”><img src=”<?php get_theme_url(); ?>/images/logo.png” width=“303” height=“82” alt=”<?php get_site_name(); ?>” /></a>''
+Можно просто заменить логотип текстом с именем сайта с помощью тэга ''<?php get_site_name(); ?>'' и применить к тексту свои стили шрифта, цвета и.т.д.
-**8**	The first block of content headed 'About Beady Site' isn't the main content so I am going to leave it how it is and come back to it.
-**9**	The second block of content (<div id="left">) is to be my main one so I replace the title (Welcome to Beady Site) with ''<?php get_page_title(); ?>''
+**8**	Первый блок контента, озаглавленный 'About Beady Site' не является главной содержательной частью нашего сайта, поэтому сейчас пропустите его, мы вернемся к нему позже.
-**10**	All the remaining content to the end of the div I replace with ''<?php get_page_content(); ?>''
+**9**	Второй блок контента страницы (<div id=“left”>) будет нашим главным блоком, поэтому замените заголовок (Welcome to Beady Site) тэгом шаблона ''<?php get_page_title(); ?>''
-**11**	If we want we can put in the 'published on' date statement but I am going to leave it out
+**10**	Все содержимое <div id=“left”> замените тэгом шаблона ''<?php get_page_content(); ?>''
-**12**	The next div (id="right") is the right hand sidebar so all the content is replaced with
+**11**	При желании после тэга можно добавить дату публикации, так выглядит код для публикации даты на русском языке ''<?php setlocale(LC_TIME, 'ru_RU.UTF8', 'ru.UTF8', 'ru_RU.UTF-8', 'ru.UTF-8', 'ru_RU', 'ru'); echo strftime('%d %B, %Y'); ?>''.
-''<?php get_component('sidebar');?>''
-**13**	The next div is the left hand side bar, confusingly called “sidebar” . All we have to do is replace the list items of the nav menu with ''<?php get_navigation(return_page_slug()); ?>''
+**12**	Следующий div (id=“right”)  будет у нас правым сайдбаром, поэтому все его содержимое замените на следующий тэг: ''<?php get_component('sidebar');?>''
-**14**	Another link to an image needs mending with ''<?php get_theme_url(); ?>/''
+**13**	Следующий div – это левый сайдбар. Его id совпадает с именем компонента, но пусть это вас не смущает. Мы заменяем элементы списка меню на вызов тэга ''<?php get_navigation(return_page_slug()); ?>''
-**15**	In the footer now 'Your Site Name ' is replaced with ''<?php get_site_name(); ?>'' and the copyright year can be ''<?php echo date('Y'); ?>'' so that it will always show the current year.
+**14**	Еще в одном рисунке поправляем атрибут src, добавляя к нему тэг щаблона и правый слэш: ''<?php get_theme_url(); ?>/''
-**16**	We ought to Link to GS with ''<?php get_site_credits(); ?>''
+**15**	Далее в подвале  шаблона замените  'Your Site Name ' тэгом ''<?php get_site_name(); ?>'', а год копирайта, например, на ''<?php echo date('Y'); ?>'', и у вас на экране всегда будет отображаться текущий год.
-**17**	Some plugins require ''<?php get_footer(); ?>''
+**16**	В качестве благодарности можно поставить ссылку на сайт GetSimple c помощью тэга ''<?php get_site_credits(); ?>
+''
-That's it for a basic page. This is my new file template.php:<code>
+**17**	Добавляем еще один тэг: ''<?php get_footer();?>'', так как некоторые плагины не будут работать при отсутствии этого тэга в шаблоне.
+Итак  – формирование файла шаблона окончено. Вот и содержимое файла template.php, которое должно было у вас получиться:
+<code php>
 <?php if(!defined('IN_GS')){ die('you cannot load this page directly.'); }
 /****************************************************
@@ Line 156: / Line 172: @@
 *
 *****************************************************/
-?>
+?></code>
-<!DOCTYPE html>
+<code php><!DOCTYPE html>
 <html lang=en>
+</code>
-	<head>
+<code php><head>
-		<meta charset=UTF-8>
+   <meta charset=UTF-8>
-		<title><?php get_page_clean_title(); ?> &mdash;  <?php get_site_name(); ?></title>
+   <title><?php get_page_clean_title(); ?> &mdash;  <?php get_site_name(); ?></title>
-		<?php get_header(); ?>
+   <?php get_header(); ?>
-		<link href="<?php get_theme_url(); ?>/style.css" rel="stylesheet" type="text/css" media="screen" />
+   <link href="<?php get_theme_url(); ?>/style.css" rel="stylesheet" type="text/css" media="screen" />
-	</head>
+</head></code>
-	<body id="<?php get_page_slug(); ?>" >
+<code php><body id="<?php get_page_slug(); ?>" ></code>
-		<div id="page">
+<code><div id="page"></code>
-			<header>
+<code php><header>
-				<a href="<?php get_site_url(); ?>"><img src="<?php get_theme_url(); ?>/images/logo.png" width="303" height="82" alt="<?php get_site_name(); ?>" /></a>
+<a href="<?php get_site_url(); ?>"><img src="<?php get_theme_url(); ?>/images/logo.png" width="303" height="82" alt="<?php get_site_name(); ?>" /></a>
 				<br />
-				<img src="<?php get_theme_url(); ?>/images/bg_banner_grey.gif" width="980" height="5" alt="logo_banner" />
+ <img src="<?php get_theme_url(); ?>/images/bg_banner_grey.gif" width="980" height="5" alt="logo_banner" />
-			</header>
+			</header></code>
-			<div id="content">
+<code php><div id="content"></code>
-				<div class="post">
+<code php><div class="post">
-					<h2>About Beady Site</h2>
+   <h2>About Beady Site</h2>
-					<p>Bla bla bla a load of old nonsense goes here in this area, move on nothing of interests to read here just a load of old nonsense.Bla bla bla a load of old nonsense goes here in this area, move on nothing of interests to read here just a load of old nonsense. </p>
+	<p>Bla bla bla a load of old nonsense goes here in this area, move on nothing of interests to read here just a load of old nonsense.</p>
-					<p>Bla bla bla a load of old nonsense goes here in this area, move on nothing of interests to read here just a load of old nonsense.Bla bla bla a load of old nonsense goes here in this area, move on nothing of interests to read here just a load of old nonsense.</p>
+	<p>Bla bla bla a load of old nonsense goes here in this area, move on nothing of interests to read here just a load of old nonsense.</p>
 					<hr />
-				</div>
+				</div></code>
-				<div id="left">
+<code php><div id="left">
 					<h2><?php get_page_title(); ?></h2>
 					<?php get_page_content(); ?>
-				</div>
+				</div></code>
-				<div id="right">
+<code php><div id="right">
 					<?php get_component('sidebar');?>
-				</div>
+				</div></code>
-			</div>
+<code php></div> <!-- end-of-"content" --></code>
-			<div id="sidebar">
+<code php><div id="sidebar">
-				<ul>
+<ul>
-					<li>
+	<li>
-						<h2>Menu </h2>
+	    <h2>Menu </h2>
-						<ul><?php get_navigation(return_page_slug()); ?></ul>
+	    <ul><?php get_navigation(return_page_slug()); ?></ul>
-					</li>
+	</li>
-				</ul>
+</ul>
-				<br />
+	<br />
-				<p>
+	<p>
-					<a href="http://validator.w3.org/check?uri=referer"><img src="images/HTML5_Logo.png" alt="Valid HTML5" />  </a>
+   <a href="http://validator.w3.org/check?uri=referer"><img src="images/HTML5_Logo.png" alt="Valid HTML5" />  </a>
-				</p>
+	</p>
-				<br />
+	<br />
-				<p>
+	<p>
-					<a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" /> </a>
+   <a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" /> </a>
-				</p>
+	</p>
-				<br />
+	<br />
-				<p>
+	<p>
-					<a href="http://creativecommons.org/licenses/by/3.0/"> <img style="border:0;width:88px;height:31px"src="http://i.creativecommons.org/l/by/3.0/88x31.png" alt="Creative Commons Attribution 3.0 Unported License!" /> </a>
+   <a href="http://creativecommons.org/licenses/by/3.0/"> <img style="border:0;width:88px;height:31px"src="http://i.creativecommons.org/l/by/3.0/88x31.png" alt="Creative Commons Attribution 3.0 Unported License!" /> </a>
-				</p>
+	</p>
-			</div>
+</div></code>
-			<div style="clear: both;">&nbsp;</div>
+<code php><div style="clear: both;">&nbsp;</div>
-			<img src="<?php get_theme_url(); ?>/images/bg_banner_grey.gif" width="980" height="5" alt="logo_banner" />
+	<img src="<?php get_theme_url(); ?>/images/bg_banner_grey.gif" width="980" height="5" alt="logo_banner" /></code>
-			<footer>
+<code php><footer>
-				<?php get_site_name(); ?>
+   <?php get_site_name(); ?>
-				© <?php echo date('Y'); ?> | Design by <a href="http://www.html5-templates.co.uk" target="_blank">HTML5 Templates</a> | <?php get_site_credits(); ?>
+   © <?php echo date('Y'); ?> | Design by <a href="http://www.html5-templates.co.uk" target="_blank">HTML5 Templates</a> <?php get_site_credits(); ?>
-				<?php get_footer(); ?>
+   <?php get_footer(); ?>
-			</footer>
+</footer></code>
-		</div>
+<code></div> <!-- end-of-"page" --></code>
-	</body>
+<code></body>
 </html>
 </code>
 ====Контент====
@@ Line 248: / Line 264: @@
 WYSIWYG- редактор  будет намного точнее отображать содержимое страницы, если в папке темы разместить файл  ''editor.css'', в который включить основные стилевые правила темы.
+====== Ссылки ======
+На главную [[ru:|Содержание]]
+===== Страницы этой секции =====
+=== Руководства, Советы ===
+  *[[ru:security|Дополнительные меры безопасности]]
+  *[[ru:how_to:accessibility|Горячие клавиши]]
+  *[[ru:components-depending-on-the_page|Вывод компонентов в зависимости от страницы]]
+  *[[ru:SEO for GetSimple|Оптимизация сайта на GetSimple для поисковых систем (SEO)]]
+  *[[ru:themes:shorttutorial|Лаконичное пошаговое описание создания темы]]

GetSimple CMS Wiki

User Tools

Site Tools

Differences

Page Tools