This is an old revision of the document!
Table of Contents
Урок по созданию темы
Сайт на 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.htm
<!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Beadysite - Free HTML5 Template</title> <link href="style.css" rel="stylesheet" type="text/css" media="screen" /> </head> <body> <div id="page"> <header> <img src="images/logo.png" width="303" height="82" alt="logo" /> <br /> <img src="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.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 /> </div> <div id="left"> <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> <img src="images/cock.jpg" title="cock" alt="cock" /> <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> </div> <div id="right"> <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>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 id="sidebar"> <ul> <li> <h2>Menu </h2> <ul> <li><a href="index.html">home</a></li> <li><a href="#">about us</a></li> <li><a href="#">blogs</a></li> <li><a href="#">arcade</a></li> <li><a href="#">gallery</a></li> <li><a href="#">links</a></li> <li><a href="#">contact us</a></li> <li><a href="#">forums</a></li> </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="images/bg_banner_grey.gif" width="980" height="5" alt="logo_banner" /> <footer> Your Site Name © 2011 | Design by <a href="http://www.html5-templates.co.uk" target="_blank">HTML5 Templates</a> </footer> </div> </body> </html>
Редактирование
From the top, these are the changes I make:
1 The file needs to start with:
<?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
<?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(); ?>
3 <?php get_header(); ?> is required in the head section by some plugins
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”
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.
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.
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:
<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.
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(); ?>
10 All the remaining content to the end of the div I replace with <?php get_page_content(); ?>
11 If we want we can put in the 'published on' date statement but I am going to leave it out
12 The next div (id=“right”) is the right hand sidebar so all the content is replaced with
<?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()); ?>
14 Another link to an image needs mending with <?php get_theme_url(); ?>/
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.
16 We ought to Link to GS with <?php get_site_credits(); ?>
17 Some plugins require <?php get_footer(); ?>
That's it for a basic page. This is my new file 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.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 />
</div>
<div id="left">
<h2><?php get_page_title(); ?></h2>
<?php get_page_content(); ?>
</div>
<div id="right">
<?php get_component('sidebar');?>
</div>
</div>
<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>
</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, в который включить основные стилевые правила темы.
