0 Пользователей и 1 Гость просматривают эту тему.
  • 6 Ответов
  • 27104 Просмотров
*

dynamit

  • Завсегдатай
  • 1744
  • 265 / 0
  • Winter Is Coming
« Последнее редактирование: 26.11.2014, 20:57:34 от ELLE »
ТАМ ГДЕ ТЫ НИЧЕГО НЕ МОЖЕШЬ, ТЫ НЕ ДОЛЖЕН НИЧЕГО ХОТЕТЬ
==========================================================
Сайты на Joomla!. Верстка. Консультации.  ||  Яндекс уже не ищет, он уже продает (с)  ||    Создание шаблона для Joomla 2.5
*

dynamit

  • Завсегдатай
  • 1744
  • 265 / 0
  • Winter Is Coming
component.php - файл используемый Joomla для вывода материала без оформления, таких, например, как страница печати. Особо мудрить тут незачем, но для верстки попадаются разные макеты.

index.php Ну и, основной файл шаблона. Создадим простенький макет (хедер, контент, правый сайдебар, футер) и разберемся как все описанное выше подключается и работает в нашем шаблоне.
[spoiler title=создаем файл шаблона]
Я не буду углубляться в подробности верстки, моя задача объяснить основы создания шаблона для CMS Joomla на основе уже созданного файла HTML, поэтому на онлайн-сервисе быстро генерируем макет.
Переименуем имеющийся файл index.html в index.php и поместим его в наш шаблон.
[spoiler title=чистый html]
Код
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
</head>
<body>
<div id="wrapper">
<div id="header">
<strong>Header:</strong> Верхний блок сайта
</div><!-- #header-->
<div id="middle">
<div id="container">
<div id="content">
<strong>Content:</strong> Блок для отображения контента сайта
</div><!-- #content-->
</div><!-- #container-->
<div class="sidebar" id="sideRight">
<strong>Right Sidebar:</strong> Правый блок
</div><!-- .sidebar#sideRight -->
</div><!-- #middle-->
</div><!-- #wrapper -->
<div id="footer">
<strong>Footer:</strong>  Подвал сайта.
</div><!-- #footer -->
</body>
</html>
[/spoiler]
Файл стилей обзываем template_l.css (для отображения сайта в светлых тонах), меняем цветовую схему на темную (template_d.css) и сохраняем оба файла в папку /SITEROOT/templates/test/css. Там же создадим пустой файл template_ie.css для подключения стилей для браузеров InternetExplorer старых версий (не к ночи будут помянуты).

Вносим необходимые изменения и получаем готовый файл шаблона:
[spoiler title=index.php]
Код
<?php
/**
 * @package Joomla.Site
 * @copyright Copyright (C) 2005 - 2012 Open Source Matters, Inc. All rights reserved.
 * @license GNU General Public License version 2 or later; see LICENSE.txt
 * Это блок комментариев и служебной информации
 */

defined('_JEXEC') or die;

$app = JFactory::getApplication();
$Itemid = JRequest::getInt( 'Itemid', 1, 'get' );
$home =  JURI::current() == JURI::base();
?>

<?php echo '<?'; ?>xml version="1.0" encoding="<?php echo $this->_charset ?>"?>
<!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" />

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

<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/template.js"></script>

<?php
if($this->countModules('test-right') == 0) $contentwidth = "1000";
if($this->countModules('test-right')!= 0) $contentwidth = "750";
?>

</head>
<body>

  <div id="wrapper">
<div id="header">
      <div class="logo">
              <?php if(!$home) : ?>
     <a href="<?php echo $this->baseurl ?>">
      <?php endif; ?>
      <img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/images/logo.png" alt="LOGO DESCRIPTION" />
           <?php if(!$home) : ?>
     </a>
      <?php endif; ?>
    </div>
         <span class="phone">
         <?php echo $this->params->get('phone'); ?>
         </span>
<strong>Header:</strong> Верхний блок сайта
    <div class="mainmemu">
    <jdoc:include type="modules" name="test-mainmenu" style="xhtml" />
    </div>
</div><!-- #header-->
<div id="middle">
<div id="container">
<div id="content" style="width:<?php echo $contentwidth; ?>px">
      <jdoc:include type="message" />
      <br />
<strong>Content:</strong> Блок для отображения контента сайта<br />
        <jdoc:include type="component" />
</div><!-- #content-->
</div><!-- #container-->
    <?php if($this->countModules('test-right')) : ?>
<div class="sidebar" id="sideRight">
<strong>Right Sidebar:</strong> Правый блок
      <jdoc:include type="modules" name="test-right" style="div" />
</div><!-- .sidebar#sideRight -->
    <?php endif; ?>
</div><!-- #middle-->
</div><!-- #wrapper -->
<div id="footer">
<strong>Footer:</strong>  Подвал сайта.
      <jdoc:include type="modules" name="test-footer" style="none" />
</div><!-- #footer -->

