Differences

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

--- ru:themes:shorttutorial [2014/01/10 19:12]
lukoie [Подготовительные работы]
+++ ru:themes:shorttutorial [2014/01/13 12:32] (current)
Arkady [Подготовительные работы]
@@ Line 4: / Line 4: @@
 ====Подготовительные работы====
-Готовим нужную html страницу шаблона.
+**1** Готовим html-страницу шаблона, и заливаем в директорию ''theme'', создав там новую директорию для нашей темы. Имя шаблона в админке берется из названия директории шаблона. Скриншот шаблона кладем в ''///images/screenshot.png//'', размер //250*250px// достаточно.
- В директории theme в корне сайта создаем новую директорию для темы, и заливаем туда подготовленные файлы.
+**2** Основной файл шаблона(''index.html'') называем ''template.php''. Не используем поддиректории для //.php// файлов темы.
- Основной файл шаблона(index) называем template.php
+**3** В панели управления сайта в меню "тема" активируем в списке нашу новую тему, и в списке выбираем "Редактировать тему".
+====HEAD====
+**4**	Каждый //.php// файл(допустим у вас используются инклюды) должен начинаться с ''<?php if(!defined('IN_GS')){ die('you cannot load this page directly.'); }?>''
+**5**	В тэге //<title></title>// вставляем: ''<?php get_page_clean_title(); ?> &lt; <?php get_site_name(); ?>'', или ''<?php get_page_clean_title(); ?> &mdash; <?php get_site_name(); ?>''
- В панели управления сайта в меню "тема" активируем в списке нашу новую тему, и в списке выбираем "Редактировать тему".
+**6**	В //<head></head>// нашего шаблона необходимо вставить тэг ''<?php get_header(); ?>'', он нужен для плагинов.
-====Редактирование====
-Каждый .php файл(допустим у вас используются инклюды) должен начинаться с ''<?php if(!defined('IN_GS')){ die('you cannot load this page directly.'); }?>''
-В тэг <title></title> вставляем тэги шаблона GetSimple: ''<?php get_page_clean_title(); ?> &lt; <?php get_site_name(); ?>'' Или ''<?php get_page_clean_title(); ?> &mdash; <?php get_site_name(); ?>''
+**7**	Добавляем путь к директории шаблона к динамичным ссылкам стилей, скриптов и картинок. Например
+''href=”**<?php get_theme_url(); ?>/**style.css”''
+==== BODY ====
+**8**	В тэг //<body>// добавляем ''<body **id=”<?php get_page_slug(); ?>”** >''
-**3**	В секцию <head></head> нашего шаблона необходимо вставить тэг ''<?php get_header(); ?>'', поскольку некоторые плагины не работают, если в шаблоне нет этого тэга.
+**9**	Добавляем путь к директории шаблона у всех картинок, например ''<img src="**<?php get_theme_url(); ?>/**img/image.png">''.
-**4**	Относительная ссылка на css-файл сейчас указывает в никуда, надо ее поправить и лучше сделать из нее абсолютную. Замените атрибут ''href=“style.css”'' на  ''href=”<?php get_theme_url(); ?>/style.css”''
+**10** Либо вот такая конструкция для вставки логотипа, со ссылкой на главную, и с названием сайта в 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>''
-Вы справились с секцией <head></head> шаблона, и теперь, когда вы правильно сослались на css-файл, наша страница в браузере выглядит значительно лучше.
+**11**	Тег для заголовка страницы: ''<?php get_page_title(); ?>''
+**12**	Тег для контента ''<?php get_page_content(); ?>''
-**5**	Иногда полезно снабдить тэг <body> шаблона вот таким кодом: ''<body id=”<?php get_page_slug(); ?>” >''  Теперь к каждой странице будущего сайта будет удобно применять свои стилевые правила.
+**13**	Тег для даты ''<?php setlocale(LC_TIME, 'ru_RU.UTF8', 'ru.UTF8', 'ru_RU.UTF-8', 'ru.UTF-8', 'ru_RU', 'ru'); echo strftime('%d %B, %Y'); ?>''.
-**6**	В шапке сайта необходимо поправить ссылки на графику. Добавляем к атрибуту src  тэг шаблона и правый слэш ''<?php get_theme_url(); ?>/'', убеждаемся, что теперь рисунок отображается на странице.
+**14**	Тег для сайдбара: ''<?php get_component('sidebar');?>''. А сам код сайдбара вставим в настроках темы в компонентах.
-**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>''
+**15**	Меню: ''<?php get_navigation(return_page_slug()); ?>''
-Можно просто заменить логотип текстом с именем сайта с помощью тэга ''<?php get_site_name(); ?>'' и применить к тексту свои стили шрифта, цвета и.т.д.
+==== FOOTER ====
+**16**	В копирайтах в подвале ставим имя сайта: ''<?php get_site_name(); ?>'', и год: ''<?php echo date('Y'); ?>''.
+**17**	Ссылка на сайт GetSimple: ''<?php get_site_credits(); ?>''
-**8**	Первый блок контента, озаглавленный 'About Beady Site' не является главной содержательной частью нашего сайта, поэтому сейчас пропустите его, мы вернемся к нему позже.
+**18**	Некоторым плагинам нужен такой тэг в подвале: ''<?php get_footer();?>''.
-**9**	Второй блок контента страницы (<div id=“left”>) будет нашим главным блоком, поэтому замените заголовок (Welcome to Beady Site) тэгом шаблона ''<?php get_page_title(); ?>''
-**10**	Все содержимое <div id=“left”> замените тэгом шаблона ''<?php get_page_content(); ?>''
-**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');?>''
-**13**	Следующий div – это левый сайдбар. Его id совпадает с именем компонента, но пусть это вас не смущает. Мы заменяем элементы списка меню на вызов тэга ''<?php get_navigation(return_page_slug()); ?>''
-**14**	Еще в одном рисунке поправляем атрибут src, добавляя к нему тэг щаблона и правый слэш: ''<?php get_theme_url(); ?>/''
-**15**	Далее в подвале  шаблона замените  'Your Site Name ' тэгом ''<?php get_site_name(); ?>'', а год копирайта, например, на ''<?php echo date('Y'); ?>'', и у вас на экране всегда будет отображаться текущий год.
-**16**	В качестве благодарности можно поставить ссылку на сайт GetSimple c помощью тэга ''<?php get_site_credits(); ?>
-''
-**17**	Добавляем еще один тэг: ''<?php get_footer();?>'', так как некоторые плагины не будут работать при отсутствии этого тэга в шаблоне.
-Итак  – формирование файла шаблона окончено. Вот и содержимое файла template.php, которое должно было у вас получиться:
-<code php>
-<?php if(!defined('IN_GS')){ die('you cannot load this page directly.'); }
-/****************************************************
-*
-* @File:         template.php
-* @Package:      GetSimple
-* @Action:       Beadysite theme for GetSimple CMS
-*
-*****************************************************/
-?></code>
-<code php><!DOCTYPE html>
-<html lang=en>
-</code>
-<code php><head>
-   <meta charset=UTF-8>
-   <title><?php get_page_clean_title(); ?> &mdash;  <?php get_site_name(); ?></title>
-   <?php get_header(); ?>
-   <link href="<?php get_theme_url(); ?>/style.css" rel="stylesheet" type="text/css" media="screen" />
-</head></code>
-<code php><body id="<?php get_page_slug(); ?>" ></code>
-<code><div id="page"></code>
-<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>
-				<br />
- <img src="<?php get_theme_url(); ?>/images/bg_banner_grey.gif" width="980" height="5" alt="logo_banner" />
-			</header></code>
-<code php><div id="content"></code>
-<code php><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.</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></code>
-<code php><div id="left">
-					<h2><?php get_page_title(); ?></h2>
-					<?php get_page_content(); ?>
-				</div></code>
-<code php><div id="right">
-					<?php get_component('sidebar');?>
-				</div></code>
-<code php></div> <!-- end-of-"content" --></code>
-<code php><div id="sidebar">
-<ul>
-	<li>
-	    <h2>Menu </h2>
-	    <ul><?php get_navigation(return_page_slug()); ?></ul>
-	</li>
-</ul>
-	<br />
-	<p>
-   <a href="http://validator.w3.org/check?uri=referer"><img src="images/HTML5_Logo.png" alt="Valid HTML5" />  </a>
-	</p>
-	<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>
-	</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>
-	</p>
-</div></code>
-<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" /></code>
-<code php><footer>
-   <?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 get_footer(); ?>
-</footer></code>
-<code></div> <!-- end-of-"page" --></code>
-<code></body>
-</html>
-</code>
 ====Контент====
