Урок 4. Как создать шаблон для Joomla 2.5: добавления позиций для модулей

joomla-lessons

В третьем уроке, мы научились устанавливать шаблон, разобрались в нескольких тонкостях и, я надеюсь, уловили, как приступать к созданию шаблонов Joomla.

Сегодня я постараюсь объяснить как сделать, чтобы модули и компоненты джумла отображались на сайте.

Лиричное отступление: Позиции модулей

В начале, разделим шаблон по следующей схеме:

позиции модулей в joomla

Картинка побольше.(кликните на картинку)

Пару слов к картинке:

Логотип и слоган – будут просто текстом. (Обычно это позиция, либо данная опция в настройках к шаблону – реализуем в дополнительных уроках, так как это посложнее).

Модули  будут выводиться в сайдбаре и меню, т.е. добавим 2 позиции.

Копирайт – просто текст (поняв, как добавляется позиции, вы с легкостью можете и здесь ее разместить).

В общем, логическое разделение нашего html шаблона:

Joomla модули

Данный процесс занимает 1-2 минуты и должен возникать у вас в голове при просмотре html шаблона и учитывается при составлении технического задания к сайту.

Добавление позиции модулей

Позиция модуля в joomla добавляется с помощью переменной:

<jdoc:include type="modules" name="left">

Где:

type=”modules – тип переменной, т.е. мы вставляем модуль;

name=”left – имя позиции. Можно придумать любое, но существуют перечень, которыми обычно называют определенную позицию.

Отлично, вставляем позиции, как мы нарисовали на картинке. Получается следующее:

Вместо меню:


<ul id="menu">
 <!-- put class="selected" in the li tag for the selected page - to highlight which page you're on -->
 <li class="selected"><a href="index.html">Home</a></li>
 <li><a href="examples.html">Examples</a></li>
 <li><a href="page.html">A Page</a></li>
 <li><a href="another_page.html">Another Page</a></li>
 <li><a href="contact.html">Contact Us</a></li>
</ul>

Используем:

<jdoc:include type="modules" name="topmenu" />

Вместо сайдбара:

Исходный код

<!-- insert your sidebar items here -->
 <h3>Latest News</h3>
 <h4>New Website Launched</h4>
 <h5>January 1st, 2010</h5>
 <p>2010 sees the redesign of our website. Take a look around and let us know what you think.<br /><a href="#">Read more</a></p>
 <h4>New Website Launched</h4>
 <h5>January 1st, 2010</h5>
 <p>2010 sees the redesign of our website. Take a look around and let us know what you think.<br /><a href="#">Read more</a></p>

 <h3>Useful Links</h3>
 <ul>
 <li><a href="#">link 1</a></li>
 <li><a href="#">link 2</a></li>
 <li><a href="#">link 3</a></li>
 <li><a href="#">link 4</a></li>
 </ul>

 <h3>Search</h3>
 <form method="post" action="#" id="search_form">
 <p>
 <input type="text" name="search_field" value="Enter keywords....." />
 <input name="search" type="image" style="border: 0; margin: 0 0 -9px 5px;" src="style/search.png" alt="Search" title="Search" />
 </p>
 </form>

Вставляем новую позицию (назовем right):

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

Что-то новое? Что за style=”xhtml” ? Читаем далее.

Стили вывода модулей Joomla

Как вы уже догадались style=”xhtml” – стиль модуля. Всего существует 5 основных стилей:

  • none – вывод содержимого модуля, без оформления и заголовка
  • table – вывод модуля в виде таблицы
  • horz – вывод модуля в теге <td> другой таблицы
  • xhtml – вывод модуля в теге “div” и заголовка модуля в теге “h3″
  • rounded – вывод модуля в 4-х “div”, в основном используется для вывода модуля с закругленными углами
  • outline – используется для отладочной информации

Интересное Подробнее о данных стилях модулей читайте в статье Стили вывода модулей.

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

Вывод содержимого сайта

В центральной части сайта нам необходимо выводить статьи/контент. Для данного вывода используется конструкция:

<jdoc:include type="component" />

Заменим ею центральную часть нашего шаблона:

Исходный код

