Файл index.php. Урок 2

На прошлом уроке мы разобрались из каких блоков будет состоять шаблон trip, поэтому можно приступать к работе. Для начала создадим две папки:

images - эта папка будет содержать любые графические файлы, используемые для оформления шаблона. Т.к. у нас нет еще никаких дизайнерских наработок, то киньте в эту папку один любой графический файл, иначе Joomla не установит шаблон и будет выдавать ошибку в том случае если папка будет пустой.

ВНИМАНИЕ: В папке images шаблона не размещается графика контента!

css - эта папка будет содержать в себе файлы каскадных таблиц стилей. Для начала поместим в нее пустой файл template.css, с помощью которого будет осуществляется назначение различных стилей оформления элементам сайта.

Далее можно приступать к созданию самого главного файла index.php, который будет определять визуальное расположение элементов сайта и сообщать CMS Joomla в какой блок поместить различные компоненты и модули. Файл является комбинацией PHP и HTML.

Я всегда при написании кода использую только Macromedia Dreamweaver.  Отличная программа, настоятельно советую ее новичкам, т.к. если в процессе работы над кодом вы сделали ошибку, программа обязательно подсветит ваш косяк.

На сайте вы найдете самоучитель по Macromedia Dreamweaver . Если вы собираетесь заниматься разработкой сайтов, то программку эту стоит освоить, хотя бы на начальном уровне, чтобы редактировать коды шаблонов без ошибок.

Позиционирование элементов (блоков) страницы производится при помощи кода HTML, конкретно мы будем использовать теги DIV. Но так, как сайт наш будет работать на движке Joomla, т.е. он будет динамическим, то придется  использовать еще и язык PHP. С его помощью мы определим в каких блоках будут находится позиции для вывода модулей, и как эти позиции будут называться, будут ли сворачиваться блоки или нет. Подключим таблицы стилей из внешних файлов, язык контента, установим, как будет меняться размер сайта и пр.

index.php

Заголовок файла

Заголовок файла состоит из нескольких частей. Первая часть кода PHP заголовка предназначена для того, чтобы убедиться, что к файлу не обращаются напрямую, из соображений безопасности.

<?php
defined('_JEXEC') or die;
JHtml::_('behavior.framework', true);
$app = JFactory::getApplication();
?>
<?php echo '<?'; ?>xml version="1.0" encoding="<?php echo $this->_charset ?>"?>

DOCTYPE – это очень важный параметр, на основании которого браузер решает, как ему отображать эту страницу и как интерпретировать CSS.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Следующий фрагмент извлекает установленный язык из глобальной конфигурации.

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

Далее идет фрагмент кода, который включает дополнительную информацию для заголовка, которая задана в глобальной конфигурации. Эту информацию вы можете увидеть посмотрев исходный код любой веб-страницы. В частности – это мета-теги, о которых вы уже знаете.

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

 Следующие строки в заголовке содержат ссылки на основные CSS стили Joomla.

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

Чтобы задействовать стили оформления шаблона, делаем ссылку на файл, содержащий каскадные таблицы стилей template.css, который лежит в папке CSS . Не важно, что этот файл пока пустой, главное его подключить, оформлением займемся потом, когда инсталлируем шаблон на Joomla. Так будет проще наблюдать за результатом.

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />

Следующий фрагмент кода позволяет нам сворачивать левую или правую колонки, если в позициях «left» и « right» не расположено ни одного модуля. В случае если свернуты обе колонки, то контент занимает 100% ширины страницы. Если включена только одна колонка, то контент занимает 80%. При двух включенных колонках на контент приходится 60% ширины страницы.

<?php
if($this->countModules('left and right') == 0) $contentwidth = "100";
if($this->countModules('left or right') == 1) $contentwidth = "80";
if($this->countModules('left and right') == 1) $contentwidth = "60";
?>

Заголовок закрывается

</head>
    

Далее тегом <body> открывается громадный блок оформления веб-страницы вместе с задним, он растягивается на всю ширину окна браузера.

<body>
    

Блок «page» содержит оформление только страницы сайта, именно она и будет шириной 950рх.

<div id="page">

Блок "top" находится в самом верху страницы и содержит в себе два блока "logo " и "user1".

<div id="top">

