07-12-2019 17:45:00 Comments ollserg & MaxWeb for you

GetSimple CMS Советы по разработке темы

Создание темы
Существует пошаговое руководство по преобразованию статической HTML-страницы в шаблон php для темы GetSimple.

Если вы создаете сайт с нуля, конвертируете существующий сайт в GetSimple или у вас есть веб-страница, которую вы хотите использовать в качестве шаблона, вам нужно создать тему GetSimple, которая будет определять html и css ваших веб-страниц. Точно так же, как один HTML-файл может определять веб-страницу, существует только один действительно необходимый файл темы - это template.php template.php определяет HTML-код макета страницы по умолчанию для вашего сайта, но вы можете создавать другие шаблоны страниц и настраивать определенные страницы для использования альтернативного шаблона, выбрав его в Параметры страницы → Шаблон :

Содержимое вставляется в шаблон страницы с помощью тегов шаблона, аналогичных WordPress. Затем вы помещаете этот файл в его собственную папку с уникальным именем и устанавливаете его на свой сервер. Все страницы шаблона имеют расширение PHP.

Анатомия Темы
Шаблон страницы по умолчанию с именем template.php находится в папке, названной специально для вашей темы, и помещается в папку темы вашей установки GetSimple, например: /path/to/getsimple/theme/my_theme/template.php Вы можете переименовать тему. переименовав папку, в которой он находится. Если вы просто хотите добавить другой шаблон как часть существующей темы, вы можете поместить его в каталог этой темы с любым именем, отличным от functions.php и *.inc.php и он отобразится в поле выбора вышеупомянутой формы.

Другие файлы, найденные в папке темы:

Обычно это внешняя таблица стилей, указанная в html файла шаблона страницы.
Альтернативные, дополнительные шаблоны для других страниц, таких как homepage.php или contact.php . Они будут доступны для выбора в Параметры страницы .
Файл с именем editor.css в папке темы позволит CKeditor более точно отображать содержимое страницы.
Любые изображения, используемые в теме, а также значки и фоны.
Изображение скриншота вашей темы, сохраненное в папке изображений в виде /path/to/getsimple/theme/your-theme/images/screenshot.png будет отображаться на странице выбора темы на страницах администратора. (Обязательно назовите его точно так, иначе наша система не подберет его. Строчные И в папке / images / И по имени screenshot.png)
Файл functions.php содержит любые пользовательские функции, которые используются в вашей теме.
Иногда файлы шаблона разделяются на части и сохраняются как частичные файлы шаблона с именами, такими как header.inc.php
Иногда javascript и другие файлы включены в тему.

Советы по разработке темы

Запустите любой PHP-файл в вашей теме с помощью
<?php if(!defined('IN_GS')){ die('you cannot load this page directly.'); } ?>
Это остановит любой нежелательный прямой доступ к этому конкретному файлу.
Большинство тем идентифицируют тело html, написав открывающий тег
<body id=“<?php get_page_slug(); ?>” > <body id=“<?php get_page_slug(); ?>” >
Это позволяет легко изменить стиль одной страницы.
Многие плагины требуют
<?php get_header(); ?> <?php get_header(); ?> между тегами <head> и <?php get_footer(); ?> <?php get_footer(); ?> где-то перед закрывающим </body> .
URL-адреса в файлах шаблонов php должны быть записаны как абсолютные ссылки, не относительные, в форме http: // www … или с путем, называемым <? php get_site_url (); ?> или <? php get_theme_url (); ?> чтобы они всегда были правильными, даже если сайт перемещен.

Как преобразовать статическую страницу в сайт GetSimple
Это может быть сайт, который вы сделали ранее, это может быть страница или шаблон, который вы хотите превратить в тему GS - процедура такая же. В этом случае я собираюсь использовать бесплатный шаблон страницы Beadysite от: http://www.html5-templates.co.uk/beadysite/

Никаких знаний по PHP не требуется, вы можете просто скопировать и вставить теги php, которые в основном не требуют пояснений. Лучше всего скопировать их из шаблона в примере темы, если в этом вики-тексте есть ошибки.

