This is an old revision of the document!
Table of Contents
Эта статья описывает пошаговый план по созданию темы. Предназначена для опытных пользователей. Если что-то не понятно - обратитесь к статье Урок по созданию темы По умолчанию считаем что страница валидная, и сделана по стандартам. В нашей задаче мы лишь добавим необходимое для GetSimple.
Подготовительные работы
1 Готовим нужную html страницу шаблона.
2 В директории theme в корне сайта создаем новую директорию для темы, и заливаем туда подготовленные файлы.
3 Основной файл шаблона(index) называем template.php
4 В панели управления сайта в меню “тема” активируем в списке новую тему, и в списке выбираем “Редактировать тему”.
Редактирование
5 Каждый .php файл(допустим у вас используются инклюды) должен начинаться с <?php if(!defined('IN_GS')){ die('you cannot load this page directly.'); }?>
6 В тэг <title></title> вставляем тэги шаблона GetSimple: <?php get_page_clean_title(); ?> < <?php get_site_name(); ?> Или <?php get_page_clean_title(); ?> — <?php get_site_name(); ?>
3 В секцию <head></head> нашего шаблона необходимо вставить тэг <?php get_header(); ?>, поскольку некоторые плагины не работают, если в шаблоне нет этого тэга.
4 Относительная ссылка на css-файл сейчас указывает в никуда, надо ее поправить и лучше сделать из нее абсолютную. Замените атрибут href=“style.css” на href=”<?php get_theme_url(); ?>/style.css”
Вы справились с секцией <head></head> шаблона, и теперь, когда вы правильно сослались на css-файл, наша страница в браузере выглядит значительно лучше.
5 Иногда полезно снабдить тэг <body> шаблона вот таким кодом: <body id=”<?php get_page_slug(); ?>” > Теперь к каждой странице будущего сайта будет удобно применять свои стилевые правила.
6 В шапке сайта необходимо поправить ссылки на графику. Добавляем к атрибуту src тэг шаблона и правый слэш <?php get_theme_url(); ?>/, убеждаемся, что теперь рисунок отображается на странице.
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 Первый блок контента, озаглавленный 'About Beady Site' не является главной содержательной частью нашего сайта, поэтому сейчас пропустите его, мы вернемся к нему позже.
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, которое должно было у вас получиться:
<?php if(!defined('IN_GS')){ die('you cannot load this page directly.'); } /**************************************************** * * @File: template.php * @Package: GetSimple * @Action: Beadysite theme for GetSimple CMS * *****************************************************/ ?>
<!DOCTYPE html> <html lang=en>
<head> <meta charset=UTF-8> <title><?php get_page_clean_title(); ?> — <?php get_site_name(); ?></title> <?php get_header(); ?> <link href="<?php get_theme_url(); ?>/style.css" rel="stylesheet" type="text/css" media="screen" /> </head>
<body id="<?php get_page_slug(); ?>" >
<div id="page">
<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>
<div id="content">
<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>
<div id="left"> <h2><?php get_page_title(); ?></h2> <?php get_page_content(); ?> </div>
<div id="right"> <?php get_component('sidebar');?> </div>
</div> <!-- end-of-"content" -->
<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>
<div style="clear: both;"> </div> <img src="<?php get_theme_url(); ?>/images/bg_banner_grey.gif" width="980" height="5" alt="logo_banner" />
<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>
</div> <!-- end-of-"page" -->
</body> </html>
Контент
Теперь вы можете войти в административную панель, ввести один раз Название сайта и Основной URL сайта в Настройках. Затем на вкладке Страницы отредактируйте заголовок главной страницы и скопируйте в поле WYSIWYG-редактора главный контент страницы, который будет отдаваться системой тэгом шаблона <?php get_page_content(); ?>.
Вспомним, что у нас был еще один блок контента по имени 'About Beady Site'. Допустим, его содержимое надо сделать доступным для редактирования. Для этого на вкладке Тема кликните пункт бокового меню Редактировать компоненты. Здесь можно создать новый компонент и разместить в него необходимый HTML-код с содержимым, например, контент блока 'About Beady Site', которое мы хотим включить в файл template.php. Вызов компонента осуществляется в файле шаблона тэгом <?php get_component('Имя_нового_компонента');?> Теперь, если возникает необходимость изменить текст компонента, мы его просто редактируем, не трогая файл шаблона.
Если вам по какой-то причине не хочется возиться с HTML-разметкой в теле компонента, вы можете создать новую страницу на вкладке Страницы, присвоить ей постоянную ссылку (slug) и разместить требуемый контент в поле WYSIWYG-редактора. Затем в файле шаблона на месте, где должен появляться ваш контент, разместите тэг <?php getPageContent('slug'); ?>, где 'slug' – Постоянная ссылка на вашу новую страницу.
Окончательная отделка
Все файлы темы размещаются в папке с соответствующим именем. В качестве наименования темы в административной панели берется имя папки темы. Файл template.php и другие файлы шаблонов не должны располагаться в подпапках. В папке темы должна быть подпапка images, в этой же папке следует размещать файл screenshot.png, который представляет собой скриншот вашей темы, который будет выводиться на экран в административной панели на вкладке Темы. Рисунок не должен быть большим, 240*240px вполне достаточно.
WYSIWYG- редактор будет намного точнее отображать содержимое страницы, если в папке темы разместить файл editor.css, в который включить основные стилевые правила темы.
Ссылки
На главную Содержание
Страницы этой секции
Руководства, Советы