В боке «logo» мы разместим графический файл логотипа, это будет прописано в таблицах стилей. А вот автоматический вывод названия сайта прописываем в файле index.php, причем название помещаем в тег H1, что очень важно для поисковой оптимизации.

<div id="logo">
<h1><?php echo $app->getCfg('sitename'); ?></h1>
</div>

Определим позицию «user1» в одноименном блоке для вывода модуля поиска по сайту.

<div id="user1">
<jdoc:include type="modules" name="user1" style="xhtml" />
</div>
</div><!-- конец блока top --> 

Вывод модуля горизонтального меню в блоке «user2» в позиции «user2». Блок будет сворачиваться, если в этой позиции не будет модуля.

<?php if($this->countModules('user2')) : ?>
    <div id="user2 ">
     <jdoc:include type="modules" name="user2" style="xhtml" />
     </div>
     <?php endif; ?>

Дальше идет блок шапки сайта «header». В нем мы определим позицию «header» для вывода модулей. Блок будет сворачиваться, если в этой позиции не будет модуля. Я намеренно расширила возможности этого блока, чтобы иметь возможность разместить в нем не только картинку шапки, но и ротаторы изображений.

<?php if($this->countModules('header')) : ?>
    <div id="header ">
     <jdoc:include type="modules" name="header" style="xhtml" />
     </div>
     <?php endif; ?>

В блоке «user3» определим позицию «user3» для вывода модулей . 

Блок будет сворачиваться, если в этой позиции «user3» не будет выводится модуль.

<?php if($this->countModules('user3')) : ?>
         <div id="user3">
        <jdoc:include type="modules" name="user3" style="xhtml" />
     </div>
     <?php endif; ?>

Открывается блок левой колонки, которая будет сворачиваться, если в позиции «left» не будет ни одного модуля.

<?php if($this->countModules('left')) : ?>
     <div id="left">
         <jdoc:include type="modules" name="left" style="xhtml" />
     </div>
     <?php endif; ?>

Открывается самый важный блок контента, который может занимать 100% ширины страницы, 80% и 60%, в зависимости от количества включенных колонок.

<div id="content<?php echo $contentwidth; ?>">

Вывод сообщений в компонентах

<jdoc:include type="message" /> 

Вывод содержимого контента.

<jdoc:include type="component" style="xhtml" />
    </div> <!--конец блока контента-->

Открывается блок правой колонки, которая будет сворачиваться, если в позиции «rigth» не будет ни одного модуля.

<?php if($this->countModules('right')) : ?>
<div id="rigth">
<jdoc:include type="modules" name="right" style="xhtml" />
</div>
<?php endif; ?>

Вывод блока «footer», предназначенного для вывода модуля «HTML код» с информацией об авторских правах. Можно также разместить здесь нижнее горизонтальное меню или модуль представления контента. Блок будет сворачиваться, если в этой позиции «footer» не будет выводится не один модуль

<?php if($this->countModules('footer')) : ?>
<div id="footer">
<jdoc:include type="modules" name="footer" style="xhtml" />
</div>
<?php endif; ?>

Закрываются блок страницы сайта «page», body и весь код.

</div><!--конец блока page-->
</body><!--конец блока body -->
</html><!--конец кода-->

Мы создали полноценный файл index.php. Теперь вы знаете, при помощи каких команд, и в какой последовательности выводятся блоки шаблона.

ВНИМАНИЕ: Для того, чтобы код шаблона читался из админпанели joomla, то файл index.php  необходимо открыть в редакторе AkelPad и сохранить в кодировке UTF-8, при этом снять галочку BOM.  Если вы использовали для работы с файлом программу   Macromedia Dreamweaver, то необходимо в вернем меню выбрать пункт "Изменить" > "Свойства страницы" и выбрать кодировку документа Юникод (utf-8), при этом снять галочку "включить сигнатуры юникода (ВОМ)". Однако настоятельно не советую вам редактировать код из админки Joomla, если, что-то накосячите - обратной дороги нет, в отличии от программы   Macromedia Dreamweaver, где всегда можно отменить сделанные изменения.

Само оформление блоков будет описано в template.css. Но настраивать таблицы стилей мы будем после инсталляции шаблона на Joomla 3 (joomla 2.5), а для этого необходимо создать файл templateDetails.xml, займемся этим на следующем уроке.

 

