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>
Контент
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.
There was a secondary content block on the page, headed 'About Beady Site' which I also want to make editable. To do this I go to Theme and Edit Components in the back end. Here 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.
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.
Окончательная отделка
Все файлы темы размещаются в папке с соответствующим именем. В качестве наименования темы в административной панели берется имя папки темы. Файл template.php и другие файлы шаблонов не должны располагаться в подпапках. В папке темы должна быть подпапка images, в этой же папке следует размещать файл screenshot.png, который представляет собой скриншот вашей темы, который будет выводиться на экран в административной панели на вкладке Темы. Рисунок не должен быть большим, 240*240px вполне достаточно.
WYSIWYG- редактор будет намного точнее отображать содержимое страницы, если в папке темы разместить файл editor.css, в который включить основные стилевые правила темы.
