This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision Last revision Both sides next revision | ||
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, чтобы вам было удобно копировать и вставлять тэги из одного шаблона в другой. | Теперь вы можете активировать тему beadysite в панели управления на вашем новом GS-сайте и видеть все происходящие изменения по мере продвижения вперед. Сейчас все ссылки на графику и стили битые, но вскоре вы это исправите. Откройте файл template.php вашей новой темы в своем любимом текстовом редакторе, в другом окне откройте файл template.php из темы Cardinal, чтобы вам было удобно копировать и вставлять тэги из одного шаблона в другой. | ||
- | Вот так выглядит наш статический файл index.htm | + | Вот так выглядит наш статический файл index.html |
<file> | <file> | ||
Line 35: | Line 35: | ||
<div class="post"> | <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 |
- | <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 /> | <hr /> | ||
</div> | </div> | ||
<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 75: | 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 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(); ?> < <?php get_site_name(); ?>'' |
- | ''<?php get_page_clean_title(); ?> < <?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(); ?> — <?php get_site_name(); ?>'' |
- | ''<?php get_page_clean_title(); ?> — <?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.'); } | <?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> | <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="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 248: | 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|Лаконичное пошаговое описание создания темы]] |