Начало настройки
Я устанавливаю копию GetSimple в новую папку под XAMPP и загружаю и распаковываю файлы Beady. Это страница, папка css и изображения, уже правильно расположенные для темы GS, поэтому я поместил всю папку Beadysite в папку темы моего нового локального сайта GS вместе с Cardinal и Innovation. Внутри папки я копирую файл index.html и переименовываю его в template.php . Теперь я могу активировать beadysite в качестве темы на моем новом сайте GS и тестировать изменения, которые я вношу в файл по мере продвижения разработки . Все ссылки на изображения и CSS не работают, но мы скоро это исправим. Я открываю файл template.php из папки beadysite в моем текстовом редакторе и открываю рядом с ним файл 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>Lorem ipsum — классический текст-«рыба» (условный, зачастую бессмысленный текст-заполнитель, вставляемый в макет страницы). </p>
		<p>Является искажённым отрывком из философского трактата Марка Туллия Цицерона «О пределах добра и зла», написанного в 45 году до н. э. на латинском языке, обнаружение сходства атрибутируется Ричарду МакКлинтоку.</p>
	    <hr />
	    </div>
	    <div id="left">
		<h2>Welcome to Beady Site</h2>
		<p>Распространился в 1970-х годах из-за трафаретов компании Letraset, a затем — из-за того, что служил семплом в программе PageMaker.</p>
		<img src="images/cock.jpg" title="cock" alt="cock" />
		<br />
		<p>Испорченный текст, вероятно, происходит от его издания в Loeb Classical Library 1914 года, в котором слово dolorem разбито переносом так, что страница 36 начинается с lorem ipsum… (do- осталось на предыдущей).</p>
	    </div>
	    <div id="right">
		<h2>Latest news</h2>
		<p> Это бесплатный веб-шаблон html5, его очень легко редактировать и перепроектировать так, как вам удобно. PSD для изображения логотипа находится в разделе "images / psd" каталог этого шаблона. </ 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;">&nbsp;</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>

Редактирование

Сверху, это изменения, которые я делаю:

Начало
1- Файл должен начинаться с: <?php if(!defined('IN_GS')){ die('you cannot load this page directly.'); }?>
При желании я добавляю комментарии с описаниями, но убедитесь, что тег php закрыт - ?>

<? php if (!defined('IN_GS')){ die( 'вы не можете загрузить эту страницу напрямую.');}
/ ************************************************* ***
*
* @File: template.php
* @Package: GetSimple
* @Action: тема Beadysite для GetSimple CMS
*
************************************************** *** /
?>
<! DOCTYPE html>

<html lang = en>

head
2 Между тегами заголовков <?php get_page_clean_title(); ?> < <?php get_site_name(); ?> теги php <?php get_page_clean_title(); ?> < <?php get_site_name(); ?> <?php get_page_clean_title(); ?> < <?php get_site_name(); ?>

Мне не очень нравится символ «меньше чем», поэтому я собираюсь заменить его длинным тире: <?php get_page_clean_title(); ?> — <?php get_site_name(); ?> <?php get_page_clean_title(); ?> — <?php get_site_name(); ?>

3 <?php get_header(); ?> <?php get_header(); ?> требуется в разделе head некоторыми плагинами. Это не будет иметь никакого видимого эффекта.

4 Относительная ссылка на CSS нарушена, поэтому я делаю ее абсолютной ссылкой, заменив href=“style.css” на href=“<?php get_theme_url(); ?>/style.css” href=“<?php get_theme_url(); ?>/style.css”

Это главный раздел, и теперь, когда ссылка на css исправлена, я могу немного больше удовольствия посмотреть на мою новую страницу GS в своем браузере.

<head>
   <meta charset=UTF-8>
   <title><?php get_page_clean_title(); ?> &mdash;  <?php get_site_name(); ?></title>
   <?php get_header(); ?>
   <link href="<?php get_theme_url(); ?>/style.css" rel="stylesheet" type="text/css" media="screen" />
</head>

5 Необязательно, но удобно идентифицировать тело страницы с помощью <body id=“<?php get_page_slug(); ?>” > <body id=“<?php get_page_slug(); ?>” > Это позволяет легко изменить стиль одной страницы. Термин слизняк объясняется здесь .

<body id = " <? php get_page_slug ( ) ; ?> ">
<div id = "page">

header
6 В шапке я исправляю ссылки на изображения, добавляя <?php get_theme_url(); ?>/ <?php get_theme_url(); ?>/ и убедитесь, что они теперь отображаются на моей странице.

7 Это первое изображение - логотип сайта. Я хочу, чтобы логотип на каждой странице моего сайта представлял собой ссылку на домашнюю страницу, и я хочу, чтобы имя сайта отображалось как альтернативный текст, поэтому вся строка записывается так:
<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> <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(); ?> <?php get_site_name(); ?>
и стилизация с помощью шрифта и цвета, но мы сделаем это в другой день.

<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>

content
8 Первый блок контента, озаглавленный «О сайте Beady», не является основным контентом, поэтому я собираюсь оставить все как есть и вернуться к нему.

9 Второй блок контента (

) должен быть моим основным, поэтому я заменяю заголовок (Добро пожаловать на сайт Beady) на <?php get_page_title(); ?> <?php get_page_title(); ?>

