РЭДЛАЙН
Лучшие решения для Вас и Вашего бизнеса!
На нашем сайте вы можете получить информацию о веб-разработке, обслуживании и продвижении сайта. Интернет-маркетинге. SEO (поисковой оптимизации). Контекстной и медийной рекламе в Интернете. SMM. Регистрации доменов и хостинговых услугах. И современном дизайне сайтов. Вообщем того что касается веб-разработки, а также много другой полезной информации из мира интернета, бизнеса и интернет-технологий...
Создаем доступные и современные сайты, которые работают! Обслуживаем и эффективно продвигаем интернет-проекты с 2006 года!
Главная Web-мастеру Создание шаблона Joomla за 6 шагов. Шаг 1.


Создание шаблона Joomla за 6 шагов. Шаг 1.

Начнем создание шаблона для CMS Joomla 1.6.

Файлы, которые входят в шаблон

При конструировании собственного шаблона нужно скоординировано создать несколько папок и файлов, которые необходимы для его работы. Все файлы размещаются в директории с именем шаблона  в папке /templates/ в каталоге, в котором установлена Joomla.  Например, если у вас есть два шаблона, один из которых называется Element, а второй Voodoo, то их папки будут выглядеть  следующим образом:

/templates/Voodoo
/templates/Element

Обратите внимание на то, что имя папки и шаблона должны быть одинаковыми. Названия чувствительными к регистру символов (Voodoo и voodoo - разные имена) и в них не должно быть пробелов.

Для нашего шаблона мы будем использовать имя RusellerSimple. Соответственно его каталог будет выглядеть как /templates/RusellerSimple.

В состав шаблона обязательно должны входить два файла, templateDetails.xml и index.php:

/RusellerSimple/templateDetails.xml
/RusellerSimple/index.php

Данные файлы используются ядром Joomla.

Первый файл (templateDetails.xml) является описанием шаблона в XML формате. Он содержит метаданные, которые указывают Joomla имя автора, права использования, файлы и различные данные, необходимые для работы шаблона. Информация используется при установке шаблона в систему.

Второй файл (index.php) служит для генерации страниц.

Почти все шаблоны используют дополнительные файлы, хотя их наличие не является обязательным:

/RusellerSimple/template_thumbnail.png
/RusellerSimple/params.ini
/RusellerSimple/css/template.css
/RusellerSimple/images/logo.png

/RusellerSimple/template_thumbnail.png - снимок страницы шаблона (обычно уменьшается до размера 140х90 px), который после установки становится доступным для просмотра в "Менеджере шаблонов".

/RusellerSimple/params.ini - текстовый файл, который хранит значения различных параметров, используемых в шаблоне.

/RusellerSimple/css/template.css - файл стилей CSS шаблона. Расположение папки и имя файла можно изменять, однако его надо задать в файле index.php. В последующих уроках вы увидите, что очень выгодно иметь несколько файлов стилей.

/RusellerSimple/images/logo.png - изображение, которое используется в шаблоне. Обычно все картинки помещают в одну папку (в нашем примере - /images). Названия файла и папки могут быть какими угодно.

 

templateDetails.xml

Файл templateDetails.xml действует как декларация, которая описывает все файлы и папки, которые входят в состав шаблона. Также в него включается информация описательного характера - имя автора, права использования, дата создания и так далее. Некоторые данные выводятся в "Менеджере шаблонов". В нашем примере используется такой XML файл:

<?xml version="1.0" encoding="utf-8"?>
	<!DOCTYPE install PUBLIC "-//Joomla! 1.6//DTD template 1.0//RU"
	"http://www.joomla.org/xml/dtd/1.6/template-install.dtd">
	<install version="1.6" type="template">
<name>RusellerSimple</name>
<creationDate>09/07/11</creationDate>
<author>Сергей Фастунов</author>
<authorEmail>
 Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript
 </authorEmail>
<authorUrl>http://www.ruseller.com</authorUrl>
<copyright>Copyright (C) 2011 Евгений Попов</copyright>
<license>GPL</license>
<version>1.0.0</version>
<description>Первый шаблон серии уроков "Создание шаблонов для Joomla"</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>params.ini</filename>
<folder>images</folder>
<folder>css</folder>
</files>
<positions>
<position>breadcrumbs</position>
<position>left</position>
<position>right</position>
<position>top</position>
<position>footer</position>
<position>debug</position>
</positions>

