"Как сделать свой сайт самому"
пособие для чайников
Как сделать шаблон с нуля для Joomla 2.5 и Joomla 3.0 Файл index.php. Урок 2
Файл 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 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> Следующие строки в заголовке содержат ссылки на основные CSS стили Joomla. <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.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 Заголовок закрывается </head> Далее тегом <body> открывается громадный блок оформления веб-страницы вместе с задним, он растягивается на всю ширину окна браузера. <body> Блок «page» содержит оформление только страницы сайта, именно она и будет шириной 950рх. <div id="page"> Блок "top" находится в самом верху страницы и содержит в себе два блока "logo " и "user1". <div id="top"> В боке «logo» мы разместим графический файл логотипа, это будет прописано в таблицах стилей. А вот автоматический вывод названия сайта прописываем в файле index.php, причем название помещаем в тег H1, что очень важно для поисковой оптимизации. <div id="logo"> Определим позицию «user1» в одноименном блоке для вывода модуля поиска по сайту. <div id="user1"> Вывод модуля горизонтального меню в блоке «user2» в позиции «user2». Блок будет сворачиваться, если в этой позиции не будет модуля. <?php if($this->countModules('user2')) : ?> Дальше идет блок шапки сайта «header». В нем мы определим позицию «header» для вывода модулей. Блок будет сворачиваться, если в этой позиции не будет модуля. Я намеренно расширила возможности этого блока, чтобы иметь возможность разместить в нем не только картинку шапки, но и ротаторы изображений. <?php if($this->countModules('header')) : ?> В блоке «user3» определим позицию «user3» для вывода модулей . Блок будет сворачиваться, если в этой позиции «user3» не будет выводится модуль. <?php if($this->countModules('user3')) : ?> Открывается блок левой колонки, которая будет сворачиваться, если в позиции «left» не будет ни одного модуля. <?php if($this->countModules('left')) : ?> Открывается самый важный блок контента, который может занимать 100% ширины страницы, 80% и 60%, в зависимости от количества включенных колонок. <div id="content<?php echo $contentwidth; ?>"> Вывод сообщений в компонентах <jdoc:include type="message" /> Вывод содержимого контента. <jdoc:include type="component" style="xhtml" /> Открывается блок правой колонки, которая будет сворачиваться, если в позиции «rigth» не будет ни одного модуля. <?php if($this->countModules('right')) : ?> Вывод блока «footer», предназначенного для вывода модуля «HTML код» с информацией об авторских правах. Можно также разместить здесь нижнее горизонтальное меню или модуль представления контента. Блок будет сворачиваться, если в этой позиции «footer» не будет выводится не один модуль <?php if($this->countModules('footer')) : ?> Закрываются блок страницы сайта «page», body и весь код. </div><!--конец блока page--> Мы создали полноценный файл 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, займемся этим на следующем уроке.
|
Как сделать шаблон с нуля для Joomla 2.5 и Joomla 3.0 Файл index.php. Урок 2
Комментарии
Если пользователь не активирован, то выводим модуль1
Если пользователь активирован, то выводим модуль 2
Заранее благодарю
/**/
А как на счет новых команд? Подключение Bootstrap в шаблон и т.д.?
Мне кажетсся, это очень актуально для Джумла 3
отлично! все получилось! Спасибо огромное!
Извините за возможно глупый вопрос!
" В css у Вас так же написано "#rigth". Это случайное совпадение или такой замысел. Ибо я правил css и исправил #rigth на #right. Что потом произошло с моим сознанием вы можете представить.
Вы как-то сказали, что работаете только в Dreamwear 8. У Вас крякнутая программа или лицензионная? Если первое, то подскажите адрес, где скачались.
На ознакомление с этой программой я потратил все 30 дней, теперь переустановка не помогает, требует ввести ключ. Ещё вопрос: как ввести в контент красную строчку?
А я настоятельно не рекомендую использовать Dreamviewer! Хотите узнать почему - гуглите! Если уж использовать IDE (среду разработки), то лучше PhpStorm от JetBrains. лучшего пока ничего нет. Если надо написать пару строк HTML или CSS, то Notepad++ или Sublime text 3. А если на последний еще установить плагины Emmet - то скорость разработки увеличится во много раз.
Тогда уж, coda 2, или textmate. Глюков меньше и разборок, как и что.
при установке шаблона на Joomla появляется предупреждение "JInstaller: :Install: Не найден установочный XML-файл Joomla". подскажите, как быть. готов прислать файл шаблона на электронную почту. или предоставить часть кода в комментариях.
заранее спасибо.
Надо:
слово 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="rigth" >
< jdoc:include type="modules" name="right" style="xhtml" / >
< ?php endif; ? >
большими буквами отразил то, что надо исправить(а именно слово 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; ? >
предлагаю исправить на
Macromedia Dreamweaver, то необходимо в верхнем меню выбрать пункт "Изменить" >
Ошибка:
Невозможно найти установочный пакет
Поменял в описании цифры на 3.6