User Tools

Site Tools


ru:themes:tutorial

Differences

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

Link to this comparison view

Next revision
Previous revision
ru:themes:tutorial [2013/09/18 09:58]
Arkady created
ru:themes:tutorial [2015/05/01 19:47] (current)
Byteler Added <?php get_theme_url(); ?>/ for validator logo img src
Line 3: Line 3:
 **Сайт на GetSimple из статического сайта** **Сайт на GetSimple из статического сайта**
  
-It might be a site you have previously madeit might be a page or template you want to turn into a GS Theme – the procedure is the sameIn this case I am going to use the free page template ​Beadysite ​from: +Будь это ваш сайткоторый вы когда-то делали,​ или страница или шаблон,​ которые нужно превратить в тему GetSimple ​– технология ничем не отличаетсяДля этого урока за основу взят бесплатный HTML-шаблон ​Beadysite: http://​www.html5-templates.co.uk/​beadysite/​
-http://​www.html5-templates.co.uk/​beadysite/​ +
  
 ====Подготовительные работы==== ====Подготовительные работы====
  
-I install a copy of GetSimple ​in a new folder under Wampserver and I download and unzip the the Beady filesIt's a page and a css and an images folder already arranged correctly for a GS theme so I put the whole Beadysite folder in the theme folder of my new local GS site alongside ​Cardinal and Innovation. ​Inside the folder I copy the file index.html ​and rename it template.php. ​Now I can activate the the beadysite ​as a theme in my new GS site and test the changes I make to the file as I go alongAll the links to images and to the css are broken but we will soon fix thatI open the file template.php ​from the beadysite folder in my text editor and open the template.php ​from the Cardinal ​theme alongside it so I can copy and paste the tags from one to the other.+Для учебных целей можно выполнить новую установку ​GetSimple ​на локальном сервереПосле установки системы скачайте и разархивируйте файлы шаблона beadysite. Все файлы beadysite расположены именно так, как это требуется для тем GetSimple, поэтому можно сразу скопировать разархивированную папку со всем содержимым в папку ​theme к темам по умолчанию ​Cardinal and Innovation. ​В папке beadysite создайте копию файла ​index.html ​и переименуйте ее в template.php. 
 +Теперь вы можете активировать тему ​beadysite ​в панели управления на вашем новом ​GS-сайте и видеть все происходящие изменения по мере продвижения впередСейчас все ссылки на графику и стили битые, но вскоре вы это исправитеОткройте файл ​template.php ​вашей новой темы в своем любимом текстовом редакторе,​ в другом окне откройте файл ​template.php ​из темы ​Cardinal, чтобы вам было удобно копировать и вставлять тэги из одного шаблона в другой. 
 + 
 +Вот так выглядит наш статический файл index.html ​
  
-This is the static index.htm ​ 
 <​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 &​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>​
  </​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 topthese 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.'​);​ }?>''​ +
-OptionallyI put in the commented notesbut 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 logoI 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 pageThis 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();​ ?> &​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 />  <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;">&​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> ​ </​html> ​
 </​code>​ </​code>​
- 
  
 ====Контент==== ====Контент====
  
-Now when I log in to admin I can enter the site name and base url once only and put the main page content and page titles back in through the GS back end.+Теперь вы можете войти в административную панель,​ ввести один раз **Название сайта** и **Основной URL сайта** в **Настройках**. Затем на вкладке **Страницы** отредактируйте заголовок главной страницы и скопируйте в поле WYSIWYG-редактора главный контент страницы,​ который будет отдаваться системой тэгом шаблона <?php get_page_content();​ ?>.
  
-There was a secondary content block on the pageheaded ​'About Beady Site' ​which I also want to make editableTo do this I go to Theme and Edit Components in the back endHere I can create a component and write in (in html) whatever content I want to include and in my template.php ​file I paste in the get_component ​tag.+Вспомнимчто у нас был еще один блок контента по имени ​'About Beady Site'​. ​Допустим,​ его содержимое надо сделать доступным для редактированияДля этого на вкладке Тема кликните пункт бокового меню Редактировать компоненты. Здесь можно создать новый компонент и разместить в него необходимый HTML-код с содержимым,​ например,​ контент блока 'About Beady Site', которое мы хотим включить в файл ''​template.php''​. Вызов компонента осуществляется в файле шаблона тэгом <?​php ​get_component('​Имя_нового_компонента'​);?>​ Теперь,​ если возникает необходимость изменить текст компонента,​ мы его просто редактируем,​ не трогая файл шаблона.
  
-If I don't want to enter the content with html tags I can create a page under the Pages tab and insert the page contents into my template with <?php getPageContent('​slug'​);​ ?> where '​slug' ​is the filename for the page data displayed in Pages - Edit Page - Page Options.+Если вам по какой-то причине не хочется возиться с HTML-разметкой в теле компонента,​ вы можете создать новую страницу на вкладке **Страницы**,​ присвоить ей постоянную ссылку (slug) и разместить требуемый контент в поле WYSIWYG-редактора. Затем в файле шаблона на месте, где должен появляться ваш контент,​ разместите тэг ​<?php getPageContent('​slug'​);​ ?>, где ​'​slug' ​– **Постоянная ссылка** на вашу новую страницу.
  
 +====Окончательная отделка====
  
-====Окончательная отделка====+Все файлы темы размещаются в папке с соответствующим именем. В качестве наименования ​темы в административной панели берется имя папки темы. Файл ''​template.php''​ и другие файлы шаблонов не должны располагаться в подпапках. В папке темы должна быть подпапка //images//, в этой же папке следует размещать файл ''​screenshot.png'',​ который представляет собой скриншот вашей темы, который будет выводиться на экран в административной панели на вкладке **Темы**. Рисунок не должен быть большим,​ 240*240px вполне достаточно. 
 + 
 +WYSIWYG- редактор ​ будет намного точнее отображать содержимое страницы,​ если в папке темы разместить файл ​ ''​editor.css'',​ в который включить основные стилевые правила темы.  
 + 
 +====== Ссылки ======
  
-All the theme files go in a folder and the folder name determines the theme name as shown in the GS backend. ''​template.php''​ and any other page templates should be in the theme folder and not in a sub folder. There should be a sub folder called //images// and in that folder a file named ''​screenshot.png''​ which will be the screenshot displayed in the backend when themes are selected. It shouldn'​t be too big; 240px wide is plenty.+На главную [[ru:​|Содержание]]
  
-GetSimple'​s wysiwyg editor will display page contents much more accurately if you put in the theme folder a file named ''​editor.css''​ which includes the basic styles for the theme.+===== Страницы этой секции =====
  
 +=== Руководства,​ Советы ===
 +  *[[ru:​security|Дополнительные меры безопасности]]
 +  *[[ru:​how_to:​accessibility|Горячие клавиши]]
 +  *[[ru:​components-depending-on-the_page|Вывод компонентов в зависимости от страницы]]
 +  *[[ru:SEO for GetSimple|Оптимизация сайта на GetSimple для поисковых систем (SEO)]]
 +  *[[ru:​themes:​shorttutorial|Лаконичное пошаговое описание создания темы]]
ru/themes/tutorial.1379498292.txt.gz · Last modified: 2013/09/18 09:58 by Arkady