</body>
</html>
[/spoiler]
Как видно, наш файл это комбинация кода HTML и php. Код php отображается в файле в тегах <?php  ?>.
Структура шаблона осталась неизменной, мы добавили только правки необходимые для взаимодействия с системой Joomla. Программную и служебную информацию в начала файла до тега <head>, в сам <head> также внесли нужные правки и, наконец, оформили <body> для отображения элементов Joomla.

[spoiler title=СЛУЖЕБНАЯ И ПРОГРАММНАЯ ИНФОРМАЦИЯ]
Код php в самом начале файле крайне важен для корректного отображения шаблона.

В многострочном комментарии указана служебная информация, как лицензия, права владельца, версия и т.п.

defined('_JEXEC') or die; предотвращает доступ к сайту доступ к файлу не из среды Joomla. Это крайне важный параметр для безопасности сайта.

$app = JFactory::getApplication(); вызываем функцию для получения различных параметров Joomla. Что бы иметь представление об этих параметрах, полчим пока один, сделаем проверку на главную страницу и внесем полученные данные в произвольные переменные($Itemid и $home), которые в дальнешем сможем использовать в шаблоне
$Itemid = JRequest::getInt( 'Itemid', 1, 'get' ); - получаем id пункта меню открытой страницы.
[spoiler title=использование]
К примеру  мы переходим на страницу по пункту меню имеющего id=44. получив в шаблоне id меню, с помощью условия на php мы сможем вывести только на этой странице определенный блок:
Код
<?php if($Itemid == 44) : ?>
 <div class="example">Lorem ipsum</div>
<?php endif; ?>
или изменить его оформление
 
Код
<?php if($Itemid == 44) { ?>
 <div id="example" class="page44">Lorem ipsum</div>
<?php } else { ?>
 <div id="example" class="all_page">Lorem ipsum</div>
<?php } ?>
эту конструкцию можно сократить
Код
 <div id="example" class="<?php echo ($Itemid == 44)? 'page44' : 'all_page'; ?>">Lorem ipsum</div>

 В виде бонуса - проверка на несколько пунктов
Код
<?php
$ids = array("100", "200", "123", "1"); //перечисляем нужные id и собираем в массив
if (in_array($Itemid, $ids)) { //проверяем на совпадение
?>
<div class="example">Lorem ipsum</div> // показываем блок только для этих id
<?php } ?>
//исключение
if (!(in_array($Itemid, $ids)))
[/spoiler]
Более подробно об условиях в шаблоне можно прочитать в статье - Различные условия в шаблонах Joomla 1.5

$home =  JURI::current() == JURI::base(); - проверка на главную страницу.
[spoiler title=использование]
В нашем шаблоне мы используем проверку, что бы логотип в шапке сайте был ссылкой на главную страницу везде, кроме самой главной:
Код
<div class="logo">
              <?php if(!$home) : ?>
     <a href="<?php echo $this->baseurl ?>">
      <?php endif; ?>
      <img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/images/logo.png" alt="LOGO DESCRIPTION" />
           <?php if(!$home) : ?>
     </a>
      <?php endif; ?>
    </div>
if(!$home) - в данном виде это условие означает "не главная страница" и заключенный в него код будет отображен на всем сайте исключая Главную страницу.
[/spoiler]

Далее указываем кодировку сайта и у станавливаем тип документа через директиву !DOCTYPE. !DOCTYPE является важным элементом сайта. Он указывает браузеру как отображать страницы.
Советую хотя бы в общих чертах охватить эту тему (подробнее о !DOCTYPE)[/spoiler]

[spoiler title=HEAD]

<jdoc:include type="head" />  Подключаем <title>, мета-теги и скрипты расширений сгенерированные в системе. Метод jdoc:include мы будем еще неоднократно использовать в шаблоне.

файлы стилей. Стандартно файл стилей подключается следующей директивой
 
Код
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/MYSTYLE.css" type="text/css" />
<?php echo $this->baseurl ?> корень сайта
<?php echo $this->template ?> папка шаблона
но, у нас задумана смена цветового оформления, из админки шаблона.
Выше было сказано, что мы передаем параметры из админки (templateDetails.xml) в шаблон (index.php) атрибутом name. Напомню, что смену цветы мы передаем через значение name="tpl_color". В шаблоне эти параметры получаем так
Код
<?php echo $this->params->get('xxx'); ?>
где, ххх - значение атрибута name
и нам осталось подставить этот код в ссылку на файл стилей
Код
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/<?php echo $this->params->get('tpl_color'); ?>.css" type="text/css" />
еще одно использование параметров шаблона мы рассмотрим в body.

файлы стилей для IE  Для InternetExplorer подключаем файл используя условный комментарий
 
Код
 <!--[if lte IE 8]>
 <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/css/template_ie.css" type="text/css">
 <![endif]-->
стили увидит IE8 и более ранние версии.

файлы скриптов Файлы JavaScript подключаем аналогично файлам стилей
Код
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/template.js"></script>
[/spoiler]

[spoiler title=BODY]
Как мы уже заметили, структура сайта HTML не изменилась. Нам просто необходимо подключить в нужных местах шаблона вывод компонента определенный связанным пунктом меню, модули на своих позициях и значение параметра шаблона.

параметр шаблона
Код
<span class="phone">
         <?php echo $this->params->get('phone'); ?>
         </span>

