Установка шаблона

Подготовка
Документация ZCMF
Пример

В этом уроке мы установим свой шаблон на наш движок. Рассмотрим все на примере.

Сначала нам нужно скачать шаблон. Для примера я выбрал шаблон Simple-Personal, скачанный отсюда. Вы можете использовать свой шаблон, но в этом случае часть кода, представленная ниже и в следующих разделах документации у Вас будет отличаться.

Распакуйте его в какое либо "укромное" место.

Теперь смело удалите папки img и js из корня сайта и скопируйте в корень папки css и img из нашего нового шаблона.

Далее найдем файл application/modules/default/views/scripts/layout.phtml и все, что в нем есть заменим на содержимое index.html нашего нового шаблона.

Обновим страницу нашего сайта и вуаля! Видим наш новый шаблон.

Но пока радоваться рано. Нам нужно в шаблоне изменить некоторые вещи, чтобы мы смогли отобразить там что-нибудь кроме имеющегося в нем контента.

Начнем с заголовка в теге <head>. Сейчас он выглядит так:

Copy Source | Copy HTML
  1.  
  2. <!-- This template was created by Mantis-a [http://www.mantisa.cz/]. For more templates visit Free website templates [http://www.mantisatemplates.com/]. -->
  3.  
  4.  
  5. <meta name="Description" content="..." />
  6. <meta name="Keywords" content="..." />
  7. <meta name="robots" content="all,follow" />
  8. <meta name="author" content="..." />
  9. <meta name="copyright" content="Mantis-a [http://www.mantisa.cz/]" />
  10.  
  11. <meta http-equiv="Content-Script-Type" content="text/javascript" />
  12.  
  13. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  14.  
  15. <!-- CSS -->
  16.  
  17. <link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection, tv" />
  18. <link rel="stylesheet" href="css/style-print.css" type="text/css" media="print" />
  19.  
  20. <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  21.  
  22. <title>My personal website | Homepage</title>

Заменим сесь этот текст на следующий:

Copy Source | Copy HTML
  1. <?=$this->headTitle(Z_Seo::getTitle())?>
  2.  
  3. <?=$this->headMeta()->appendHttpEquiv('Content-Type','text/html; charset=UTF-8')
  4.     ->appendName('keywords', Z_Seo::getKeywords())
  5.     ->appendName('description', Z_Seo::getDescription());?>
  6.  
  7. <?=$this->headLink()
  8.     ->headLink(array('rel' => 'shortcut icon', 'href' => '/favicon.ico'))
  9.     ->appendStylesheet( '/css/style.css' )?>
  10.  
  11. <?=$this->headScript()
  12.     ->appendFile('/js/jquery.js')
  13.     ->appendFile('/js/main.js')?>
  14.  

Далее заменим самую первую строчку (doctype) на такую: <?=$this->docType()?>

Теперь найдем тег <div class="box-in"> и все его содержимое заменим на строчку: <?php echo $this->layout()->content?>

Это позволит в контентной части сайта отображать нам нужную информацию.

Далее нам в шаблоне следует найти такую строку:

Copy Source | Copy HTML
  1. <div class="footer-info-left"><a href="/">My personal website</a>, 2008. All rights reserved.</div>

Заменим её на следующую строчку:

Copy Source | Copy HTML
  1. <div class="footer-info-left"><?php echo $this->z_Config('copy')?></div>

Это позволит нам редактировать копирайты на сайте через раздел "Настройки"

Теперь нам нужно позаботиться о выводе пунктов меню.

Для этого найдем в нашем шаблоне следующий код

Copy Source | Copy HTML
  1. <ul class="menu">
  2.     <li><a href="/" class="active">Home</a></li>
  3.     <li><a href="#">About me</a></li>
  4.     <li><a href="#">Portfolio</a></li>
  5.     <li class="last"><a href="#">Contact</a></li>
  6. </ul>

И заменим его на такой:

Copy Source | Copy HTML
  1. <?php echo $this->menu()?>

Теперь немножко подправим файл application/modules/default/views/scripts/menu.phtml, чтобы он выглядел следующим образом:

Copy Source | Copy HTML
  1.     <ul class="menu">
  2. <?php foreach ($this->items as $key=>$item):?>
  3.         <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>
  4. <?php endforeach;?>
  5.     </ul>

И на этом все. Мы заменили стандартный шаблон на свой. Добавили в новый шаблон код, который отображает заголовки, код для отображения контентной части сайта и код для вывода меню сайта.

В следующих уроках мы создадим несколько разделов для нашего сайта.

Содержание