Комментарии 

 
# mrnobody 22.12.2012 19:59
А почему вы не используете новый доктайп?
Ответить | Ответить с цитатой | Цитировать
 
 
# mrnobody 22.12.2012 20:01
Ой извините, а то он мне пишет что "Для всеобщего взаимопонимания , убедительная просьба писать комментарии на правильном русском языке, без употребления сленга и жаргона." так я подумал что он не отправил сообщения, удалите пожалуйста лишние сообщения. :oops:
Ответить | Ответить с цитатой | Цитировать
 
 
# Administrator 25.12.2012 16:52
DOCTYPE объявляет тип документа,точне е какую именно версию (X)HTML вы используете в своей странице. Я использовала Cтрогий XHTML 1.0
Ответить | Ответить с цитатой | Цитировать
 
 
# Макс 07.05.2014 00:08
https://likbez-net.ru/razrabotka-shablona-sajta-dlya-joomla-30/156-fajl-indexphp-urok-2.html
Ответить | Ответить с цитатой | Цитировать
 
 
# Анатолий 31.01.2013 07:18
Здравствуйте. А подскажите, пожалуйста какая будет конструкция со следующим смыслом:
Если пользователь не активирован, то выводим модуль1
Если пользователь активирован, то выводим модуль 2
Заранее благодарю
Ответить | Ответить с цитатой | Цитировать
 
 
# Administrator 04.02.2013 18:29
Выведите два модуля в одну позицию, но в настройках модулей укажите разный уровень доступа "Общий" или "Участники"
Ответить | Ответить с цитатой | Цитировать
 
 
# Анатолий 04.02.2013 19:14
Да мне вот надо именно в коде прописать, там просто в зависимости от того зарегистрирован пользователь или нет разная обёртка у модуля (а модуль то как раз один и тот же). Извините, что сразу не точно спросил, но всё таки подскажите как на php такую конструкцию сделать.
Ответить | Ответить с цитатой | Цитировать
 
 
# Alex 11.09.2016 21:53
НУ так в чем пробелема? Сделак копию с другим доступом, как тебе сказали, а обертку через суфикс поменяй и все.
Ответить | Ответить с цитатой | Цитировать
 
 
# Denis 04.02.2013 01:13
Здравствуйте!!! А вот если использовать новый DOCTYPE тоесть то как измениться заголовок index.php. Иначе без новых тегов HTML 5 уже никуда.
Ответить | Ответить с цитатой | Цитировать
 
 
# Алл 09.02.2013 19:41
подскажите как объявить переменную app в файле htdocs/index.php on line 40 как мне обьяснили у меня поэтому поэтому нельзя вызвать объект-функции initialise()): заранее благодарен
Ответить | Ответить с цитатой | Цитировать
 
 
# RoIn 09.02.2013 21:58
Чтож вы ошибки делаете намерено:
Ответить | Ответить с цитатой | Цитировать
 
 
# Алл 10.02.2013 00:34
потому что не особо в этом разбираюсь а точнее видимо вообще не разбираюсь но ошибку намеренно я не делал более того не понимаю что это за ошибка потому как на денвере все нормально работает а вот на хосте уже проблема подобная вылезла. буду очень благодарен если поможете сайт делал на джумле 3
Ответить | Ответить с цитатой | Цитировать
 
 
# RoIn 10.02.2013 01:33
Алл , я не вам это. Сообщение не допечаталось. Ошибка в статье, в коде вывода контента указано-
/**/
Ответить | Ответить с цитатой | Цитировать
 
 
# Дмитрий 24.07.2013 13:00
Здравствуйте.

А как на счет новых команд? Подключение Bootstrap в шаблон и т.д.?

Мне кажетсся, это очень актуально для Джумла 3
Ответить | Ответить с цитатой | Цитировать
 
 
# Светлана 05.08.2013 16:53
Здравствуйте уважаемый администратор. подскажите как в Вашем шаблоне прописать позицию для вывода модуля, между правой и левой колонкой? (пыталась самостоятельно но блок контента не дает новой позиции встать на его место или ровно под ним). Заранее спасибо, очень жду ответа.
Ответить | Ответить с цитатой | Цитировать
 
 
# Administrator 05.08.2013 18:08
Пропишите вывод модуля внутри блока id "content" до или после вывода контента.
Ответить | Ответить с цитатой | Цитировать
 
 
# Светлана 05.08.2013 19:00
Цитирую Administrator:
Пропишите вывод модуля внутри блока id "content" до или после вывода контента.