системные сообщения
Код
<jdoc:include type="message" />

компонент
Код
<jdoc:include type="component" />

модули
для вывода модулей используется подключение
Код
<jdoc:include type="modules" name="test-mainmenu" style="xhtml" />
name это значение позиции модуля указанный в templateDetails.xml в тегах <position></position>.
style стиль макета модуля. Я вывел для примера три стиля
"xhtml" - макет с заголовком и стандартным оформлением
"none" - макет без оформления, без заголовка
"div" - макет определенный в файле /SITEROOT/templates/test/html/modules.php. В этом файле вы можете создать свое оформление для любого модуля и показать его в шаблоне указав нужный стиль.

счетчик модулей
инстркцией
Код
 <?php if($this->countModules('MODULENLAME')) : ?><?php endif; ?>
мы можем проверить существует ли модуль на определенной позиции и в случае его отсутствия не показывать определенные элементы сайта:
Код
    <?php if($this->countModules('test-right')) : ?>
<div class="sidebar" id="sideRight">
<strong>Right Sidebar:</strong> Правый блок
      <jdoc:include type="modules" name="test-right" style="div" />
</div><!-- .sidebar#sideRight -->
    <?php endif; ?>
если в позиции test-right нет опубликованных модулей, то блок <div class="sidebar" id="sideRight"></div> показан не будет. Но блоки имеют определенную ширину и контент не будет отображен на всю ширину сайта. Выходим из положения
в <head> вставляем следующую конструкцию
Код
<?php
if($this->countModules('test-right') == 0) $contentwidth = "1000";
if($this->countModules('test-right')!= 0) $contentwidth = "750";
?>
если в позиции test-right нет опубликованных модулей, то переменная $contentwidth принимает значение "1000", если есть "750".
осталось указать ширину блока контента. Добавим переменную в стиль для блока.
Код
<div id="content" style="width:<?php echo $contentwidth; ?>px">
теперь этот блок имеет ширину 1000px или 750px в зависимости от присутствия или остутствия модулей на позиции test-right соответственно.
[/spoiler]
[/spoiler]

И последнее.
4. УСТАНОВКА ШАБЛОНА
Есть два споба установки шаблона на сайт
первый
если папка шаблона создавалась в директории сайта /SITEROOT/templates/, то установить шаблон можно в "Менеджере расширений" на закладке "Поиск".
сначала нажмите кнопку "Поиск", система обнаружит расширение. в нашем случае шаблон test
[spoiler title=изображение]

[/spoiler]
нажимаем кнопку "Установить". Если все было сделано правильно шаблон будет установлен и готов к работе.
второй
Создадим архив *.zip и установим его через стандартный установщик Joomla!
« Последнее редактирование: 15.09.2013, 10:37:14 от dynamit »
ТАМ ГДЕ ТЫ НИЧЕГО НЕ МОЖЕШЬ, ТЫ НЕ ДОЛЖЕН НИЧЕГО ХОТЕТЬ
==========================================================
Сайты на Joomla!. Верстка. Консультации.  ||  Яндекс уже не ищет, он уже продает (с)  ||    Создание шаблона для Joomla 2.5
*

tiraz

  • Захожу иногда
  • 60
  • 1 / 0
  • Правильное тиражирование CD DVD
А как вывести в бэкэнд template_preview.png шаблона ?
*

Girmiona

  • Новичок
  • 3
  • 0 / 0
Доброго времени суток друзья помогите, пожалуйста как на стандартном шаблоне Joomla beez_20 сделать горизонтальным.................
*

Girmiona

  • Новичок
  • 3
  • 0 / 0
меню все время выходит вертикально
*

Girmiona

  • Новичок
  • 3
  • 0 / 0
и nav и .menu_gor li {display: inline;} пробовала не получается
*

AlinaBut

  • Новичок
  • 1
  • 0 / 0
У меня тоже раньше многое не получалось, но со временем у вас все получится. Опыт и знания приходят не сразу. Главное не бросать начатое, а продолжать работать над своим проектом.
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Изменение шаблона Joomla! 2.5.24

Автор SecondPC

Ответов: 0
Просмотров: 2529
Последний ответ 26.03.2021, 18:09:33
от SecondPC
Как в Joomla 3 отключить позицию вывода или убрать надпись?

Автор Алексей Лоскутов

Ответов: 2
Просмотров: 5900
Последний ответ 10.04.2020, 19:07:02
от Алексей Лоскутов
Добавляем rel="canonical" в шаблоны материалов Joomla 1.7 - 2.5

Автор AmdAveO

Ответов: 126
Просмотров: 79305
Последний ответ 28.05.2019, 18:41:25
от Клим
Проблемы в горизонтальном меню Joomla 2.5

Автор Димьяна

Ответов: 1
Просмотров: 2327
Последний ответ 27.11.2018, 14:58:30
от Ragivort
Ошибка при установке шаблона - Fatal error: Call to a member function setDebug() on a non-object in

Автор Mirotvoretz

Ответов: 33
Просмотров: 65679
Последний ответ 11.11.2018, 13:22:26
от vik38