FL.ru – фриланс сайт удаленной работы №1. Поиск удаленной работы, фрилансеры.

Создаем стандартный шаблон в Joomla

Категории: Joomla

Файл index.php

Что такое файл index.php? Это синтез (X)HTML и PHP, который назначает все требуемые атрибуты для визуализации составляющих страницы сайта. Сначала рассмотрим элемент, крайне важный для написания валидного шаблона — элемент DOCTYPE, который обычно находится вверху index.php. Этот отрывок кода виден во всех веб-страницах вашего веб-ресурса. На всех страницах шаблона мы увидим вот что:


1
2
< ?php // no direct access defined( '_JEXEC' ) or die( 'Restricted access' ); ?>
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Строка нужна из соображений безопасности. DOCTYPE страницы — параметр, при прочтении которого которого браузер будет знать, как визуализировать эту веб-страницу и как ее понимать в CSS. Вы можете прописывать разные DOCTYPE. Этот код сообщает браузеру, как понимать и представлять страницу. Разные браузеры применяли отличные друг от друга уровни поддержания CSS. Internet Explorer, например, не сможет понять команду «min-width», которая применяется для определения минимального размера ширины документа. Чтобы эффект продублировать, придется в CSS применять хаки.

Существует режим «quirks». Если DOCTYPE прописан неправильно или не указан вообще, браузер перейдет в режим «quirks». Это способ обеспечить обратную совместимость. К примеру, Internet Explorer 6 будет воспроизводить документ так, как в IE4.

Можно перейти к режиму «quirks» непреднамеренно. Это может произойти из-за:

  • Использования декларации DOCTYPE методом копирования прямо с сайта W3C, из-за чего окончание ссылки будет таким: DTD/xhtml1-strict.dtd, но это вид относительной ссылки на сервере W3C а нужно указать полный путь
  • Компания Microsoft создала IE6 таким образом, чтобы он отображал валидные документы в «quirks». Это должно происходить, если «xml declaration» прописывается до строки DOCTYPE.

Дальше, (после DOCTYPE) можно указывать такое выражение в XML:

1
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="< ?php echo $this->language; ?>" ></html>

Браузеру IE разъяснения по поводу «quirks» важны. Здесь, в нашей статье, мы будем разрабатывать шаблон IE6+, а это значит, что мы должны быть уверены его работе. При создании стандартных страниц трудоемкость верстки или применение непонятных тэгов маловероятно и необязательно. Мы просто разрабатываем код, который будет соответствовать DOCTYPE.

Что находится в index.php файле?

Мы будем при создании своей страницы использовать заголовок следующего вида:

1
2
3
4
5
6
7
8
9
10
11
12
< ?php // no direct access defined( '_JEXEC' ) or die( 'Restricted access' ); ?>
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="<?php echo $this->language; ?>"
lang="< ?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
</link></head></html>

О значимости DOCTYPE в файле index.php мы уже знаем.

1
< ?php echo $this->language; ?>

Этот фрагмент устанавливает язык из глобальных настроек.

Этот фрагмент будет включать вспомогательные данные заголовка:

1
<jdoc:include type="head" />

Это информация для заголовка, заданная в глобальных настройках конфигурации. Она состоит из следующих тэгов:

1
2
3
4
5
6
7
8
9
10
<title>Welcome to the Frontpage</title>  
<meta name="description" content="Joomla! - the dynamic portal engine and content management system" />  
<meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<meta name="robots" content="index, follow" />  
<meta name="keywords" content="joomla, Joomla" /> 
<link href="/component/content/?format=feed&amp;type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />  
<link href="/component/content/?format=feed&amp;type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />  
<script type="text/javascript" src="http://localhost/Joomla-1.5RC2/media/system/js/mootools.js"></script>
<script type="text/javascript" src="http://localhost/Joomla-1.5RC2/media/system/js/caption.js"></script>