<!-- insert the page content here -->
 <h1>Welcome to the colour_green template</h1>
 <p>This standards compliant, simple, fixed width website template is released as an 'open source' design (under a <a href="http://creativecommons.org/licenses/by/3.0">Creative Commons Attribution 3.0 Licence</a>), which means that you are free to download and use it for anything you want (including modifying and amending it). All I ask is that you leave the 'design from HTML5webtemplates.co.uk' link in the footer of the template, but other than that...</p>
 <p>This template is written entirely in <strong>HTML5</strong> and <strong>CSS</strong>, and can be validated using the links in the footer.</p>
 <p>You can view more free HTML5 web templates <a href="http://www.html5webtemplates.co.uk">here</a>.</p>
 <p>This template is a fully functional 5 page website, with an <a href="examples.html">examples</a> page that gives examples of all the styles available with this design.</p>

 <h2>Browser Compatibility</h2>
 <p>This template has been tested in the following browsers:</p>
 <ul>
 <li>Internet Explorer 8</li>
 <li>Internet Explorer 7</li>
 <li>FireFox 3.5</li>
 <li>Google Chrome 6</li>
 <li>Safari 4</li>
 </ul>

Над контентом обычно выводится ошибки о неудачной авторизации, системные сообщения, которые выводятся так:

<jdoc:include type="message" />

Добавьте ее до вывода текста в центральном блоке.

Вот и все, мы вывели все основные позиции. У нас получилось следующее:


<?php
/**
 * Template for Joomla by talgautb
 * @author talgautb
 * @copyright Copyright (c) 2012, www.gtalk.kz
 * @license GNU GPL
 */
defined('_JEXEC') or die('Restricted access');
?><!DOCTYPE HTML>
<html>
<head>
 <jdoc:include type="head" />
 <link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/style.css"/>
</head>

<body>
 <div id="main">
 <div id="header">
 <div id="logo">
 <div id="logo_text">
 <!--, allows you to change the colour of the text -->
 <h1><a href="index.html">colour<span class="logo_colour">green</span></a></h1>
 <h2>Simple. Contemporary. Website Template.</h2>
 </div>
 </div>
 <div id="menubar">
 <jdoc:include type="modules" name="topmenu" />
 </div>
 </div>

<div id="site_content">
 <div class="sidebar">
 <jdoc:include type="modules" name="right" style="xhtml" />
 </div>
 <div id="content">
 <jdoc:include type="component">
 </div>
 </div>
 <div id="content_footer"></div>
 <div id="footer">
 Copyright &copy; colour_green | <a href="http://validator.w3.org/check?uri=referer">HTML5</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> | <a href="http://www.html5webtemplates.co.uk">design from HTML5webtemplates.co.uk</a>
 </div>
 </div>
</body>
</html>

Теперь осталось подкорректировать файл templateDetails.xml. Так как у нас появилось 2 позиции. Добавим следующее:


<positions>
 <position>topmenu</position>
 <position>right</position>
</positions>

Сохраняйте все файлы и архивируйте.

Внимание! Не забудьте удалить прошлый шаблон, устанавливаемый во 2 уроке.

Установите наш шаблон и добавьте модуль в сайдбар. Для этого выберите необходимую позицию:

позиции модуля Joomla 2.5

Создайте меню и соответствующий модуль меню. Для модуля выберите позицию topmenu. Создайте пару материалов и взгляните, что они выводятся.

На красоту не обращайте внимание. Вывод меню будет некрасив =) Главное, что вы можете выводить информацию через модули в админке Joomla. В следующем и заключающем (из основных) мы наведем порядок.

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

Надеюсь, вам нравятся мои статьи. Если так, поделитесь с друзьями кнопками ниже. ;)

Следующий урок 5

с/у УтБ

Скачать шаблон [Download not found]
__

Профессиональный технадзор за строительством. Качество и цена выполненной работы.

На десерт сегодня видео: собака, встречающего своего хозяина из армиии

