Сайт на 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
<!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>
Все изменения, с начала файла новой темы template.php, которые необходимо сделать:
1 Файл шаблона должен всегда начинаться со следующей инструкции: <?php if(!defined('IN_GS')){ die('you cannot load this page directly.'); }?> Можно включить в файл закоментированные заметки, как это сделать – посмотрите код ниже. Проверьте, закрыта ли инструкция PHP закрывающим тэгом ?>.
2 В тэг <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="<?php get_theme_url(); ?>/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, в который включить основные стилевые правила темы.
На главную Содержание