<config>
<fields  name="params">
<fieldset  name="basic">
<field
name="colorVariation"
type="list"
default="blue"
label="Вариант цвета"
description="Основной цвет шаблона">
<option
value="blue">синий</option>
<option
value="red">красный</option>
</field>
</fieldset>
</fields>
</config>
</install>

Давайте посмотрим, какое значение имеют некоторые строки:

  • <install version="1.6" type="template"> - данная директива является командой для инсталлятора. Опции указывают, что устанавливается шаблон для Joomla версии 1.6.
  • <name>RusellerSimple</name> - определяет имя шаблона. Также оно используется для создания папки в каталоге шаблонов. Поэтому в нем должны содержаться только системные символы. Если вы создаете шаблон вручную, то имя его должно совпадать с именем папки шаблона в каталоге.
  • <creationDate>09/07/11</creationDate> - дата создания шаблона.
  • <author>Сергей Фастунов</author> - имя автора.
  • <authorEmail> Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript </authorEmail> - адрес email автора.
  • <authorUrl>http://www.ruseller.com</authorUrl> - адрес сайта автора.
  • <copyright>Copyright (C) 2011 Евгений Попов</copyright> - информация о владельце прав использования шаблона.
  • <license>GPL</license> - вид лицензии на шаблон.
  • <version>1.0.0</version> - номер версии.
  • <description>Первый шаблон серии уроков "Создание шаблонов для Joomla"</description> - описание шаблона.
  • <files></files> - в данном разделе перечисляются файлы, которые используются в шаблоне. Для описания файлов используются два вида тегов <filename> и <folder>:
    <filename>index.php</filename>
    <filename>templateDetails.xml</filename>
    <filename>params.ini</filename>
    <folder>images</folder>
    <folder>css</folder>
    Тег <filename>  обрамляет имя файла, а <folder> - имя папки.
  • <positions></positions> - данный раздел описывает все доступные положения в шаблоне. Имена положений должны совпадать с тем, что определяется в файле index.php.
  • <config></config> - в данном разделе описываются параметры, которые используются в шаблоне. Например, в примере приводится задание параметров для изменения цветовой схемы шаблона.

 

index.php

Файл index.php представляет собой комбинацию кода PHP и HTML, которые полностью задают представление данных в шаблоне.

Рассмотрим критическую часть файла для создания правильного шаблона: директиву !DOCTYPE, которая находится в верхней части.

<?php
	/**
* @copyrightCopyright (C) 2011 Евгений Попов
* @licenseGPL
*/
defined('_JEXEC') or die;
$app = JFactory::getApplication();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Самое первое выражение PHP просто выводит информацию об авторских правах  и лицензии, а также предотвращает непосредственный доступ к файлу.

Код $app = Jfactory::getApplication(); является вызовом функции, которая позволяет получить и использовать в шаблоне различные параметры Joomla (например, имя сайта).

Директива !DOCTYPE является фундаментальным компонентом веб страницы, которая указывает браузеру, как ее выводить. Она указывает, как браузер будет обрабатывать теги HTML и, что даже более важно, как будет интерпретироваться CSS (есть ли на странице устаревший код, содержится ли XML и так далее).

HTML существует в нескольких версиях, кроме того есть XHTML, который имеет несколько отличный синтаксис. Поэтому необходимо использовать директиву DOCTYPE, чтобы указать браузеру используемый стандарт.

Директива DOCTYPE должна быть расположена в первой строке, а путь к странице описания стандарта должен приводиться полностью. Например, браузер Internet Explorer 6 в случае ошибки распознавания стандарта переходит в режим обратной совместимости и начинает отображать страницу как Internet Explorer 4. 

Наш шаблон создается в расчете на использование в Internet Explorer 6 и далее. Поэтому очень важно соблюсти наличие директивы DOCTYPE в качестве первой строки генерированного HTML файла, чтобы в дальнейшем использовать как можно меньше ухищрений в коде.

За директивой DOCTYPE следует XML выражение:

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

И за ним следует секция head:

<head>
<jdoc:include type="head" />
<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" />
<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
</head>

Код <?php echo $this->language; ?> вытягивает из Joomla информацию об используемом на сайте языке и вставляет ее в код шаблона.