10 Весь оставшийся контент до конца div я заменяю на <?php get_page_content(); ?> <?php get_page_content(); ?>

11 Если мы хотим, мы можем указать дату публикации, но я ее опущу.

< div id = "content" >
< div class = "post" >
< h2 > О сайте Beady </ h2 >
< p >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </ p >
< p > Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</ p >
< hr />
</ div >
<div id = "left">
<h2> <? php get_page_title ( ) ; ?> </ h2>
<? php get_page_content ( ) ; ?>
</ div>
12 Следующий div (id = «right») - это правая боковая панель, поэтому весь контент заменяется на <?php get_component('sidebar');?>

<div id = "right">
<? php get_component ( ' sidebar ' ) ; ?>
</ div>
</ div > <! - end - of - "content" ->

nav menu
13 Следующий div - это левая боковая панель, которая называется «боковая панель» и в ней есть меню навигации. Все, что нам нужно сделать, это заменить элементы списка в меню навигации на <?php get_navigation(return_page_slug()); ?> <?php get_navigation(return_page_slug()); ?> . Автор Beadysite вложил навигационные ссылки как <ul> в <ul> для целей выбора, но это не должно нас смущать.

14 Еще одна ссылка на изображение нуждается в исправлении с помощью <?php get_theme_url(); ?>/ <?php get_theme_url(); ?>/

<div id = "sidebar">
<ul>
<li>
<h2> Меню </ 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; ширина: 88px; высота: 31px" src = "http: // jigsaw. w3.org/css-validator/images/vcss-blue "alt =" Действительный CSS! " /> </a>
</ p>
<br />
<p>
<a href="http://creativecommons.org/licenses/by/3.0/">
<img style = "border: 0; ширина: 88px; высота: 31px" src = "http://i.creativecommons.org /l/by/3.0/88x31.png "alt =" Лицензия Creative Commons Attribution 3.0 Unported! " />
</a>
</ p>
</ div>
<div style = "clear: both;"> & nbsp; </ div>
<img src = " <? php get_theme_url ( ) ; ?> /images/bg_banner_grey.gif" width = "980" height = "5" alt = "logo_banner" />

footer
15 В нижнем колонтитуле теперь имя вашего сайта заменено на <?php get_site_name(); ?> <?php get_site_name(); ?> и год авторского права может быть <?php echo date('Y'); ?> <?php echo date('Y'); ?> так что это всегда будет показывать текущий год.

16 Мы должны <?php get_site_credits(); ?> с GS с помощью <?php get_site_credits(); ?> <?php get_site_credits(); ?>

17 Некоторые плагины требуют <?php get_footer(); ?> <?php get_footer(); ?> . Это для сценариев, ничего общего с нижним колонтитулом страницы, и это не будет иметь никакого видимого эффекта. Мы поместим его перед закрывающим тегом </ body>.

Вот и все для основной страницы

<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(); ?>
</footer>
</div> 
<?php get_footer(); ?>
</body>
</html>

Это мой новый файл 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(); ?> &mdash;  <?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;">&nbsp;</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(); ?>
</footer>
 
</div> <!-- end-of-"page" -->
<?php get_footer(); ?>
</body>
</html>

Content

Теперь, когда я вхожу в администратор, я могу ввести имя сайта и базовый URL только один раз и вернуть содержимое главной страницы и заголовки страниц обратно через серверную часть GS.

На странице был вторичный блок контента, озаглавленный «О сайте Beady», который я также хочу сделать редактируемым. Чтобы сделать это, я иду в тему и редактировать компоненты в конце. Здесь я могу создать компонент и записать (в html) любой контент, который я хочу включить, и в свой файл template.php, который я вставляю в тег get_component.

Если я не хочу вводить содержимое с помощью HTML-тегов, я могу создать страницу на вкладке Страницы и вставить содержимое страницы в свой шаблон с помощью <? Php getPageContent ('slug'); ?> где 'slug' - это имя файла для данных страницы, отображаемых в Pages - Edit Page - Параметры страницы.

Последние штрихи
Все файлы темы находятся в папке, и имя папки определяет имя темы, как показано в бэкэнде GS. template.php и любые другие шаблоны страниц должны находиться в папке темы, а не в подпапке. Там должна быть подпапка с названием images и в этой папке файл с именем screenshot.png который будет снимком экрана, отображаемым в бэкэнде при выборе тем. Это не должно быть слишком большим; Максимальная ширина - 648 пикселей.

Wysiwyg редактор GetSimple будет отображать содержимое страницы гораздо точнее, если вы поместите в папку темы файл с именем editor.css который включает в себя основные стили для темы.

Для чего подходит
Корпоративный сайт
Промо-сайт
Интернет-магазин
Блог