+**19** Заполняем данные в настройках сайта. Редактируем заголовок главной страницы и наполняем контент.
-Теперь вы можете войти в административную панель, ввести один раз **Название сайта** и **Основной URL сайта** в **Настройках**. Затем на вкладке **Страницы** отредактируйте заголовок главной страницы и скопируйте в поле WYSIWYG-редактора главный контент страницы, который будет отдаваться системой тэгом шаблона <?php get_page_content(); ?>.
+**20** Любые части страницы шаблона делаются через компоненты. В админке в меню **Темы** раздел **Компоненты**. В шаблоне вставляем компонент тегом: ''<?php get_component('Имя_компонента');?>''.
-Вспомним, что у нас был еще один блок контента по имени 'About Beady Site'. Допустим, его содержимое надо сделать доступным для редактирования. Для этого на вкладке Тема кликните пункт бокового меню Редактировать компоненты. Здесь можно создать новый компонент и разместить в него необходимый HTML-код с содержимым, например, контент блока 'About Beady Site', которое мы хотим включить в файл ''template.php''. Вызов компонента осуществляется в файле шаблона тэгом <?php get_component('Имя_нового_компонента');?> Теперь, если возникает необходимость изменить текст компонента, мы его просто редактируем, не трогая файл шаблона.
-Если вам по какой-то причине не хочется возиться с HTML-разметкой в теле компонента, вы можете создать новую страницу на вкладке **Страницы**, присвоить ей постоянную ссылку (slug) и разместить требуемый контент в поле WYSIWYG-редактора. Затем в файле шаблона на месте, где должен появляться ваш контент, разместите тэг <?php getPageContent('slug'); ?>, где 'slug' – **Постоянная ссылка** на вашу новую страницу.
+**21** Можно инклюдить созданную страницу в шаблоне тегом ''<?php getPageContent('slug'); ?>'', где 'slug' это **Постоянная ссылка** на вашу новую страницу(берется в опциях страницы).
 ====Окончательная отделка====