Код <jdoc:include type="head" /> вставляет в заголовок страницы развернутую информацию, которая устанавливается в настройках Joomla. Например, код заголовка страницы нашего шаблона будет выглядеть так:

<head> 
  <base href="http://joomla/index.php" /> 
  <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
  <meta name="robots" content="index, follow" /> 
  <meta name="keywords" content="" /> 
  <meta name="rights" content="" /> 
  <meta name="language" content="ru-RU" /> 
  <meta name="generator" content="Joomla! 1.6 - Open Source Content Management" /> 
  <title>Home</title> 
  <link href="/index.php?format=feed&amp;type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" /> 
  <link href="/index.php?format=feed&amp;type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" /> 
  <script src="/media/system/js/core.js" type="text/javascript"></script> 
  <script src="/media/system/js/mootools-core.js" type="text/javascript"></script> 
  <script src="/media/system/js/caption.js" type="text/javascript"></script> 
 
<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/RusellerSimple/css/template.css" type="text/css" /> 
</head>

Большая часть информации заголовка генерируется "на лету" и соответствует тому, какой материал выводится в текущий момент.

Последние строчки в разделе заголовка нашего шаблона предназначены для генерации ссылок на страницы стилей CSS:

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


Первые два файла, system.css и general.css, содержат общие стили для Joomla. А последний, является файлом стилей шаблона, который мы назвали template.css. Код <?php echo $this->template ?> возвращает путь к текущему шаблону. Такое использование позволяет сделать наш код более универсальным. При создании следующего шаблона можно будет просто скопировать туда строку и код будет работать правильно.

CSS шаблона может включать сколько угодно файлов. Например, для задания различных стилей для различных браузеров или для разных сред вывода информации (на экран, напечатать, на мобильные устройства). Например, следующий код определяет использование дополнительного файла CSS для Internet Explorer 6 (в нашем простом шаблоне мы его не используем):

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

А следуюший код является примером использования параметров шаблона. В "менеджере шаблонов" можно выбрать цветовую схему, а в соответствии с выбранным значением параметра будет загружаться соответствующий файл со стилями:

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

А код HTML будет выглядеть следующим образом:

<link rel="stylesheet" href="/templates/RusellerSimple/css/red.css" type="text/css" />

 

Раздел body страницы шаблона

Итак, раздел заголовка страницы шаблона готов. Теперь можно приступить к созданию непосредственно тела.

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

<body>
	<?php echo $app->getCfg('sitename');?><br />
	<jdoc:include type="modules"  name="top" />
	<jdoc:include type="modules"  name="left" />
	<jdoc:include type="modules"  name="breadcrumbs" />
	<jdoc:include type="component" />
	<jdoc:include type="modules"  name="right" />
	<jdoc:include type="modules"  name="footer" />
	<jdoc:include type="modules"  name="debug" />
</body>

Модули должны соответствовать тому, что было описано в templateDetails.xml. Если запустить наш шаблон, то сайт с тестовым наполнением будет выглядеть следующим образом:

В коде используются команды Joomla.

Код <?php echo $this->template ?> вставляет в код страницы информацию об имени сайта.

Выражение jdoc используется для вставки в код HTML модулей или компонентов.

Для вставки вывода информации компонента, который определяется связанным пунктом меню, используется код <jdoc:include type="component" />.

Для вставки модуля используется код <jdoc:include type="modules" name="right">. Данная строка генерирует код HTML всех модулей, которые размещены в позиции "right". Порядок следования модулей определяется в соответствии со значениями "Порядок", которое можно установить в "Менеджере модулей".

 

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

В Joomla версии 1.6 недостаточно просто скопировать файлы шаблона в папку /templates. Нужно еще и провести поиск и установку модуля. Выполняются данные операции в "Менеджере расширений" на закладке "Поиск".

Сначала нажимаем кнопку "Найти" (файлы шаблона уже должны быть скопированы в папку /templates). Когда Joomla завершит поиск, нужно выбрать найденный шаблон и нажать кнопку "Установить". После завершения установки можно переходиить к другим панелям для конфигурации системы с новым шаблоном.

 

Анонс

На следующем шаге мы подключим стили CSS к нашему шаблону.

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/WaN71ldE8oQ/lessons.php