Комментарии к статье

  • #

    Установите наш шаблон и добавьте модуль в сайдбар. Для этого выберите необходимую позицию: поя сните новичку, не могу понять, что нужно открыть, чтобы добавить, спасибо!

  • #

    в этой строке jdoc:include type=”modules” name=”left”

  • #

    Забыли закрывающий тег “/>” в данной строке

    из-за этого у некоторых не выводятся модули

  • #

    доброго времени суток! вообщем вопрос заключается в следующем. создал я шаблон установил все работает, НО русского языка нет выводятся только кракозябры. подскажите как решить эту проблему?

    • #

      проблема с кодировкой, посмотрите как сохранили файлы. (используйте utf-8)

  • #

    Помогите! Редактирую шаблон вот так, вношу изменения – 0 реакции! Почему ничего не происходит?

    • #

      напишите комментарий на том сайте

  • #

    У меня не выводятся позиции модулей “right” и “topmenu”. Помогите,пожалуйста!!!

  • #

    Есть непонимание по модулям
    у вас

    27

    28


    а откуда подтягивается конкретно это самое содержимое модуля ?

    • #

      вижу, чо коменнт не коррекно отобразился
      имел ввиду, что в index.php мы будем иметь


      и вот вопрос, откуда будет подтягиваться непосредственно html код этого меню (модуля) ?

      • #

        Эмм, я код не увидел)
        поправил вывод кода) сорри

  • #

    У меня только выводится,хотя другие позиции прописаны в templateDetails

    • #

      выводится только содержимое контента=( а другие позиции в шаблоне не работают=(

  • #

    Огромное спасибо за толковые уроки! Бросил капризного Артистера и вашими лобзиками выпилил шаблон такой, как мне нужно! С нетерпением жду ссылку на Урок №5 :idea:

    • #

      спасибо) в конце статьи есть ссылка на 5 урок :)
      вот ссылка

  • #

    Отличный урок, спасибо =)

  • #

    Спасибо Вам… очень помогли!!!!

  • #

    как сделать что б модуль отображаются статье посередине, а не только справа ,слева ,верх, низ?

    • #

      добавьте:
      < div class="какой-нибудь">
      < jdoc:include type="modules" name="Название_модуля" style="xhtml" />
      < / div >

      где class Какой-нибудь – надо настроить отображение с помощью css;
      Название_модуля – любое на латинице, например, top1, йцуйцу2 (лучше, конечно, логично называть – left, right и т.д.)

  • #

    Когда продолжение?! :twisted:

    • #

      Когда продолжение Хоббита выйдет :)
      шучу ))
      уже есть, надо только опубликовать, подписывайтесь, чтобы не пропустить ;)

  • #

    Рахмет УтБ.
    Не бросайте свое дело ;-)

  • #

    Здравствуйте! Я сделал все как написано и нормально вышло, работает)))
    Скажите пожалуйста, а как можно модуль добавить на задний фон? То есть при прокрутке страницы он остается недвижим (обычно слева или справа). На многих сайтах есть такой модуль, но ответа не нашел.

    • #

      несколько вариантов, решаемых через css. не надо модули. Просто в body добавить background с фиксированной картинкой. Только лучше разрезать картинку, чтобы быстрее грузилась ;)

      • #

        Спасибо! А как вставить ссылку в этот фиксированный фон? К примеру на некоторых сайтах есть “поделиться”, или “связаться с нами”, ну что-то в этом роде. Т.е. при прокрутке строницы и ссылка оставалась, можно еще и кнопкой какой нибудь ее сделать.

        • #

          решается с помощью css:
          position:fixed;

  • #

    создал парочку пунктов меню и для них соответственно два материала. Почему-то материалы выводятся в сайдбаре справа. Как сделать, чтобы они выводились по центру?

    • #

      посмотрите внимательно, где-то не там зарыли теги. получается component оказался в сайдбаре

      • #

        ок, порою, может откопаю

  • #

    и когда же будет 5 урок?…жду с нетерпением

  • #

    я новичок в джумле, подскажите, а component это получается не модуль?(не могу понять разницу между модулями и компонентами(), почему не надо добавить в templateDetails.xml component

    • #

      компонент это мощное расширение для джумла, добавляет новый функционал и т.д. модуль – дополнение к компонентам по выводу информации и т.д. в общем, как то так))
      соответственно component выводит содержимое сайта (статьи) в цетральной части