+**22** Чтобы в WYSIWYG-редакторе использовались стили шаблона, копируем файл стиля в корень с именем ''editor.css''.
-Все файлы темы размещаются в папке с соответствующим именем. В качестве наименования темы в административной панели берется имя папки темы. Файл ''template.php'' и другие файлы шаблонов не должны располагаться в подпапках. В папке темы должна быть подпапка //images//, в этой же папке следует размещать файл ''screenshot.png'', который представляет собой скриншот вашей темы, который будет выводиться на экран в административной панели на вкладке **Темы**. Рисунок не должен быть большим, 240*240px вполне достаточно.
+**23** Чтобы создать шаблон для внутренних страниц сайта, копируем файл шаблона под другим именем, и применяем этот стиль у всех страниц, кроме //Заглавной//.
-WYSIWYG- редактор  будет намного точнее отображать содержимое страницы, если в папке темы разместить файл  ''editor.css'', в который включить основные стилевые правила темы.
 ====== Ссылки ======
@@ Line 167: / Line 62: @@
   *[[ru:components-depending-on-the_page|Вывод компонентов в зависимости от страницы]]
   *[[ru:SEO for GetSimple|Оптимизация сайта на GetSimple для поисковых систем (SEO)]]
+  *[[ru:themes:tutorial|Урок по созданию темы]]

GetSimple CMS Wiki

User Tools

Site Tools

Differences

Page Tools