В этом уроке мы установим свой шаблон на наш движок. Рассмотрим все на примере.
Сначала нам нужно скачать шаблон. Для примера я выбрал шаблон Simple-Personal, скачанный отсюда. Вы можете использовать свой шаблон, но в этом случае часть кода, представленная ниже и в следующих разделах документации у Вас будет отличаться.
Распакуйте его в какое либо "укромное" место.
Теперь смело удалите папки img и js из корня сайта и скопируйте в корень папки css и img из нашего нового шаблона.
Далее найдем файл application/modules/default/views/scripts/layout.phtml и все, что в нем есть заменим на содержимое index.html нашего нового шаблона.
Обновим страницу нашего сайта и вуаля! Видим наш новый шаблон.
Но пока радоваться рано. Нам нужно в шаблоне изменить некоторые вещи, чтобы мы смогли отобразить там что-нибудь кроме имеющегося в нем контента.
Начнем с заголовка в теге <head>. Сейчас он выглядит так:
Copy Source | Copy HTML
- <!-- This template was created by Mantis-a [http://www.mantisa.cz/]. For more templates visit Free website templates [http://www.mantisatemplates.com/]. -->
- <meta name="Description" content="..." />
- <meta name="Keywords" content="..." />
- <meta name="robots" content="all,follow" />
- <meta name="author" content="..." />
- <meta name="copyright" content="Mantis-a [http://www.mantisa.cz/]" />
- <meta http-equiv="Content-Script-Type" content="text/javascript" />
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <!-- CSS -->
- <link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection, tv" />
- <link rel="stylesheet" href="css/style-print.css" type="text/css" media="print" />
- <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
- <title>My personal website | Homepage</title>
Заменим сесь этот текст на следующий:
Copy Source | Copy HTML
- <?=$this->headTitle(Z_Seo::getTitle())?>
- <?=$this->headMeta()->appendHttpEquiv('Content-Type','text/html; charset=UTF-8')
- ->appendName('keywords', Z_Seo::getKeywords())
- ->appendName('description', Z_Seo::getDescription());?>
- <?=$this->headLink()
- ->headLink(array('rel' => 'shortcut icon', 'href' => '/favicon.ico'))
- ->appendStylesheet( '/css/style.css' )?>
- <?=$this->headScript()
- ->appendFile('/js/jquery.js')
- ->appendFile('/js/main.js')?>
Далее заменим самую первую строчку (doctype) на такую: <?=$this->docType()?>
Теперь найдем тег <div class="box-in"> и все его содержимое заменим на строчку: <?php echo $this->layout()->content?>
Это позволит в контентной части сайта отображать нам нужную информацию.
Далее нам в шаблоне следует найти такую строку:
Copy Source | Copy HTML
- <div class="footer-info-left"><a href="/">My personal website</a>, 2008. All rights reserved.</div>
Заменим её на следующую строчку:
Copy Source | Copy HTML
- <div class="footer-info-left"><?php echo $this->z_Config('copy')?></div>
Это позволит нам редактировать копирайты на сайте через раздел "Настройки"
Теперь нам нужно позаботиться о выводе пунктов меню.
Для этого найдем в нашем шаблоне следующий код
Copy Source | Copy HTML
- <ul class="menu">
- <li><a href="/" class="active">Home</a></li>
- <li><a href="#">About me</a></li>
- <li><a href="#">Portfolio</a></li>
- <li class="last"><a href="#">Contact</a></li>
- </ul>
И заменим его на такой:
Copy Source | Copy HTML
- <?php echo $this->menu()?>
Теперь немножко подправим файл application/modules/default/views/scripts/menu.phtml, чтобы он выглядел следующим образом:
Copy Source | Copy HTML
- <ul class="menu">
- <?php foreach ($this->items as $key=>$item):?>
- <li <?php echo $key==count($this->items)-1?'class="last"':''?> ><a <?php echo $item->id==$this->activeId?'class="active"':''?> href="<?php echo $item->url?>"><?php echo $item->title?></a></li>
- <?php endforeach;?>
- </ul>
И на этом все. Мы заменили стандартный шаблон на свой. Добавили в новый шаблон код, который отображает заголовки, код для отображения контентной части сайта и код для вывода меню сайта.
В следующих уроках мы создадим несколько разделов для нашего сайта.