отлично! все получилось! Спасибо огромное!
Ответить | Ответить с цитатой | Цитировать
 
 
# qwert 03.11.2013 23:38
А в sublime как сохранить в кодировке UTF-8?
Ответить | Ответить с цитатой | Цитировать
 
 
# zzamira 09.01.2014 17:14
Очень поучительная статья, спасибо. Было бы здорово, если в конец вы добавите код файла index.php полностью.
Ответить | Ответить с цитатой | Цитировать
 
 
# Алмас 16.01.2014 13:25
Скажите, только начал все изучать, поясните мне где создавать папку images и CSS и где мы создаем файл index.php
Извините за возможно глупый вопрос!
Ответить | Ответить с цитатой | Цитировать
 
 
# Azoiz 21.03.2014 09:42
Создай папку ... и в том папке создай images и templates. А вот index.php создашь в ... паке.
Ответить | Ответить с цитатой | Цитировать
 
 
# Юрий 25.06.2014 18:19
Обратите внимание на "..Открывается блок правой колонки, которая будет сворачиваться, если в позиции «rigth» не будет ни одного модуля.





" В css у Вас так же написано "#rigth". Это случайное совпадение или такой замысел. Ибо я правил css и исправил #rigth на #right. Что потом произошло с моим сознанием вы можете представить.
Ответить | Ответить с цитатой | Цитировать
 
 
# Михаил 01.07.2014 12:40
Чувак, огромное спасибо за подробное описание. Низкий поклон и уважуха.
Ответить | Ответить с цитатой | Цитировать
 
 
# Илья 06.08.2014 20:44
Спасибо за урок, познавательно, пытался сделать в одну строку User3 и header. не смог, установка ModulesAnyWhere . не поможет так как на ХОСТе PHP 5.2.. как сделать эти div-ы в одну строку? и как сделать (если такое возможно) один блок за другим но в строчке они должны стоять в одной. ???
Ответить | Ответить с цитатой | Цитировать
 
 
# Илья 06.08.2014 21:36
получилось поставить в одну строку user3 и добавленный блок user12 только в user12 стоит "аккордеон" картинок, и user3 не виден за картинками, как его вытащить вперед теперь? ну либо вообще другой вариант, как сделать чтобы друг на друга не наезжали,я проста в css в div добавил float. в обоих правый и левый.
Ответить | Ответить с цитатой | Цитировать
 
 
# Никита 18.08.2014 13:46
Вообщето Macromedia Dreamweaver называется Adobe Dreamweaver
Ответить | Ответить с цитатой | Цитировать
 
 
# Nickolaz 30.09.2014 11:04
Автор!
Вы как-то сказали, что работаете только в Dreamwear 8. У Вас крякнутая программа или лицензионная? Если первое, то подскажите адрес, где скачались.

На ознакомление с этой программой я потратил все 30 дней, теперь переустановка не помогает, требует ввести ключ. Ещё вопрос: как ввести в контент красную строчку?
Ответить | Ответить с цитатой | Цитировать
 
 
# Administrator 18.10.2014 18:17
Где качала не помню, прога крякнутая. Можете накопить денег и купить по чесноку.
Ответить | Ответить с цитатой | Цитировать
 
 
# Bugap 24.04.2015 10:42
Цитирую Nickolaz:
Автор!
Вы как-то сказали, что работаете только в Dreamwear 8. У Вас крякнутая программа или лицензионная? Если первое, то подскажите адрес, где скачались.

На ознакомление с этой программой я потратил все 30 дней, теперь переустановка не помогает, требует ввести ключ. Ещё вопрос: как ввести в контент красную строчку?