Создание шаблона Joomla за 6 шагов. Шаг 1. | | 2012-06-19 12:07:06 | | Статьи Web-мастеру | | Начнем создание шаблона для CMS Joomla 1.6.Файлы, которые входят в шаблонПри конструировании собственного шаблона нужно скоординировано создать несколько папок и файлов, которые необходимы для его | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Дайджест новых статей по интернет-маркетингу на ваш email
Подписаться

Продающие сайты "под ключ"!

Наши сайты зарабытывают вам деньги. Landing-page. Эффективные продающие сайты точно в срок и под ключ! Всего от 14700 рублей
Подробнее...

Интернет-магазины и каталоги "под ключ"!

Эффективные и удобные инструменты торговли (электронной торговли) "под ключ". Продают, даже когда вы спите! Всего от 33800 рублей
Подробнее...

Комплексный интернет-маркетинг и продвижение сайтов

Максимальную эффективность дает не какой-то конкретный метод, а их комбинация. Комбинация таких методов и называется комплексным интернет-маркетингом. Всего от 8000 рублей в месяц
Подробнее...

Реклама в Yandex и Google

Контекстная реклама нацелена лишь на тех пользователей, которые непосредственно заинтересованы в рекламе Ваших услуг или товаров. Всего от 8000 рублей в месяц
Подробнее...

Social media marketing (SMM) — продвижение в социальных медиа

Реклама в Однокласcниках и на Mail.ru Создание, ведение и раскрутка групп и реклама ВКонтакте и Facebook. Всего от 8000 рублей в месяц
Подробнее...

Приглашаем к сотрудничеству рекламные агентства и веб-студии!

Внимание Акция! Приглашаем к сотрудничеству рекламные агентства и различные веб-студии России! Индивидуальные и взаимовыгодные условия сотрудничества.
Подробнее...

Ускоренная разработка любого сайта от 5 дней!

Внимание Акция! Ускоренная разработка любого сайта! Ваш сайт будет готов за 5-10 дней. Вы можете заказать разработку любого сайта "под ключ" за 5-10 рабочих дней, с доплатой всего 30% от его стоимости!
Подробнее...

Ждем новых друзей!

Внимание Акция! Ждем новых друзей! Скидка 10% на услуги по созданию и(или) обслуживанию вашего сайта при переходе к нам от другого разработчика.
Подробнее...

Приведи друга и получи скидку!

Внимание Акция! Приведи друга и получи скидку! Скидка 10% на услуги по созданию и(или) обслуживанию вашего сайта, если клиент заказавший наши услуги, пришел по Вашей рекомендации.
Подробнее...

1 2 3 4 5 6 7 8 9

Новые статьи и публикации



Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!

Качественное и объемное представление своего бизнеса в Сети требуется любой растущей коммерческой структуре, стремящейся увеличить продажи, именно по этой причине среди наших клиентов как крупные так и небольшие компании во многих городах России и ближнего зарубежья.
Как мы работаем

Заявка
Позвоните или оставьте заявку на сайте.


Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!


Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.


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


Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.

Остались еще вопросы? Просто позвоните и задайте их специалистам
с 2:30 до 11:30 по Мск, звонок бесплатный
Или напишите нам в WhatsApp
с 9:30 до 18:30 по Хабаровску
Или напишите нам в WhatsApp
Веб-студия и агентство комплексного интернет-маркетинга «РЭДЛАЙН» © 2006 - 2024

Профессиональная Веб-разработка. Создание сайтов и магазинов "под ключ" , а также по всей России и зарубежью. Продвижение и реклама. Веб-дизайн. Приложения. Сопровождение. Модернизация. Интеграции. Консалтинг. Продвижение и реклама. Комплексный Интернет-маркетинг.

Оставьте заявку / Задайте вопрос

Нажимая на кнопку ОТПРАВИТЬ, я даю согласие на обработку персональных данных
×

Заказать услугу

Нажимая на кнопку ОТПРАВИТЬ, я даю согласие на обработку персональных данных
×

Обратный звонок

Нажимая на кнопку ОТПРАВИТЬ, я даю согласие на обработку персональных данных
×

Подписка на дайджест новостей

Нажимая на кнопку ОТПРАВИТЬ, я даю согласие на обработку персональных данных
×

Заказать услуги со скидкой \ Бесплатная консультация







КАКИЕ УСЛУГИ ВАС ИНТЕРЕСУЮТ?

КАКИЕ ДОПОЛНИТЕЛЬНЫЕ УСЛУГИ ПОТРЕБУЮТСЯ?