Основная часть этих данных формируется, основываясь на данных текущей записи. Она состоит из мета-тэгов для favicon, адресов RSS-лент и файлов JavaScript. Последний код в заголовке включает в себя ссылки на файлы CSS:

1
2
3
<link rel="stylesheet" href="/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/templates/<?php echo $this->template ?>/css/template.css" type="text/css" /></link>

Два первых файла — general.css и system.css включают в себя некоторые из основных стилей. Файл в последней строке состоит из всех стилей шаблона и именуется template.css. Этот код:

1
< ?php echo $this->template ?>

возвращает имя шаблона. Такое прописывание делает код более функциональным. При создании нового шаблона можно скопировать этот код, не внося никаких корректировок. В названии может указываться произвольное количество файлов CSS. Этот отрывок кода находит таблицу стилей IE6:

1
2
3
4
<!--[if lte IE 6]>
<link href="/templates/<?php echo $this->template ?>/css/ieonly.css" rel="stylesheet" type="text/css" />
< ![endif]--> 
</link>

А этот пример раскрывает применение параметров шаблона:




1
<link rel="stylesheet" href="/templates/<?php echo $this->template ?>/css/< ?php echo $this->params->get('colorVariation'); ?>.css" type="text/css" /></link>

Написать шаблон для Joomla будет просто.

Все, что для этого нужно — выражения, добавляющие содержимое любых модулей в тело документа (mainbody):

1
2
3
4
5
6
7
8
<body>
< ?php echo $mainframe->getCfg('sitename');?><br />
<jdoc:include type="module" name="breadcrumbs" />
<jdoc:include type="modules" name="top" />
<jdoc:include type="modules" name="left" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="right" />
</body>

Шаблон сайта включает в себя такие элементы:

  • имя сайта
  • основной контент сайта
  • левые модули
  • верхний модуль
  • правые модули

Что нужно знать при создании шаблона

Шаблон выполняет функцию загрузки модулей и компонентов. Как распределить элементы и распорядиться дизайном сайта — это проблема уже не Joomla, а CSS. Мы же должны как можно ближе подойти к семантике страницы. Это обозначает, что страница должна правильно читаться браузером, роботом-поисковиком или устройством для чтения с экрана монитора. Если помещать модули в случайно определенных местах, то мы будем иметь полнейшую неразбериху. Важно то, то качество шаблона страницы зависит от его наполнения контентом. В нашем примере, как вы увидели, мы применили специфичные для Joomla команды:

1
2
3
4
5
6
< ?php echo $mainframe->getCfg('sitename');?><br />
<jdoc:include type="module" name="breadcrumbs" />
<jdoc:include type="modules" name="top" />
<jdoc:include type="modules" name="left" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="right" />

Функция «echo» визуализирует строку из конфигурационного файла configuration.php. В примере мы взяли имя сайта, но можно отразить и другие значения:

1
2
3
4
The name of this site is < ?php echo $mainframe->getCfg('sitename');?><br />
The administrator email is < ?php echo $mainframe->getCfg('mailfrom');?><br />
This template is in the < ?php echo $this->template?> directory<br />
The URL is < ?php echo JURI::base();?>

Функция «jdoc» прписывает типы вывода в XHTML компонентов и модулей. Показанная ниже строка прописывает вывод компонента.

1
<jdoc:include type="component" />

Приведенный ниже код прописывает вывод модулей, заданных для размещения в «right»:

1
<jdoc:include type="modules" name="right" />

А полный синтаксис будет выглядеть вот так:

1
<jdoc:include type="modules" name="LOCATION" style="OPTION" />

Шаблон, который мы создали в этой статье, включает в себя два файла — index.php и templateDetails.xml. Это просто голый шаблон, без CSS. Продолжение этой интересной темы читайте в следующей статье/




Подпишитесь на рассылку блога
max1net.com:
Уже подписались человек
Укажите свой e-mail