======Урок по созданию темы======
**Сайт на GetSimple из статического сайта**
Будь это ваш сайт, который вы когда-то делали, или страница или шаблон, которые нужно превратить в тему GetSimple – технология ничем не отличается. Для этого урока за основу взят бесплатный HTML-шаблон Beadysite: http://www.html5-templates.co.uk/beadysite/.
====Подготовительные работы====
Для учебных целей можно выполнить новую установку GetSimple на локальном сервере. После установки системы скачайте и разархивируйте файлы шаблона beadysite. Все файлы beadysite расположены именно так, как это требуется для тем GetSimple, поэтому можно сразу скопировать разархивированную папку со всем содержимым в папку theme к темам по умолчанию Cardinal and Innovation. В папке beadysite создайте копию файла index.html и переименуйте ее в template.php.
Теперь вы можете активировать тему beadysite в панели управления на вашем новом GS-сайте и видеть все происходящие изменения по мере продвижения вперед. Сейчас все ссылки на графику и стили битые, но вскоре вы это исправите. Откройте файл template.php вашей новой темы в своем любимом текстовом редакторе, в другом окне откройте файл template.php из темы Cardinal, чтобы вам было удобно копировать и вставлять тэги из одного шаблона в другой.
Вот так выглядит наш статический файл index.html
Beadysite - Free HTML5 Template
About Beady Site
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.
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.
Welcome to Beady Site
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.
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.
Latest news
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.
If you're having problems editing the template
you can find help on my website via the forums.
====Редактирование====
Все изменения, с начала файла новой темы template.php, которые необходимо сделать:
**1** **Файл шаблона должен всегда начинаться со следующей инструкции:** '''' Можно включить в файл закоментированные заметки, как это сделать – посмотрите код ниже. Проверьте, закрыта ли инструкция PHP закрывающим тэгом ''?>''.
**2** В тэг вставляем тэги шаблона GetSimple: '' < ''
Для тех, кто не любит символ «больше», можно заменить его, например, на длинное тире: '' — ''
**3** В секцию нашего шаблона необходимо вставить тэг '''', поскольку некоторые плагины не работают, если в шаблоне нет этого тэга.
**4** Относительная ссылка на css-файл сейчас указывает в никуда, надо ее поправить и лучше сделать из нее абсолютную. Замените атрибут ''href=“style.css”'' на ''href=”/style.css”''
Вы справились с секцией шаблона, и теперь, когда вы правильно сослались на css-файл, наша страница в браузере выглядит значительно лучше.
**5** Иногда полезно снабдить тэг шаблона вот таким кодом: ''” >'' Теперь к каждой странице будущего сайта будет удобно применять свои стилевые правила.
**6** В шапке сайта необходимо поправить ссылки на графику. Добавляем к атрибуту src тэг шаблона и правый слэш ''/'', убеждаемся, что теперь рисунок отображается на странице.
**7** Теперь займемся логотипом сайта. Предположим, нам необходимо, чтобы логотип сайта на каждой станице был еще и ссылкой на главную страницу сайта. Кроме того, давайте запишем наименование нашего сайта в атрибут alt рисунка логотипа. Достигается это с помощью следующего кода: ''”>/images/logo.png” width=“303” height=“82” alt=”” />''
Можно просто заменить логотип текстом с именем сайта с помощью тэга '''' и применить к тексту свои стили шрифта, цвета и.т.д.
**8** Первый блок контента, озаглавленный 'About Beady Site' не является главной содержательной частью нашего сайта, поэтому сейчас пропустите его, мы вернемся к нему позже.
**9** Второй блок контента страницы (
) будет нашим главным блоком, поэтому замените заголовок (Welcome to Beady Site) тэгом шаблона ''''
**10** Все содержимое
замените тэгом шаблона ''''
**11** При желании после тэга можно добавить дату публикации, так выглядит код для публикации даты на русском языке ''''.
**12** Следующий div (id=“right”) будет у нас правым сайдбаром, поэтому все его содержимое замените на следующий тэг: ''''
**13** Следующий div – это левый сайдбар. Его id совпадает с именем компонента, но пусть это вас не смущает. Мы заменяем элементы списка меню на вызов тэга ''''
**14** Еще в одном рисунке поправляем атрибут src, добавляя к нему тэг щаблона и правый слэш: ''/''
**15** Далее в подвале шаблона замените 'Your Site Name ' тэгом '''', а год копирайта, например, на '''', и у вас на экране всегда будет отображаться текущий год.
**16** В качестве благодарности можно поставить ссылку на сайт GetSimple c помощью тэга ''
''
**17** Добавляем еще один тэг: '''', так как некоторые плагины не будут работать при отсутствии этого тэга в шаблоне.
Итак – формирование файла шаблона окончено. Вот и содержимое файла template.php, которое должно было у вас получиться:
<?php get_page_clean_title(); ?> — <?php get_site_name(); ?>
About Beady Site
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.
Menu
====Контент====
Теперь вы можете войти в административную панель, ввести один раз **Название сайта** и **Основной URL сайта** в **Настройках**. Затем на вкладке **Страницы** отредактируйте заголовок главной страницы и скопируйте в поле WYSIWYG-редактора главный контент страницы, который будет отдаваться системой тэгом шаблона .
Вспомним, что у нас был еще один блок контента по имени 'About Beady Site'. Допустим, его содержимое надо сделать доступным для редактирования. Для этого на вкладке Тема кликните пункт бокового меню Редактировать компоненты. Здесь можно создать новый компонент и разместить в него необходимый HTML-код с содержимым, например, контент блока 'About Beady Site', которое мы хотим включить в файл ''template.php''. Вызов компонента осуществляется в файле шаблона тэгом Теперь, если возникает необходимость изменить текст компонента, мы его просто редактируем, не трогая файл шаблона.
Если вам по какой-то причине не хочется возиться с HTML-разметкой в теле компонента, вы можете создать новую страницу на вкладке **Страницы**, присвоить ей постоянную ссылку (slug) и разместить требуемый контент в поле WYSIWYG-редактора. Затем в файле шаблона на месте, где должен появляться ваш контент, разместите тэг , где 'slug' – **Постоянная ссылка** на вашу новую страницу.
====Окончательная отделка====
Все файлы темы размещаются в папке с соответствующим именем. В качестве наименования темы в административной панели берется имя папки темы. Файл ''template.php'' и другие файлы шаблонов не должны располагаться в подпапках. В папке темы должна быть подпапка //images//, в этой же папке следует размещать файл ''screenshot.png'', который представляет собой скриншот вашей темы, который будет выводиться на экран в административной панели на вкладке **Темы**. Рисунок не должен быть большим, 240*240px вполне достаточно.
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|Лаконичное пошаговое описание создания темы]]
; ?>/images/logo.png){kind=logo}
; ?>/images/bg_banner_grey.gif){kind=small}
; ?>/images/HTML5_Logo.png){kind=logo}