Нажимая на кнопку ОТПРАВИТЬ, я даю согласие на обработку персональных данных
×

Высококачественные сайты по доступным ценамМы создаем практически любые сайты от продающих страниц до сложных, высоконагруженных и нестандартных веб приложений! Наши сайты это надежные маркетинговые инструменты для успеха Вашего бизнеса и увеличения вашей прибыли! Мы делаем красивые и максимально эффектные сайты по доступным ценам уже много лет!

Что нужно сделать, чтобы заказать создание сайта у нас?

Ну для начала вам нужно представлять (хотя бы в общих чертах), что вы хотите получить от сайта и возможно каким вы хотите его видеть. А дальше все просто. Позвоните нам или оставьте заявку нашим менеджерам, чтобы они связались с Вами, проконсультировали и помогли определиться с подходящим именно Вам сайтом по цене, сроку, дизайну или функционалу. Если вы все ещё не уверены, какой сайт вам нужен, просто обратитесь к нам! Мы вместе проанализируем вашу ситуацию и определим максимально эффективный для вас вариант.

Быстрый заказ \ Консультация

Для всех тарифных планов на создание и размещение сайтов включено:

Комплексная раскрутка сайтов и продвижение сайта Комплексный подход это не просто продвижение сайта, это целый комплекс мероприятий, который определяется целями и задачами поставленными перед сайтом и организацией, которая за этим стоит. Время однобоких методов в продвижении сайтов уже прошло, конкуренция слишком высока, чтобы была возможность расслабиться и получать \ удерживать клиентов из Интернета, просто сделав сайт и не занимаясь им...

Комплексная раскрутка работает в рамках стратегии развития вашего бизнеса в сети и направлена

Быстрый заказ \ Консультация

ЭФФЕКТИВНОЕ СОПРОВОЖДЕНИЕ (ПОДДЕРЖКА, ОБСЛУЖИВАНИЕ) САЙТОВ

Полный комплекс услуг по сопровождению сайтаМы оказываем полный комплекс услуг по сопровождению сайта: информационному и техническому обслуживанию и развитию Интернет сайтов.

Передав свой сайт для поддержки в руки наших специалистов, Вы избавитесь от проблем, связанных с обновлением информации и контролем за работой ресурса.

Наша компания осуществляет техническую и информационную поддержку уже имеющихся сайтов. В понятие «поддержка сайтов» также входят услуги администрирования сайтов, обновления сайтов и их модернизация.

Быстрый заказ \ Консультация

Редизайн сайта и Адаптивный веб дизайн

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

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

Адаптивный дизайн сайтов и веб-приложений

Все больше людей пользуются мобильными устройствами (телефонами, планшетами и прочими) для посещения Интернета, это не для кого уже не новость. Количество таких людей в процентном отношении будет только больше с каждым годом, потому что это удобно и по многим другим причинам.

На сегодняшний день адаптивный дизайн является стандартным подходом при разработке новых сайтов (или веб-приложений) и в идеале ваш сайт должен смотреться и функционировать так, как вы задумывали, на всём разнообразии устройств.

Быстрый заказ \ Консультация

Контекстная реклама в Яндекс и GoogleКонтекстная реклама - это эффективный инструмент в интернет маркетинге, целью которого является увеличение продаж. Главный плюс контекстной рекламы заключается в том, что она работает избирательно.

Реклама в поисковых системах Яндекс и Google. Профессиональная настройка рекламы и отслеживание эффективности!

Рекламные объявления показываются именно тем пользователям, которые ищут информацию о Ваших товарах или услугах, поэтому такая реклама не является навязчивой и раздражающей в отличие от других видов рекламы, с которыми мы сталкиваемся на телевидении или радио. Контекстная реклама нацелена лишь на тех пользователей, которые непосредственно заинтересованы в рекламе Ваших услуг или товаров.

Быстрый заказ \ Консультация

Скидка

1500 руб.
Заинтересовались услугами создания, обслуживания или продвижения вашей компании в Интернете?!
Получите 1500 руб.
за он-лайн заявку
Предложение ограничено.

После получения заявки с Вами свяжутся наши специалисты и уточнят все детали по интересующей вас услуге.
«Нажимая на кнопку "Получить скидку", я даю согласие на обработку персональных данных»
×
Получите 1500 рублей!
×
×