This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
ru:themes:tutorial [2013/09/18 10:17] Arkady [Подготовительные работы] |
ru:themes:tutorial [2015/05/01 19:47] Byteler Added <?php get_theme_url(); ?>/ for validator logo img src |
||
---|---|---|---|
Line 10: | Line 10: | ||
Теперь вы можете активировать тему beadysite в панели управления на вашем новом GS-сайте и видеть все происходящие изменения по мере продвижения вперед. Сейчас все ссылки на графику и стили битые, но вскоре вы это исправите. Откройте файл template.php вашей новой темы в своем любимом текстовом редакторе, в другом окне откройте файл template.php из темы Cardinal, чтобы вам было удобно копировать и вставлять тэги из одного шаблона в другой. | Теперь вы можете активировать тему beadysite в панели управления на вашем новом GS-сайте и видеть все происходящие изменения по мере продвижения вперед. Сейчас все ссылки на графику и стили битые, но вскоре вы это исправите. Откройте файл template.php вашей новой темы в своем любимом текстовом редакторе, в другом окне откройте файл template.php из темы Cardinal, чтобы вам было удобно копировать и вставлять тэги из одного шаблона в другой. | ||
- | Вот так выглядит наш статический файл index.htm | + | Вот так выглядит наш статический файл index.html |
<file> | <file> | ||
Line 47: | Line 47: | ||
<div id="left"> | <div id="left"> | ||
<h2>Welcome to Beady Site</h2> | <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" /> | <img src="images/cock.jpg" title="cock" alt="cock" /> | ||
<br /> | <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> | ||
<div id="right"> | <div id="right"> | ||
<h2>Latest news</h2> | <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 "images/psd" 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 "images/psd" 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> | ||
</div> | </div> | ||
Line 81: | Line 90: | ||
<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> | ||
Line 130: | Line 142: | ||
**8** Первый блок контента, озаглавленный 'About Beady Site' не является главной содержательной частью нашего сайта, поэтому сейчас пропустите его, мы вернемся к нему позже. | **8** Первый блок контента, озаглавленный 'About Beady Site' не является главной содержательной частью нашего сайта, поэтому сейчас пропустите его, мы вернемся к нему позже. | ||
- | **9** Второй блок контента страницы (<div id=“left”>) будет нашим главным блоком, поэтому замените заголовок (Welcome to Beady Site) тэгом шаблона ''<?php get_page_title(); ?> | + | **9** Второй блок контента страницы (<div id=“left”>) будет нашим главным блоком, поэтому замените заголовок (Welcome to Beady Site) тэгом шаблона ''<?php get_page_title(); ?>'' |
- | '' | + | |
**10** Все содержимое <div id=“left”> замените тэгом шаблона ''<?php get_page_content(); ?>'' | **10** Все содержимое <div id=“left”> замените тэгом шаблона ''<?php get_page_content(); ?>'' | ||
- | **11** При желании после тэга можно добавить дату публикации. | + | **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'); ?>''. |
**12** Следующий div (id=“right”) будет у нас правым сайдбаром, поэтому все его содержимое замените на следующий тэг: ''<?php get_component('sidebar');?>'' | **12** Следующий div (id=“right”) будет у нас правым сайдбаром, поэтому все его содержимое замените на следующий тэг: ''<?php get_component('sidebar');?>'' | ||
Line 151: | Line 163: | ||
Итак – формирование файла шаблона окончено. Вот и содержимое файла template.php, которое должно было у вас получиться: | Итак – формирование файла шаблона окончено. Вот и содержимое файла template.php, которое должно было у вас получиться: | ||
- | <code> | + | <code php> |
<?php if(!defined('IN_GS')){ die('you cannot load this page directly.'); } | <?php if(!defined('IN_GS')){ die('you cannot load this page directly.'); } | ||
/**************************************************** | /**************************************************** | ||
Line 160: | Line 172: | ||
* | * | ||
*****************************************************/ | *****************************************************/ | ||
- | ?> | + | ?></code> |
- | <!DOCTYPE html> | + | <code php><!DOCTYPE html> |
<html lang=en> | <html lang=en> | ||
+ | </code> | ||
- | <head> | + | <code php><head> |
- | <meta charset=UTF-8> | + | <meta charset=UTF-8> |
- | <title><?php get_page_clean_title(); ?> — <?php get_site_name(); ?></title> | + | <title><?php get_page_clean_title(); ?> — <?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 /> | <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 /> | <hr /> | ||
- | </div> | + | </div></code> |
- | <div id="left"> | + | <code php><div id="left"> |
<h2><?php get_page_title(); ?></h2> | <h2><?php get_page_title(); ?></h2> | ||
<?php get_page_content(); ?> | <?php get_page_content(); ?> | ||
- | </div> | + | </div></code> |
- | <div id="right"> | + | <code php><div id="right"> |
<?php get_component('sidebar');?> | <?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="<?php get_theme_url(); ?>/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;"> </div> | + | <code php><div style="clear: both;"> </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> | </html> | ||
</code> | </code> | ||
- | |||
====Контент==== | ====Контент==== | ||
Line 252: | Line 264: | ||
WYSIWYG- редактор будет намного точнее отображать содержимое страницы, если в папке темы разместить файл ''editor.css'', в который включить основные стилевые правила темы. | 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|Лаконичное пошаговое описание создания темы]] |