А я настоятельно не рекомендую использовать Dreamviewer! Хотите узнать почему - гуглите! Если уж использовать IDE (среду разработки), то лучше PhpStorm от JetBrains. лучшего пока ничего нет. Если надо написать пару строк HTML или CSS, то Notepad++ или Sublime text 3. А если на последний еще установить плагины Emmet - то скорость разработки увеличится во много раз.
Ответить | Ответить с цитатой | Цитировать
 
 
# Bugap 24.04.2015 10:45
Прошу прощения за ошибку: "Dreamweaver"
Ответить | Ответить с цитатой | Цитировать
 
 
# Wasya 13.06.2015 12:34
PhpED - оч. замечательный софт, по крайней мере, когда на него переехал с Дрима вздохнул с облегчением
Ответить | Ответить с цитатой | Цитировать
 
 
# Dmitry 03.04.2016 17:46
Цитирую Bugap:
Цитирую Nickolaz:
Автор!
Вы как-то сказали, что работаете только в Dreamwear 8. У Вас крякнутая программа или лицензионная? Если первое, то подскажите адрес, где скачались.

На ознакомление с этой программой я потратил все 30 дней, теперь переустановка не помогает, требует ввести ключ. Ещё вопрос: как ввести в контент красную строчку?

А я настоятельно не рекомендую использовать Dreamviewer! Хотите узнать почему - гуглите! Если уж использовать IDE (среду разработки), то лучше PhpStorm от JetBrains. лучшего пока ничего нет. Если надо написать пару строк HTML или CSS, то Notepad++ или Sublime text 3. А если на последний еще установить плагины Emmet - то скорость разработки увеличится во много раз.


Тогда уж, coda 2, или textmate. Глюков меньше и разборок, как и что.
Ответить | Ответить с цитатой | Цитировать
 
 
# Sky 05.11.2014 14:14
https://filetonet.com/AAB7822354dd46979c4e728d55ee5c66399 забирайте Nikolas,в архиве полный комплект
Ответить | Ответить с цитатой | Цитировать
 
 
# Serik 29.11.2014 03:43
Подскажите, а как спрятать центральный "контент 100%, если там ничего нет (к примеру на главной только модули, и ни-одного контента?
Ответить | Ответить с цитатой | Цитировать
 
 
# МихалычЫ 26.04.2015 15:16
Добрый день!
при установке шаблона на Joomla появляется предупреждение "JInstaller: :Install: Не найден установочный XML-файл Joomla". подскажите, как быть. готов прислать файл шаблона на электронную почту. или предоставить часть кода в комментариях.
заранее спасибо.
Ответить | Ответить с цитатой | Цитировать
 
 
# CodeMixer 30.04.2015 19:03
Ошибка в коде






Надо:






слово right не правильно написано
Ответить | Ответить с цитатой | Цитировать
 
 
# CodeMixer 30.04.2015 23:52
блин, не отобразилось, попробую добавить пробелы
по факту:
< ?php if($this->countModules('right')) : ? >
< div id="rigth" >
< jdoc:include type="modules" name="right" style="xhtml" / >
< /div >
< ?php endif; ? >
надо:
< ?php if($this->countModules('right')) : ? >
< div id="rigth" >
< jdoc:include type="modules" name="right" style="xhtml" / >

< ?php endif; ? >
Ответить | Ответить с цитатой | Цитировать
 
 
# CodeMixer 30.04.2015 23:55
тьфу, елки палки, если получится, удалите предыдущие комменты, они только запутают людей.
большими буквами отразил то, что надо исправить(а именно слово right:
по факту:
< ?php if($this->countModules('right')) : ? >
< div id="RIGTH" >
< jdoc:include type="modules" name="right" style="xhtml" / >
< /div >
< ?php endif; ? >
надо:
< ?php if($this->countModules('right')) : ? >
< div id="RIGHT" >
< jdoc:include type="modules" name="right" style="xhtml" / >

< ?php endif; ? >
Ответить | Ответить с цитатой | Цитировать
 
 
# Maksat 05.11.2015 14:22
А можно ли выложить файл для скачивания с готовой разметкой?
Ответить | Ответить с цитатой | Цитировать
 
 
# Uxmbl 27.12.2015 06:27
Macromedia Dreamweaver, то необходимо в вернем меню выбрать пункт "Изменить" >
предлагаю исправить на
Macromedia Dreamweaver, то необходимо в верхнем меню выбрать пункт "Изменить" >
Ответить | Ответить с цитатой | Цитировать
 
 
# Антон 07.05.2017 22:34
Почему то в джумле 3.6 пишет ,что

Ошибка:
Невозможно найти установочный пакет

Поменял в описании цифры на 3.6
Ответить | Ответить с цитатой | Цитировать